I've got some issues with development and deployment of a sharepoint app. The App is going to be an App Part in a SharePoint site.
One issue is, that the app (provider hosted) is not high trusted, although I went through the msdn tutorial how to create a high trusted app (with certificate etc.) Everytime I deploy the app, I get the error: The specified application identifier is invalid or does not exist.
The second issue is, that the App uses JavaScript to manipulate the DOM. The problem is, that I can only manipulate the DOM of the App Part. But I want to manipulate the DOM of the SharePoint site itself, and all DOMs laying in it (all other Web or App Parts included in the Site).
Is this possible?
For example, in the App I want to manipulate the Menu of the SharePoint Site this way:
document.getElementById("zz15_RootAspMenu"). do something
This way I could add Menu-points. But I have no access to zz15_RootAspMenu because its in the outer DOM.
Could it be possible, that the solution to the first issue leads to the solution of the second?
The App is currently running on the SharePoint Machine on "localhost". (I'm working with a Remote Desktop so the App is running on the SharePoint Server but is called via localhost from there) If the App is deployed correctly, could it be that only then the App is imported correctly into the Site and then I can access it's DOM?
Related
I have a SharePoint site and added it to Teams as an app , and it works fine. I want to check on a specific page of this site if the page is now running from MS Teams or not .
Is it possible to do that with jQuery-JavaScript or is it applicable or not? .
Thank you in advance .
General Idea
Deploy an SPFx Webpart that is executed in the context of the User and the Sharepoint Page.
Use available React Packages to see in which Platform is the code executed.
If step 2. succeeds, we will have all the available information about the Platform that the user is using in order to document it (e.g. a serverless API, Application Insights or something else...)
Create the SPFx WebPart
I have made a github repo containing the package, which you can easily build and deploy and check out that the Browser information is displayed once the Sharepoint Page is visited by the User.
In order to support my Proof of Concept, I utilized a React Library called react-platform-js which is just a wrapper of the platform.js script and is available in most JS frameworks, so you should not find it difficult to use it with JQuery, for example.
Inserting the below parchment in the code:
<Platform>
{props => {
return (
<div>
OS: {Platform.OS},
OSVersion: {Platform.OSVersion},
Browser: {Platform.Browser},
BrowserVersion: {Platform.BrowserVersion},
Engine: {Platform.Engine}
</div>
)
}}
</Platform>
in the .tsx of the WebPart Component, as per the documentation and rendering the available information we can see that once I visit the page from a Browser we get the below image:
Where it can be seen that the Browser in use is
OS: Windows, OSVersion: 10, Browser: Chrome, BrowserVersion: 106.0.0.0, Engine: Blink
After adding the same Sharepoint Page to a Teams Tab in order for Users to access it easily, we get the Below image:
The message has switched to
OS: Windows, OSVersion: 10, Browser: Electron, BrowserVersion: 10.4.7, Engine: Blink
Which is correct, as it is documented on the MS Docs site.
The above scenario, basically, means that it is possible to access the Platform Engine Information where the Sharepoint Page is rendered.
Afterwards - What do we do now that we have the Data?
There are some alternatives as to what you wish to achieve. I will list some of my thoughts below.
The first and developer-y way to go, would be to create a custom Web API that is posted once the page is accessed with the information at hand, and afterwards, another automated procedure (Azure Function, for example) would be executed and would produce a report.
We could utilise the Application Insights Service that Azure is able to provide, in order to monitor the Sharepoint Page Usage, and since you can modify the script that it provides you could document the percentage of users that visit the site via Browsers and via Teams, with custom events. Please be careful and read the note on the page which urges us to use SPFx application customizer solution for modern pages
Final Thoughts
There are many ways to extend the Sharepoint Platform, but all depends on what resources you have. I listed some ways to perform some basic metrics reports, but unfortunately, I cannot know which path suits you :P
If I was looking at a Production-based scenario, I would create an SPFx Application Customizer in order to have it deployed via a more automated way and not have a WebPart added to all pages of a site, but that's also personal preferences :)
I would be nice if you share which solution you chose and ping if there is something I can help with :)
I have an Angular Application running over Electron that is already in production, however I've made an update that is not yet released that has a serious issue.
I use IndexedDB do store the application data, and as for now I've been loading the app internal website with
mainWindow.loadURL('file://' + __dirname + '/index.html#');
However I had to create a custom protocol with registerBufferProtocol for loading files and now I load them like this
mainWindow.loadURL('customprotocol://localhost/index.html#');
It seems that Electron thinks this is a different website, so instead of accessing the same localStorage and indexedDB instances it provides a new one.
I need to find a way to instantiate and load the main browser windows using my new protocol, but keeping the old app data accessible in the same way as before.
On the Developer Tools Window of the old version of my app shows the localStorage session belongs to file://
However in the new App Version I made it shows that the localStorage session belongs to the other "new" site which loads with my custom protocol fredata://localhost
On the App Data path, the folder of all the different website files are still present, I was wondering if a simple rename would suffice, but I don't think it is that simple.
If a user has installed my PhoneGap app is there any way to update the static files such as the HTML or CSS with out the need to re-deploy the app again?
For example, when updating a web app, the developer can make a change to a CSS file on the server, and on the next page refresh the style change will be visible to the user.
I'm assuming being able to do this is unlikely due to the app needing to be packaged up and installed on the device, but I'm looking for some verification.
You could change the app to import the file externally from a server (something like <link rel="https://linktofile.com/file.css">, which means you can change the app's style at any time without re-compiling the app.
Otherwise I am not aware of any other way.
#Stavros_S
delopying a website as is suggested by Praveen Kumar is NOT best practice for mobile Apps.
Recently, Google created a new means to do what you want. It is called an Expansion File. Read this:
https://iphonedevlog.wordpress.com/2014/12/12/adding-an-android-apk-expansion-file-to-a-cordova-project/
Our web application is built on AngularJS and Ruby on Rails. Sometimes we find a bug in the JS and need to patch it immediately. We push up an update to Heroku and the new JS files are then live. However, users on the site (who are currently on the site) and do not refresh their page, are still using the old JS file.
Is there a way to force refresh of the assets on deployment with Heroku? Or, is there a better way to handle this type of problem?
I am thinking of using web sockets to possibly handle the scenario.
WaveMaker is a powerful ajax based UI builder, but its JSON-RPC API standard is incompatible with our web service, which only has a RESTful API. As a result, we would like to design an UI without using any service using WaveMaker, and only extract part of its source code that runs on browser side (discarding all services)
Unfortunately, we can neither view or test the extracted code (all .html files show an empty page), a javascript reference in index.html is pointing to runtimeLoader.js, which we cannot find anywhere. So, is it possible to deploy the browser side code on a web container (not an application container like Tomcat) without runtimeLoader.js? If this is not possible, how do I change the source code so it can be tested without using WaveMaker?
If you don't mind having a java server in the mix, you could "import" REST calls to your API into the application. The XHR service (new in 6.5) targets JSON returning services. The 'Build-a-Service' does best with XML returning services. The browser would then call the WM java server, which in turn calls your REST services.
An easy way to get started with a WaveMaker client only app is to use the phonegap build option. This will build a zip file of a stand alone app. If you unzip that into say an apache served folder, you will render pages, etc. Note this build is targeted towards mobile devices via phonegap, so you will want to make adjustments if you are targeting desktop browsers.
Also, runtimeLoader.js can be found in the client runtime lib folder. e.g. /studio/lib/runtimeLoader.js of the installation.