I have added a submenu.
NavigationProvider
vm.menuItems = [
createMenuItem(App.localize("HomePage"), "", "home", "home"),
createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
createMenuItem("Some Title", "", "menu", "", [
createMenuItem(App.localize("DataPoint"), "Pages.Users", "compare_arrows", "datapoint")
])
];
app.js
$stateProvider
.state('datapoint', {
url: 'datapoint',
templateUrl: '/App/Main/views/datapoint/index.cshtml',
menu: 'DataPoint'
});
$urlRouterProvider.otherwise('/datapoint');
in sidebar-nav.js
vm.menuItems = [
createMenuItem(App.localize("HomePage"), "", "home", "home"),
createMenuItem(App.localize("Values"), "Pages.Users", "assessment", "values"),
createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
//createMenuItem(App.localize("About"), "", "info", "about"),
createMenuItem("ASP.NET Boilerplate", "", "menu", "", [
createMenuItem(App.localize("DataPoint"), "Pages.Users", "compare_arrows", "datapoint")
])
];
The menu item shows nicely but I keep getting the error Could not resolve '[subMenuItem.route]' from state 'datapoint' in console and the page does not link. Any idea what might be wrong please?
If anyone is facing the same issue, this is a bug in boilerplate. In sidebar-nav.cshtml,
<a ui-sref="[subMenuItem.route]" class="toggled" ng-if="!subMenuItem.items && subMenuItem.route.indexOf('http') != 0">
<i ng-if="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
<span>{{subMenuItem.name}}</span>
</a>
If you notice [subMenuItem.route] is not formatted correctly. It should be {{subMenuItem.route}} instead. This has to be changed for both subMenu and subSubMenu.
Related
I am converting a single page front-end website to desktop application using tauri toolchain. When I download an image or any other file in the application, it displays a download progress bar in the top right corner. I have to disable the progress bar. When I searched how to disable it in this webview2 documentation, it suggested that I can set the CoreWebView2DownloadStartingEventArgs.Handled property to true which will hide the download progress dialog. But I can't find how to set that property in my tauri application source code. I have included my project directory and the all the codes that I have included so far. It will be helpful for me if someone could explain how to set that property to true so that I can hide how to hide the progress bar in my application.
Project Folder: https://drive.google.com/drive/folders/1rT_uaH6Ki_B2Hpud0SsI9ZUNZMZpmUWD?usp=sharing
HTML File:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg" alt="W3Schools" width="500">
<a href="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg" download="image.jpg">
<button type="button">Download</button>
</a>
</body>
</html>
RUST main file:
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
tauri.conf configuration file:
{
"build": {
"beforeBuildCommand": "",
"beforeDevCommand": "",
"devPath": "../assets",
"distDir": "../assets"
},
"package": {
"productName": "test",
"version": "0.1.0"
},
"tauri": {
"allowlist": {
"all": true
},
"bundle": {
"active": true,
"category": "DeveloperTool",
"copyright": "",
"deb": {
"depends": []
},
"externalBin": [],
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128#2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"identifier": "com.tauri.dev",
"longDescription": "",
"macOS": {
"entitlements": null,
"exceptionDomain": "",
"frameworks": [],
"providerShortName": null,
"signingIdentity": null
},
"resources": [],
"shortDescription": "",
"targets": "all",
"windows": {
"certificateThumbprint": null,
"digestAlgorithm": "sha256",
"timestampUrl": ""
}
},
"security": {
"csp": null
},
"updater": {
"active": false
},
"windows": [
{
"fullscreen": false,
"height": 600,
"resizable": true,
"title": "Test",
"width": 800
}
]
}
}
Got my answer here
I added the following dependencies to my Cargo.toml file
webview2-com = "0.19"
windows = "0.39"
Then in my main.rs, I added a setup hook to the Builder with the following content
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
use tauri::Manager;
use webview2_com::{
DownloadStartingEventHandler, Microsoft::Web::WebView2::Win32::ICoreWebView2_4,
};
use windows::{core::Interface, Win32::System::WinRT::EventRegistrationToken};
fn main() {
tauri::Builder::default()
.setup(|app| {
let window = app.get_window("main").unwrap();
#[cfg(windows)]
window.with_webview(|webview| unsafe {
let mut _token = EventRegistrationToken::default();
let core = webview
.controller()
.CoreWebView2()
.unwrap()
.cast::<ICoreWebView2_4>()
.unwrap();
let handler =
DownloadStartingEventHandler::create(Box::new(move |_, args| {
if let Some(args) = args {
// i don't know how safe that unwrap is, so you may wanna handle errors
// or just ignore them with `let _ = args.SetHandled(true);`
args.SetHandled(true).unwrap();
}
Ok(())
}));
let _ = core.add_DownloadStarting(&handler, &mut _token);
});
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
I'm currently seeing this error when I try and save my connector configuration:
21T21:05:12.087Z ngClickDecorator: value not found in enum type. value:
and
21T21:05:12.155Z Received error from connectors {"seq":1611247472155,"timestamp":1611263112143,"flightSettings": {"Name":"ConnectorFrontEndSettings","AriaSDKToken":"d127f72a3abd41c9b9dd94faca947689-d58285e6-3a68-4cab-a458-37b9d9761d35-7033","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":"c6adb316-46b2-4e46-a511-8b4947b3d554","name":"handleMessageError"}
And the SO post: Can't save custom connector configuration is very close to my problem however I have added my configurationURL to my valid domains, and removed mine from the manifest but with still no luck. I'm all set up on my permissions as well unless there is something specific I am missing to configure?
Any suggestions, below is my manifest and code:
Manifest:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"version": "1.0.3",
"showLoadingIndicator": true,
"isFullScreen": true,
"id": "c6adb316-46b2-4e46-a511-8b4947b3d554",
"packageName": "com.test",
"developer": {
"name": "Test, Inc",
"websiteUrl": "https://test.com",
"privacyUrl": "https://test.com/privacy",
"termsOfUseUrl": "https://test.com/toc"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"connectors": [
{
"connectorId": "c6adb316-46b2-4e46-a511-8b4947b3d554",
"scopes": [
"team"
],
"configurationUrl": "https://localdev-test.test.com/connector"
}
],
"name": {
"short": "Test Development",
"full": "Test for Microsoft Teams"
},
"description": {
"short": "Test Development",
"full": "Test for Microsoft Teams"
},
"accentColor": "#FFFFFF",
"staticTabs": [
{
"entityId": "22f101b6-f9a2-44d3-8eba-74309295f398",
"scopes": [
"personal"
],
"context":[
"personalTab",
"channelTab"
],
"name": "TestSite",
"contentUrl": "https://localdev-test.test.com",
"websiteUrl": "https://localdev-test.test.com",
"searchUrl": "https://localdev-test.test.com"
}
],
"devicePermissions": [
"notifications",
"openExternal"
],
"permissions": [
"identity",
"messageTeamMembers"
]
}
Code:
ngOnInit(): void {
microsoftTeams.initialize();
microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
microsoftTeams.settings.setSettings({
entityId: 'Create',
contentUrl: 'https://localdev-test.test.com/connector',
removeUrl: 'https://localdev-test.test.com/connector',
configName: 'Create'
});
microsoftTeams.settings.getSettings((settings) => {
this.webhookUrl = settings.webhookUrl;
localStorage.setItem('connectorWebHook', this.webhookUrl);
});
saveEvent.notifySuccess();
});
}
onClick(): void {
if (!this.webhookUrl) {
microsoftTeams.settings.setValidityState(true);
}
}
This is a Microsoft Bug, the "Configuration page for your Connector" on the Connector Portal is immutable (even though it is in an edit field). Meaning that the URL you set on the creation of the Connector can not change through development or you will get this error. So just making a new connector through the portal with my changed configuration URL fixed my problem.
A comment on their git points to this as well: https://github.com/MicrosoftDocs/msteams-docs/issues/1738#issuecomment-647675420
I cannot retrieve a subEntityId on a Teams tab app from a deep link. It's always empty in getContext. Could anyone please help me out?
I generated a deep link as following this page, https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links
The link looks like this,
https://teams.microsoft.com/l/entity/58061894-78f0-49c3-99d7-25830d1c84f0/anpi-personal&context=%7B%22subEntityId%22:%22task123%22%7D
The link works as it expected, it brings me to the tab app on Teams. But no subEntityId.
The manifest of the tab app looks like this,
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",
"manifestVersion": "1.7",
"version": "1.0.0",
"id": "58061894-78f0-49c3-99d7-25830d1c84f0",
"packageName": "something.package.name",
"developer": {
"name": "dev",
"websiteUrl": "some url",
"privacyUrl": "some url",
"termsOfUseUrl": "some url"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "some name",
"full": "some text"
},
"description": {
"short": "some text",
"full": "some text"
},
"accentColor": "#FFFFFF",
"staticTabs": [
{
"entityId": "anpi-personal",
"name": "app name",
"contentUrl": "https://exmample.com/Default.aspx?entityId={entityId}&subEntityId={subEntityId}",
"scopes": [
"personal"
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"foo.com"
],
"webApplicationInfo": {
"id": "13958568-6984-47d4-910f-7bb9c87078c2",
"resource": "api://exmample.com/13958568-6984-47d4-910f-7bb9c87078c2"
}
}
I think you need to change:
...anpi-personal&context=%7B%22subEntityId%22:%22task123%22%7D
to:
...anpi-personal?context=%7B%22subEntityId%22:%22task123%22%7D
the change is hard to see - I've changed "&context" to "?context" - "&" is required if you have -multiple- values you're passing (like "weburl=something" AND "context=something"), but in this case you only have "context", so it needs to start with "?"
This question already has answers here:
Vue.js dynamic images not working
(20 answers)
Closed 2 years ago.
I am trying to display 9 different images in a loop using v-for.
But, they are are not showing. If I show it without any loop, it works.
I am extracting the right resource but, still, it won't display.
This is my code:
<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
<div>
{{ item.src }} // Just to check if I am printing right
</div>
<img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>
Now the result that I am getting is:
This is my data.json:
"items": [
{ "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
{ "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
{ "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
{ "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
{ "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
{ "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
{ "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
{ "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
{ "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
]
EDIT
So far, I have observed that the problem lies with the src. If I am using an image link, it is working just fine. But, not with a local image(only if I used bunch of local images in a loop and working just fine in single). So, what I can do is put the file directory here. I would recommend if anyone of you can try on your local computer and try to upload images from your file directory in a loop and post it here.
SOLVED
It needed this statement exactly: require, the path directory and image name.
<div v-for="item in items" :key="item.id">
<div>
{{ item.src }}
</div>
<img
class="list-complete-img"
:src="require(`../assets/${item.src}`)"
:alt="item.src"
/>
</div>
This is issue has to do with the following quote of Evan You, which can be found here:
Because the imagePath is only rendered by Vue at runtime, Webpack has no chance of rewriting it.
Your JavaScript code needs to be like this:
export default {
name: "App",
data: function () {
return {
items: [
{ id: "1", src: "logo.png", tags: ["all", "tag1"] },
{ id: "2", src: "logo.png", tags: ["all", "tag2"] },
{ id: "3", src: "logo.png", tags: ["all", "tag2"] },
{ id: "4", src: "logo.png", tags: ["all", "tag1"] },
{ id: "5", src: "logo.png", tags: ["all", "tag1"] },
{ id: "6", src: "logo.png", tags: ["all", "tag2"] },
{ id: "7", src: "logo.png", tags: ["all", "tag1"] },
{ id: "8", src: "logo.png", tags: ["all", "tag2"] },
{ id: "9", src: "logo.png", tags: ["all", "tag2"] },
],
};
},
methods: {
getImgUrl: function (imagePath) {
return require('#/assets/' + imagePath);
}
}
};
Afterwards, you need to call your getImgUrl function by passing the filename. Your HTML will be like this:
<div id="app">
<img class="list-complete-img" src="./assets/logo.png" />
<div v-for="item in items" :key="item.id">
<img class="list-complete-img" :src="getImgUrl(item.src)" />
</div>
</div>
Since I do not have access to your images, I have taken the liberty to use the Vue logo as an image.
In summary, the above problem has to do that when Vue compiles, it takes all the assets and puts them in another folder like the image below:
Follow this pattern and your example will also work. Enjoy!
EDIT: If you want, you can have your static assets placed in the public folder. In that way, you will be able to write static paths for your assets.
try this: v-for="(item, i) in items" :key="i"
you can use a for loop which may help correct me if I am wrong
To use dynamic images, use require(). Change what you have to this.
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>
I am following the tutorials on https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-configuration with the configuration code provided. When I hit save after some seconds I get the error that it was not successful.
As far as I am concerned all needed valid domains are added.
Manifest.json
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
"manifestVersion": "1.3",
"id": "ec3e802c-506d-4301-9ae4-868b93461ca0",
"version": "1.0.0",
"packageName": "com.Package",
"developer": {
"name": "Developer",
"websiteUrl": "https://privateDomain.de",
"privacyUrl": "https://privateDomain.de",
"termsOfUseUrl": "https://privateDomain.de"
},
"description": {
"full": "Text",
"short": "More Text"
},
"icons": {
"outline": "IncomingWebhook.jpg",
"color": "IncomingWebhook.jpg"
},
"connectors": [
{
"connectorId": "ec3e802c-506d-4301-9ae4-868b93461ca0",
"scopes": [
"team"
],
"configurationUrl": "*linkToConfigurationPage*"
}
],
"name": {
"full": "Package",
"short": "Package"
},
"accentColor": "#FFFFFF",
"validDomains": [
"bing.com",
"google.com",
"*.google.com",
"*.bing.com",
"teams-get-started-sample.azurewebsites.net",
"*.microsoft.com",
"*.skype.com",
"*.privateDomain.de",
"vater-gruppe.de",
"static2.sharepointonline.com",
"secure.aadcdn.microsoftonline-p.com",
"code.jquery.com",
"statics.teams.microsoft.com",
"*.microsoftonline.com",
"ajax.googleapis.com"
],
"needsIdentity": "false"
}
The code in the index on the SSL capable server(linkToConfigurationPage) is
`<body>
<form>
<input type="radio" name="maptype" value="bing" onclick="onClick()"> Bing Maps<br>
<input type="radio" name="maptype" value="google" onclick="onClick()"> Google Maps
</form>
<script src="https://statics.teams.microsoft.com/sdk/v1.2/js/MicrosoftTeams.min.js"></script>
<script type="text/javascript">
microsoftTeams.initialize();
microsoftTeams.settings.registerOnSaveHandler(function(saveEvent){
var radios = document.getElementsByName("maptype");
if (radios[0].checked) {
microsoftTeams.settings.setSettings({
entityId: "bing",
contentUrl: "https://www.bing.com/maps/embed",
suggestedDisplayName: "Bing Map",
websiteUrl: "https://www.bing.com/maps",
removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html",
});
} else {
microsoftTeams.settings.setSettings({
entityId: "google",
contentUrl: "https://www.google.com/maps/embed",
suggestedDisplayName: "Google Map",
websiteUrl: "https://www.google.com/maps",
removeUrl: "https://teams-get-started-sample.azurewebsites.net/tabremove.html",
});
}
saveEvent.notifySuccess();
});
function onClick() {
microsoftTeams.settings.setValidityState(true);
}
</script>
</body>
</html>`
The error message I get is
angular.min.js:112 2018-09-04T09:26:24.007Z Received error from connectors {"seq":1536048346894,"timestamp":1536053183994,"flightSettings":{"Name":"ConnectorFrontEndSettings","AriaSDKToken":"d127f72a3abd41c9b9dd94faca947689-d58285e6-3a68-4cab-a458-37b9d9761d35-7033","SPAEnabled":true,"ClassificationFilterEnabled":true,"ClientRoutingEnabled":true,"EnableYammerGroupOption":true,"EnableFadeMessage":false,"EnableDomainBasedOwaConnectorList":false,"EnableDomainBasedTeamsConnectorList":false,"DevPortalSPAEnabled":true,"ShowHomeNavigationButtonOnConfigurationPage":false},"status":500,"clientType":"SkypeSpaces","connectorType":"ec3e802c-506d-4301-9ae4-868b93461ca0","name":"handleMessageError","nonPIIInfo":"{\"exception\":{}}"}
Can anyone help me what I am doing wrong?
The content URL in microsoftTeams.settings.setSettings() is used to handle edits. This URL also need to be under the same domain which is added in Connector Portal's valid domain section. You could try following as your linkToConfigurationPage is already part of valid domains.
microsoftTeams.settings.setSettings({
entityId: "bing",
contentUrl: "*linkToConfigurationPage*",
suggestedDisplayName: "Bing Map"
})
The solution is to remove the "validDomains" attribute from the generated mainfest.json.