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 button, but when I try to add, the Save button is greyed out. Am I missing any configurations to save the app and get it pinned on the ribbon? Also,I want my 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? Thank you!

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.

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

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

Forum Discussion

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