Unable to save connector configuration. Please try again - javascript

I'v been trying to create a connector in MS teams but I get this error: when I click save : "Unable to save "Top.legal" connector configuration. Please try again."
I did some reseach for the problem but all of them didn't match with my case
here is my manifest.json file
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
"manifestVersion": "1.9",
"id": "xxxxxx",
"version": "1.0.0",
"packageName": "com.Top.legal",
"developer": {
"name": "Developer",
"websiteUrl": "https://www.exemple.com/",
"privacyUrl": "https://www.exemple.com/",
"termsOfUseUrl": "https://www.exemple.com/"
},
"description": {
"full": "send adaptive cards",
"short": "top legal"
},
"icons": {
"outline": "outline_icon.png",
"color": "color_icon.png"
},
"connectors": [
{
"connectorId": "8e33a624-cf51-4e6d-87ec-b7eaecd98a80",
"scopes": ["team"],
"configurationUrl": "https://84127fa549f0.ngrok.io/connect"
}
],
"name": {
"full": "Top.legal",
"short": "Top.legal"
},
"permissions": ["identity", "messageTeamMembers"],
"accentColor": "#FFFFFF",
"validDomains": ["5b6a00e5f53f.ngrok.io"]
}
and you can find here my config.html file =>
<!DOCTYPE html><html><head><meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://statics.teams.microsoft.com/sdk/v1.2/js/MicrosoftTeams.min.js'</script</head><body>Copy your webhook URL from here to POST messages in this channel: <span id="url"></span><br><br>Don't forget to click on "Save" to activate your connector.<script>microsoftTeams.initialize();
microsoftTeams.settings.getSettings(s => {
document.getElementById("url").innerText = s.webhookUrl;
console.log(s);
});
microsoftTeams.settings.setSettings({
entityId: "sampleConn",
configName: "sampleConfig",
contentUrl: "https://84127fa549f0.ngrok.io/connect"
});
microsoftTeams.settings.setValidityState(true);
microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
saveEvent.notifySuccess();
});
</script></body></html>
thank you for your help

Add ngrok url in valid domains while registering connector in Connectors Developer Dashboard. Please follow this sample code.

Related

Map data in contentscript.js to chartjs in chrome extension

I'm building a chrome extension that displays data from an API in a chart. I've been able to get the data from each endpoint successfully. The chart library used is chartjs. I have been able to send data from background.js to contentScript.js. The challenge I'm currently facing is hooking the data to chartjs in the contentscript.js in the extension. Below is the code.
Background.js
const data = {
data1: data1,
data2: data2,
data3: data3
};
console.log("data", data);
// wait for tab to fully load
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == "complete") {
// sendMessage
chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0]?.id, { data: data }, (response) => {
console.log(response);
});
});
}
});
ContentScript.js
chrome.runtime.onMessage.addListener((sender, sendResponse, message) => {
console.log(message)
console.log(sender)
sendResponse("received")
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Message1", "Messages", "Message3"],
datasets: [
{
label: "User Info",
backgroundColor: ["#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: [sender.data1, sender.data2,sender.data3]
},
]
},
options: {
legend: { display: true },
title: {
display: true,
text: 'Your Metrics'
}
}
});
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data</title>
<script src="./chart.min.js"></script>
</head>
<body>
<div>
<h2>Data Analytics</h2>
<hr>
<div style="width: 30rem; height:20rem;display:flex;">
<canvas id="bar-chart"></canvas>
</div>
</div>
<script src="./contentScript.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 3,
"name": "Data Fetch",
"version": "0.1.0",
"description": "Get data from api",
"permissions": ["tabs", "cookies", "storage","activeTab"],
"host_permissions": ["https://*.site.com/*"],
"background": {
"service_worker": "./background.js"
},
"content_scripts": [
{
"matches": ["https://*.site.com/*"],
"js": ["contentScript.js", "chart.min.js"]
}
],
"action": {
"default_popup": "index.html",
"default_title": "Data Stats",
"default_icon": "images/data-icon.png"
}
}

Can't get notifications to work on Google Chrome Extension

