- SAP Managed Tags:
In my previous blog (link) I explained How to add extension points to smart template application using ReplaceFacet via breakouts.
While working with smart template apps, I had a requirement to add a new custom column in a responsive table under List Reports and Object Pages, So I had understand the concept a little deeper and implement it. Hence I felt like going for a blog on this.
Before we go into the detail, Why do we need a custom column in a responsive table of smart template application ?
In a Smart template applications the UI.LineItem annotation will generate a Smart table which will internally have a responsive table with the columns having read only fields like Label, Text or ObjectHeader. So if there is a requirement to have a input box as column cells or may be toggle button or any other custom control of design choice, then we need to add a new custom column for the Smart table of the Smart template application.
Before going through this blog, prerequisites for the UI5 / Non UI5 developers should be :
Basically for extending a column of a responsive table we have to follow particular patterns for List Report and Object Page.i.e If we need to extend a column in Object page we have to configure the manifest.json in a different way when compared to the table in a List Report page which I will explain in a later step.
I have a smart template application created in SAP Web IDE with an Odata service, also it has a list view and an object page.
For the table in the List Report I would like to add a new custom column which has sap.m.Input in the cells.
First step to start is to create the extension files under the folder "ext" as shown below:
Open the ListReportTableColumns.fragment.xml and add this code in the file and save it.
In this code we are creating a new fragment for a custom column with the column name as "Note" and the custom data provided will have columnKey as Test and columnIndex as 3 (for having the column in that position).
CustomData will have the key "p13nData" as standard value as this is specific for the Smart Table's column extension and this object can hold properties like :
For further reference on p13nData or CustomData for SmartTable please refer this link
After this step click on the ListReportTableCells.fragment.xml and add this code and save.
So here we added a fragment definition for sap.m.Input as the cell for the new custom column to be added in the table.
Note: Here we can bind the value of the Input control either with any hardcoded data or with any property from the EntitySet as done in control binding.
The above steps are common for extending a column of table in List report and Object page.
The next step is to configure the manifest.json, I will explain how to configure for List report and Object Page one by one.
Extending a custom column in List Report:
In the manifest.json navigate to the “extends” property, where we put the fragment name inside the viewExtensions attribute and under the template “sap.suite.ui.generic.template.ListReport.view.ListReport”.
And under this we need to register the Column extension fragment in the format as :
ResponsiveTableColumnsExtension|<Name of the EntitySet>
and the Cell extension to be registered in the format as :
ResponsiveTableCellsExtension|<Name of the EntitySet>
And under these we need to give the fragment names , class name and type.
Thereby the code will be like :
As mentioned earlier in our example the EntitySet used is FirstEntitySet and and Entity is FirstEntity
After saving this, execution of the app will display as shown below :
So now we were able to add a new column to a responsive table in List Report view.
Extending a custom column in Object Page:
In the manifest.json navigate to the “extends” property, where we put the fragment name inside the viewExtensions attribute and under the template “sap.suite.ui.generic.template.ObjectPage.view.Details”.
And under this we need to register the Column extension fragment in the format as :
ResponsiveTableColumnsExtension|<Name of the Table EntitySet>|<Navigation property of the entity set which points to the Table entity set>::com.sap.vocabularies.UI.v1.LineItem
and the Cell extension to be registered in the format as :
ResponsiveTableCellsExtension|<Name of the Table EntitySet>|<Navigation property of the entity set which points to the Table entity set>::com.sap.vocabularies.UI.v1.LineItem
And under these we need to give the fragment names , class name and type.
In our example we have a table entity set name as "SecondEntitySet" with the navigation property as "ToSecondEntity" (which is from FirstEntitySet to SecondEntitySet ) as shown in metadata below :
Hence our manifest.json will be like :
Note :
1. Since we are doing the column extension for a table in Object Page, I have renamed the ListReportTableColumns and ListReportTableCells fragments to ObjectPageTableColumns ObjectPageTableCells respectively for a better readability.
2. This will work correctly when the EntitySet of the table is put along with the navigation property of which it has been pointed from. i.e in our example the "SecondEntitySet" is the entityset bound to the table in object page and the corresponding navigation property from the "FirstEntitySet" i.e . "ToSecondEntitySet" has be added. If this is added incorrectly then the column will not be rendered in the table. This is very important and has to be added appropriately.
Now after saving the files , execution of the app will render the UI as:
Now we find the new column with the input cell rendered in the table under an Object Page.
By this way developers can easily write extensions via breakouts to add custom column to responsive tables and also this logic can be applied for Tree Table , Analytical Table and also Grid Tables.
Further references and useful link regarding extension of columns in tables for generated Fiori app:
https://sapui5.hana.ondemand.com/#/topic/d525522c1bf54672ae4e02d66b38e60c.html
Hope you find this blog helpful ?. Further more, I will come up with few more blogs related to Smart templates, Fiori and SAPUI5.
Thank you.
While working with smart template apps, I had a requirement to add a new custom column in a responsive table under List Reports and Object Pages, So I had understand the concept a little deeper and implement it. Hence I felt like going for a blog on this.
Before we go into the detail, Why do we need a custom column in a responsive table of smart template application ?
In a Smart template applications the UI.LineItem annotation will generate a Smart table which will internally have a responsive table with the columns having read only fields like Label, Text or ObjectHeader. So if there is a requirement to have a input box as column cells or may be toggle button or any other custom control of design choice, then we need to add a new custom column for the Smart table of the Smart template application.
Before going through this blog, prerequisites for the UI5 / Non UI5 developers should be :
- To know how to create a smart template application in Web IDE
- To know to concept of Annotations in smart template
- Basic UI5 knowledge on XML fragments, JS Views .
Basically for extending a column of a responsive table we have to follow particular patterns for List Report and Object Page.i.e If we need to extend a column in Object page we have to configure the manifest.json in a different way when compared to the table in a List Report page which I will explain in a later step.
I have a smart template application created in SAP Web IDE with an Odata service, also it has a list view and an object page.
For the table in the List Report I would like to add a new custom column which has sap.m.Input in the cells.
First step to start is to create the extension files under the folder "ext" as shown below:
Open the ListReportTableColumns.fragment.xml and add this code in the file and save it.
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<Column>
<Text text="Note"/>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "Test", "columnIndex" : "3"}'/>
</customData>
</Column>
</core:FragmentDefinition>In this code we are creating a new fragment for a custom column with the column name as "Note" and the custom data provided will have columnKey as Test and columnIndex as 3 (for having the column in that position).
CustomData will have the key "p13nData" as standard value as this is specific for the Smart Table's column extension and this object can hold properties like :
- columnKey
A unique key used to save/retrieve/apply personalization for the column
- sortProperty
Similar to the table column property; should point to a OData/model property name
- filterProperty
Similar to the table column property; should point to a OData/model property name
- type
Value can be either date or numeric or empty string; control will be switched accordingly
- maxLength
Numeric value, for example, 5 to restrict number of entries in input fields
- precision
Numeric value for precision
- scale
Numeric value for scale.
For further reference on p13nData or CustomData for SmartTable please refer this link
After this step click on the ListReportTableCells.fragment.xml and add this code and save.
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<Input value=""></Input>
</core:FragmentDefinition>So here we added a fragment definition for sap.m.Input as the cell for the new custom column to be added in the table.
Note: Here we can bind the value of the Input control either with any hardcoded data or with any property from the EntitySet as done in control binding.
The above steps are common for extending a column of table in List report and Object page.
The next step is to configure the manifest.json, I will explain how to configure for List report and Object Page one by one.
Extending a custom column in List Report:
In the manifest.json navigate to the “extends” property, where we put the fragment name inside the viewExtensions attribute and under the template “sap.suite.ui.generic.template.ListReport.view.ListReport”.
And under this we need to register the Column extension fragment in the format as :
ResponsiveTableColumnsExtension|<Name of the EntitySet>
and the Cell extension to be registered in the format as :
ResponsiveTableCellsExtension|<Name of the EntitySet>
And under these we need to give the fragment names , class name and type.
Thereby the code will be like :
"extends": {
"extensions": {
"sap.ui.viewExtensions": {
"sap.suite.ui.generic.template.ListReport.view.ListReport": {
"ResponsiveTableColumnsExtension|FirstEntitySet": {
"className": "sap.ui.core.Fragment",
"fragmentName": "Project.ext.fragments.ListReportResponsiveTableColumns",
"type": "XML"
},
"ResponsiveTableCellsExtension|FirstEntitySet": {
"className": "sap.ui.core.Fragment",
"fragmentName": "Project.ext.fragments.ListReportResponsiveTableCells",
"type": "XML"
}As mentioned earlier in our example the EntitySet used is FirstEntitySet and and Entity is FirstEntity
After saving this, execution of the app will display as shown below :
So now we were able to add a new column to a responsive table in List Report view.
Extending a custom column in Object Page:
In the manifest.json navigate to the “extends” property, where we put the fragment name inside the viewExtensions attribute and under the template “sap.suite.ui.generic.template.ObjectPage.view.Details”.
And under this we need to register the Column extension fragment in the format as :
ResponsiveTableColumnsExtension|<Name of the Table EntitySet>|<Navigation property of the entity set which points to the Table entity set>::com.sap.vocabularies.UI.v1.LineItem
and the Cell extension to be registered in the format as :
ResponsiveTableCellsExtension|<Name of the Table EntitySet>|<Navigation property of the entity set which points to the Table entity set>::com.sap.vocabularies.UI.v1.LineItem
And under these we need to give the fragment names , class name and type.
In our example we have a table entity set name as "SecondEntitySet" with the navigation property as "ToSecondEntity" (which is from FirstEntitySet to SecondEntitySet ) as shown in metadata below :
Hence our manifest.json will be like :
"extensions": {
"sap.ui.viewExtensions": {
"sap.suite.ui.generic.template.ObjectPage.view.Details": {
"ResponsiveTableColumnsExtension|SecondEntitySet|ToSecondEntity::com.sap.vocabularies.UI.v1.LineItem": {
"className": "sap.ui.core.Fragment",
"fragmentName": "Project.ext.fragment.ObjectPageTableColumns",
"type": "XML"
},
"ResponsiveTableCellsExtension|SecondEntitySet|ToSecondEntity::com.sap.vocabularies.UI.v1.LineItem": {
"className": "sap.ui.core.Fragment",
"fragmentName": "Project.ext.fragment.ObjectPageTableCells",
"type": "XML"
}
}
}
}Note :
1. Since we are doing the column extension for a table in Object Page, I have renamed the ListReportTableColumns and ListReportTableCells fragments to ObjectPageTableColumns ObjectPageTableCells respectively for a better readability.
2. This will work correctly when the EntitySet of the table is put along with the navigation property of which it has been pointed from. i.e in our example the "SecondEntitySet" is the entityset bound to the table in object page and the corresponding navigation property from the "FirstEntitySet" i.e . "ToSecondEntitySet" has be added. If this is added incorrectly then the column will not be rendered in the table. This is very important and has to be added appropriately.
Now after saving the files , execution of the app will render the UI as:
Now we find the new column with the input cell rendered in the table under an Object Page.
By this way developers can easily write extensions via breakouts to add custom column to responsive tables and also this logic can be applied for Tree Table , Analytical Table and also Grid Tables.
Further references and useful link regarding extension of columns in tables for generated Fiori app:
https://sapui5.hana.ondemand.com/#/topic/d525522c1bf54672ae4e02d66b38e60c.html
Hope you find this blog helpful ?. Further more, I will come up with few more blogs related to Smart templates, Fiori and SAPUI5.
Thank you.
20 Comments
