The documentation section of the Fiori Elements provides some basic steps on how to create multiple views for a List Report table. But as I discovered, there are some keys details missing to get it all working together.
This is how the multiple tabs look like in Multiple Table mode. This is useful when you need to show different table layouts for different tabs, even binding them to different entities on your OData service.
For someone looking to implement multiple views for List reports, here are the steps.
When creating the tab, you can use the main entity of your OData service to start with. We modify this later in the annotations.xml
If you are using different entities for each of tabs, then only the selection fields that are applicable will be used for the current selected tab.
The Header Text will be the name of the tab.
Filter property is the field to be used to filter the table initially. To get all data without filters, use something like <key field> not equal to null.
This guide sometimes glitches, and I could not get it to work completely, so I manually added the changes to the annotations.xml file.
SelectionVariant will contain the default filter for the table.
PresentationVariant will contain the table details.
The final output of the changes should look something like this:
Inside the Annotations collection for the target entity
The Table is defined in a LineItem annotation with the identifier TAB1, which is used above for the PresentationVariant. The columns are only for an indication. You can define as many as you would like. The table type must be selected appropriately.
The second variant can also be defined in the same way for the second tab.
The Annotations container target will be of different types when using different entities.
In the manifest.json, under the sap.ui.generic.app section, the following description for the page is needed.
The variants are referenced by the qualifier for the SelectionPresentationVariant that was provided in the beginning.
Once the config is provided correctly, you should have multiple tabs with their own tables.
In summary, once you have generated the basic structure of your Fiori Elements List Report, you can modify it to have multiple tabs, each with its own table layout and bound to separate entities. This configuration is done via the local annotation.xml file and the manifest.json.
I hope this helps you build better reports when you consider Fiori Elements for your next report.
In case this helps you, let me in know in the comments so I can share more blogs like this one. Also, if you have questions regarding some of the steps, please ask in the comments.
This is how the multiple tabs look like in Multiple Table mode. This is useful when you need to show different table layouts for different tabs, even binding them to different entities on your OData service.
For someone looking to implement multiple views for List reports, here are the steps.
- Generate the app using the List Report Template.
When creating the tab, you can use the main entity of your OData service to start with. We modify this later in the annotations.xml
- Use the guided development to add the selection fields as needed.
If you are using different entities for each of tabs, then only the selection fields that are applicable will be used for the current selected tab.
- Use the “Configure Multiple Views” guide
The Header Text will be the name of the tab.
Filter property is the field to be used to filter the table initially. To get all data without filters, use something like <key field> not equal to null.
This guide sometimes glitches, and I could not get it to work completely, so I manually added the changes to the annotations.xml file.
- This example is using a SelectionPresentationVariant, with a table visualization.
SelectionVariant will contain the default filter for the table.
PresentationVariant will contain the table details.
The final output of the changes should look something like this:
Inside the Annotations collection for the target entity
<Annotation Term="UI.SelectionPresentationVariant" Qualifier="VAR1">
<Record>
<PropertyValue Property="Text" String="{@i18n>header}" />
<PropertyValue Property="SelectionVariant">
<Record>
<PropertyValue Property="Text" String="{@i18n>header}" />
<PropertyValue Property="SelectOptions">
<Collection>
<Record Type="UI.SelectOptionType">
<PropertyValue Property="PropertyName" PropertyPath="HdrItmFlag" />
<PropertyValue Property="Ranges">
<Collection>
<Record Type="UI.SelectionRangeType">
<PropertyValue EnumMember="UI.SelectionRangeSignType/I" Property="Sign" />
<PropertyValue EnumMember="UI.SelectionRangeOptionType/EQ" Property="Option" />
<PropertyValue Property="Low" String="H" />
</Record>
</Collection>
</PropertyValue>
</Record>
</Collection>
</PropertyValue>
</Record>
</PropertyValue>
<PropertyValue Property="PresentationVariant">
<Record>
<PropertyValue Property="Text" String="{@i18n>header}" />
<PropertyValue Property="Visualizations">
<Collection>
<AnnotationPath>@UI.LineItem#TAB1</AnnotationPath>
</Collection>
</PropertyValue>
</Record>
</PropertyValue>
</Record>
</Annotation>
The Table is defined in a LineItem annotation with the identifier TAB1, which is used above for the PresentationVariant. The columns are only for an indication. You can define as many as you would like. The table type must be selected appropriately.
<Annotation Term="UI.LineItem" Qualifier="TAB1">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="DeliveryDocument" />
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="DeliveryDocumentType" />
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CreationDate" />
</Record>
</Collection>
</Annotation>The second variant can also be defined in the same way for the second tab.
The Annotations container target will be of different types when using different entities.
In the manifest.json, under the sap.ui.generic.app section, the following description for the page is needed.
"pages": {
"ListReport|C_DELIVERY_MONITOR": {
"entitySet": "C_DELIVERY_MONITOR",
"component": {
"name": "sap.suite.ui.generic.template.ListReport",
"list": true,
"settings": {
"quickVariantSelectionX": {
"enableAutoBinding": true,
"showCounts": true,
"variants": {
"Header": {
"key": "Header",
"entitySet": "C_DELIVERY_MONITOR",
"annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#VAR1"
},
"Items": {
"key": "Item",
"entitySet": "C_DELIVERY_MONITOR",
"annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#VAR2"
}
}
},
"condensedTableLayout": true,
"smartVariantManagement": true,
"enableTableFilterInPageVariant": true,
"filterSettings": {
"dateSettings": {
"useDateRange": true
}
}
}
}
}
}The variants are referenced by the qualifier for the SelectionPresentationVariant that was provided in the beginning.
Once the config is provided correctly, you should have multiple tabs with their own tables.
In summary, once you have generated the basic structure of your Fiori Elements List Report, you can modify it to have multiple tabs, each with its own table layout and bound to separate entities. This configuration is done via the local annotation.xml file and the manifest.json.
I hope this helps you build better reports when you consider Fiori Elements for your next report.
In case this helps you, let me in know in the comments so I can share more blogs like this one. Also, if you have questions regarding some of the steps, please ask in the comments.
- SAP Managed Tags:
1 Comment
