I'm using Sap.m.SelectDialog to display the value request(F4 help in abap).When i do it with JS view all is good,but when do it with XML view by creating the fragment, binding is not happening with the "items" aggregation.
please let me know what went wrong.
var mydata = { data : [
{
info: "SAP UI5",
name: "Sam",
},
{
info: "SAP UI5",
name: "Ram",
},
{
info: "SAP UI5",
name: "Prem",
}
]};
Js view logic:
var oDialog = new sap.m.SelectDialog({
title: "Select an item",
items: {
path:"/data",
template : new sap.m.StandardListItem({
title: "{name}"
})
}
})
oDialog.open();
}
XML fragment :
<SelectDialog xmlns="sap.m"
id ="id3"
title="Select a product">
<items id="ls3"
path="/data">
<StandardListItem title="{name}">
</StandardListItem>
</items>
.
Reslut of JS view
Result of Xml view
Try XML fragment this way:
<SelectDialog xmlns="sap.m"
id ="id3"
items="{/data}"
title="Select a product">
<items>
<StandardListItem title="{name}"/>
</items>
</SelectDialog>
Related
According to the Use Stable IDs article, it is recommended to use stable IDs for the UI5 elements. At the same time, I've reviewed multiple samples of sap.tnt.NavigationListItem implementation and I've paid attention that in case of sap.tnt.NavigationListItem no id is used but key, e.g.:
<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
I've also tried to assign id to tnt:NavigationListItem and then access it from the oEvent-object via the standard oEvent.getProperty("%MY_ID%") approach but no success.
My questions:
When should I use id and when key for UI5-items in XML-templates?
Is it particular sap.tnt.NavigationListItem case that key is preferred over id or I just missed something important?
Based on your comments, I made a small example.
If your items are hard-coded definitely go for the key in the
XML definition.
If your items come over a model. You can do the same
as everywhere else. Use the data to trigger the right action.
Use the ID if you need to identify the UI element e.g. buttons in a test or if you add User Assistance Help.
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
items: [{
title : "1",
subItems: [
{ keyInData: "1", title : "1-a" },
{ keyInData: "2", title : "1-b" },
{ keyInData: "3", title : "1-c" },
{ keyInData: "4", title : "1-d" }
]
}],
}));
},
onItemSelect: function(oEvent) {
const item = oEvent.getParameter("item")
console.log("key over key binding: " + item.getKey() )
console.log("key over databinding: " + item.getBindingContext().getObject().keyInData )
}
});
sap.ui.xmlview("main", { viewContent: jQuery("#view1").html() } ).placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt">
<tnt:NavigationList
id="navigationList"
width="320px"
selectedKey="subItem3" items="{/items}">
<tnt:NavigationListItem text="{title}" items="{ path:'subItems', templateShareable:false}" icon="sap-icon://employee" >
<tnt:NavigationListItem text="{title} - {keyInData}" key="{keyInData}" select="onItemSelect" />
</tnt:NavigationListItem>
</tnt:NavigationList>
</mvc:View>
</script>
I have a problem to display data in my detail page. I've tried almost everything but its dosnt work. On main page everything looks fine. Routing work (display proper ID on network address).
Details.controller.js :
return Controller.extend("sapProject.controller.Details", {
onInit: function () {
var oTable = this.getView().byId("details");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/Object.json");
oTable.setModel(oModel);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("Details").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Objects(" + oArgs.employeeId + ")",
events : {
dataRequested: function () {
oView.setBusy(true);
},
dataReceived: function () {
oView.setBusy(false);
}
}
});
},
and this is my Details.view.xml:
<Page
id="details"
title="{i18n>EmployeeDetailsOf} {FirstName} {LastName}"
showNavButton="true"
navButtonPress="onBack"
class="sapUiResponsiveContentPadding">
<content>
<Panel
width="auto"
class="sapUiResponsiveMargin sapUiNoContentPadding">
<headerToolbar >
<Toolbar>
<Title text="{i18n>EmployeeIDColon} {EmployeeID}" level="H2"/>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
<content>
<f:SimpleForm>
<f:content>
<Label text="{i18n>FirstName}" />
<Text text="{FirstName}" />
<Label text="{i18n>LastName}" />
</f:content>
</f:SimpleForm>
</content>
</Panel>
</content>
</Page>
I think you are binding an empty model to your detail view because probably the loadData function is not completed when you set the model on the Table.
Try to load your json file in the manifest (best option) or differ the setModel on the _onRouteMatched function (although I don't see any table in your detail view).
EDIT:
You can also use this code after oModel.loadData("model/Object.json");
oModel.attachEventOnce("requestCompleted", function(oEvent) {
// Here your file is fully loaded
});
Firstly I recommend you to bind like this:
var sObjectPath = this.getModel().createKey("Objects", {
ID: oArgs.employeeId
});
this._bindView("/" + sObjectPath);
...
}
_bindView: function (sObjectPath) {
//Todo: Set busy indicator during view binding
this.getView().bindElement({
path: sObjectPath,
parameters: {
},
events: {
change: this._onBindingChange.bind(this),
dataRequested: function () {
}.bind(this),
dataReceived: function () {
}.bind(this)
}
});
},
Secondly check if oArgs.employeeId has a valid value and also if the model is loaded with data, easily set a brekapoint or write console.log(this.getView().getModel().oData).
I try to use the template:if for my XML View.
As an example i have this:
<mvc:View controllerName="Test_Start.controller.View"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
xmlns:temp="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<temp:if test="{= ${Data>Enable1} === 'X'}">
<Text text="Hallo"/>
</temp:if>
</content>
</Page>
</pages>
</App>
</mvc:View>
and my Component.js looks like this:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"Test_Start/model/models",
"sap/ui/model/odata/v2/ODataModel",
"sap/ui/core/util/XMLPreprocessor"
], function(UIComponent, Device, models, ODataModel, XMLPreprocessor) {
"use strict";
return UIComponent.extend("Test_Start.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* #public
* #override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
},
onBeforeRendering: function(){
var oModel = new ODataModel("/sap/opu/odata/SAP/ZPFO_CKPT_ODATA_DYN_SRV/"),
oMetaModel = oModel.getMetaModel(),
sPath = "/DataSet";
oMetaModel.loaded().then(function() {
var oTemplateView = sap.ui.view({
preprocessors: {
xml: {
bindingContexts : {
meta : oMetaModel.getMetaContext(sPath)
},
models: {
meta: oMetaModel
}
}
},
type : sap.ui.core.mvc.ViewType.XML,
viewName: "Test_Start.view.View"
});
oTemplateView.setModel(oModel);
oTemplateView.bindElement(sPath);
});
}
});
});
Now, when I try to run my App, i get the following error:
XMLTemplateProcessor-dbg.js:53 Uncaught Error: failed to load
'http://schemas/sap/com/sapui5/extension/sap/ui/core/template/1/if.js'
from
../../resources/http://schemas/sap/com/sapui5/extension/sap/ui/core/template/1/if.js:
404 - Not Found
I did some research and found out, that i probably load the preprocessor at the wrong time, but I seem to can't find the right place to load it.
I use this SAPUI5 SDK example for my work.
Edit
I found a solution for my problem:
instead of an "onBeforeRendering" function, now i'm using a "createContent" function. Also i deleted the "init" completly.
In adition to that, I implemented an oViewContainer, like it is used in the sample.
Also controller name "Test_Start.Component" doesn't match the controllerName attribute in the view "Test_Start.controller.View".
I have a xml-fragment. I set items as "{path: '/idFamiglia' }"
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<SelectDialog
id="idSelectDialog"
noDataText="Nessun dato"
title="Suggerimento"
search="handleLocalSearch"
liveChange="handleLocalSearch"
confirm="handleClose"
close="handleClose"
items="{
path: '/idFamiglia'
}">
<StandardListItem
title="{title}"
description="{description}"
icon=""
iconDensityAware="false"
iconInset="false"
type="Active" />
</SelectDialog>
</core:FragmentDefinition>
From the controller I want set this string. I try in this methods:
handleValueLocalHelp : function(oEvent) {
this.inputId = oEvent.oSource.sId;
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("ui5bp.view.fragment.HintLocalDialog",this);
}
//1
sap.ui.getCore().byId("idSelectDialog").setAggregation("items", "{path: '/idFamiglia'}");
//2
this._oDialog.bindElement("/idFamiglia");
//3
sap.ui.getCore().byId("idSelectDialog").bindElement("/idFamiglia");
this._oDialog.setModel(this.getView().getModel("hint"));
// toggle compact style
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
this._oDialog.open();
},
I have some errors..
Uncaught Error: Aggregation 'items' of Element sap.m.List#idSelectDialog-list used with wrong cardinality (declared as 0..n) if I try the forst mode
If I try the second mode it not change the string
the same behavior
How can I modify the aggregation string (items for example) from controller?
Since the control you are using (SelectDialog), the "item" aggregation can only be used with sap.m.ListItemBase[] whereas I can see you are binding with '/idFamiglia'. This is not a property binding, it is can aggregation binding.
var oSelectDialog = new sap.m.SelectDialog({
multiSelect : true,
title : "Title",
items: {
path: "/",
template: new sap.m.StandardListItem({
title: "{text}",
description: "{key}"
//selected: "{JSON>selected}"
})
},
rememberSelections : true,
});
I try a solution to set a default fragment by XML-view and personalize it from controller:
handleValueLocalHelp : function(oEvent) {
this.inputId = oEvent.oSource.sId;
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("ui5bp.view.fragment.HintLocalDialog",this);
this._oDialog._dialog.mAggregations.content[1].mBindingInfos.items.path="/idFamiglia";
}
I want set the content of a list into a popover.
The result is this:
There are two list by different data binding. The 2nd work and the 1st not work...
This is the xml of the popover
<Popover
showHeader="false"
contentWidth="320px"
contentHeight="500px"
placement="Bottom" >
<List
items="{menuPath>/pathlist}">
<StandardListItem title="{level}" />
</List>
<List
items="{/nodes}">
<StandardListItem
title="{text}"
type="Navigation"
tap="doNavOnSelect" >
</StandardListItem>
</List>
</Popover>
The 1st data-binding (not-work) is this:
var aPath=new Array();
obj=new Object(); obj.level='lev1'; aPath.push(obj);
obj=new Object(); obj.level='lev2'; aPath.push(obj);
obj=new Object(); obj.level='lev3'; aPath.push(obj);
var oModel = new sap.ui.model.json.JSONModel();
//oModel.setData({pathlist:aPath}, true);
oModel.setData({pathlist:[{level:'uno'},{level:'due'},{level:'tre'}]}, true);
sap.ui.getCore().setModel(oModel, "menuPath");
and the 2nd data-binding (work) is this:
this.getView().setModel(new sap.ui.model.json.JSONModel("apps/appIntra/master/GEN_intra_Master.json"));
and the json file is this:
{
"nodes" : [
{
"id" : "help",
"text" : "Help"
},
{
"id" : "intra_acquisti",
"text" : "ACQUISTI"
},
{
"id" : "intra_cessioni",
"text" : "CESSIONI"
}
]
}
Instead of
<StandardListItem title="{level}" />
use
<StandardListItem title="{menuPath>level}" />
If you use named models, always remember to include them in all the bindings where necessary :)