I have a table that I want to distinguish between the items in the table by checking some condition and if the condition holds, i want to add row. but when I try to do that I get the error that:
The control manages the rows aggregation. The method "addRow" cannot be used programmatically!
var oTable = new sap.ui.table.Table({
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"
})
}));
$.each(data, function(index,
nodes) {
if (nodes == something) {
oRow = new sap.ui.table.Row();
oRow.addCell(new sap.ui.commons.Link({
text : "something"
}));
oTable.addRow(oRow);
};
});
};
You cannot add data manually to the sap.ui.table.Table. This has to be done using databinding. Please check the examples in the documentation:
https://openui5.hana.ondemand.com/#test-resources/sap/ui/table/demokit/Table.html
you can find more information on data binding here:
https://openui5.hana.ondemand.com/#docs/guide/91f0ca956f4d1014b6dd926db0e91070.html
Related
I used SmartTable with the property initiallyVisibleFields. I bound ODataModel to it. The problem is when I want to show all fields of ODataModel, e.g. after I click on SmartTable's row and try to display it in the dialog. I just see fields from initiallyVisibleFields property. It looks like ODataModel is filtered with initiallyVisibleFields property.
I was thinking about JSONModel where I put copy of ODataModel before it is bind to SmartTable, but I am planning to use SmartFilterBar, so index of shown data in the table will be changed after filtering. So I can not simply pull data from JSONModel. I can still filter data from JSONModel based on the fields I get from
ODataModel filtered with initiallyVisibleFields but there I can still get different data, because there can be differences in the fields which are hidden.
Please, can you advice me how to solve this issue?
Thanks for any tips.
...
return Controller.extend("ABC.View1", {
oDialog: null,
onInit: function() {
var oModel, oView;
oModel = new ODataModel("/sap/opu/odata/sap/ABC/", {
useBatch: false
});
oView = this.getView();
oView.setModel(oModel);
this._createSmartTable();
},
_createSmartTable: function() {
var oSmartTable = new SmartTable('idSmartTable',{
entitySet: "ABCListSet",
tableType: "ResponsiveTable",
sStyleClass: "sapUiResponsiveContentPadding",
initiallyVisibleFields: "A,B,C,D",
showRowCount: false,
enableAutoBinding: true,
demandPopin: false,
useVariantManagement: false,
useExportToExcel: false,
useTablePersonalisation: true,
});
// Register event row click
var that = this;
var oTable = oSmartTable.getTable();
oSmartTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.detachPress(that._createDialog);
oItem.setType("Active");
oItem.attachPress(that._createDialog);
});
});
var oVBox = new VBox();
oVBox.addItem(oSmartTable);
var oPage = this.getView().byId("idPage");
oPage.addContent(oVBox);
},
_createDialog: function(oEvent) {
//HERE I the oEvent has data filtered by initiallyVisibleFields property of Smarttable.
},
});
...
Do I understand you correctly that you want to show the complete entry in a dialog? The SmartTable uses $select statements to only load the fields of an entity that are also shown in the table. If you want to load all, I think you should add them in the requestAtLeast property.
I am trying to add a new record to existing grid in extjs 6 classic toolkit.
I will paste my code bellow, but first to explain what the problem is.
I use getCmp and getStore to fetch grid and store which will be used.
With Ext.ComponentQuery.query I get values from each field in the form to be added to the grid.
console.log(values) shows the values
Here is what I have so far:
getValuesForSave : function() {
var grid = Ext.getCmp('cataloguegrid');
var store = Ext.getStore('cataloguegridstore');
var model = store.model.create({});
var form = Ext.ComponentQuery.query("#basicDataPanel")[1];
var values = form.getValues();
console.log(values);
grid.getStore(model).insert(0, values);
Ext.MessageBox.show({
title : 'Saving data!',
msg : 'Data successfully saved!',
buttons : Ext.MessageBox.OK,
icon : Ext.Msg.INFO
});
},
I get no errors and a new row gets added to the grid, but the row is empty, it contains no data.
What changes do I need to make to be able to add an object to a grid?
Got it working. My problem was I did not set the "name" in form view to be the same as the "name" of items in form model. Changed that to match and it worked.
getValuesForSave : function() {
var grid = Ext.getCmp('cataloguegrid');
var form = Ext.ComponentQuery.query("#basicDataPanel")[1];
var values = form.getValues();
console.log(values);
grid.getStore().insert(0, values);
Ext.MessageBox.show({
title : 'Saving data!',
msg : 'Data successfully saved!',
buttons : Ext.MessageBox.OK,
icon : Ext.Msg.INFO
});
},
I'm running into issue binding OData in a table control and I'm hoping one of you experts can spare a millisecond to tell me where I'm screwing up.
I can get the OData info from the backend server - step one is I just want to display it in a table with columns and step two is to present users with a segmented button to enable/disable processing of a countries data. Lets just get the data displayed now.
Here is the OData that is returned from the backed
backend odata
Here is my createContent code - I want to do it in JavaScript:
var oTable = new Table({
height: '100%',
firstVisibleRow: 0,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
selectionMode: sap.ui.table.SelectionMode.None,
selectionBehavior: sap.ui.table.SelectionBehavior.RowOnly
}).addStyleClass('suggCompTableStyle');
var oColName = new sap.ui.table.Column().setLabel('{i18n>txt_countryName}').bindElement("/data>LANDX");
oTable.addColumn(oColName);
var oModel = sap.ui.getCore().getModel();
oModel.callFunction("/getCountryActiveList",
"GET",
{SPRAS: 'E'},
null,
function(oData, oResponse)
{ oTable.setModel( new sap.ui.model.json.JSONModel({data : oData.results}));
oTable.bindRows("/data");
alert("ok"); },
function(oError) {alert("err"); });
/* eslint-enable no-alert */
oTable.placeAt("content");
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [
oTable
]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}/* end createContent function */
My table is created with the correct number of rows but not displaying the column data. I guess I'm confused on how to bind the column data?
Thanks for the assistance.
Steve
The issue is in your binding oTable.bindRows("/data");.
The bindRows method is expecting a row template control of the type sap.ui.table.Row.
You can look into https://sapui5.hana.ondemand.com/#/api/sap.ui.base.ManagedObject/methods/bindAggregation for more information. The bindRows method expects an input parameter equal to the oBindingInfo of the bindAggregation method from the link I above.
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.
I have a SAPUI5 application written in MVC
I have a view called oPage4:
var landscapePage = new sap.m.Page({
title : "Landscape Name",
showNavButton : true,
navButtonPress : [oController.back,oController],
footer : new sap.m.Bar({
id : 'landscapePage_footer',
contentMiddle : [
new sap.m.Button({
}),
new sap.m.Button({
})
]
}),
});
oLandscapePageTable = new sap.m.Table("landscape", {
inset : true,
visible : true,
getIncludeItemInSelection : true,
showNoData : false,
columns : [ new sap.m.Column({
styleClass : "name",
hAlign : "Left",
header : new sap.m.Label({
})
}) ]
});
landscapePage.addContent(oLandscapePageTable);
return landscapePage;
then inside page1 controller I want to add a columnlistitem to the table of page 4.
var oPage4 = sap.ui.getCore().byId("p4");
var landscapePageRow = new sap.m.ColumnListItem({
type : "Active",
visible : true,
selected : true,
cells : [ new sap.m.Label({
text : something
}) ]
});
oPage4.getContent().addItem(landscapePageRow);
it doesn't work. please show me how to do so?
Ok, I think I understood your problem now. In general I would avoid calling the page and doing manipulations on it from another view. However, it is absolutely possible:
Additional functions in your view
You can extend your page4 with some more functions that can be called from outside like this:
sap.ui.jsview("my.page4", {
createContent : function() {
this.table = ...
...
},
addColumnListItem : function(columnListItem) {
// add it to the table calling this.table ...
}
}
From another view you´re now able to call this function like this:
var page4 = sap.ui.jsview("my.page4");
page4.addColumnListItem(page4, columnListItem);
Attention: The page4 object itself doesn´t point to the control you´re returning but to the the view instance itself. You will notice this, if you log the page4 object to the console. This is why you have to add functions like described.
Some other approaches would be to use the EventBus like described here to publish and subscribe to events. Since you´ve asked for it let me show you how you could do it:
Using the EventBus
The main intention is, that one can subscribe to a particular event and others can publish such events to the eventbus. Let me give you an example:
Subscribing to the EventBus:
var eventBus = sap.ui.getCore().getEventBus();
eventBus.subscribe("channel1", "event1", this.handleEvent1, this);
Of course you can name your channel and events as you wish. The third parameter indicates the function, that will be called in case of published events. The last paramter is the scope 'this' will point to in the given function.
Your handleEvent1 function could look like this:
handleEvent1 : function(channel, event, data) {
var listItem = data.listItem
}
Publishing events to the EventBus:
var columnListItem = ...
var eventBus = sap.ui.getCore().getEventBus();
eventBus.publish("channel1", "event1",
{
listItem : columnListItem
}
);
One more option you have is to make the columnListItems depending on a model. Like everytime it depends on your actual architecture and data.
Let me know if this solved your problem or if you need some more information.