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 :)
Related
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).
JSON data:
{
"QuestionID": 1,
"Question": "Question One",
"Note": "Note: There are 2 correct answers to this question.",
"Type": "C",
"Answers": [
{
"Id": 1,
"Text": "Choice 1"
}, {
"Id": 2,
"Text": "Choice 2"
}, {
"Id": 3,
"Text": "Choice 3"
}, {
"Id": 4,
"Text": "Choice 4"
}
]
}
In my view I get the correct number of checkboxes for the answers but the "Text" does not show.
`<VBox id='checkBoxes' items="{Answers}">
<items>
<CheckBox text='{Text}' selected='{selected}' />
</items>
</VBox>`
Any assistance in how to bind the properties for the Answers will be appreciated.
In your VBox view code, ensure you have templateShareable:false. Then your nested binding will work like a charm.
Here's an example:
View
<CustomListItem>
<VBox class="sapUiSmallMargin">
<HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
<Title text="{noteAttach>CreatorName}" />
<Text text="{parts:[{path:'noteAttach>NotesType'},{path:'noteAttach>CreatedOn'}], formatter:'.formatter.formattedDate'}" />
</HBox>
<Text class="sapUiTinyMarginBottom" text="{noteAttach>NotesData}" />
<VBox items="{path:'noteAttach>Files', templateShareable:false}">
<HBox>
<core:Icon class="sapUiTinyMarginEnd" src="{path:'noteAttach>DocType', formatter:'.formatter.customFileIcon'}" />
<Link href="{parts:[{path:'noteAttach>ObjectId'},{path:'noteAttach>Viewname'},{path:'noteAttach>Title'}], formatter:'.formatter.fileDownloadHref'}" target="_blank" text="{path:'noteAttach>Title'}" />
</HBox>
</VBox>
</VBox>
</CustomListItem>
Controller (for those who also have to modify the OData they receive from backend, like I had to)
this.getOwnerComponent().getModel('noteAttach').read("/NotesandattachmentSet", {
filters: aFilters,
success: function(oData) {
/*
the reason why we create a new object property called Files and in it store an unnumbered Title is bc of the need to do binding with deep/nested structures
if we dont do this, we end up with up to 10 slots of white space for each entry. this is the only way to do this. all other methods mess up search, sort, and filter functionalities
*/
var aODataResults = oData.results;
var iODataResultsLength = aODataResults.length;
for (var j = 0; j < iODataResultsLength; j++) { //sift through each DataEntry in the model
var aObjectFiles = aODataResults[j].Files = []; //create 'Files' property in each object entry
for (var i = 1; i < 11; i++) { //in each DataEntry, find ppty Title1,Title2...up to Title10 & remove the ppties thatre empty. if not empty, create a downloadLink & icon for it
var sObjectFileTitle = aODataResults[j]["Title" + i];
if (sObjectFileTitle.length !== 0) aObjectFiles.push({
Title: sObjectFileTitle,
DocType: aODataResults[j]["DocType" + i],
ObjectId: aODataResults[j]["ObjectId"],
Viewname: aODataResults[j]["Viewname"],
});
}
}
that.getView().setModel(new JSONModel(aODataResults), "noteAttach");
that.getView().setBusy(false);
},
error: function(oError) {
that.parseErrorMessage(oError);
that.getView().setBusy(false);
}
How My Model Looks Like:
How She Looks:
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>
I wanted to pass the value to filter option in run-time. Below is the code, I just tried and it is not working. can anyone please tell me that, how can I achieve this option ?
<l:VerticalLayout width="100%" id="idRENT_CAR_DET"
content="{path:'/Trip_section/Rental_det',
filters : { path : 'TripId',
operator :'EQ',
value1: '{ path :'Trip_section>/TripId'}' } }" >
<l:Grid defaultSpan="L2 M6 S6" minWidth="1024">
<m:Input value="{From}" type="Date"/>
<m:Input value="{To}" type="Date" />
<m:HBox>
<m:Button id="idRCBTN" icon="sap-icon://sys-add"/>
<m:Button icon="sap-icon://sys-cancel" />
</m:HBox> </l:Grid> </l:VerticalLayout>
I haven't ran your code but your xml formatting is wrong.
You must use different characters for '
'{ path :'Trip_section>/TripId'}'
Maybe it would be the best if you apply the filter to your view in your controller.
var aFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
}
var oVerticalLayout = this.getView().byId("theGivenId...");
var oBinding = oVerticalLayout.getBinding("content");
oBinding.filter(aFilter);
Maybe the binding isn't available in the onInit function.
I wish you good luck.
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";
}