I'm trying to build a screen to save a connector and I cannot get the Save button to work. It throws a JavaScript error from deep inside Teams itself.
As you can see I'm using the latest stable version of Teams JS.
My code has been boiled down to as simple as can be made. It just inits and sets the Save button validity so it can be clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://res.cdn.office.net/teams-js/2.7.1/js/MicrosoftTeams.min.js" crossorigin="anonymous">
</script>
</head>
<body>
<p>Testing 6</p>
<script>
async function init() {
await microsoftTeams.app.initialize();
microsoftTeams.pages.config.setValidityState(true);
}
init();
</script>
</body>
</html>
If I load up the console in my web browser, this is the error I receive:
2023-01-25T03:00:00.927Z Received error from connectors {
"seq":1674609016862,
"timestamp":1674613638241,
"flightSettings":{
"Name":"ConnectorFrontEndSettings",
"AriaSDKToken":"d12...",
"SPAEnabled":true,
"ClassificationFilterEnabled":true,
"ClientRoutingEnabled":true,
"EnableYammerGroupOption":true,
"EnableFadeMessage":false,
"EnableDomainBasedOwaConnectorList":false,
"EnableDomainBasedTeamsConnectorList":false,
"DevPortalSPAEnabled":true,
"ShowHomeNavigationButtonOnConfigurationPage":false,
"DisableConnectToO365InlineDeleteFeedbackPage":true,
"RemoveAnchorHeader":true
},
"status":500,
"clientType":"SkypeSpaces",
"connectorType":"92a...",
"name":"handleMessageError"
}
The manifest file is also simple: it is the one downloaded from the Connector Dashboard (with the invalid part deleted and the schema version upgraded because the dashboard generates INVALID MANIFESTS). Because I've downloaded the file, the UUIDs and valid domains are perfect matches.
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.15/MicrosoftTeams.schema.json",
"manifestVersion": "1.15",
"id": "2ac21268...",
"version": "1.0.0",
"packageName": "com.Simple I/O (Development 3)",
"developer": {
"name": "Developer",
"websiteUrl": "https://3821-68-69-235-13.ngrok.io",
"privacyUrl": "https://3821-68-69-235-13.ngrok.io",
"termsOfUseUrl": "https://3821-68-69-235-13.ngrok.io"
},
"description": {
"full": "Simple I/O (Development 3)",
"short": "Simple I/O (Development 3)"
},
"icons": {
"outline": "outline.png",
"color": "color.png"
},
"connectors": [
{
"connectorId": "2ac21268...",
"scopes": [
"team"
],
"configurationUrl": "https://3821-68-69-235-13.ngrok.io/teams/connector"
}
],
"name": {
"full": "Simple I/O (Development 3)",
"short": "Simple I/O (Development 3)"
},
"accentColor": "#FFFFFF",
"validDomains": [
"3821-68-69-235-13.ngrok.io"
]
}
Despite everything mentioned in the documentation, the following is required otherwise you'll get this error. This fixed things for me.
microsoftTeams.settings.registerOnSaveHandler(saveEvent => {
microsoftTeams.settings.setSettings({
contentUrl: "https://xxxxxx.ngrok.io/teams/connector"
});
saveEvent.notifySuccess();
});
The documentation states that registering a save handler is optional and Teams will handle notify success if it's not declared. WRONG. You must register a save handler.
The documentation does not state that setSettings is required. WRONG. You must set settings or else you will receive this error.
The documentation does not state that you must save a contentURL. WRONG. You must set content URL in the setSettings. You can apparently omit other things when setting your settings, but not content URL.
The documentation does not specifically mention it, but the contentURL must comply with your validURLs in your manifest. If it does not, you'll also see this error.
Related
I'm trying to display an URL upon invoke (task/fetch) via MS Teams bot. The URL is loading and working perfectly fine on android/ios app. But it is not loading at all in web/desktop app. The app has been in production for some time now and I recently updated the app manifest with valid domains for making the URLs load in Teams.
Also I tried the same manifest/backend with another test app and URLs are loading fine in web/mobile app. Not sure what am I missing here.
Please find below my task/fetch response and manifest details.
task/fetch response
{
"task": {
"type": "continue",
"value": {
"title": "Task Module Test",
"height": 1200,
"width": 1000,
"url": "https://www.contoso.com/msteams/taskmodules/newcustomer",
"fallbackUrl": "https://www.contoso.com/msteams/taskmodules/newcustomer"
}
}
}
My App Manifest (have edited some sensitive info but the structure of the manifest is intact)
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"version": "1.0.0",
"showLoadingIndicator": true,
"id": "some-id",
"packageName": "com.example.bots.msteams",
"developer": {
"name": "Test",
"websiteUrl": "https://www.example.com",
"privacyUrl": "https://www.example.com/policy",
"termsOfUseUrl": "https://www.example.com/terms"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "Test Short",
"full": "Test Long"
},
"description": {
"short": "Short desc",
"full": "Long desc"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "some-id",
"scopes": [
"personal"
],
"supportsFiles": true,
"isNotificationOnly": false
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"www.contoso.com"
]
}
URL successfully loading on Phone app
URL not loading on web/desktop app
Happy to provide any other info if needed!
Ok, found the fix (but I have no clue why it works). I removed showLoadingIndicator property from the manifest and the URLs are loading fine now.
I couldn't find much help on what that property does from MS docs.
Glad that you found the solution and thanks for posting it back to help other community members.
When you set showLoadingIndicator to true, as a mandatory step you need to call microsoftTeams.appInitialization.notifySuccess() to notify Teams that your app has successfully loaded.
The behavior on mobile clients is not configurable through the native loading indicator property. Mobile clients show this indicator by default across content pages and iframe-based task modules.
Here is documentation on Show Loading Indicator.
I'm trying to build a Microsoft Teams connector that I have sideloaded into my team while developing. I've set up a testing config page on S3 and have pointed my app manifest to it. When I click the save button, it stays stuck on the "Setting up your connector" spinner for a while, before saying "Unable to save connector configuration. Please try again."
The Javascript of the config page should be visible through the S3 link above; my app manifest is below. After looking at a few similar questions, you'll note that the contentUrl is included by wildcard in validDomains.
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",
"manifestVersion": "1.7",
"version": "1.0.0",
"id": "0b73c39a-db1d-43eb-81bd-3813bef33713",
"packageName": "<redacted>",
"developer": {
"name": "Developer",
"websiteUrl": "<redacted>",
"privacyUrl": "<redacted>",
"termsOfUseUrl": "<redacted>"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "Test",
"full": "Test"
},
"description": {
"short": "Test notifications",
"full": "Test notifications"
},
"accentColor": "#FFFFFF",
"connectors": [
{
"connectorId": "0b73c39a-db1d-43eb-81bd-3813bef33713",
"configurationUrl": "https://wsk-teams-test.s3.amazonaws.com/teams_configure.html",
"scopes": [
"team"
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"wsk-teams-test.s3.amazonaws.com",
"<redacted>"
]
}
I'm not able to get any more detailed information when attempting this via the desktop Teams app, but in the browser I see this error in the console:
2020-09-02T23:05:20.879Z Received error from connectors {"seq":1599086774636,"timestamp":1599087920857,"flightSettings":{"Name":"ConnectorFrontEndSettings","AriaSDKToken":"<redacted>","SPAEnabled":true,"ClassificationFilterEnabled":true,"ClientRoutingEnabled":true,"EnableYammerGroupOption":true,"EnableFadeMessage":false,"EnableDomainBasedOwaConnectorList":false,"EnableDomainBasedTeamsConnectorList":false,"DevPortalSPAEnabled":true,"ShowHomeNavigationButtonOnConfigurationPage":false,"DisableConnectToO365InlineDeleteFeedbackPage":true},"status":500,"clientType":"SkypeSpaces","connectorType":"0b73c39a-db1d-43eb-81bd-3813bef33713","name":"handleMessageError"}
Thanks for any guidance you might have. If I can get in touch with someone from Microsoft privately, I'd be happy to provide the <redacted> information.
This issue is fixed by adding the content url in valid domains list in the Connector Developer Dashboard.
As recommended above: This issue is fixed by adding the content url in a valid domains list in the Connector Developer Dashboard.
This helped me understand the direction of the problem.
But my accidental mistake was due to the lack of the prefix https://
Be sure to add https:// prefix to your domain
I have a PWA built with CRA, it's hosted on Heroku. The PWA is downloadable on my iOS device and everything works fine, EXCEPT the icon.
I'm not sure if the file reference is correct, because it changes during Heroku Build. I've tried both my localhost file reference and the post-build reference, but neither gives me the option to use the icon.
I'm brand new to PWAs, so maybe I'm making a dumb mistake
Here is the manifest.json (the file references here are post-build, based on the 'Sources' tab in Chrome dev tools):
{
"short_name": "Sonar",
"name": "Sonar",
"icons": [
{
"src": "static/media/sonar_backup.cb32ebcc.png",
"type": "image/png",
"sizes": "128x128"
},{
"src": "static/media/sonar_backup.cb32ebcc.png",
"type": "image/png",
"sizes": "144x144"
},{
"src": "static/media/sonar_backup.cb32ebcc.png",
"type": "image/png",
"sizes": "192x192"
},{
"src": "static/media/sonar_backup.cb32ebcc.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#512DA8",
"background_color": "#512DA8"
}
Any thoughts appreciated.
I found my own answer, and I'll post here in case anyone else comes across this problem.
What I was doing in the manifest.json file was sufficient for Android PWA icons, but at the time of this post, iOS requires a different process.
The fix was in the root folder, in index.html, add:
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/profilePicture/sonar_backup.png">
That link tells the iOS to specifically read this href, and assign it as the app icon.
A lot more good information available here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I am new to creating Compose Extensions in Teams and am facing an issue when I add it to my Teams.
All the configurations are in place, from registering the Bot to hosting it as a Bot Service on Azure and handling the compose extension query in the code. I have shared the Bot Id in the manifest and given the bot hosted URL with /api/messages appended to the endpoint URL.
The bot as a standalone application works locally as well as on the Azure Porta. I have successfully remote debugged it as well. However, as soon as I sideload it in Teams as a messaging extension, the query is not firing appropriately.
While typing, it stops and shows "Something went wrong with this app. Try Again".
Moreover, when we load the Compose Extension it should make an initial hit to the hosted bot application, I have the debuggers in place and it neither hits the Constructor nor the Post method.
I am getting a 404 error saying V3 agent not found and a failed POST request.
Anyone who might have faced a similar issue and has recovered from it, or may know where I may be going wrong kindly provide your advice. Highly appreciated.
{
"$schema": "https://statics.teams.microsoft.com/sdk/v1.2/manifest/MicrosoftTeams.schema.json",
"manifestVersion": "1.2",
"version": "1.0.0",
"id": "f3c14e30-0af2-4f96-b714-5d258edcab47",
"packageName": "net.azurewebsites.fetchassistant",
"developer": {
"name": "abc",
"websiteUrl": "https://fetchassistant.azurewebsites.net",
"privacyUrl": "https://fetchassistant.azurewebsites.net",
"termsOfUseUrl": "https://fetchassistant.azurewebsites.net"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "FetchAssistant",
"full": "Fetch Assistant"
},
"description": {
"short": "abc",
"full": "xyz"
},
"accentColor": "#235EA5",
"composeExtensions": [
{
"botId": "Microsoft App/Bot Id",
"scopes": ["personal", "team"],
"commands": [
{
"id": "FirstName",
"description": "Search Relevant Documents",
"title": "Get Name Division",
"initialRun": false,
"parameters": [
{
"name": "xyz",
"description": "Get Name Division",
"title": "Names"
}
]
}
]
}
],
"permissions": ["identity", "messageTeamMembers"],
"validDomains": ["*.microsoft.com", "*.azurewebsites.net"]
}
I was able to get through the issue you're facing by doing the following:
Navigate to https://dev.botframework.com/bots/
Click on the Microsoft Teams icon in the "Add a featured channel" section
Register your app
I was getting this error myself on an extension.
Following the idea of adding channels, I went to the channels section.
There was no Teams channel configured.
So, I added it.
And the error went away as my extension loaded.
I have a firefox webextension ported from chrome extension. The executeScript call fails on this site.
https://addons.mozilla.org/en-US/firefox/
I tested with multiple pages on this site and all are giving the same error
The bare-minimum code to reproduce this is
popup.js
document.addEventListener("DOMContentLoaded", function () {
chrome.tabs.query({"active": true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {"code": "console.log('Script executed in ' + document.location.href);"}, function(r) {
if(chrome.runtime.lastError) {
console.log(chrome.runtime.lastError);
document.body.innerHTML = 'Execute script Fail. check console';
} else {
document.body.innerHTML = 'Execute script Success';
}
});
});
});
manifest.json
{
"manifest_version": 2,
"name": "execscript_test",
"short_name": "execscript_test",
"version": "0.0.1",
"description": "desc",
"icons": {
"19": "images/icon19.png",
"38": "images/icon38.png",
"128": "images/icon.png"
},
"applications": {
"gecko": {
"id": "execscript_test#me.com",
"strict_min_version": "48.0"
}
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"<all_urls>"
],
"browser_action": {
"browser_style": false,
"default_icon": "images/icon.png",
"default_title": "execscript_test",
"default_popup": "popup.html"
}
}
background.js - file is present but it is empty
popup.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
On https://addons.mozilla.org/en-US/firefox/addon/engrip-tracker/?src=search page I clicked on the browser button and got this error in browser console
Error: No window matching {"matchesHost":["<all_urls>"]}
Stack trace:
Async*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:8:4
Async*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:2:2
EventListener.handleEvent*#moz-extension://062a83b0-81f1-42f0-84a8-89ecdc2c08e0/popup.js:1:1
I thought it could be some url scheme issue but this happens even on https://addons.mozilla.org/en-US/firefox/
The same code works without error on chrome.
I am on FF v50. I tested this on FF nightly also (v53.0a1) and the error persists.
Is this something specific to this site? Or am I missing something here?
This is deliberate, it is covered in e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1310082