I have a mean-stack site with angular-ui-router, now I want to code an Office add-in with a server and a part of its functionality, and interact with Office.
I have seen add-in commands, which permits of going to certain pages from ribbon buttons. But could anyone tell me what should be the best tool to implement navigation (as well as going back & forward) inside the task pane (like ui-view and ui-router for a web site).
For example, how should we implement the navbar and the navigation in the following taskpane?
Additionally, I have seen some add-ins can launch 2 taskpanes (by 2 ribbon buttons in the same group) at the same time. We can switch between 2 taskpanes, and we can also show them side by side at the same time.
Does anyone know how to achieve this?
For independent taskpanes, you can specify an unique TaskpaneId for each Action defined in your manifest. See the manifest Action documentation for details. Note that this isn't supported by Outlook.
The UX you're referencing is using two different types of control elements. In this case there are several Button controls and a Menu control (the drop-down).
All of the above are defined within your add-in's manifest file. For working examples of add-in commands there is an Office Add-in Commands Sample available on GitHub. There are several add-in samples included in this repo, each with their own manifest (for example, the Word manifest).
For routing/navigation it's good to use angular router, so that the application will behave as a single page application.
Regarding navigation through dialogue windows opened by ribbon buttons or interaction among them is not possible till now in my knowledge. Each button should call different modules.
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 :)
We are building an application using multiple single-page apps to keep things small, but run into a problem of building links between pages.
Let's say we have to pages equipment.html and maintenance.html
Both are independent SPA apps each with their own client side roting tables
Right now we have client side routing with page.js using #!
On the equipment page we place a link
Show Maintenance
Hovering over the link shows http://localhost/maintenance.html#!/show/350
but when we click on the links it goes to http://localhost/equipment.html#!/maintenance.html#!/show/350 which does not take us anywhere. Now, clicking second time on the link takes us to the right page.
Any way to solve this?
Thanks
I have the following requirement for my application (Android, iOS):
When the application launches it displays a login.html page (which is part of the application). After logging in, the application's webview should be occupied with home.jsp from an external domain. When user clicks on logout button in home.jsp it has to navigate back to login page . On click of logout when we usewindow.location.href="login.html" then it tries to find the page on xxx domain.
Is there a way to detect this navigation URL and override the URL from javascript or phonegap properties in the application?
When I inspect window.location.href in an android emulator I get file:///android_asset/www/index.html
But I think Nathans idea of moving it to the server is a good one. You could also have one on the device if you really need to. (PErhaps you should ask the person specifiying the app achitecture how they would do it :) )
The answer is going to vary depending on how you've implemented the mentioned WebView where home.jsp is being displayed in. You did not provide any code or any specific information so the answer is going to be the same - somewhat vague...
If you've opened a new WebView, then you can't control it from JavaScript. You'll need to control it via Java or Objective-C code (you did not mention which environment you're developing for...).
For example, if you'll look in the your-app\android\native\src\com\your-app\your-app.java file, you'll see how the native layer loads the application's index.html file after the Worklight JavaScript framework has been loaded.
Similarly, you could re-use this approach in your own application to close and re-load login.html.
If you're in fact doing the mentioned re-direct from the comments, meaning you're re-using the current webview but replacing its content with external content, then I think it is expected that you've lost the context of the application, and when looking for login.html - it doesn't find it... because you've moved from app-context to web-context. They do not know each other.
I think you should not do this re-direct. Instead, you need to open a new WebView using a Cordova plug-in, and in this new WebView to display your external content.
In this Overlayed WebView, you can detect any urls that are clicked on and if the sign-out URL was detected, then close the WebView.
You can see parts of this in action in the Integrating server-generated pages in hybrid applications tutorial and accompanying sample project.
In the sample project, you can see the functions provided (where you can add yours) in android\nativeResources\src\com\IncludeExternalPages\IncludeExternalPages.java.
I have a dillema of the way web widget apps should be implemented.
Scenario is that website A should present content of website B as a widget. Lets say that the widget content type is webshop, so all that a webshop can offer will be inside a widget. Items, cart, login, checkout, etc, but no redirection to other site. Window stays on Site A.
There is no interaction between websites. No data passed from one to another.
Technologies that will be used are .net Web API as server side, angular as js framework, and all will be implemented as single page app.
I see two scenarios.
Website B will be embeded in website A through iframe
All js, css, and initial html will be somehow embedded into website A and make calls to WebApi services.
I'm not clear how 2 should be done. Giving some bundles of JS, CSS, and HTML to Site A to implement is kind of overhead for both me and site A, and I see a lot of troubles there. Maybe it all should be injected dynamically somehow.
On the other side..iFrame...this seems like a right scenario for use of iframe, but is it?
Any thought is appreciated.
While the subject could sound like I'm looking to do something shifty, I'm not; I maintain an internal web site used by several hundred phone operators, and would like to add the following functionality:
I would like to add a control in the header of all of the web pages that would capture an image of the entire desktop and save the image as a file to a shared network drive to assist in troubleshooting production problems. This screen capture app would be called by JavaScript.
I've researched many threads on this site pertaining to capturing screenshots, and all of the offered applications don't meet my need in one of two ways:
The screen capture application has a GUI that pops up and the user sizes some sort of capture control or interacts with a window to do the capture. The users are not very computer literate, and could not be trusted with using a "pop-up" application correctly-- and it would be impossible to enforce them to save the image file with a common file naming convention. I would like the user to press a single UI control on a web site and have JavaScript make the calls to obtain a screen shot and save the image without any further user interaction.
Some automated applications save the HTML by re-posting to the site and "re-assembles" the individual HTML elements into an image. This will not work as the input data that the operator has typed in needs to be in the image, the site uses AJAX so the visual "state" of the web page will be different from one re-obtained from a POST, and some applications have had (active directory) security issues when trying to interact with our (secured) web sites.
If there isn't an application that will meet this need, I'll just roll my own control in C#. But I'd rather obtain a third-party control. so I don't have to support my own control for life. :-)
Javascript does not provide access to the local system for this functionality due to the security risk.
I believe the only way of doing this on a web page is possibly via an active X control or Java applet (similar to screencast-o-matic) but even then security may be an issue.
I also image unless your own c# control is in a windows forms application it would not work as c# controls that are part of a web site will be run on the server and not the client.
Hope this is of some help.
Well to do that you'll need something to interact with the desktop which can't be done by javascript alone.
You'll need to have an Active X Object to be able to interact with the client's machine. Once you have that, it is easy to just have the object take a picture and save it to the directory.
I believe I have the C# code to take a screen shot. If you want I'll post it.
Some alternatives to ActiveX / Java:
You can create a flash program to do the screen capture. I haven't done this and don't know the details, but I'm fairly sure it can be done.
You can setup a custom protocol for screen capture (eg. screencapture:// ), and in your header include a
Screen Capture
link. You'll need to find a gui-less screen capture program to do the actual capturing and set it up as the handler for that custom protocol.
Did it once. I couldn't find a direct way so did it rendering HTML to canvas, then canvas to image using html2canvas. Canvas to image is a much more common theme so you'll find many tutorials about.
HTML to Canvas
Canvas to image
NOTE: rendering from HTML to canvas may leave some elements behind, like SVG. But overall it did as much as expected.
PSR (problem step recorder) is a great tool for debugging purposes on client machines and it is available on all windows machines by default.
Try below and see if it works for you.
Go to Start->Run and type psr.exe (or just psr) this should open the recorder. This is fairly easy to use, so even users/clients can use it. If it works then try below steps to setup.
Step 1: Register PSR protocol. This tells the browser what to do when a link on the page is referring to PSR protocol (which we will use to open this recorder).
- Create registry values as below
HKEY_CLASSES_ROOT/
PSR/
(Default) "URL:PSR Protocol"
URL Protocol ""
shell/
open/
command/
(Default) psr.exe
If you are not comfortable with creating registry values, download and double click this file.
Use this link for more information.
Step 2: Now create an example html file to test launching PSR.
Save the below code to index.html file and open it.
<html>
<head>
<head>
</head>
<body>
Start Recording
</body>
</head>
</html>
Or download this file and open it.
This should open your PSR. It is easy to use and can record all the information you need for debugging.