I have a problem and hope to find help. On a sap.m.page i have placed a list (sap.m.list)
new sap.m.Page(
"mainPage", {
title : "",
enableScrolling : true,
content : [
oList = new sap.m.List("items", {
threshold : 2,
inset : false,
headerText : "Aufträge",
//filters : filters,
columns : [
new sap.m.Column({
hAlign : "Left",
width : '45px',
//styleClass : "qty",
header : new sap.m.Label({
text : "Station"
})
}),
new sap.m.Column({
hAlign : "Left",
width : '40px',
header : new sap.m.Label({
text : "Zeit"
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
header : new sap.m.Label({
text : ""
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
header : new sap.m.Label({
text : ""
})
}),
new sap.m.Column({
hAlign : "Left",
width : '50px',
header : new sap.m.Label({
text : "Raum"
}),
minScreenWidth : "Phone"//XXSmall"
//demandPopin : true
}),
new sap.m.Column({
hAlign : "Left",
width : '40px',
header : new sap.m.Label({
text : "Bett"
}),
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
//styleClass : "qty",
header : new sap.m.Label({
text : "St."
})
}),
new sap.m.Column({
hAlign : "Left",
width : '20px',
//styleClass : "qty",
header : new sap.m.Label({
text : "Typ"
})
(...)
For the entries i have a template definded
//Template für die Listzeilen
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new sap.m.Label({
text: "{Orgpf}"
}),
new sap.m.Label({
text : "{Uhrzeit}"
}),
new sap.ui.core.Icon({
src: "{IconTermin}"
}),
new sap.ui.core.Icon({
src: "{IconAufbereitung}"
}),
new sap.m.Label({
text: "{Bett}"
}),
new sap.m.Label({
text: "{Bettnr}"
}),
new sap.m.Label({
text : "{Status02}"
}),
new sap.m.Label({
text: "{Betttyp}"
})
(...)
The data for the list comes from an odata-service an our sap gateway. I fill the table with follwing routine
var filter = new sap.ui.model.Filter("Team", sap.ui.model.FilterOperator.EQ, localStorage.getItem("Team"));
oList.bindAggregation("items", { path: "/AuftragSet", filters: filter, template});
This works fine.
Problem: not all entries should be displayed after loading the entries. After processing a visibile entry with a special type the corresponding entry should be now visible. I dont want to read the data again with the service, because i have not internet access at all places. Therefore i select more entries and need to hide some of them. How can i solve this? Where can i set the filter?
THX for your answers.
Kind regards,
Sven
In your case, Filter is not good option because you want to download all data and show select few. On the other hand, Filter will cause server to return select few rows beating your purpose.
You can use inherited visible property of sap.m.ColumnListItem. When defining your template add visible property and bind it to your OData property.
var template = new sap.m.ColumnListItem({
type: "Navigation",
visible: "{put you OData determining property here}",
cells: [...]
});
Also, consider using sap.m.Table or one of its subclasses as sap.m.List with columns is deprecated. https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.List.html#addColumn.
Use this link to decide which table to use: https://sapui5.hana.ondemand.com/#docs/guide/148892ff9aea4a18b912829791e38f3e.html
Hope this helps.
Filtering out the data that you want to bind the table is the good way to do. find the below link for how to filter the Table or List on success of your OData service: sapui5-how-to-filter-data-with-2-or-more-values
Related
I'm using suggestion rows and suggestion columns. After selecting the suggestion. The token is not set to the field.
I've tried to setToken() method but still got error.
this._oMultiInput = new MultiInput({
valueHelpOnly: false,
valueHelpRequest: this._onValueHelpRequested.bind(this),
showSuggestion: true,
suggestionColumns: [
new sap.m.Column({
header: new sap.m.Label({
text: "ID"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "{customI18n>productNameLabel}"
})
})
],
tokens: new sap.m.Token({key:"{masterData>Name}"})
});
this._oMultiInput.bindSuggestionRows({
path: 'masterData>/SH_MerchandiseHierarchySet',
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Label({
text: "{masterData>ExternalId}"
}),
new sap.m.Label({
text: "{masterData>Name}"
})
]
}).clone()
});
To set the token in the field.
It goes on error beacause there isn't a method setToken()
Please you must refer only to ufficial documentation. Here you can see all action/method/properties etc. of sap.m.Token
I am Trying to bind some filtered data with sap.m.table
Model I am using
var model = new sap.ui.model.json.JSONModel("../services/myexp.xsodata/ExpenseItem?$format=json&$filter=Expense_Claim_No eq "+id, false);
console.log(model);
sap.ui.getCore().setModel(model,'myitem');
model is returning data as json format
{
d: {
results: [
{
__metadata: {//some info
},
Expense_Item_No: 11011,
Expense_Claim_No: 1101,
Expense_Item_Description: "Taxi",
Expense_Amount: 800,
Expense_Item_Category: "Travel"
},
{
__metadata: {//some info
},
Expense_Item_No: 11012,
Expense_Claim_No: 1101,
Expense_Item_Description: "Meals",
Expense_Amount: 1200,
Expense_Item_Category: "Daily Expenses"
}
]
}
}
my sap.m.Table code
var aColumns = [
new sap.m.Column({
header : new sap.m.Label({
text : "Expense Item No"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Description"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Category"
})
}),
new sap.m.Column({
header : new sap.m.Label({
text : "Amount"
}),
})
];
var oTemplate = new sap.m.ColumnListItem({
cells : [
new sap.m.Text({
text : "{Expense_Item_No}",
wrapping : false
}),
new sap.m.Text({
text : "{Expense_Item_Description}",
wrapping : false
}),
new sap.m.Text({
text : "{Expense_Item_Category}"
}),
new sap.m.Text({
text : "{Expense_Amount}"
})
]
});
var oTable = new sap.m.Table({
columns : aColumns
});
oTable.bindItems("myitem>/", oTemplate);
But it's not showing the data on the table. What am I doing wrong.
Please Help. Thank you
Try
oTable.bindItems("myitem>/d/results", oTemplate);
So basically I have a Split page in SAPUI5 and have few master pages and detail pages attach to it. I have no problem to do the whole thing in one javascript file, but since the file is getting too big and too hard to read I want to apply MVC design to this application and separate every page into one view and control file. Here is my example:
var oSplitApp = new sap.m.SplitApp({
masterPages : [ page1, page4, page5],
detailPages : [ page0, page2, page3 ],
initialMaster : "page1",
initialDetail : "page0"
});
and pages are like:
var page0 = new sap.m.Page("initialPage", {});
var page1 = new sap.m.Page({
enableScrolling : true,
footer : new sap.m.Bar({
id : 'page1_footer',
contentMiddle : [ new sap.m.Button({
text: "Add"
})]
}),
content : [ oTable = new sap.m.Table("items", {
inset : true,
visible : true,
getIncludeItemInSelection : true,
showNoData : false,
columns : [ new sap.m.Column({
styleClass : "name",
hAlign : "Left",
header : new sap.m.Label({
text : "something"
})
}) ]
}) ]
});
var template = new sap.m.ColumnListItem({
type : "Navigation",
visible : true,
selected : true,
cells : [ new sap.m.Label({
text : "{name}"
}) ]
});
and so on ...
and also each page has its on attachPress function so when you click on the buttons or links something happen and some other pages fire up. please show me in details how to do so?
thank you for your help in advance.
You can do this by creating own View/Controller for every Master/Detail. In your View, where your oSplitApp is built you can then instantiate your Master/Details Views like this:
// load your external view/controller:
var page1 = sap.ui.jsview("path-to.DetailView1");
var oSplitApp = new sap.m.SplitApp({
masterPages : [ page1, page4, page5],
detailPages : [ page1, page2, page3 ],
initialMaster : "page1",
initialDetail : "page0"
});
Your external View file for example could return the sap.m.Page object in createContent.
Hopefully this helps you. If you have more questions about this just let me know.
So basically My problem is I have a page:
var page1 = new sap.m.Page({
title: "Something",
enableScrolling : true,
content : [
oTable = new sap.m.Table("items", {
columns : [
new sap.m.Column({
styleClass : "name",
hAlign : "Left",
header : new sap.m.Label({
text : "firstColumn"
})
})
]
})]
});
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new sap.m.Label({
text : "{name}"
})
]
});
template.attachPress(function(oEvent){
var selectedRowContext = oEvent.getParameter("item");
alert(selectedRowContext);
});
Here I want to get the selectedRowContext and I don't know how?
Thank you
If you are binding data try
this.getBindingContext(/*modelName?*/)
or
oEvent.getSource().getBindingContext(/*modelName?*/)
//oControlEvent is the argument from the attachpress event
var selectedData = oControlEvent.getParameters().rowBindingContext.getModel().getData();
var selectedPath = oControlEvent.getParameters().rowBindingContext.getPath();
var selectedIndex = selectedPath.split("/")[selectedPath.split("/").length - 1];
selectedData = selectedData[OBJECTNAME][selectedIndex];
I have created a responsive sap.m.table. But am not able to load values from the data Object. I want to laod the "subvariants" array of objects.Pls help
summaryDetailData={"subvariants":[{"currentValue":"","Article":"1234567","question":"Carpet Installation type"},{"currentValue":"","question":"CarpetQuantity"},{"currentValue":"","Article":"1234568","question":"Underpad type"},{"currentValue":"","question":"UnderpadQuantity"},{"currentValue":false,"Article":"1234568","question":"Rapid Install"}]}
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar: new sap.m.Toolbar({
content: [
new sap.m.Label({text: "Summary Data"}),
new sap.m.ToolbarSpacer({}),
new sap.m.Button("idPersonalizationButton", {
icon: "sap-icon://person-placeholder"
})]}),
columns: summaryDetailData.cols.map(function (colname) {
return new sap.m.Column({ header: new sap.m.Label({ text: colname })})
})
});
oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
oTable.bindAggregation("subvariants", "/subvariants", new sap.m.ColumnListItem({
cells: oData.cols.map(function (colname) {
return new sap.m.Label({ text: "{" + colname.toLowerCase() + "}" })
})
}));
The way you bind the model to the table is not completely correct. You have to use bindItems to dynamically bind the table rows (items) to a model. The columns aggregation is used to define the column layout of the table whereas the items aggregation is responsible for the table records.
In your case I would create the columns in the control definition and bind the items to the model with your own template.
This should do what you´ve expected (tested it):
var oTable = new sap.m.Table("idRandomDataTable", {
headerToolbar : new sap.m.Toolbar({
content : [ new sap.m.Label({
text : "Summary Data"
}), new sap.m.ToolbarSpacer({}), new sap.m.Button("idPersonalizationButton", {
icon : "sap-icon://person-placeholder"
}) ]
}),
columns : [ new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Current Value"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Article"
})
}), new sap.m.Column({
width : "2em",
header : new sap.m.Label({
text : "Question"
})
}) ]
});
oTable.bindItems("/subvariants", new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : "{currentValue}"
}), new sap.m.Text({
text : "{Article}"
}), new sap.m.Text({
text : "{question}",
}), ]
}));
oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
Hopefully this helps you!