Forum Discussion
Unknown crossbar on Teams tab
Dear Sir
I'm developing Teams Tab app to upload our app on the MS Teams Store later.
Since a few days ago, I have been seeing a unknown crossbar on the Tap of Teams.
(Both Desktop Teams and Web Teams).
I can't find what the issue is.
I have attached the screen-cap below. It has a warning icon with orange color, with x icon at the right side.
Can you advise how I can't remove the crossbar ?
Many thanks
BH.
Dear Nivedipa
First of all, I'd like to know what the script tags you mentioned is .
In order to get the language of Teams, I'm using "~index.html?locale={app.locale}" in the "contentUrl" of manifest.json. And so far, it works well.
Actually, I used "app.initialize()" of Teams Client lib. to get the lang info.
However ,It took a lot of time for Client sdk lib to be initialized. And it made a sync problem to initialize our app. On the other hand, "~ ?locale={app.locale}" doesn't take almost.
1. If this is "script tag", do I have to initalize "app.initialize()" of the sdk lib before parsing "?locale={app.locale}" ?I tried to use "app.intialize()" in my code. And I found that the cross banner is disappeared.
2. we often use <script /> in "index.html". Is this the script tags you mentioned ?
That means that we have to use MS Client sdk when using "Static tab" ?Otherwise, can you let me know what the script tags is?
Many thanks
BH
Nivedipa-MSFTMicrosoft
byungheesohn - Thanks for reporting your issue. We have tested this and able to repro your issue.
Engineering team has confirmed that now it is mandatory to initialise SDK for static tabs as well. Within your content page, add a reference to Microsoft Teams JavaScript client library using script tags. After your page loads, make a call to app.initialize(), or else your page isn't displayed. we display a banner instead of hiding the app because we didn't want to prevent customers from using these apps.
But to remove the banner, the developer needs to ensure that the pages they are loading initialize teams-js as documented here:
https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/tab-requirements
Thanks,
Nivedipa
------------------------------------------------------------------------------------------
If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.
- Thanks for your quick response.
I'll wait for the new one.
Many thanks
BH- Nivedipa-MSFT
byungheesohn - Could you please share your feedback via Microsoft Teams Developer Feedback link?
Dear Nivedipa
First of all, I'd like to know what the script tags you mentioned is .
In order to get the language of Teams, I'm using "~index.html?locale={app.locale}" in the "contentUrl" of manifest.json. And so far, it works well.
Actually, I used "app.initialize()" of Teams Client lib. to get the lang info.
However ,It took a lot of time for Client sdk lib to be initialized. And it made a sync problem to initialize our app. On the other hand, "~ ?locale={app.locale}" doesn't take almost.
1. If this is "script tag", do I have to initalize "app.initialize()" of the sdk lib before parsing "?locale={app.locale}" ?I tried to use "app.intialize()" in my code. And I found that the cross banner is disappeared.
2. we often use <script /> in "index.html". Is this the script tags you mentioned ?
That means that we have to use MS Client sdk when using "Static tab" ?Otherwise, can you let me know what the script tags is?
Many thanks
BHCan you explain what the "script tags" is ?
- Nivedipa-MSFT
byungheesohn - You can use script tag like below:
<!-- Microsoft Teams JavaScript API (via CDN) --> <script src="https://res.cdn.office.net/teams-js/2.30.0/js/MicrosoftTeams.min.js" integrity="sha384-8I0Bv4bWDPSX5ZYhJcChnvrBNoieX3zASTxmZ9URwnjEVx70hsrN0ZUy/C46u8dw" crossorigin="anonymous" ></script> <!-- Microsoft Teams JavaScript API (via npm) --> <script src="node_modules/@microsoft/teams-js@2.30.0/dist/MicrosoftTeams.min.js"></script> <!-- Microsoft Teams JavaScript API (via local) --> <script src="MicrosoftTeams.min.js"></script>Ref Doc: Microsoft Teams SDK reference - Teams | Microsoft Learn
