I have this model from my oData service:
{
"entity": [
{
"valueA": "ABC",
"valueB": "DEF",
"childL1": [
{
"valueC": "GHI",
"valueD": "JKL"
},
{
"valueC": "MNO",
"valueD": "PQR"
}
]
},
{
"valueA": "ABC",
"valueB": "DEF",
"childL1": [
{
"valueC": "GHI",
"valueD": "JKL"
},
{
"valueC": "MNO",
"valueD": "PQR"
}
]
}
]
}
Notice that for each 'child' in my 'entity' set, there's also an array of possible 'childL1'.
I have table in UI5 and I bound the data in the controller by:
this.myTable.bindAggregation('items', {path: /entity, template: this.oTemplate});
This works but the table displays:
Child1
Child2
However, what I want to do is:
/0/ChildL1/0
/0/ChildL1/0
/1/ChildL1/0
/1/ChildL1/0
So, to do that, I can do:
this.myTable.bindAggregation('items', {path: /entity/childL1, template: this.oTemplate});
The result would be as expected. However, I need to also display valueA in my table. Since my binding is at child1, I won't be able to get /entity/n/valueA.
What possible solution can I do for this? Is there a way to backtrack provided that childL1 has a 'key'? Or can I get entity then display childL1 in the table?
Since you haven't mentioned table control like which control you are using - sap.ui.table.Table or sap.m.Table. In case of "sap.ui.table.Table" you can bind the individual column like below
oTable.addColumn(new sap.ui.table.Column({
label : new sap.m.Label({
text : " "
}),
template : new sap.m.Text({
maxLines : 1
}).bindProperty("text", "valueA"),
}));
oTable.addColumn(new sap.ui.table.Column({
label : new sap.m.Label({
text : " "
}),
template : new sap.m.Text({
maxLines : 1
}).bindProperty("text", "childL1/valueC"),
}));
Like this you can add any no. of columns with different path but their parent path should alsways be same and then at last you can bind your main path to table rows like this-
oTable.bindAggregation("rows", {
path : "/entity"
});
and in case of sap.m.Table you can do it like this-
new sap.m.Table({ items:{
path:"/entity",
template: new sap.m.ColumnListItem({
cells:[
new sap.m.Text({
text:"{valueA}"
}),
new sap.m.Text({
text: "{childL1/valueC}"
})
]
})
}
})
Related
this is the odata response i am getting:
my desired result would be a search help that displays the "TypRolle", "RolleNr" and "RolleOri" columns of the odata response. But right now i am stuck at trying to just display one of them, the "TypRolle" one.
this is what my search help looks like right now:
As you can see, no values are being displayed.
Here is my valueHelpRequest method:
var roletypeUrl = "my odata url";
var attModel = new sap.ui.model.json.JSONModel();
var link = this.getView().byId("roletype"); // roletype input field
var oDataModel = new sap.ui.model.odata.v2.ODataModel(roletypeUrl, {
json: true,
loadMetadataAsync: true
});
oDataModel.read("/ZshNsiAgr01xxlEinzelTypSet", {
success: function(oData, response) {
attModel.setData(oData);
var oValueHelpDialog = new sap.m.Popover({
title: "Rollentyp auswählen",
footer: [new sap.m.Button({
text: "Ok"
})]
});
oValueHelpDialog.openBy(link);
var oItemTemplate = new sap.m.StandardListItem({
title: "test",
description: "{TypRolle}"
});
var oHelpTable = new sap.m.Table({
width: "300pt",
columns: [
new sap.m.Column({
header: [
new sap.m.Label({
text: "Rollentyp"
})
]
})
],
items: {
path: "/results",
template: oItemTemplate
},
items: [
new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{TypRolle}"
})
]
})
]
})
oHelpTable.setModel(attModel);
oValueHelpDialog.addContent(oHelpTable);
I am very thankful for any kind of suggestion and look forward to your answers :)
If you have to do it with JSON model ... here it is
]
})
]
})
oHelpTable.bindAggregation("items", "/results", new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{TypRolle}"
})
]
}));
oHelpTable.setModel(attModel);
oValueHelpDialog.addContent(oHelpTable);
Or else you can directly bind to your default OData model as well and it can fetch the data automatically without you writing the read
I'm a complete newb on sap ui5.
I'm trying to generating a table on my webpage generated in sap web ide.
The data for this table is a .json file accessed via odata service.
I've come this far:
oModel is generated:
function initModel() {
var sUrl = "/sap/opu/odata/sap/ZGWS_someService/CollectionSet?$format=json";
var oModel = new sap.ui.model.odata.ODataModel(sUrl, true);
sap.ui.getCore().setModel(oModel);
}
now I want to generate a table on my html site with the data in the .json file.
So I have to create columns based on the properties of the items and then filling the rows with the current data.
.json looks like this:
{
"d": {
"results": [
{
"property1": "123",
"property2": "346"
},
{
"property1": "123",
"property2": "555"
}
I have no solution for this yet - can you help me out?
greetz,
simon
I created the table in the controller and sorted the data via lodash.
Is that good practice?
var oTable = this.byId("table");
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Info1"
}),
sortProperty: "INTST",
template: new sap.ui.commons.TextView().bindProperty("text", "key")
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Count"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "value")
}));
$
.ajax({
url: '/.../ServiceSet',
jsonpCallback: 'getJSON',
contentType: "application/json",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
//Create a model and bind the table rows to this model
//Get the forecastday array table from txt_forecast object
var aData = oModel.getProperty("/d/results");
var aData2 = _.countBy(_.map(aData, function(d) {
return d.VALUE;
}));
var aData3 = Object.keys(aData2).sort().map(key => ({
key,
value: aData2[key]
}));
oModel.setData({
modelData: aData3
});
oTable.setModel(oModel);
}
});
oTable.bindAggregation("rows", {
path: "/modelData"
});
How do I use nested/sub tables with PDFmake? I've tried simply putting in multiple tables but that doesn't automatically repeat the top level table's header for page breaks.
This code is a simplified example of using a sub-table. It is adapted from tables section of the pdfmake playground (wasn't easy to find via Google searching).
Paste the following into: http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
var dd = {
content: [
{ text: 'A simple table with nested elements', style: 'subheader' },
'It is of course possible to nest any other type of nodes available in pdfmake inside table cells',
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
['Column 1', 'Column 2'],
[
{
stack: [
'Let\'s try an unordered list',
{
ul: [
'item 1',
'item 2'
]
}
]
},
[
'or a nested table',
{
table: {
body: [
[ 'Col1', 'Col2', 'Col3'],
[ '1', '2', '3'],
[ '1', '2', '3']
]
},
}
]
]
]
}
},
]
}
I need to achieve almost similar functionality like above. I have tried a lot, but not getting it right. How to create a json array that would produce an pdf output using pdfmake? I need to create a table within a table:
var dd = {
content: [
{
text: 'A simple table with nested elements',
style: 'subheader'
},
'It is of course possible to nest any other type of nodes available in pdfmake inside table cells',
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
['Column 1', 'Column 2'],
[
[
'or a nested table',
{
table: {
body: [
[ 'Col1', 'Col2', 'Col3'],
[ '1', '2', '3'],
[ '1', '2', '3']
]
},
}
]
]
]
}
},
]
}
I have a table done with ui-grid and this table has a column with cellFilter definition like this:
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
My gridMenu custom item is configured like this:
gridMenuCustomItems: [
{
title:'Custom Export',
action: function ($event) {
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);
uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);
},
order:0
}
]
The table is displayed correctly, but when I try to export to CSV, the Company column is exported with empty value. Here is my Plunkr.
Any suggestion will be appretiated
References
I did some research and according to ui-grid Issue #4948 it works good when the Company column is filled with an static catalog. Here is a Plunkr demostrating that.
As you mentioned, there is an export issue when the values in the column are not static, so I forked your plunker with a solution that creates the company mapping for each data object and adds it as a key-value once you get the company catalog back:
$http.get('https://api.github.com/users/hadley/orgs')
.success(function(data) {
$scope.companyCatalog = data;
angular.forEach($scope.gridOptions.data, function(item) {
var compMap = uiGridFactory.getMapCompany(item.company, $scope.companyCatalog);
item.mappedCo = compMap;
});
});
I've kept the original company column but made it invisible (rather than overwriting it), so it exports with the rest of the data in the csv. New column defs:
columnDefs: [
{ field: 'name' },
{ field: 'mappedCo', name: 'Company'},
{ field: 'company', visible: false }
]
Also, in the case that you were getting your data from a server, you would have to ensure that the data and the catalog returned before you run the mapping function. This solution may not work in your particular use case; I don't know.
I found a solution to the CSV export to be able to display the cell display value.
My mistake was using row.grid instead of this.grid at the mapCompany cell filter:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
],
The right way to use it is using this:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],
Here is my Plunkr.
I have a problem with multimodel binding.
In init function of controller i set JSON model in ui.core
var oModel = new sap.ui.model.json.JSONModel(data1);
sap.ui.getCore().setModel(oModel, "model1");
in View I have a template of ColumnListItem and I bind it in a table
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
type : sap.m.ListType.Active,
visible: true,
selected: true,
cells: [ new sap.m.Label({
text: "{name}"
})
],
press: [oController.pressListMethod]
});
oTable.bindItems("model1>/events", template, null, null);
oPage.addContent(oTable);
With simple Model it work's rigth but in Multimodel table only gets the number of items but not the properties of the model. Any solution ?
You need to use the model name in the template, too:
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
type : sap.m.ListType.Active,
visible: true,
selected: true,
cells: [
new sap.m.Label({
text: "{model1>name}" // No leading "/" here since the binding is relative to the aggregation binding below
})
],
press: oController.pressListMethod
});
oTable.bindItems("model1>/events", template);
oPage.addContent(oTable);