Open grumpykiwi opened 2 years ago
Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.
Hi @grumpykiwi , thank you for your question. So far the static tab is defined by Teams app schema, https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema, and rendered by Teams client, instead of a full web browser. so I don't have idea whether your scenario is supported (dynamic render or show/hide a particular static tab), since the manifest is considered a static file and no current support to dynamically change/update it and have it rendered on the fly.
But your request sounds interesting and we will have some internal discussion with platform team to see whether it could be a future support.
Another thing I would like to be able to do is respond to an event when a user clicks on a tab. This would allow me for example to save the current state of a tab and restore it when the user returns. For example a user is halfway thru entering their timesheet, clciks on another tab and comes back. If OnInitializedAsync or OnAfterPreRender fires, that data may be lost.
It may be possible to prevent firing those events but I have not figured out how you would be able to detect for the unsaved data
@Niranjan-S Do we have support of the tab events in client sdk? For example user click the tab event?
@grumpykiwi Keep only one tab with full screen mode, isFullScreen (https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#sample-full-manifest)
And then render tabs in your own page with custom logic,
^ The method that @Niranjan-S mentioned seems to be what I see a lot of Microsoft apps using. Of a small handful of apps I opened, I noticed that if the app required multiple pages, they mostly hide the default Teams header (using isFullScreen
mode), and render their own header with links controlled by a client-side routing engine. This prevents the entire app reloading when clicking any Teams-controlled static tab link, since Teams does not support tab links that integrate with client-side routers.
Interesting. I have not been able to get isFullScreen mode to work in local testing. Is there a trick to make this work?
Thanks
Mark Nash Senior Software Engineer [cid:PC_42x23_fbb4e57e-65d2-4c41-b09e-ffa9f4a3c468.png]
PartnerComm, Inc. Winner of 76 IABC Gold Quills 2021 Large Agency of the Year 2304 W Interstate 20, Suite 250 Arlington, TX 76017 [cid:pcomm25+_471933a4-f842-490b-84d4-910cf0397a29.png]
Office: (817) 465-9277 @.*** www.partnercomm.nethttp://www.partnercomm.net
This e-mail transmission may contain confidential information or may be otherwise legally privileged. If you are not the intended recipient you are hereby notified that any use, disclosure, copying, forwarding, or distribution of any of the information contained in or attached to this message is STRICTLY PROHIBITED.
From: Andrew Craswell @.> Sent: Monday, April 18, 2022 9:12 PM To: OfficeDev/TeamsFx @.> Cc: Mark Nash @.>; Mention @.> Subject: Re: [OfficeDev/TeamsFx] Show and hide Static Tabs using JavaScript (Issue #4316)
[EXTERNAL SENDER]
^ The method that @Niranjan-Shttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FNiranjan-S&data=04%7C01%7Cmnash%40partnercomm.net%7C7688a2e8362e4eff3a2a08da21a9efe3%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637859311027488387%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=77t8IBVRNQ1c6j7jkd%2B68yFk4wjwY8XqV9XqmuRVOWQ%3D&reserved=0 mentioned seems to be what I see a lot of Microsoft apps using. Of a small handful of apps I opened, I noticed that if the app required multiple pages, they mostly hide the default Teams header (using isFullScreen mode), and render their own header with links controlled by a client-side routing engine. This prevents the entire app reloading when clicking any Teams-controlled static tab link, since Teams does not support tab links that integrate with client-side routers.
- Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2FTeamsFx%2Fissues%2F4316%23issuecomment-1101922833&data=04%7C01%7Cmnash%40partnercomm.net%7C7688a2e8362e4eff3a2a08da21a9efe3%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637859311027488387%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=jzLSRe8CthCbZYJde5AMxDFxMTAg1ISSDLwiAqPGZX8%3D&reserved=0, or unsubscribehttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKOLVX3ONFJXXSDDWARNPLLVFYI5TANCNFSM5RCDVZMQ&data=04%7C01%7Cmnash%40partnercomm.net%7C7688a2e8362e4eff3a2a08da21a9efe3%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637859311027488387%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=brp0H6cevbiC06dwT%2BMWwWgARvxojM02WeNAP%2FF39gk%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.**@.>>
@grumpykiwi As far as I know, it won't work in local testing. The manifest schema docs briefly mention this, although I have no idea the "why" behind it. https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema
I hope there is a better way to handle client side routing in Teams apps in the future. The way the Teams tabs operate now, it completely defeats the purpose of SPA apps.
That explains a lot. Thanks. Seems like a lot of time and work just to test that feature
Mark Nash Senior Software Engineer [cid:PC_42x23_fbb4e57e-65d2-4c41-b09e-ffa9f4a3c468.png]
PartnerComm, Inc. Winner of 76 IABC Gold Quills 2021 Large Agency of the Year 2304 W Interstate 20, Suite 250 Arlington, TX 76017 [cid:pcomm25+_471933a4-f842-490b-84d4-910cf0397a29.png]
Office: (817) 465-9277 @.*** www.partnercomm.nethttp://www.partnercomm.net
This e-mail transmission may contain confidential information or may be otherwise legally privileged. If you are not the intended recipient you are hereby notified that any use, disclosure, copying, forwarding, or distribution of any of the information contained in or attached to this message is STRICTLY PROHIBITED.
From: Andrew Craswell @.> Sent: Thursday, April 21, 2022 11:53:01 PM To: OfficeDev/TeamsFx @.> Cc: Mark Nash @.>; Mention @.> Subject: Re: [OfficeDev/TeamsFx] Show and hide Static Tabs using JavaScript (Issue #4316)
[EXTERNAL SENDER]
@grumpykiwihttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgrumpykiwi&data=05%7C01%7Cmnash%40partnercomm.net%7Ce8d3ce5737014fbcdf2008da241bfb16%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637861999853658641%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=%2Frce%2B7fYwOhb0exH3bxuGY8qYMT3OZ95b1IWUuVx%2Fns%3D&reserved=0 As far as I know, it won't work in local testing. The manifest schema docs briefly mention this. https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schemahttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fresources%2Fschema%2Fmanifest-schema&data=05%7C01%7Cmnash%40partnercomm.net%7Ce8d3ce5737014fbcdf2008da241bfb16%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637861999853814893%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=OdCvmqOqLSlE%2B8ykScvXexzTL1%2FIwpHLZqGaXr7IH0A%3D&reserved=0
[https://user-images.githubusercontent.com/1908292/164605629-9462bf17-5761-472a-bd74-058d655b4863.png]https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F1908292%2F164605629-9462bf17-5761-472a-bd74-058d655b4863.png&data=05%7C01%7Cmnash%40partnercomm.net%7Ce8d3ce5737014fbcdf2008da241bfb16%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637861999853814893%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=kP082q7OPJwHswUfiB65GiKPDkf5a1x2r3zFz0aQKXw%3D&reserved=0
— Reply to this email directly, view it on GitHubhttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2FTeamsFx%2Fissues%2F4316%23issuecomment-1106004763&data=05%7C01%7Cmnash%40partnercomm.net%7Ce8d3ce5737014fbcdf2008da241bfb16%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637861999853814893%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=HfCrZ7zrHZ%2Br5WPLSkoMWBFTEtoYnVyyg4%2BWCNwhjjk%3D&reserved=0, or unsubscribehttps://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKOLVXZLJ7KKEJVCM6E23E3VGIWC3ANCNFSM5RCDVZMQ&data=05%7C01%7Cmnash%40partnercomm.net%7Ce8d3ce5737014fbcdf2008da241bfb16%7Cf2b31dc21677463d8cf12150d7ff1100%7C0%7C0%7C637861999853814893%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=jzabd7nbMnlzqX0bY6BwafSLf0FeseBLGS1OOdReTDM%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>
Describe the bug I have multiple static tabs defined in my teams app. I want to be able hide one or more of them depending on a business rule, using JavaScript when the page loads. How do I achieve that
Specifically I am having trouble selecting the element in JS so I can apply display = "none" to it.
manifest.json
In the resulting HTML I see the following for that tab