pages method is not working in Mircosoft teams-js library

Question

pages method is not working in Mircosoft teams-js library

ShubhamAdmin 20

In teams-js library, when i call the pages method for multiple funtionalities like registerOnSaveHandler, getConfig, etc. I am getting error in testing - this call is only allowed in context [setting], current context [content].

I am not able to use the method in any pages in my project. I am using pages method in each page for different functionalities for the application on microsoft teams.

internalAPIs.ts:64 Uncaught (in promise)
Error: This call is only allowed in following contexts: ["settings"]. Current context: "content".
at Tt (internalAPIs.ts:64:1)
at r (pages.ts:545:1)
at e.registerOnSaveHandler (pages.ts:520:1)
at AbapTabConfig.tsx:320:1

Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T06:08:45.2166667+00:00

registerOnSaveHandler and getConfig methods are intended to be used in the settings context, but it seems they are being called in the content context.

Make sure that the Teams library is properly initialized before calling any methods. You can do this by calling microsoftTeams.initialize() at the beginning of your script.

Additionally, could you please provide any repro steps or sample code which you are using, so that we can investigate further from our end?

ShubhamAdmin 20

Hi @Prasad-MSFT ,

Here is the code with initialized properly as per documentation from teams-js -

  useEffect(() => {
    const sHostname = Util.getQueryVariable("hostname") || "";
    app.initialize().then(() => {
      app.getContext().then(() => {
        pages.config.registerOnSaveHandler(
          (saveEvent: pages.config.SaveEvent) => {
        let url = `${sHostname}/${generateUrl}`
        let tenantId = window.location.hostname;
        if (bSSO) {
          const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}/web/byDTeamsTab/abap/auth.html`;
          url += `&bydAuth=${encodeURIComponent(bydAuth)}`;
        } else {
          tenantId = tenantId.replace("-sso", "");
        }
        pages.config.setConfig({
          contentUrl: url,
          websiteUrl: url,
          suggestedDisplayName: tabName,
          removeUrl: `${sHostname}/byDTeamsTab/remove.html?theme={theme}`,
          entityId: tenantId,
        });
        // if (bMandatoryFieldFilled) {
        //   saveEvent.notifySuccess();
        // } else {
        //   saveEvent.notifyFailure();
        // }
        }
          );
      });
    });
  }, [bSSO, bMandatoryFieldFilled, tabName, generateUrl]);

Still after this issue is visible in ouput screen

Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T13:13:19.49+00:00

If you need to call methods in different contexts, make sure to handle the context switching appropriately. For example, you can use conditional statements to check the context and call the methods accordingly.

Ref: https://github.com/OfficeDev/microsoft-teams-library-js/issues/275#issuecomment-693740152
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T13:14:19.88+00:00

<duplicate>
ShubhamAdmin 20 Reputation points

2024-08-14T07:37:18.53+00:00

Hi @Prasad-MSFT ,

The reference is from 2020 and settings was working without any issue and after new version of library, settings is deprecated and being use as pages now.

How it can be used as settings context. any clear reference would work
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-14T14:03:44.57+00:00

Could you please confirm in which Teams/SDK version you are having this issue?
ShubhamAdmin 20 Reputation points

2024-08-20T09:10:59.48+00:00

Hi @Prasad-MSFT ,

Currently i am using library version "@microsoft/teams-js": "^2.23.0"
ShubhamAdmin 20 Reputation points

2024-08-26T04:12:12.1966667+00:00

Hi @Prasad-MSFT

Any suggestions for the new library issue. how it can be resolved
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-27T04:42:13.5533333+00:00

The registerOnSaveHandler API is meant to only be called in the tab configuration page as documented here:

https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/configuration-page?tabs=teamsjs-v2#configuration-page-for-tabs
ShubhamAdmin 20 Reputation points

2024-08-27T06:50:04.0233333+00:00

Hi @Prasad-MSFT
in my old project, It is being used in a page which consist UI and other features and it is working and as you can see in the code, multiple logics and function are called in the page then how it will be useful

ShubhamAdmin 20

Hi @Prasad-MSFT

we are using it in our old app in componentDidMount hook in our final page of the application which Use will save the configure as a Tab in the Teams

registerOnSaveHandler should handle this behavior

e.g. After user select the object page in the configuration popup page, user will click the save button then the registerOnSaveHandler will be triggerd and in this hook, we will setup a Tab in Teams for the user according the configuration.

const sHostname = this.getQueryVariable("hostname") || "";
      microsoftTeams.settings.registerOnSaveHandler(
        (saveEvent: microsoftTeams.settings.SaveEvent) => {
          // Calculate host dynamically to enable local debugging
          this.checkMandatoryFields();
          let url = `${sHostname}/byDTeamsTab/sso.html?byd=${encodeURIComponent(
            this.generateUrl()
          )}`;
          // restore tenantId for opening setting button
          let tenantId = window.location.hostname;
          if (this.state.bSSO) {
            const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}/web/byDTeamsTab/abap/auth.html`;
            url += `&bydAuth=${encodeURIComponent(bydAuth)}`;
          } else {
            tenantId = tenantId.replace("-sso", "");
          }
          microsoftTeams.settings.setSettings({
            // contentUrl: host + "/byDTeamsTab/?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}&iframe=" + encodeURIComponent(url),
            // websiteUrl: host + "/byDTeamsTab/?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}&iframe=" + encodeURIComponent(url),
            contentUrl: url,
            websiteUrl: url,
            suggestedDisplayName: this.state.tabName,
            removeUrl: `${sHostname}/byDTeamsTab/remove.html?theme={theme}`,
            entityId: tenantId,
          });
          if (this.state.bMandatoryFieldFilled) {
            saveEvent.notifySuccess();
          } else {
            saveEvent.notifyFailure();
          }
        }
      );

Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-27T13:21:46.2+00:00

We are not able to repro this. Could you please share a repro video depicting the behaviour so that we will get clear idea where exactly it is giving error?
ShubhamAdmin 20 Reputation points

2024-08-28T06:31:49.5166667+00:00

Hi @Prasad-MSFT ,

could you please share the email id where i can share the video because i am not able to share the video here
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-28T07:49:47.47+00:00

You can share it via microsoftteamsdev@microsoft.com
If you have any deployed app also, you can share that. Thanks!
ShubhamAdmin 20 Reputation points

2024-08-29T05:37:58.8366667+00:00

Hi @Prasad-MSFT ,

Thank you for the clarification of the API method.
One more help i need is that my with this admin account, i tried logging in 365 admin center and i am using this for teams toolkit but now i am not able to sign in anywhere.
is there any issue with microsoft contoso demo account.
ShubhamAdmin 20 Reputation points

2024-08-30T05:35:43.03+00:00

Hi @Prasad-MSFT ,

Configuration API is added on last page because of the functions and methods added to the page. So when application is launched and add to team is selected then the process does not proceed and gives a dialog popup - something went wrong

configuration page with registerOnSaveHandler should be used in first page or end page is also fine.
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-30T08:54:23.8933333+00:00

The registerOnSaveHandler should be used in the configuration page where you want to handle the save event. Ensure that the registerOnSaveHandler is correctly implemented in your configuration page.
Ref: https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/tab-channel-context/nodejs/src/components/tab-config.tsx#L21
ShubhamAdmin 20 Reputation points

2024-08-30T12:55:38.9166667+00:00

Hi @Prasad-MSFT

As shown in the video, the function is configured in code and when the process completed by user then in final page (shown in video) user selects the values and enters tab name and then user will click on save button and tab will be created. for the new app, when teams toolkit runs debug and popup window comes then selecting add to team provides channel names and when click on setting up tab then above error comes. user will have to complete the process of reaching to final page - enter tenant id and on next button > login with credentials > fill the fields of final page > click on save button to create tab.

ShubhamAdmin 20

Hi @Prasad-MSFT

below is the configuration tab code in manifest file and project is using hashRouter for routing.

  "configurableTabs": [
    {
      "configurationUrl": "https://${{TAB_ENDPOINT}}#/config",
      "canUpdateConfiguration": true,
      "scopes": ["team"]
    }
  ],

still the same error is there - something went wrong. tried with different configs but same result. the config page's configuration is correct. since it's the final page, so the should the config page be defined first or a seperate page should be there for config. In the defined code for config, there are multiple values which are coming from other functions. so some clearance would be useful.

modified the code of the project based on the url suggestion but issue is there for launching the page correctly.

useEffect(() => {
    const sHostname = Util.getQueryVariable("hostname") || "";
    app.initialize().then(() => {
      app.getContext().then(() => {
        pages.config.registerOnSaveHandler(
          (saveEvent: pages.config.SaveEvent) => {
            let url = `${sHostname}/${generateUrl}`;
            let tenantId = window.location.hostname;
            if (bSSO) {
              const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}index.html${encodeURIComponent("#auth")}`;
              url += `&bydAuth=${encodeURIComponent(bydAuth)}`;
            } else {
              tenantId = tenantId.replace("-sso", "");
            }
            pages.config.setConfig({
              contentUrl: url,
              websiteUrl: url,
              suggestedDisplayName: tabName,
              removeUrl: `${sHostname}${encodeURIComponent("#remove")}?theme={theme}`,
              entityId: tenantId,
            });
            if (bMandatoryFieldFilled) {
              saveEvent.notifySuccess();
            } else {
              saveEvent.notifyFailure();
            }
          }
        );
      });
    });
  }, [bSSO, bMandatoryFieldFilled, tabName, generateUrl]);

Accepted answer

0 additional answers

Your answer

Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T06:08:45.2166667+00:00

registerOnSaveHandler and getConfig methods are intended to be used in the settings context, but it seems they are being called in the content context.

Make sure that the Teams library is properly initialized before calling any methods. You can do this by calling microsoftTeams.initialize() at the beginning of your script.

Additionally, could you please provide any repro steps or sample code which you are using, so that we can investigate further from our end?
ShubhamAdmin 20 Reputation points

2024-08-13T06:20:22.13+00:00

Hi @Prasad-MSFT ,

Here is the code with initialized properly as per documentation from teams-js -

useEffect(() => { const sHostname = Util.getQueryVariable("hostname") || ""; app.initialize().then(() => { app.getContext().then(() => { pages.config.registerOnSaveHandler( (saveEvent: pages.config.SaveEvent) => { let url = `${sHostname}/${generateUrl}` let tenantId = window.location.hostname; if (bSSO) { const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}/web/byDTeamsTab/abap/auth.html`; url += `&bydAuth=${encodeURIComponent(bydAuth)}`; } else { tenantId = tenantId.replace("-sso", ""); } pages.config.setConfig({ contentUrl: url, websiteUrl: url, suggestedDisplayName: tabName, removeUrl: `${sHostname}/byDTeamsTab/remove.html?theme={theme}`, entityId: tenantId, }); // if (bMandatoryFieldFilled) { // saveEvent.notifySuccess(); // } else { // saveEvent.notifyFailure(); // } } ); }); }); }, [bSSO, bMandatoryFieldFilled, tabName, generateUrl]);

Still after this issue is visible in ouput screen
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T13:13:19.49+00:00

If you need to call methods in different contexts, make sure to handle the context switching appropriately. For example, you can use conditional statements to check the context and call the methods accordingly.

Ref: https://github.com/OfficeDev/microsoft-teams-library-js/issues/275#issuecomment-693740152
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-13T13:14:19.88+00:00

<duplicate>
ShubhamAdmin 20 Reputation points

2024-08-14T07:37:18.53+00:00

Hi @Prasad-MSFT ,

The reference is from 2020 and settings was working without any issue and after new version of library, settings is deprecated and being use as pages now.

How it can be used as settings context. any clear reference would work
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-14T14:03:44.57+00:00

Could you please confirm in which Teams/SDK version you are having this issue?
ShubhamAdmin 20 Reputation points

2024-08-20T09:10:59.48+00:00

Hi @Prasad-MSFT ,

Currently i am using library version "@microsoft/teams-js": "^2.23.0"
ShubhamAdmin 20 Reputation points

2024-08-26T04:12:12.1966667+00:00

Hi @Prasad-MSFT

Any suggestions for the new library issue. how it can be resolved
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-27T04:42:13.5533333+00:00

The registerOnSaveHandler API is meant to only be called in the tab configuration page as documented here:

https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/configuration-page?tabs=teamsjs-v2#configuration-page-for-tabs
ShubhamAdmin 20 Reputation points

2024-08-27T06:50:04.0233333+00:00

Hi @Prasad-MSFT
in my old project, It is being used in a page which consist UI and other features and it is working and as you can see in the code, multiple logics and function are called in the page then how it will be useful
ShubhamAdmin 20 Reputation points

2024-08-27T08:58:01.87+00:00

Hi @Prasad-MSFT

we are using it in our old app in componentDidMount hook in our final page of the application which Use will save the configure as a Tab in the Teams

registerOnSaveHandler should handle this behavior

e.g. After user select the object page in the configuration popup page, user will click the save button then the registerOnSaveHandler will be triggerd and in this hook, we will setup a Tab in Teams for the user according the configuration.

const sHostname = this.getQueryVariable("hostname") || ""; microsoftTeams.settings.registerOnSaveHandler( (saveEvent: microsoftTeams.settings.SaveEvent) => { // Calculate host dynamically to enable local debugging this.checkMandatoryFields(); let url = `${sHostname}/byDTeamsTab/sso.html?byd=${encodeURIComponent( this.generateUrl() )}`; // restore tenantId for opening setting button let tenantId = window.location.hostname; if (this.state.bSSO) { const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}/web/byDTeamsTab/abap/auth.html`; url += `&bydAuth=${encodeURIComponent(bydAuth)}`; } else { tenantId = tenantId.replace("-sso", ""); } microsoftTeams.settings.setSettings({ // contentUrl: host + "/byDTeamsTab/?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}&iframe=" + encodeURIComponent(url), // websiteUrl: host + "/byDTeamsTab/?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}&iframe=" + encodeURIComponent(url), contentUrl: url, websiteUrl: url, suggestedDisplayName: this.state.tabName, removeUrl: `${sHostname}/byDTeamsTab/remove.html?theme={theme}`, entityId: tenantId, }); if (this.state.bMandatoryFieldFilled) { saveEvent.notifySuccess(); } else { saveEvent.notifyFailure(); } } );
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-27T13:21:46.2+00:00

We are not able to repro this. Could you please share a repro video depicting the behaviour so that we will get clear idea where exactly it is giving error?
ShubhamAdmin 20 Reputation points

2024-08-28T06:31:49.5166667+00:00

Hi @Prasad-MSFT ,

could you please share the email id where i can share the video because i am not able to share the video here
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-28T07:49:47.47+00:00

You can share it via microsoftteamsdev@microsoft.com
If you have any deployed app also, you can share that. Thanks!
ShubhamAdmin 20 Reputation points

2024-08-29T05:37:58.8366667+00:00

Hi @Prasad-MSFT ,

Thank you for the clarification of the API method.
One more help i need is that my with this admin account, i tried logging in 365 admin center and i am using this for teams toolkit but now i am not able to sign in anywhere.
is there any issue with microsoft contoso demo account.
ShubhamAdmin 20 Reputation points

2024-08-30T05:35:43.03+00:00

Hi @Prasad-MSFT ,

Configuration API is added on last page because of the functions and methods added to the page. So when application is launched and add to team is selected then the process does not proceed and gives a dialog popup - something went wrong

configuration page with registerOnSaveHandler should be used in first page or end page is also fine.
Prasad-MSFT 8,981 Reputation points Microsoft External Staff Moderator

2024-08-30T08:54:23.8933333+00:00

The registerOnSaveHandler should be used in the configuration page where you want to handle the save event. Ensure that the registerOnSaveHandler is correctly implemented in your configuration page.
Ref: https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/tab-channel-context/nodejs/src/components/tab-config.tsx#L21
ShubhamAdmin 20 Reputation points

2024-08-30T12:55:38.9166667+00:00

Hi @Prasad-MSFT

As shown in the video, the function is configured in code and when the process completed by user then in final page (shown in video) user selects the values and enters tab name and then user will click on save button and tab will be created. for the new app, when teams toolkit runs debug and popup window comes then selecting add to team provides channel names and when click on setting up tab then above error comes. user will have to complete the process of reaching to final page - enter tenant id and on next button > login with credentials > fill the fields of final page > click on save button to create tab.
ShubhamAdmin 20 Reputation points

2024-09-02T04:35:07.15+00:00

Hi @Prasad-MSFT

below is the configuration tab code in manifest file and project is using hashRouter for routing.

"configurableTabs": [ { "configurationUrl": "https://${{TAB_ENDPOINT}}#/config", "canUpdateConfiguration": true, "scopes": ["team"] } ],

still the same error is there - something went wrong. tried with different configs but same result. the config page's configuration is correct. since it's the final page, so the should the config page be defined first or a seperate page should be there for config. In the defined code for config, there are multiple values which are coming from other functions. so some clearance would be useful.

modified the code of the project based on the url suggestion but issue is there for launching the page correctly.

useEffect(() => { const sHostname = Util.getQueryVariable("hostname") || ""; app.initialize().then(() => { app.getContext().then(() => { pages.config.registerOnSaveHandler( (saveEvent: pages.config.SaveEvent) => { let url = `${sHostname}/${generateUrl}`; let tenantId = window.location.hostname; if (bSSO) { const bydAuth = `${window.location.origin}/sap/ap/ui/${Util.ABAP_PATH}index.html${encodeURIComponent("#auth")}`; url += `&bydAuth=${encodeURIComponent(bydAuth)}`; } else { tenantId = tenantId.replace("-sso", ""); } pages.config.setConfig({ contentUrl: url, websiteUrl: url, suggestedDisplayName: tabName, removeUrl: `${sHostname}${encodeURIComponent("#remove")}?theme={theme}`, entityId: tenantId, }); if (bMandatoryFieldFilled) { saveEvent.notifySuccess(); } else { saveEvent.notifyFailure(); } } ); }); }); }, [bSSO, bMandatoryFieldFilled, tabName, generateUrl]);

Answer 1

Prasad-MSFT 8,981 Microsoft External Staff Moderator

MOD Administrator, the video you shared shows this code being loaded in a personal static tab:
User's image

The registerOnSaveHandler API has never worked there and it makes no sense to be used there because the registered handler is meant to be called when the user clicks on the "Save" button in the Teams UI. There is no Teams-rendered "Save" button for personal static tabs.

As already mentioned, the registerOnSaveHandler API is built to only work in the tab configuration flow:

User's image

It will not work anywhere else.

Share via

pages method is not working in Mircosoft teams-js library

0 additional answers

Your answer