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

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

Forum Discussion

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

Resources