Forum Discussion

ChaitanyaSai370's avatar
ChaitanyaSai370
Copper Contributor
Jul 22, 2024
Solved

Save button disabled when trying to add a custom app from a meeting extension

Hi Everyone,  I need help with custom apps. I am trying to add a custom app to an in-progress meeting from the add apps button on the meeting ribbon, I was able to see my custom app when I hit the b...
microsoft teams
  • huzefamehidpurwala's avatar
    huzefamehidpurwala
    Jul 23, 2024

    Good to know my last response worked for you, ChaitanyaSai370.

     

    add this code too in the useEffect.

     

    pages.config.registerOnSaveHandler((saveEvent) => {
  const baseUrl = `https://${window.location.hostname}:${window.location.port}`;
  pages.config
    .setConfig({
      entityId: "pageId",
      contentUrl: baseUrl + "/index.html#/tab",
      websiteUrl: baseUrl + "/index.html#/tab",
      suggestedDisplayName: "DisplayName",
    })
    .then(() => {
      saveEvent.notifySuccess();
    });
  saveEvent.notifySuccess();
});

     


    then too if same error shows up try changing "canUpdateConfiguration" value to false in the manifest file.

    Hope this works.

    Please like my responses and mark them as solution to the question.

huzefamehidpurwala's avatar
huzefamehidpurwala
Copper Contributor
Jul 23, 2024

Hello ChaitanyaSai370 ,

 

Hope you must have created a route for the config tab in the manifest of the app.


check the code for that config page that it enables the save button by passing Boolean value 'true' after all settings configured.

import { pages } from "@microsoft/teams-js";

useEffect(() => {
    app.initialize().then(() => {
      /**
       * After verifying that the settings for your tab are correctly
       * filled in by the user you need to set the state of the dialog
       * to be valid.  This will enable the save button in the configuration
       * dialog.
       */
      pages.config.setValidityState(true);

      // Hide the loading indicator.
      app.notifySuccess();
    });
  }, []);

 

ChaitanyaSai370's avatar
ChaitanyaSai370
Copper Contributor
Jul 23, 2024

Hi huzefamehidpurwala,

 

Thank you so much for your reply. The "Save" button is now clickable. But I get an error when I try clicking it.

 

I am trying to do this from the teams toolkit. Could you let me know where can we check the logs for this?

 

I am also sharing my manifest file and the configuration tab html file to see if that helps.

 

manifest:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.13/MicrosoftTeams.schema.json",
  "manifestVersion": "1.13",
  "version": "1.0.0",
  "id": "${{TEAMS_APP_ID}}",
  "packageName": "com.microsoft.teams.meetingstranscription",
  "developer": {
    "name": "Microsoft",
    "websiteUrl": "https://www.microsoft.com",
    "privacyUrl": "https://www.microsoft.com/privacy",
    "termsOfUseUrl": "https://www.microsoft.com/termsofuse"
  },
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "name": {
    "short": "Test",
    "full": "Test Bot"
  },
  "description": {
    "short": "Bot to show the transcript of the meeting using Microsoft Graph API.",
    "full": "This is a sample application which demonstrates how to get Transcript using Graph API and show it in the task module."
  },
  "accentColor": "#235EA5",
  "bots": [
    {
      "botId": "${{AAD_APP_CLIENT_ID}}",
      "scopes": ["groupchat"],
      "isNotificationOnly": false
    }
  ],
  "validDomains": ["<<domain-name>>", "${{BOT_DOMAIN}}"],
  "permissions": ["messageTeamMembers"],
  "webApplicationInfo": {
    "id": "${{AAD_APP_CLIENT_ID}}",
    "resource": "https://RscPermission"
  },
  "configurableTabs": [
    {
      "configurationUrl": "{config_url}",
      "canUpdateConfiguration": true,
      "scopes": ["team", "groupchat"],
      "context": ["channelTab", "privateChatTab", "meetingChatTab", "meetingDetailsTab", "meetingSidePanel"]
    }
  ],
  "authorization": {
    "permissions": {
      "resourceSpecific": [
        {
          "name": "OnlineMeeting.ReadBasic.Chat",
          "type": "Application"
        }
      ]
    }
  }
}

HTML page config file:
function App() {
  useEffect(() => {
    app.initialize().then(() => {
      /**
       * After verifying that the settings for your tab are correctly
       * filled in by the user you need to set the state of the dialog
       * to be valid.  This will enable the save button in the configuration
       * dialog.
       */
      pages.config.setValidityState(true);
 
      // Hide the loading indicator.
      app.notifySuccess();
    });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} alt="logo" />
        <p>
        This is a sample application which demonstrates how to get Transcript using Graph API and show it in the task module.
        </p>
      </header>
    </div>
  );
}

 

 

  • huzefamehidpurwala's avatar
    huzefamehidpurwala
    Copper Contributor
    Jul 23, 2024

    Good to know my last response worked for you, ChaitanyaSai370.

     

    add this code too in the useEffect.

     

    pages.config.registerOnSaveHandler((saveEvent) => {
  const baseUrl = `https://${window.location.hostname}:${window.location.port}`;
  pages.config
    .setConfig({
      entityId: "pageId",
      contentUrl: baseUrl + "/index.html#/tab",
      websiteUrl: baseUrl + "/index.html#/tab",
      suggestedDisplayName: "DisplayName",
    })
    .then(() => {
      saveEvent.notifySuccess();
    });
  saveEvent.notifySuccess();
});

     


    then too if same error shows up try changing "canUpdateConfiguration" value to false in the manifest file.

    Hope this works.

    Please like my responses and mark them as solution to the question.

    • ChaitanyaSai370's avatar
      ChaitanyaSai370
      Copper Contributor
      Jul 23, 2024
      Hey huzefamehidpurwala, Thank you so much! this worked. I had another question-
      I want this custom app to show up on the meeting ribbon automatically for certain users when the meeting starts. Is there a place to add the user accounts to whom this app should be visible?
      • huzefamehidpurwala's avatar
        huzefamehidpurwala
        Copper Contributor
        Jul 23, 2024
        As what I know there's nothing such configurations available. The meeting-app once added in the meeting by the organizer, the app is then available to all the attendees in the meeting through the ribbon or the app listed under the "Apps" button.

        It depends on the width of the window that the app icon comes up on the ribbon or goes under the "Apps" button.

Resources