I'm writing a Google Chrome extension, but I can't get chrome notifications to work.
The goal (at least for testing purposes): to display a notification when the user clicks on the extension icon on the top right.
What's happening: clicking on the extension icon only displays the "Test body" text from popup.html but no notifications. Inspecting the console for the extension, I can see the result of the callback function: Last error: undefined.
EDIT: I've tried using Google's Notification API to test the functionality and it also seemed to not work. This link talks about a bug on the Chrome notifications, so I worry that might be the issue. Any input about the bug would be appreciated.
Here is my code:
manifest.json:
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" },
"content_scripts": [
{
"matches": ["*://*.amazon.com/*buy*"],
"js": ["js/content.js"]
}
],
"browser_action": {
"default_popup": "html/popup.html",
"default_title": "Test Extension"
},
"background": {
"scripts": ["js/background.js"]
},
"permissions": [
"notifications"
],
"web_accessible_resources": ["images/icon48.png"]
}
popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nubank Credit Control</title>
</head>
<body>
<p>Test body</p>
<script src="../js/popup.js"></script>
</body>
</html>
content.js:
chrome.runtime.sendMessage({
url: window.location.href
});
background.js:
chrome.runtime.onMessage.addListener(function () {
const options = {
type: "basic",
iconUrl: chrome.extension.getURL("../images/icon48.png"),
title: "This is the title",
message: "This is the main message of the notification",
};
chrome.notifications.create("notifId", options, function() {console.log("Last error:", chrome.runtime.lastError);});
});
Actually, notifications can be triggered in popup.js as well. As far as I can see the issue is in how you call chrome.notifications.create().
The first parameter is optional but if you still want to pass it, it should be a valid notification id, not just 'notifId'.
For testing purposes this should be enough:
manifest.json
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "html/popup.html",
"default_title": "Test Extension"
},
"permissions": [
"notifications"
]
}
popup.js
const options = {
type: "basic",
iconUrl: "../images/icon48.png",
title: "Popup.js",
message: "Hello from popup.js!"
};
chrome.notifications.create(options);
Or, in case of using background.js:
manifest.json
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_title": "Test Extension"
},
"background": {
"scripts": ["js/background.js"]
},
"permissions": [
"notifications"
]
}
background.js
const options = {
type: "basic",
iconUrl: "../images/icon48.png",
title: "Background.js",
message: "Hello from background.js!"
};
chrome.browserAction.onClicked.addListener(function (){
chrome.notifications.create(options);
});
The chrome.notifications API is only available in the background context, see: https://stackoverflow.com/a/6189524/3862289 for a complete solution.

Angular PWA - Why browser cache keeps growing? How to stop it?

I'm wondering is there a way to manage the browser cache and keep it as less as possible in Angular PWA apps.
Growing browser cache in IOS devices fills the cache limit in website data and the app stops working because of that!
Is there a specific configuration for service workers to achieve this?
My current configuration:
{
"index": "/",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/profiles/**",
"/*.(eot|svg|cur|webp|png|gif|otf|ttf|woff|woff2|ani)"
]
}
}],
"dataGroups": [{
"name": "api",
"version": 1,
"urls": ["/api/**"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 1,
"maxAge": "7d",
"timeout": "1s"
}
}]
}
I dont think you can stop the caching growing because as I can see right now you are caching everything include static resource and api caching
What you can do is to tell it not to cache your page, by sending the appropriate headers or using these meta tags:
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Update remove this and you should be good. This is for API caching
"dataGroups": [{
"name": "api",
"version": 1,
"urls": ["/api/**"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 1,
"maxAge": "7d",
"timeout": "1s"
}
}]

Surveyjs choicesOrder random except some value

I have a problem with choices order in surveyjs, I want to make random choices order except 1 value (example: camel) always at bottom.
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
I've created an example with your code and latest SurveyJS. It looks ok for me.
Could you please try to update SurveyJS version to the latest. Thanks.
Survey
.StylesManager
.applyTheme("default");
var json = {
"elements": [{
"type": "imagepicker",
"name": "Picture",
"title": "What animal would you like to see first ?",
"choices": [
{
"value": "lion",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
}, {
"value": "giraffe",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
}, {
"value": "panda",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
}, {
"value": "camel",
"imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
}]
}]};
window.survey = new Survey.Model(json);
var q = survey.getQuestionByName('Picture');
q.choicesOrder = "random";
q.showLabel = "true";
$("#surveyElement").Survey({model: survey});
<!DOCTYPE html>
<html>
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.0.53/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.0.53/survey.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>

Script error when webbrowser loading html page

I'm trying to load local html page using webbrowser tool in Winforms but I got script error message and my page won't load, when I open that page using any web browser it opens with no problem at all! I tried some solutions as editing registry but no fix.
my html page has jscript code and this is the code in my page:
<html>
<head>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript"src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var csatGauge = new FusionCharts({
"type": "angulargauge",
"renderAt": "chart-container",
"width": "400",
"height": "250",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
}
}
});
csatGauge.render();
});
</script>
</head>
<body>
<div id="chart-container">An angular guage will load here!</div>
</body>
</html>
I've managed to solve it by adding this code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
I'm still not sure if this is only thing needed or it worked with the change of the registry: solution

Categories