I'm trying to create extension which allow me to open a work item context menu and see new control and when I hover on the control a sub menu will open. just like the way 'Move to iteration' and 'Templates' works.
this is the contributions section of my vss-extension.json:
"contributions": [
{
"id": "releaseMenuAction",
"type": "ms.vss-web.action",
"description": "test",
"targets": [
"ms.vss-work-web.backlog-item-menu",
"ms.vss-work-web.work-item-context-menu"
],
"properties": {
"name": "releaseMenuAction",
"text": "Assign to release",
"title": "Assign to release",
"icon": "img/delivery_small.png",
"uri": "index.html"
}
}
]
and this is the html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="sdk/VSS.SDK.min.js"></script>
</head>
<body>
<script>
VSS.init({ usePlatformScripts: true, usePlatformStyles: true, explicitNotifyLoaded: true });
// Use an IIFE to create an object that satisfies the IContributedMenuSource contract
var menuContributionHandler = (function () {
"use strict";
return {
getMenuItems: function (actionContext) {
var subMenus = [
{
text: "one",
action: function (actionContext) {
alert("one");
}
},
{
text: "two",
action: function (actionContext) {
alert("two");
}
}
];
return [
{
text: "Assign to release",
group: "actions",
icon: "img/delivery_small.png",
childItems: subMenus
}
];
}
};
}());
// Associate the menuContributionHandler object with the "releaseMenuAction" menu contribution from the manifest.
VSS.register("releaseMenuAction", menuContributionHandler);
</script>
</body>
</html>
The result I'm getting is only to see the 'Assign to release' control in the menu but without his childs.
What am I missing?
Thanks.
#PatrickLu-MSFT Thanks for the reply.
I managed to solved the problem. I was missing a line in the code:
VSS.notifyLoadSucceeded();
this line "tells" the tfs that the extension loaded succesfully.
Related
I can see the "Hello from renderer" alert, but not the "Goodbye from renderer" alert.
Running in Windows 10.
And I can't see the "received!" alert, which I should see it the ipcRenderer.on(...) worked.
index.js
const { app, BrowserWindow} = require("electron");
app.on('ready', () => {
let mainWindow = new BrowserWindow(
{
width: 800,
height: 600,
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.send("from-main", "teste");
});
});
index.html
<html>
<head>
<title>test</title>
<script src="./renderer.js"> </script>
</head>
<body>
Wait...
</body>
</html>
renderer.js
alert('hello from renderer');
const { ipcRenderer } = require('electron');
ipcRenderer.on('from-main', () => { alert('received!');} );
alert('goodbye from renderer');
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^8.0.0"
}
}
let mainWindow = new BrowserWindow(
{
width: 800,
height: 600,
webPreferences:{
nodeIntegration:true
}
});
Please add nodeIntegration when you are creating the browser window.
You are using the Node API at your renderer. When you don't enable nodeIntegration then you won't be able to use any node modules at your renderer js.
To confirm this you can see this error message from your app debug console.
mainWindow.webContents.on('did-finish-load', () => {
// open dev tools
mainWindow.webContents.openDevTools()
mainWindow.webContents.send("from-main", "teste");
});
Uncaught ReferenceError: require is not defined
This means you didn't enable the nodeIntegration when you are creating the browserWindow.
I'm porting extension from Chrome to Firefox.
Have an html with
<input type="file" id="protocol-file"/>
After pressing an extension button I see my input. Then start to select local file from disk - I see window with file list on my disk, but extension windows dissapeared (only in Firefox, in Chrome it still remains visible).
I tried to add
document.getElementById('protocol-file').onchange = function() {
alert('protocol-file changed');
};
but it doesn't work - I don't see alert after file selected.
It seems that extension finishes working on selecting files in Firefox. In Chrome everything is Ok.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<script src="main.js"></script>
<body>
<div id="container">
<div class="file-input-block">
<span class="file-label">Файл:</span>
<input type="file" id="protocol-file"/>
</div>
</div>
</body>
</html>
main.js
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('protocol-file').onchange = function() {
alert('protocol-file changed');
};
});
manifest.json
{
"name": "Example",
"version": "0.1",
"description": "Mozilla ext example",
"manifest_version": 2,
"permissions": [
"activeTab",
"tabs",
"notifications",
"http://*/",
"https://*/"
],
"browser_action": {
"default_title": "Example file select",
"default_popup": "index.html"
},
"browser_specific_settings": {
"gecko": {
"id": "my#examle.com",
"strict_min_version": "49.0"
}
}
}
I use this piece of code o=in my ASP.NET Core application:
<head>
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src='~/lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jstree/jstree.min.js"></script>
<link rel="stylesheet" href="~/lib/jstree/themes/default/style.min.css" type="text/css" />
</head>
<div id="container2">
<script>
$(function () {
$('#container2').jstree({
'core': {
'data': [
{
"text": "Root node", "children": [
{ "text": "Kind node 1" },
{ "text": "Kind node 2" },
{ "text": "Kind node 3" }
]
}
]
}
});
});
</script>
When I run the project in VS as IISExpress app it works.
But If I run it as an desktop app I receive the error
Uncaught TypeError: $(...).jstree is not a function
What is wrong in the code?
I want to access [PATH_TO_SOME_OTHER_MODEL] value. So that when the view loads the TEAMS can be filtered via oData V4 call itself
<Select id="TeamSelect" change="onTeamSelect" autoAdjustWidth="true"
items="{
path : '/TEAMS',
parameters : {
$filter : 'Name startswith \'[PATH_TO_SOME_OTHER_MODEL]\''
}
}" >
<core:Item key="{Team_Id}" text="{Name}"/>
</Select>
What is the correct syntax to get the value from another model?
You can't do it directly in the XML. You need to create and add a Filter once both models are loaded.
Here a snippet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Select modelContextChange="onChange" id="mySelect" items="{ path: 'model1>/Names'}">
<core:Item key="{model1>Id}" text="{model1>Name}" />
</Select>
<Button text="Disable Filter" press="removeFilter"></Button>
<Button text="Enable Filter" press="addFilter"></Button>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onAfterRendering: function() {
this.addFilter();
},
addFilter: function() {
var sFilterQuery = this.getView().getModel("model2").getProperty("/filterQuery");
var oFilter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.StartsWith, sFilterQuery);
this.getView().byId("mySelect").getBinding("items").filter(oFilter);
},
removeFilter: function() {
this.getView().byId("mySelect").getBinding("items").filter();
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create some dummy JSON data
var data1 = {
Names: [{
"Id": 1,
"Name": "John",
},
{
"Id": 1,
"Name": "Mark",
},
{
"Id": 1,
"Name": "Liz",
},
{
"Id": 1,
"Name": "Jane",
}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(data1);
//create a second model
var data2 = {
filterQuery: "J"
};
var oJSONModel2 = new sap.ui.model.json.JSONModel();
oJSONModel2.setData(data2);
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
myView.setModel(oJSONModel, "model1");
myView.setModel(oJSONModel2, "model2");
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
There is an example tree in the dojo campus with hyperlinks. They are not clickable. Does anyone have a dojo implementation with clickable links? Have you been able to determine which node/link was clicked? I am looking for sample code that does this.
Here is the sample code from dojo campus. How do I make these links clickable and how do I implement node selection from click of image?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
var rawdata = [{
label: 'Something <b>important</b>',
id: '1',
children: [{
label: 'Life',
id: '1.1'
},
{
label: 'Liberty',
id: '1.2'
}]
},
{
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
},
{
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
},
{
id: '2.3',
label: 'my blog'
}]
}];
function prepare() {
var store = new dojo.data.ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store
});
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function(
/*Object*/
args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
}
},
"treeOne");
}
dojo.addOnLoad(prepare);
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="treeOne">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
You can do a connect to the onClick event on the Tree. When creating your Tree, add an extra onClick parameter to your constructor, pointing to a function with the following signature:
function myOnClickHandler(item, tree, evt){
//item is the node's DataStore item
//I forgot if tree is the whole tree or just the currtent node
//evt is the usual event object, with things like mouse position, etc...
console.log('clicked a tree');
}
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function( /*Object*/ args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
},
onClick: myOnclickHandler // THIS LINE //
},
"treeOne");