I want to display dojo select inside a dijit/TooltipDialog. The items of the dojo select are dynamically loaded. So I want to add this select programmaticaly. The content of TooltipDialog can be an object but select needs a domNode to be held. The code is :
<head>
<script>
require([
"dojo/parser",
"dijit/form/Select",
"dijit/TooltipDialog",
"dojo/on",
"dojo/dom",
"dojo/_base/lang",
"dijit/popup",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){
parser.parse();
var t={mySel:null};
var store = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store });
t.mySel = new Select({
store: os
}, "ttt");
var myTooltipDialog = new TooltipDialog({
content: t,
onMouseLeave: function(){
popup.close(myTooltipDialog);
}
});
on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){
popup.open({
popup: myTooltipDialog,
orient: ["above-centered","above","below"],
around:dom.byId('mmm')
});
t.mySel.startup();
}));
t.mySel.on("change", function(){
console.log("my value: ", this.get("value"))
})
})
</script>
</head>
<body class="claro">
<div id="ttt" > tttt</div><br>
<div id="mmm" > tttt</div><br>
</body>
You are assignign an object t the tooltip content not a domenode
so try to make these change :
var myTooltipDialog = new TooltipDialog({
content: t.mySel.domNode,
onMouseLeave: function() {
popup.close(myTooltipDialog);
}
}
Related
I am trying to find the binding context of the selectedItem. Even after passing modelName to bindingContext, I get undefined. When I do oEvent.getSourcer() and see the oBindingContexts it is blank. Also the oBindingInfos has ocontext undefined. Though it has sPath. The correct sPath. How can I get the array index in this scenario?
oNewField = new sap.m.Select({
enabled: "{order>/" + Type+ "/" + i + "/fieldEnabled}",
forceSelection: false,
width: "90%",
// Add dropdoen Items
items: [
new sap.ui.core.ListItem({
key: " ",
text: " "
}),
new sap.ui.core.ListItem({
key: "{order>/" + Type+ "/" + i + "/DefaultValue}",
text: "{order>/" + Type+ "/" + i + "/DefaultValue}"
})
],
change : function(evt) {
that.onChange(evt);
},
});
var selectedKey = this.getView().getModel('order').getProperty(
"/" + Type+ "/" + i + "/DefaultValue");
oNewField.setSelectedKey(selectedKey);
**On Change Function **
onChange: function(oEvent) {
debugger;
var key = oEvent.getSource().getSelectedItem().getKey();
//need to get BindingContext here.
var oContext =
oEvent.getSource().getSelectedItem().getBindingContext('order')
//gives undefined
},
You are not doing any aggregation binding at all. Therefore there is no context to retrieve. You are hardcoding 2 items in your items aggregation.
Check this snippet. It shows you multinple things you can do. I hope onw of them is what your are looking for.
JSBIN: https://jsbin.com/kumudufaje/edit?html,output
<!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 -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Panel id="myPanel">
</Panel>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(oEvent){
//aggregation binding
var oSelect = new sap.m.Select({
items: {
path: 'order>/options',
template: new sap.ui.core.Item({
key: {
path: 'order>key'
},
text: {
path: 'order>value'
}
})
},
change: this.onSelection1Change.bind(this)
});
this.getView().byId("myPanel").addContent(oSelect);
for(var i=0; i<3; i++){
//hardcoded items
var oSelect2 = new sap.m.Select({
items: [
new sap.ui.core.ListItem({
key: '',
text: ''
}),
new sap.ui.core.ListItem({
key: {path:'order>/Type/' + i + '/DefaultValue'},
text: {path:'order>/Type/' + i + '/DefaultValue'}
}),
],
change: this.onSelection2Change.bind(this)
});
this.getView().byId("myPanel").addContent(oSelect2);
}
},
onSelection1Change(oEvent){
var oContext = oEvent.getSource().getSelectedItem().getBindingContext('order')
console.log(oContext); //This prints the binded context
var oModel = oContext.getModel();
console.log(oModel); //This prints the whole model
var oSelectedEntry = oModel.getProperty(oContext.getPath());
console.log(oSelectedEntry); //This prints the data
},
onSelection2Change(oEvent){
var sKey = oEvent.getSource().getSelectedItem().getKey();
console.log(sKey); //This prints the selected item key
var sValue = oEvent.getSource().getSelectedItem().getKey();
console.log(sValue); //This prints the selected item value
var oKeyBinding = oEvent.getSource().getSelectedItem().getBinding('key')
console.log(oKeyBinding); //This prints the binding of the key property, if any
if(oKeyBinding){
var oModel = oKeyBinding.getModel();
console.log(oModel); // This prints the model binded key property, if any
}
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create some dummy JSON data
var data = {
options: [{
key: '1',
value: 'option 1'
},{
key: '2',
value: 'option 2'
},{
key: '3',
value: 'option 3'
}],
Type:[
{DefaultValue: 'Default Value1'},
{DefaultValue: 'Default Value2'},
{DefaultValue: 'Default Value3'}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(data);
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
myView.setModel(oJSONModel, "order");
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
oEvent.getSource().getSelectedItem().getBindingContext()
You've got it completely right. Note that oEvent.getSource() points to the sap.m.Select. You need another getSelectedItem() to go to the selected sap.ui.core.Item.
Is there a way to use dojo/dom-construct to create an image element with a link? I am looking for equivalent of the following HTML code:
<a href="test.html" target="_blank">
<img src="/pix/byron_bay_225x169.jpg" >
</a>
Yes it is possible!
Just do it like this:
var anchor= domConstruct.create('a', {
'href': 'test.html',
'target': '_blank'
});
var image= domConstruct.create('img', {
'src': '/pix/byron_bay_225x169.jpg'
});
domConstruct.place(image, anchor);
HTML:
<div data-dojo-attach-point="container"></div>
JS:
var img = domConstruct.create("img", {
src: "/path/image.png",
style: "height:16px;width:16px;",
title: "Image",
onclick: function(){
// onclick event
},
onmouseenter: function(){
// on mouse over event
},
onmouseout: function(){
// on mouse out event
}
);
domConstruct.place(img, this.container);
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>OData Date Table Multiple Sorters</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var airsideTableDataOriginal=
//{"genericTableModel":
[
{"columnId":"col1","WS":"WS 1","Status":0},
{"columnId":"col 2","WS":"WS 2","Status":1},
{"columnId":"col3","WS":"WS 3","Status":2},
{"columnId":"col4","WS":"WS 4","Status":3},
{"columnId":"col5","WS":"WS 5","Status":4},
];
var aColumnData = [{
columnId: "col1"
}, {
columnId: "col 2"
}, {
columnId: "col3"
}, {
columnId: "col4"
}, {
columnId: "col5"
}];
var aData = [{
"col 2": "WS 2",
col3: "WS 3",
col4: "WS 4",
col5: "WS 5"
}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
columns: aColumnData,
rows: aData
});
var oTable = new sap.ui.table.Table({
title: "Table column and data binding",
showNoData : true,
columnHeaderHeight : 10,
visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(index, context) {
var sColumnId = context.getObject().columnId;
var tempJson=airsideTableDataOriginal;
return new sap.ui.table.Column({
id : sColumnId,
label: sColumnId,
template: new sap.ui.commons.Button({
text : {
path: sColumnId,
formatter: function(value){
if(value!=null){
var specificJson= $.grep(tempJson, function( n, i ) {
return n.columnId === sColumnId.toString() && n.WS === value.toString();
});
if(specificJson[0].Status == 1){
this.setIcon("sap-icon://accept");
this.setStyle(sap.ui.commons.ButtonStyle.Accept);
}
}
if(value === "" || value == undefined){
this.setVisible(false);
}
return value ;
}
},
}),
sortProperty: sColumnId,
filterProperty: sColumnId
});
});
oTable.bindRows("/rows");
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="body" role="application">
<div id="content"></div>
</body>
</html>
As per the above code there is space between col 2 which gives error "col 2" is not a valid ID.. Here is the bin. But when I replace col 2 with col2 it works fine. But in real time I get spaces in data so how to fix it so that it would work with spaces also.
I would guess, that the error comes from the invalid ID of the Column object: id : sColumnId, (the first line after return new sap.ui.table.Column({) and not from the binding.
Like Mark said in his comment Element IDs cannot contain spaces. But the ID is not visible to the User and you can just replace the spaces of the Column.id while assigning or you can skip the id assignment at all to get automaticaly generated ids.
A client who demands spaces in their ID's I would 1) definitely steer clear from, and if that's not possible, 2) educate them that their "requirement" is utter [...]
Nevertheless, I would simply replace the spaces with underscores (it's really simple Javascript):
airsideTableDataOriginal.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aColumnData.forEach(function(obj) {
obj.columnId = obj.columnId.replace(/ /g,"_");
});
aData.forEach(function(obj) {
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (~property.indexOf(" ")) {
var newProperty = property.replace(/ /g,"_");
obj[newProperty] = obj[property];
delete obj[property];
}
}
}
});
I want to write a custom transition for sap.m.Page transitions.
How Do I start off with this?
Exactly I want to know regarding any documentation, How to create a custom transition and register the same so that it can be used in an SAP UI5 Application.
Thanks in Advance
A Sample implementation of custom transition when App navigates. Click on the list item to find the transition. There is no documentaion on it. This is just a hack.
jQuery.sap.require('sap.m.NavContainer');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-effect')
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-effects-core');
jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-effects-clip');
sap.m.NavContainer.transitions["custom"] = {
to: function(oFromPage, oToPage, fCallback) {
window.setTimeout(function(){
oFromPage.$().toggle("clip");
oToPage.$().toggle("clip");
fCallback();
},600);
},
back: function(oFromPage, oToPage, fCallback) {
window.setTimeout(function(){
debugger;
oFromPage.$().toggle("clip");
oToPage.$().toggle("clip");
fCallback();
},600);
}
};/* code for transition */
var data = {
names: [
{firstName: "Peter", lastName: "Mueller"},
{firstName: "Petra", lastName: "Maier"},
{firstName: "Thomas", lastName: "Smith"},
{firstName: "John", lastName: "Williams"},
{firstName: "Maria", lastName: "Jones"}
]
};
// create a Model with this data
var model = new sap.ui.model.json.JSONModel();
model.setData(data);
var list = new sap.m.List({
headerText:"Names"
});
list.bindItems({
path : "/names",
sorter : new sap.ui.model.Sorter("lastName"),
template : new sap.m.StandardListItem({
title: "{lastName}",
description: "{firstName}",
type: sap.m.ListType.Navigation,
press:function(evt){
var oBindingContext = evt.getSource().getBindingContext();
page2.setBindingContext(oBindingContext);
app.to("page2","custom");
}
})
});
// create the page holding the List
var page1 = new sap.m.Page("page1",{
title: "List Page",
content : list
});
// create the detail page
var page2 = new sap.m.Page("page2", {
title: "Detail Page",
showNavButton: true,
navButtonPress: function(){
app.back();
},
content : [
new sap.ui.layout.form.SimpleForm({
title: "Details for {firstName} {lastName}",
content: [
new sap.m.Label({text: "First Name"}),
new sap.m.Text({text: "{firstName}"}),
new sap.m.Label({text: "Last Name"}),
new sap.m.Text({text: "{lastName}"})
]
})
]
});
// create a mobile App holding the pages and place the App into the HTML document
var app = new sap.m.App({
pages: [page1, page2]
}).placeAt("content");
// set the model to the App; it will be propagated to the children
app.setModel(model);
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<title>Custom jQuery transition</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.layout"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
Deselect and hover funcntions work fina but create/delete/rename don't.
What do is do wrong?
info.json contains 5 nodes marked from 1 to 5.
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jstree\dist\themes\default\style.min.css" />
<script src="jstree\dist\jstree.js"></script>
<script>
$(function() {
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
});
</script>
</head>
<body>
<div id="container" >
<div id="nav_bar">
<button id="create" onclick = "demo_create()">Create</button>
</div>
<div id="test_tree"></div
</div>
<script>
function demo_create() {
$.jstree.reference('#test_tree').hover_node('ajson5');
$.jstree.reference('#test_tree').deselect_node('ajson1');
$.jstree.reference('#test_tree').create_node();
};
</script>
</body>
I used same example from official site but it doesn't work
Thanks for any help.
First, in order for changes to be made to the tree, checkcallback in core config need to be set to true.
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
},
check_callback : true
}
}
You need to at least pass the parent.id to the create_node function.
$.jstree.reference('#test_tree').create_node('ajson1');
You could check the API at the jstree website for the full parameter list.
Demo jsTreeView 3.2.1 version
$("#treeView").jstree({ 'core': {
'check_callback': true,
'themes': {
"variant": "large"
},
'data':
[{"id":"1","parent":"#","text":"Parent Node"}]
}
});
You are missing the single quotation mark for the check_callback, after using that it will work. e.g. 'check_callback': true.
Code to create new Node
var ref_treeview = $("#treeView").jstree(true);
sel = ref_treeview.get_selected();
if (!sel.length) {
return false;
}
sel = sel[0];
sel = ref_treeview.create_node(sel, "childNode", "last", CreateNode,true);
Here CreateNode is my Callback function name
you have to send the selected element.
use the following (this is basically the code of the create button in the demo page http://www.jstree.com/demo/):
var tree = $("#test_tree").jstree(true);
var sel = tree.get_selected();
if (!sel.length)
{
return false;
}
sel = sel[0];
sel = tree.create_node(sel);
if (sel)
{
tree.edit(sel);
}
At the time when you create the jstree instance you just need to configure the
'core' setting as shown bellow:
$(function () {
$('#jstree').jstree({
'core':{check_callback : true}
});
You have to set the type of the newly created node like so:
$('#tree').jstree().create_node('#', {'id': 'blah', 'text': 'new node', 'type': 'folder'}, 'last', function() {
console.log('done');
});
jstree documentation should be improved.
using code from the other answers, I was able to make the following work:
Please note, this actually works. I am using it to create menus for an external ajax API.
function makeNode(menunode, menuname){
var inst = $.jstree.reference("#treemenu"); //get menu instance
var obj = inst.get_node(menunode);
inst.create_node(obj, menuname); //creates nodes. use "#" to make root nodes
inst.open_node(obj); // open the node (unfold)
});
usage:
//create menu instance and allow tree changes
$('#treemenu').jstree({'core' : {'check_callback': true}});
makeNode("#", "main menu"); //makes root node
makeNode("#j1_1", "submenu in main menu"); //makes sub node
this is assuming that you have a div with id="treemenu" thusly
<div id="treemenu"></div>