search

OfficeDev / teams-toolkit

Developer tools for building Teams apps
Other
458 stars 188 forks source link

Show and hide Static Tabs using JavaScript #4316

Open grumpykiwi opened 2 years ago

grumpykiwi commented 2 years ago

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

    {
        "entityId": "status",
        "name": "Status",
        "contentUrl": "https://localhost:44302/status",
        "websiteUrl": "https://localhost:44302/status",
        "scopes": [
            "personal"
        ]
    }

In the resulting HTML I see the following for that tab


<li 
    ng-repeat="tab in mh.visibleTabs track by tab.id" 
    role="presentation" 
    dnd-draggable="tab" 
    dnd-disable-if="mh.isTabDisabledForDragDrop(tab)" 
    dnd-effect-allowed="move" 
    data-tid="chat-tab-Status" 
    id="status" 
    dnd-type="'tabType'" 
    ts-right-click="mh.showTabOptions($event, this, tab)" 
    ng-focus="mh.toggleTabInfoTooltip($event, tab, true)" 
    ng-blur="mh.toggleTabInfoTooltip($event, tab, false)" 
    simple-focusout="mh.toggleTabInfoTooltip($event, tab, false)" 
    ng-mouseover="mh.toggleTabInfoTooltip($event, tab, true)" 
    ng-mouseleave="mh.toggleTabInfoTooltip($event, tab, false)" 
    draggable="false">
    <div 
         ng-attr-title="{{mh.enableShowAppOnTabHover ? '' : mh.getTitleLabelForTab(tab)}}" 
         role="presentation" 
         class="btn-group app-tabs-list-item" 
         ng-class="{'app-tabs-selected': activePane === tab.id.toLowerCase()}" 
         title="Status">
        <a 
           class="btn btn-default right-click-enabled" 
           data-prevent-refocus="true" 
           simple-focus="::mh.setHighlight($event, tab)" 
           acc-role-dom="tab-list-item" 
           tabindex="-1" 
           aria-label="Status" 
           aria-posinset="2" 
           aria-setsize="4" 
           aria-selected="false" 
           ng-class="{ 'app-tabs-selected': activePane === tab.id.toLowerCase(), 'right-click-enabled': mh.isTabConfigurable(tab) || mh.isActionsEnabledTab(tab)}" 
           ng-click="mh.clickPane($event, this, tab)" 
           analytics-on="click" 
           analytics-event="tab_select" 
           data-tid="status" 
           data-title="Status" 
           aria-hidden="false" 
           draggable="true" 
           track-name="tab" 
           track-name-new="customTab" 
           track-type="6" 
           track-type-new="11" 
           track-summary="User clicking on a tab." 
           track-default="clickPane" 
           track-work-load="2" 
           track-sub-work-load="65" 
           track-tab-id="_status" 
           track-tab-id-new="_status" 
           track-tab-type="0a44a804-d74d-4f77-8892-9511dbcca347" 
           track-tab-type-new="0a44a804-d74d-4f77-8892-9511dbcca347" 
           track-tab-ordinal="2" 
           track-scenario="851" 
           track-panel-type="" 
           track-panel-type-new="" 
           track-app-id="0a44a804-d74d-4f77-8892-9511dbcca347" 
           track-capability-id="status" 
           track-app-name="custom" 
           track-app-scope="2" 
           track-app-scenario-capability="2" 
           track-data="{&quot;tabType&quot;:&quot;0a44a804-d74d-4f77-8892-9511dbcca347&quot;,&quot;directive&quot;:&quot;base-tab&quot;,&quot;definitionId&quot;:&quot;0a44a804-d74d-4f77-8892-9511dbcca347&quot;,&quot;appId&quot;:&quot;0a44a804-d74d-4f77-8892-9511dbcca347&quot;,&quot;newBadgeShown&quot;:false,&quot;leftRailDirective&quot;:&quot;custom&quot;}" 
           role="tab">
            <span class="tab-btn-container">
                <span class="tab-display-name" ng-bind="mh.decodeDisplayName(tab.displayName)">Status</span>
                <!----><!---->
            </span>
        </a>
        <!---->
    </div>
</li>```

In the LI tag I see data-tid="chat-tab-Status" id="status" which should allow me to get a reference to the element using 
const element = document.querySelector("[data-tid='chat-tab-Status']");

but it always returns undefined.

Any ideas

Windows 10 21H2 Build 19044
Visual Studio Pro 2022 Preview 2
Teams Toolkit 0.2.11.64152
ghost commented 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.

sffamily commented 2 years ago

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.

grumpykiwi commented 2 years ago

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

adashen commented 2 years ago

@Niranjan-S Do we have support of the tab events in client sdk? For example user click the tab event?

Niranjan-S commented 2 years ago

@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,

AndrewCraswell commented 2 years ago

^ 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.

grumpykiwi commented 2 years ago

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: @.**@.>>

AndrewCraswell commented 2 years ago

@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

image

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.

grumpykiwi commented 2 years ago

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: @.***>