I've got a problem with assigning my custom app to a team in MS Teams. So after uploading the app and trying to assign a new tab for it, I can't save the Tab.
Do you have any explanation for this? Already checked the validDomains and websiteURL.
Thanks!
It's important to know there are two kinds of tabs:
Personal tabs - if you want the user to have a personal tab experience, like where your app gets installed by a user directly, and appears in the App list on the left of the screen, then this is a "personal" tab.
Channel/Group Chat tabs - these are tabs that can be added to an existing channel or an existing group chat. For these kinds of tabs, when the user adds the tab, they have a small popup that appears that allows them to configure the tab itself. For instance, let's say your tab was going to show News - this configuration screen would let the user who's installing the tab to the channel/team be able to choose from a list of News sources they want to the tab to actually show. When you configure a tab like this in the manifest for your app, you're actually telling it the address for this "configuration" screen, which will set the actual final url for the tab itself.
Inside this small configuration popup, you need to tell Teams when the configuration you offered to the user is complete. For instance, if they have made a choice of which News feed they want, you would notify Teams that the configuration is finished, and that Teams can now "activate" the Save button. You can see more about this over here.
Of course, in many cases, the tab won't have any required configuration. In that case, you can immediately tell Teams to enable the Save button. A sample of this would be:
document.addEventListener("DOMContentLoaded", function (event) {
microsoftTeams.initialize();
microsoftTeams.getContext(function (context) {
microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
microsoftTeams.settings.setSettings({
entityId: "WhatEverUniqueNameYouWantForYourTab",
contentUrl: "https://ThePathToYourActualTab",
suggestedDisplayName: "WhateverYouWantTheTabToBeCalled",
websiteUrl: "https://OptionalAddressForIfTheyWantAFullScreenExperience",
removeUrl: "https://OptionalAddressForARemoveExperience",
});
saveEvent.notifySuccess();
});
microsoftTeams.settings.setValidityState(true);
});
});
So, to be clear, if you want to add a Tab app for a Channel or Group Chat, you basically need to have two pages in your solution - the main tab page, and a page that will appear in the popup you've shown in your original question.
Related
We're working on an app for Microsoft Teams where we need to make some tabs visible or not at runtime, depending on tenant and user permissions. So for example:
Some tabs should be visible to some tenants and not to others (depending on a service call to our API's).
Some tabs must be visible to Teams admins but not to normal users.
These are all personal tabs BTW. I can't find anything in the docs that would help in this regard. Seems the tabs are fixed by the manifest and will show the same for all users.
Can this be done? how? I might settle for any feasible workarounds.
As such there no direct way to do that .
However you can have ConfigureTabs and when you add that tab to a channel configure page, it will show up. You can then get the context and check what you want to do with that specific team (Maybe need to use Graph API to get more info with team Id).
This logic will run on the configuration page when the user selects to save. You can have a tab according to the logic.
microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
microsoftTeams.settings.setSettings({
websiteUrl: "https://your-website.com",
contentUrl: "https://your-website.com/red",
entityId: "redIconTab",
suggestedDisplayName: "MyNewTab"
})
saveEvent.notifySuccess()
})
This can't be done with multiple config tabs or with static tabs.
About showing tabs to some users, that is also not possible directly with the manifest.
However, you can use getContext and get the userObjectId, based on which we can show a page maybe saying "You don't have permission".
I have created custom application with static tabs defined in manifest file and it is working fine.
Now, our requirement is that we need to render static (personal) tabs dynamically according to provided Site URL by customer.
For ex. When application installed in teams user will get screen where he will asked for Site URL (API) in textbox and submit it. This will internally check data and give response with tab name, tab URLs and other details then I need to render this tabs dynamically in teams.
enter image description here
Please provide solution for this how I can achieve this ?
It is not possible to add static tabs dynamically. Static or personal tabs are always added through the app manifest and are common to all the users using the app. If you want to configure what tabs to show you can try using a channel tab.
As Gousia said, you can't set the contents of the tab dynamically, and you can't add/remove personal tabs programmatically, but what you could try is having your "tab" be just an iframe host, with width/height basically set to 100%, and then dymically loading the content of the iframe
I have a Phonecall hosted control opened inside unified service desk as one of the tab and i have a few grids on that page.
On click of any grid inside my phone call page the respective entity is displayed on the same page.
Like for example if I click on customer product grid entity then that grid is opened similarly, there are other grids on which the user can click and it will load that entity on the same tab.
Now, the issue is as i said earlier that my new entity is being loaded on the same hosted control that is my phone call page. I want to prevent this from happening.
I want to display a different tab for whatever record is clicked within my PhoneCall Hosted control so this way my Phone Call Page is still there.
I know i can do this using Windows Navigation Rule but I will have to create different navigation rules for my different entities and then in future if any other grid is added in my phone call page then i will need to add another navigation rule to cater it. This is not the best approach, I want it to be dynamic. Is there any other way where I can open a different tab if a record is clicked from my phonecall page?
Create a new windows navigation rule. The "From" field should be your Phone Call Page. Leave the Entity, From search, and URL fields in the "Route Logic" section blank. Windows Nav Rules get executed in order, and once they find a match it stops executing. So make the order low enough so that it gets executed where you want it to.
The "Target Tab" and "Show Tab" fields should be a new hosted control that you want the popup to open in. The action is "Route Window".
As far as route type, you are going to have to play with this a bit. I think opening stuff from a subgrid is Route Type "Popup", but you might need to create 2 very similar rules (one with route type "popup" and the other with route type "in place") to account for all scenarios.
See the example screenshot below:
I built a google gui web app that has basically two gui screens. The first gui screen has some text entry fields and when the user clicks 'submit' it should pull up the second gui screen displaying some results.
my second gui starts off the same as the first:
function displayForm2(hwEntered){
var app = UiApp.createApplication().setHeight('800').setWidth('600');;
var panel = app.createVerticalPanel();
...code and stuff...
app.add(panel);
return app;
}
How do I make it work as a web app?
You should build your 2 GUI in the same Ui instance but on 2 separate panels inside a single vertical panel. Then you just have to setVisible(true) one panel while you setVisible(false) the other one... you can do that either with client handler or server handler, a matter of choice but the client handler is faster and simpler if the button doesn't have other function.
The 'parent panel' (vertical or horizontal) will ensure that each panel will show up at the same place in your display.
You should easily find some explicit examples on this forum
I am trying to open a control panel in FANCYBOX.
I have a form in my page which its action and field names are same as another website and once user submit it they will redirect to their control panel in that website in a new window.
What I want is to open it in fancybox. I do not want to user leave my page, I just want them to access to that panel inside my website.
And also I want to all links of the opened frame target be _parent. I mean if they go to different parts of their panel it shows in the same fancybox not open a new window.
You might wanna look at iframe i.e. Add class='iframe' to a link check it on this page.