I create several treetables, each is placed on it's own div.
The main reproducable problem i've got:
creating the tables directly -> everything looks fine (see image 1)
creating the tables within an asynchron jQuery call: the first added table gets always a vertical scrollbar (see image 2)
here is the code:
var oData = { root: ...}
// code for image 2
jQuery.getJSON(url, function (result) {
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
})
// code for image 1
createTable(oData['table1'], 'table1')
createTable(oData['table2'], 'table2')
function createTable(oData, codeSample){
var oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "trans_class", template: "trans_class"})
, new sap.ui.table.Column({label: "Checked", template: "checked"})
],
height: '100%',
selectionMode: sap.ui.table.SelectionMode.None,
enableColumnReordering: false,
expandFirstLevel: false,
visibleRowCount : INITIAL_ROW_COUNT_IN_TABLE,
visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
toggleOpenState: function(oEvent) {
var isLeafExpanded = oEvent.getParameter("expanded");
if(isLeafExpanded){
oTable.setVisibleRowCount(oTable.getVisibleRowCount() + 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE + 2
}else{
oTable.setVisibleRowCount(oTable.getVisibleRowCount() - 2)
SUM_INDEX_TOGGLE = SUM_INDEX_TOGGLE - 2
}
}
})
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
sap.ui.getCore().setModel(oModel, codeSample);
oTable.bindRows("/root");
oTable.expand(4); // expand Sum Row
//Bring the table onto the UI
oTable.placeAt(codeSample);
}
How can I fix this issue. I want that all my tables look the same.
Workaround: add a simple textField and hide it after adding the treeTable:
addSimpleHiddenTextField(HIDDEN_TEXTFIELD)
for(var i in config.TABLES){
createTableAndPlaceIt(result[i], i, config.TABLES[i])
}
hideSimpleTextField(HIDDEN_TEXTFIELD)
Related
I am trying to create a screen on which I have a Panel. The main Panel has another Panel and this Panel has a Grid which has four HBoxes, and each HBox finally has a Button.
onInit:function(){
oMainPanel.removeAllContent();
var oHbox1 = new sap.m.HBox(jQuery.sap.uid());
var oHbox2 = new sap.m.HBox(jQuery.sap.uid());
var oHbox3 = new sap.m.HBox(jQuery.sap.uid());
var oHbox4 = new sap.m.HBox(jQuery.sap.uid());
var oPanel ;
var oGrid;
for (var i = 0; i < 4; i++) {
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [oHbox1,oHbox2,oHbox3,oHbox4]
});
oPanel = new sap.m.Panel(jQuery.sap.uid(),{
headerText: "Some Text",
expandable: true,
expanded: true,
width:"100%",
content:[oGrid]
});
jQuery.sap.delayedCall(100, this, function() {
});
oMainPanel.addContent(oPanel);
}
I can see the content in each HBox, but only for the last Panel. I think these are being overlapped. How can I display the content of all the HBoxes in all Panels?.
You are trying to use the same instances of HBox as content of different Grids. You need to create a new instance for each Panel.
Try doing something like:
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [new sap.m.HBox(), new sap.m.HBox(),
new sap.m.HBox(), new sap.m.HBox()]
or initialize your variables (oHbox1, oHbox2, etc) inside the loop
I solved this problem by using the forEach instead of for loop.
I am using sap.m.Table to display some documents as a sap.m.Dialog.The UI looks as below:
Everything works as expected but when I scroll to the last Item (growing=true) the table rerenders and moves back to the top. Ideally that would happen only when I refresh a model. I am using bindAggregation to bind the odataModel to the UI. Please see a snippet below (Note:Partial snippet).
var dialog = new Dialog({
title: title,
buttons: [
new sap.m.Button({
text: "{i18n>close}",
press: function(oEvt) {
dialog.close();
}
})
]
});
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
dialog.addContent(table);
if (!dialog.isOpen()) {
dialog.open();
}
var oDModel = new ODataModel(kmURL, {
json: true
});
oDModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
table.setModel(oDModel);
var mParams = {
path: "/DocumentQuerySet",
template: template,
};
table.bindAggregation("items", mParams);
I think that bindAggregation internally refreshes the model which forces the table to rerender after every data call. How can I avoid the model to refresh/rerender the table so that it does not scroll to the top every time the user scrolls down to see more data.
Appreciate any help.
Thanks.
You could fix this problem by placing the Table control within a ScrollContainer. The ScrollContainer will handle the growing feature of the table, which causes the change in height of the control. This will retain the current position without moving back to the top.
....
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
var oScroll = new sap.m.ScrollContainer({
width: "100%",
height: "500px",
vertical: true,
content: table
})
dialog.addContent(oScroll);
....
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");
}
}
}
})
]
})
}
});
I am trying to create a Master - Detail page using OData servicea in SAPUI5. Everything works fine in the Master page. Meaning I'm able to populate the list with valid data from SAP backend using an OData URL.
Now what I want to achieve is, to call a second OData URL to fetch the detail values and populate that in the page.
My Master.controller.js
handleListSelect : function (evt) {
var context = evt.getParameter("listItem").getBindingContext();
this.nav.to("Detail", context);
console.log('evt.getSource: ' + evt.getSource());
console.log('evt.getBindingContext: ' + evt.getSource().getBindingContext());
}
Console Output gives
"evt.getSource: Element sap.m.List#Master--list" sap-ui-core.js line 80 > eval:31
"evt.getBindingContext: undefined"
I'm unable to populate values in the detail page from the second URL. Can anyone guide or help me on this?
My Compenent.js
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.myFiori.view.App",
type : "JS",
viewData : {
component : this
}
});
// Using OData model to connect against a real service
var url = "/MyFioriUI5/proxy/sap/opu/odata/sap/XXXXXX;mo/";
var oModel = new sap.ui.model.odata.ODataModel(url, true, "", "");
oView.setModel(oModel);
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : "i18n/messageBundle.properties"
});
oView.setModel(i18nModel, "i18n");
// set device model
var deviceModel = new sap.ui.model.json.JSONModel({
isPhone : jQuery.device.is.phone,
isNoPhone : !jQuery.device.is.phone,
listMode : (jQuery.device.is.phone) ? "None" : "SingleSelectMaster",
listItemType : (jQuery.device.is.phone) ? "Active" : "Inactive"
});
deviceModel.setDefaultBindingMode("OneWay");
oView.setModel(deviceModel, "device");
// Using a local model for offline development
// var oModel = new sap.ui.model.json.JSONModel("model/mock.json");
// oView.setModel(oModel);
// done
return oView;
}
My Detail.controller.js
sap.ui.controller("sap.ui.demo.myFiori.view.Detail", {
handleNavButtonPress : function(evt) {
this.nav.back("Master");
},
onBeforeRendering : function() {
// this.byId("SupplierForm").bindElement("BusinessPartner");
},
handleApprove : function(evt) {
// show confirmation dialog
var bundle = this.getView().getModel("i18n").getResourceBundle();
sap.m.MessageBox.confirm(bundle.getText("ApproveDialogMsg"), function(oAction) {
if (sap.m.MessageBox.Action.OK === oAction) {
// notify user
var successMsg = bundle.getText("ApproveDialogSuccessMsg");
sap.m.MessageToast.show(successMsg);
// TODO call proper service method and update model (not part of this session)
}
},
bundle.getText("ApproveDialogTitle"));
}
});
I can't see the second URL you are refering to, but we handle it this way.
In Component.js:
var oView = sap.ui.view({
id: "app",
viewName: "fom.test.app.view.App",
type: "JS",
viewData: { component : this }
});
var dataModel = new sap.ui.model.odata.ODataModel("/fom/fiori/odata/FOM/mobile_app_srv", true);
oView.setModel(dataModel);
This connects the master view to the data for all the list items.
In the App.controller.js we make use of the onNavigation function, defined in Detail.controller.js. That means when routing to the detail view, the onNavigation function is called before the view is set up.
App.controller.js:
to : function (pageId, context) {
var app = this.getView().app;
// load page on demand
var master = ("Master" === pageId);
if (app.getPage(pageId, master) === null) {
var page = sap.ui.view({
id : pageId,
viewName : "fom.test.app.view.view." + pageId,
type : "XML"
});
page.getController().nav = this;
app.addPage(page, master);
jQuery.sap.log.info("app controller > loaded page: " + pageId);
}
// show the page
app.to(pageId);
// set data context on the page
if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
try{
var oController = page.getController();
oController.onNavigation(context);
}
catch(e){ }
}
},
Detail.controller.js:
onNavigation: function(context) {
this.getView().bindElement({
path: context.sPath,
parameters: {
select: "Id," +
"Lifnam," +
"Rmwwr," +
"Waers," +
"Sendedatum," +
"Workflowtyp," +
"Sktodat," +
"Stufe," +
"MonFrgstA," +
"Bukrs," +
"Belnr," +
"Gjahr," +
"EdcObject," +
"BstatTxt",
expand: "Positions"
}
});
},
The bindElements() function, connects the detail view to the results of another web service call, which fetches all attributes mentioned in select and the line items which are fetched with the expand.
Now your first webservice call is loading only the data relevant for the master view list, and the second one all the information of the selected list item.
When you use the newer routing functionality of UI5, you will need to find another place for the hook. I haven't built that in yet.
oView.setModel(oModel);
You have this statement twice - the one would override the other - you need to provide an alternate reference to the second instance:
e.g.
oView.setModel(oModel, "local")
I have a table when I try to bind the column of this table to a json data. It works in one of my tables and in other tables it doesn't show anything. I checked content and the way I get the json data and it is exactly the same in all tables.
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Link({
text:"{name}",
})
}));
the table that shows the content sits in shell and other tables that show nothing sit inside sap.ui.ux3.ThingGroup. I am wondering if the reason that I don't see the binding is because of ThingGroup or not? because as soon as I change the sap.ui.commons.Link to sap.ui.commons.TextView it works.
The cut down version of my code is:
addLayerTable: function(){
var jsonData1 = {
"layers" : []
};
$.getJSON(URI, {}).done(function(data) {
if(data.layers !== undefined){
$.each(data.layers, function(i, field) {
jsonData1.layers.push({
"name" : field
});
});
}
layerDetailPage(jsonData1);
}).fail(function() {
alert("Error while reading layers Data or layers do not exist");
});
var oTable = new sap.ui.table.Table({
rows:{
path:"/layers",
},
width: "900px",
visibleRowCount: 10,
navigationMode : sap.ui.table.NavigationMode.Paginator
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Label({
text:"{name}"
})
}));
function layerDetailPage(layerData){
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(layerData);
sap.ui.getCore().setModel(oModel, "layerModel");
oTable.setModel(oModel);
};
var oFC1 = new sap.ui.ux3.ThingGroup();
oFC1.addContent(oTable);
return oFC1;
}
As soon as I change the sap.ui.commons.Label to TextView, names become visible. but at the moment nothing. Funny enough if I add a press function to my table and try to get the name of the row in the table it works although it is not visible.