I am trying to implement SAPUI5 splitter button/control that accepts one Label and one button like Linked in. Like linked in when you add your skills, text display along with delete button. If you want to delete the text then simple click on delete button, it will delete (this is what happens in linked in).
I am also want to implement same thing using SAP splitter control but i am facing some layout issue. I have tried a lot to fix this issue but no luck.
Here is my code
In code there three splitters in total. Main splitter called oSplitterH that saves 0.....n sub-sublitters in its addFirstPaneContent.
The problem is it always display split button in vertical alignment rather than horizontal like linked in. I also changed the layout into Horizontal but still displaying in vertical alignment.
Any suggestion?
var splitterLabel = new Label({
text : 'Splitter ',
width: '80px'
});
var oSplitterH = new sap.ui.commons.Splitter("splitterH");
oSplitterH.setSplitterOrientation(sap.ui.commons.Orientation.Horizontal);
oSplitterH.setSplitterPosition("200%%");
oSplitterH.setMinSizeFirstPane("20%");
oSplitterH.setMinSizeSecondPane("30%");
oSplitterH.setWidth("200%");
//adding Labels to both panes
var oSplitter2 = new sap.ui.commons.Splitter("splitterH12");
oSplitter2.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter2.setSplitterPosition("10%");
oSplitter2.setMinSizeFirstPane("10%");
oSplitter2.setMinSizeSecondPane("10%");
oSplitter2.setWidth("20%");
var oLabel2 = new sap.ui.commons.Label({text: "Part1"});
oSplitter2.addFirstPaneContent(oLabel2);
var oLabel2 = new sap.ui.commons.Label({text: "Part2"});
oSplitter2.addFirstPaneContent(oLabel2);
var oSplitter3 = new sap.ui.commons.Splitter("splitterH13");
oSplitter3.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter3.setSplitterPosition("10%");
oSplitter3.setMinSizeFirstPane("10%");
oSplitter3.setMinSizeSecondPane("10%");
oSplitter3.setWidth("20%");
var oLabe123 = new sap.ui.commons.Label({text: "Part3"});
oSplitter3.addFirstPaneContent(oLabe123);
var oLabe1234 = new sap.ui.commons.Label({text: "Part4"});
oSplitter3.addFirstPaneContent(oLabe1234);
oSplitterH.addFirstPaneContent(oSplitter2);
oSplitterH.addFirstPaneContent(oSplitter3);
createProfileMatrix.createRow(splitterLabel, oSplitterH, null, null);
The following code may help you.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="main.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("sapui5samples");
var view = sap.ui.view({id:"idlinkedIn-label1", viewName:"sapui5samples.linkedIn-label", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="list"></div>
</body>
</html>
main.css
.tech-area{
border:1px solid gray;
border-radius: 5px;
width:500px;
height:300px;
left:0;
top:50;
position:relative;
overflow:scroll;
}
SAPUI5 view file (didn't used controller file)
var oLayout;
sap.ui.jsview("sapui5samples.linkedIn-label", {
getControllerName : function() {
return "sapui5samples.linkedIn-label";
},
createContent : function(oController) {
// create a simple SearchField with suggestion list (list expander
// visible)
var oSearch = new sap.ui.commons.SearchField("suggestSearch1", {
enableListSuggest : true,
startSuggestion : 1,
search : function(oEvent) {
var techName = oEvent.getParameter("query");
addTechnology(techName);
},
suggest : doSuggest
});
// Button for adding the technology if it is not listed in the available
// technologies
var oButton = new sap.ui.commons.Button({
text : "Add",
tooltip : "Add Technology",
press : function() {
var tech = sap.ui.getCore().byId("suggestSearch1").getValue();
addTechnology(tech);
}
});
// create a simple horizontal layout
var oLayout = new sap.ui.commons.layout.HorizontalLayout({
content : [ oSearch, oButton ]
});
// attach it to some element in the page
oLayout.placeAt("content");
oLayout = new sap.ui.commons.layout.HorizontalLayout("target");
oLayout.addStyleClass("tech-area");
// attach it to some element in the page
oLayout.placeAt("list");
}
});
// Help function to handle the suggest events of the search field
var doSuggest = function(oEvent) {
var sVal = oEvent.getParameter("value");
var aSuggestions = filterTechnologies(sVal); // Find the technologies
var oSearchControl = sap.ui.getCore().byId(oEvent.getParameter("id"));
oSearchControl.suggest(sVal, aSuggestions); // Set the found suggestions on
// the search control
};
var technologies = [ "Java", ".Net", "PHP", "SAPUI5", "JQuery", "HTML5", "" ];
technologies.sort();
jQuery.sap.require("jquery.sap.strings"); // Load the plugin to use
// 'jQuery.sap.startsWithIgnoreCase'
// Help function to filter the technologies according to the given prefix
var filterTechnologies = function(sPrefix) {
var aResult = [];
for (var i = 0; i < technologies.length; i++) {
if (!sPrefix || sPrefix.length == 0
|| jQuery.sap.startsWithIgnoreCase(technologies[i], sPrefix)) {
aResult.push(technologies[i]);
}
}
return aResult;
};
var count = 0;
var arr = [];
// function for add the item to horizontal layout
var addTechnology = function(techName) {
var elementIndex = arr.indexOf(techName);
// conditional statement for adding the tech to the list
if (elementIndex === -1) {
count++;
// create a horizontal Splitter
var oSplitterV = new sap.ui.commons.Splitter({
width : "120px",
height : "30px",
showScrollBars : false,
splitterBarVisible : false
});
oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
oSplitterV.setSplitterPosition("60%");
oSplitterV.setMinSizeFirstPane("60%");
oSplitterV.setMinSizeSecondPane("40%");
// label with dynamic Id
var oLabel1 = new sap.ui.commons.Label("tCount" + count, {
text : techName,
tooltip : techName
});
oSplitterV.addFirstPaneContent(oLabel1);
var oLabel2 = new sap.ui.commons.Button({
icon : "img/delete.png",
press : function() {
removeElement(techName);
oSplitterV.destroy();
}
});
oSplitterV.addSecondPaneContent(oLabel2);
sap.ui.getCore().byId("target").addContent(oSplitterV);
// Adding the tech to the parent array
arr.push(techName);
// Emptying the search box
sap.ui.getCore().byId("suggestSearch1").setValue("");
} else {
sap.ui.commons.MessageBox.alert(techName
+ " is already added to the list");
}
}
// function for removing removed element from parent array
var removeElement = function(addedTech) {
// Find and remove item from an array
var i = arr.indexOf(addedTech);
if (i != -1) {
arr.splice(i, 1);
}
}
Please make a note that I concentrated more on functionality rather than look and feel
Thanks,
prodeveloper
Related
I am trying to implement drag and drop on Vuetify Treeview and data table. It seems like it is not supported fully but a workaround is described in this thread. The workaround is however not complete. Perhaps the community would benefit if someone created a codepen or similar on this?
What confuses me is that the component DragDropSlot.vue is created but "drag-drop-slot" is used in the code. Also there is a "_.cloneDeep(this.tree)" call where _ is not defined. I assume it should be replaced by something. When I comment that out drag and drop does still not work. Probably missed something more like defining data. Not sure of correct data types. It seems to be based on react which I have not worked with. Have just started to learn vue and vuetify.
I'm open for any suggestion for how to solve this.
All the best
I use V-Treeview with Vue.Draggable (https://github.com/SortableJS/Vue.Draggable).
I use direct link.
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.8.4/Sortable.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0 vuedraggable.umd.min.js"/>
<v-treeview
:active.sync="active"
:items="users"
:search="search"
item-key="Id"
item-text="UserName"
item-children="Children"
:open.sync="open"
activatable
color="warning"
dense
transition
return-object
>
<template v-slot:label="{ item }">
<draggable :list="users" group="node" :id="item.Id" :data-parent="item.ParentId" #start="checkStart" #end="checkEnd" >
<label>
<i class="fas fa-user mr-3" />
<span id="item.id" >{{item.UserName}}</span>
</label>
</draggable>
Also I add ParentId property to item tree model:
{
Id:1,
UserName: "John Doe",
ParentId: null,
Children:[{Id:2, ParentId: 1,...}]
}
Then I use start and end events where I search parent start node from I drag the item and parent end node where I drop the item. When parent is null the item is a root.
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {
vuedraggable
},
data() {
return {
active: [],
open: [],
users: [],
selectedItems: [],
}
},
mounted: function () {
this.fetchUsers();
},
methods: {
findTreeItem: function (items, id) {
if (!items) {
return;
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Test current object
if (item.Id === id) {
return item;
}
// Test children recursively
const child = this.findTreeItem(item.Children, id);
if (child) {
return child;
}
}
},
checkStart: function (evt) {
var self = this;
self.active = [];
self.active.push(self.findTreeItem(self.users, evt.from.id))
},
checkEnd: function (evt) {
var self = this;
var itemSelected = self.active[0];
var fromParent = itemSelected.ParentId ? self.findTreeItem(self.users, itemSelected.ParentId) : null;
var toParent = self.findTreeItem(self.users, evt.to.id);
var objFrom = fromParent ? fromParent.Children : self.users;
objFrom.splice(objFrom.indexOf(itemSelected), 1);
if (toParent.Id === itemSelected.Id) {
itemSelected.ParentId = null;
self.users.push(itemSelected);
}
else {
itemSelected.ParentId = toParent.Id;
toParent.Children.push(itemSelected);
}
self.saveUser(itemSelected);
// self.active = [];
return false;
},
fetchUsers: function () {
//load from api
},
saveUser: function (user) {
//save
},
},
computed: {
selected() {
if (!this.active.length) return undefined
return this.active[0];
},
}
})
Hope I help you.
IngD.
After some additional work I ended up with implementing Drag and Drop on top of vuetify tree view and data table using this library:
https://www.vuetoolbox.com/projects/vue-drag-drop
At first I looked at draggable and similar but realized it was always based on that you move an element from position A to position B. I needed more control. For example I wanted the element to disappear when dropping on some drop zones.
found this component.
https://vuejsexamples.com/vuetify-draggable-v-treeview-component/
I didn't try it myself (because it has too few options), but it looks working well in demo.
Anyways, just to try
I Need to add a different css class to each FeedListItem.
I need it to added to each class separately & dynamically (onPost method in JS file) since i'm adding different class according to the feed input entered.
I'v checked the sapui5 guide line but i see no property of FeedListItem related to styling&CSS.
Wanted result:
<ul> //FeedListItems
<li class="<MY_CUTOM_CLASS_1>"></li>
<li class="<MY_CUTOM_CLASS_2>"></li>
<li class="<MY_CUTOM_CLASS_3>"></li>
</ul>
What is the best way to do it?
How can i do that?
XML file:
<FeedInput
post="onPost"
icon="test-resources/sap/m/images/dronning_victoria.jpg"
class="sapUiSmallMarginTopBottom" />
<List
showSeparators="Inner"
items="{/EntryCollection}" >
<FeedListItem
sender="{Author}"
icon="{AuthorPicUrl}"
senderPress="onSenderPress"
iconPress="onIconPress"
iconDensityAware="false"
info="{Type}"
timestamp="{Date}"
text="{Text}" />
</List>
JS file:
sap.ui.define([
'jquery.sap.global',
'sap/m/MessageToast',
'sap/ui/core/format/DateFormat',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, DateFormat, Controller, JSONModel) {
"use strict";
var CController = Controller.extend("sap.m.sample.Feed.C", {
onInit: function () {
// set mock model
var sPath = jQuery.sap.getModulePath("sap.m.sample.Feed", "/feed.json")
var oModel = new JSONModel(sPath);
this.getView().setModel(oModel);
},
onPost: function (oEvent) {
var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
var oDate = new Date();
var sDate = oFormat.format(oDate);
// create new entry
var sValue = oEvent.getParameter("value");
var oEntry = {
Author : "Alexandrina Victoria",
AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
Type : "Reply",
Date : "" + sDate,
Text : sValue
};
// update model
var oModel = this.getView().getModel();
var aEntries = oModel.getData().EntryCollection;
aEntries.unshift(oEntry);
oModel.setData({
EntryCollection : aEntries
});
} });
return CController;
});
edit: up to version 1.48 it's not possbile to set a binding to the property "class". however "addStyleClass" and this work around work out.
i'm afk and therefore can't validate the following. but this should solve it. in the xml view is the property "class" to add to the feedlistitem. in the js controller the property to the object "oEntry". and the model needs to handle the class attribute as well.
xml view:
<FeedInput
post="onPost"
icon="test-resources/sap/m/images/dronning_victoria.jpg"
class="sapUiSmallMarginTopBottom" />
<List
showSeparators="Inner"
items="{/EntryCollection}">
<FeedListItem
class="{Class}"
sender="{Author}"
icon="{AuthorPicUrl}"
senderPress="onSenderPress"
iconPress="onIconPress"
iconDensityAware="false"
info="{Type}"
timestamp="{Date}"
text="{Text}" />
</List>
controller js:
onPost: function (oEvent) {
var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
var oDate = new Date();
var sDate = oFormat.format(oDate);
// create new entry
var sValue = oEvent.getParameter("value");
var oEntry = {
Class: "CSSClass",
Author : "Alexandrina Victoria",
AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
Type : "Reply",
Date : "" + sDate,
Text : sValue
};
// update model
var oModel = this.getView().getModel();
var aEntries = oModel.getData().EntryCollection;
aEntries.unshift(oEntry);
oModel.setData({
EntryCollection : aEntries
});
}
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editorUrdu"></textarea>
<script>
CKEDITOR.plugins.addExternal( 'easykeymap', '/ckeditor/plugins/easykeymap', 'plugin.js' );
CKEDITOR.replace( 'editorUrdu',{
extraPlugins: 'easykeymap',
contentsLangDirection: 'rtl'
});
</script>
</body>
</html>
/**
* This work is mine, and yours. You can modify it as you wish.
* #Author: Roni Saha<roni.cse#gmail.com>
*
* This source file is subject to the MIT license that is bundled
* with this source code in the file LICENSE.
*/
CKEDITOR.plugins.add('easykeymap',
{
requires : ['wysiwygarea'],
init: function (editor) {
//var keyMaps = CKEDITOR.tools.extend({}, editor.config.easykeymaps || {}, true);
//Not using keymap specification from config variables, but using internally defined ones from param below
function isRegisteredKeystroke(code) {
if(typeof editor.keystrokeHandler.keystrokes[code] != 'undefined') {
console.warn("the keystroke : " + code + " is being attached to another event")
return true;
}
return false;
}
var sm1 = []; var en1 = [];
sm1[192]="؏"; en1[192]="~";
sm1[49]="۱"; en1[49]="1";
sm1[50]="۲"; en1[50]="2";
sm1[51]="۳"; en1[51]="3";
sm1[52]="۴"; en1[52]="4";
sm1[53]="۵"; en1[53]="5";
sm1[54]="۶"; en1[54]="6";
sm1[55]="۷"; en1[55]="7";
sm1[56]="۸"; en1[56]="8";
sm1[57]="۹"; en1[57]="9";
sm1[48]="۰"; en1[48]="0";
sm1[189]="-"; en1[189]="-";
sm1[187]="="; en1[187]="=";
//sm1[8]=""; en1[8]="";//BACKSPACE
var sm2 = []; var en2 = [];
sm2[9]=""; en2[9]="";//TAB
sm2[81]="ق"; en2[81]="Q";
sm2[87]="و"; en2[87]="W";
sm2[69]="ع"; en2[69]="E";
sm2[82]="ر"; en2[82]="R";
sm2[84]="ت"; en2[84]="T";
sm2[89]="ے"; en2[89]="Y";
sm2[85]="ء"; en2[85]="U";
sm2[73]="ی"; en2[73]="I";
sm2[79]="ہ"; en2[79]="O";
sm2[80]="پ"; en2[80]="P";
sm2[219]="'"; en2[219]="{";
sm2[221]="ﷲ"; en2[221]="}";
sm2[220]="÷"; en2[220]="\\";
var sm3 = []; var en3 = [];
//sm3[20]=""; en3[20]="";//CAPSLOCK
sm3[65]="ا"; en3[65]="A";
sm3[83]="س"; en3[83]="S";
sm3[68]="د"; en3[68]="D";
sm3[70]="ف"; en3[70]="F";
sm3[71]="گ"; en3[71]="G";
sm3[72]="ح"; en3[72]="H";
sm3[74]="ج"; en3[74]="J";
sm3[74]="ک"; en3[75]="K";
sm3[76]="ل"; en3[76]="L";
sm3[186]="؛"; en3[186]=":";
sm3[222]=","; en3[222]="\"";
sm3[13]=""; en3[13]="";//ENTER
var sm4 = []; var en4 = [];
//sm4[16]=""; en4[16]="";//SHIFT
sm4[90]="ز"; en4[90]="Z";
sm4[88]="ش"; en4[88]="X";
sm4[67]="چ"; en4[67]="C";
sm4[86]="ط"; en4[86]="V";
sm4[66]="ب"; en4[66]="B";
sm4[78]="ن"; en4[78]="N";
sm4[77]="م"; en4[77]="M";
sm4[188]="،"; en4[188]="<";
sm4[190]="۔"; en4[190]=">";
sm4[191]="/"; en4[191]="?";
sm4[16]=""; en4[16]="";//SHIFT
var keyBoard = {};
keyBoard.Row1 = { "sm" : sm1, "en" : en1 };
keyBoard.Row2 = { "sm" : sm2, "en" : en2 };
keyBoard.Row3 = { "sm" : sm3, "en" : en3 };
keyBoard.Row4 = { "sm" : sm4, "en" : en4 };
function getMappedCharacter(code) {
console.info(code);
if (typeof keyBoard.Row1.sm[code] != 'undefined')
return keyBoard.Row1.sm[code]
else if (typeof keyBoard.Row2.sm[code] != 'undefined')
return keyBoard.Row2.sm[code]
else if (typeof keyBoard.Row3.sm[code] != 'undefined')
return keyBoard.Row3.sm[code]
else if (typeof keyBoard.Row4.sm[code] != 'undefined')
return keyBoard.Row4.sm[code]
else
return false;
}
editor.on( 'key', function( event ) {
var t = event.target;
var mappedCode = getMappedCharacter(event.data.keyCode);
if (mappedCode !== false && !isRegisteredKeystroke(event.data.keyCode)) {
event.cancel();
if(typeof mappedCode == 'function') {
return mappedCode.call(editor, editor);
}
editor.insertText(mappedCode);
}
} );
}
});
I'm using ckeditor for allowing my users to input Urdu text. Like Arabic, Urdu is cursive, and uses distinct ligatures when joined.
I'm using the
editor.on( 'key', function( event ))
event to intercept the
event.data.keyCode
and replace it using
editor.insertText()
function.
So, e.g. if the user types L and A, I replace it with the Urdu
ا (U+0627)
and
ل (U+0644).
Now, after being typed, they both appear as distinct characters, separate from each other. I can press space, or enter, and they both remain as they are. But I would like them to be replaced with their proper equivalent ligature ﻻ which is FEFB in this unicode chart
I see that ckeditor automatically correct this if I switch to Source view. There, inside the <p> block, it shows the separate, disjointed letter's already replace with proper cursive ligature. And it keeps it that way when I switch back from Source view. But whatever is causing this to happen, how can I trigger that to happen while typing?
Attaching images also.
After typing
After going to source view
After returning from source view
When ever you type L and A , editor.insertText() is just append it as two separate stings, instead of combining into one.
<p>"ل"
"ا"
<br>
</p>
that why its not producing desired output.
Added these two line
var $pTag = editor.getSelection().getRanges()[0].startContainer.$; // accessing the p tag
$pTag.innerText = $pTag.innerText+mappedCode; // modifing the inner text
replacing
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
will output as "لا"
above fix has some issues to deal with like linebeak(new line)
Updated
replace the below snippet
var $pTag = editor.getSelection().getRanges()[0].startContainer.$;
var innerText =$pTag.innerText; // accessing the p tag data
$pTag.innerText = ""; // removing the existing data
editor.insertHtml(innerText+mappedCode); // concat with new string
with
editor.insertText(mappedCode); // in editor.on( 'key', function( event )
Example: codepen
I am working with sap.m.table. I have requirement to apply or change the background color for some of the rows based on the data in one of the column in those rows in table.
I am using the following code but it is not working
created the CSSfile: test.css
<style type="text/css">
.Total {
background-color: LightSteelBlue !important;
}
</style>
The above CSS file declare in Component.js like the following way ( correct me if this not right way to make the css file available to access in whole ui5 project.
"resources": {
"css": [
{
"uri": "css/test.css"
}
]
}
In Controller.i have defined the following method to apply the style sheet for the particular rows alone in table.
rowColours: function() {
var oController = this;
console.log("rowColours() --> Start ");
var oTable = this.oView.byId("tblAllocation");
var rows = oTable.getItems().length; //number of rows on tab
//start index
var row;
var cells = [];
var oCell = null;
for (i = 0; i < oTable.getItems().length; i++) {
//console.log("rowColours() :: row--> "+row);
//actualRow = oTable.getItems(); //content
if (i == 0) {
row = oTable.getItems()[i];
cells = cells.concat(oTable.getItems()[i].getCells());
//getting the cell id
oCell = cells[2];
oCell = oCell.toString().substring(29, oCell.length);
otemp = this.getView().byId(oCell).getText();
if (otemp.toString() == "TotalAllocation") {
oTable.getItems()[i].$().taggleClass("grandTotal");
}
}
}
console.log("rowColours() --> end ");
}
In the above method. I am checking the cell2 data ( in table cell 2 i was using the Textview control to display the data. when call this method to get the data in that cell. I am getting the following error.
otemp = this.getView().byId(oCell).getText());
error:
Uncaught TypeError: Cannot read property 'getText' of undefined
is the following code is possible to change the row bg color.
if (otemp.toString() == "TotalAllocation") {
oTable.getItems()[i].$().taggleClass("Total");
}
Please let me know how to change the bg color or applying the style for the perticular row in sap.m.table
Thanks
The approach your following is not right. Better you can use a formatter.
Example:
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
header: new sap.m.Label({
text: "Name"
}),
}),
],
items: {
path: 'modelList>/',
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
//formatter to the text property on sap.m.Text control.
text: {
parts: [{
"path": "modelList>Name"
}],
formatter: function(name) {
if (name == "TotalAllocation") {
// use this.getParent().. until u get the row. like this below and add class.
this.getParent().getParent().addStyleClass("Total");
}
}
}
})
]
})
}
});
The values are loaded from the data source but on ui no text is shown.
var r0c1 = new sap.ui.commons.DropdownBox("r0c1");
var oItemTemplate1 = new sap.ui.core.ListItem();
property binding is done:
oItemTemplate1.bindProperty("text", "{ZtmDockid}");
bind the items:
r0c1.bindItems("/d/results", oItemTemplate1);
Data is properly coming, but on UI its not showing the text.
there are two ways to bind data to a control.
First way using bindProperty:
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "value");
(notice: usage of { })
or binding the values when creating the control:
var oItemTemplate1 = new sap.ui.core.ListItem({
text: "{value}"
});
(you need to use { } to indicate dynamic values)
Herrlock is correct, but I wanted to draw out the subtlety - explicit binding with the bind* functions requires no curly braces ... these are only needed for embedded, or implicit binding.
Here's your code with the braces removed from your bindProperty's second parameter, as a runnable snippet.
// Code from question
var r0c1 = new sap.ui.commons.DropdownBox("r0c1");
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "ZtmDockid");
r0c1.bindItems("/d/results", oItemTemplate1);
// Extra code
r0c1
.setModel(new sap.ui.model.json.JSONModel({
d : {
results : [
{ ZtmDockid : "1" },
{ ZtmDockid : "2" },
{ ZtmDockid : "3" }
]
}
}))
.placeAt('content');
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal"></script>
<div id="content"></div>