Technical Articles
Configuring table area of an Analytical List Page (ALP) application
In this blog, I’ll discuss how to configure the table area of an ALP application.
Prerequisites
- Make sure you have been to the previous blog of this blog series where I discussed different settings for the chart area of ALP application.
- For reference, you can clone the GIT repo for this sample application which we are building.
Configuring table
To configure ALP table, we need “UI.LineItem” annotation. In this example, I haven’t provided any qualifier setting in the manifest file, so the default LineItem annotation will be considered.
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Product"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Currency"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="DeliveryDateTime"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Revenue"/>
</Record>
</Collection>
</Annotation>
after defining above lineitem annotation, we should get a table with the following columns:
As you can see in the above image that by default end-user gets a table toolbar which provides activities such as view switch segmented buttons, button to view the table data with and without chart selection and the view details button which shows the details of the selected row of the table.
Configuring additional action buttons for ALP’s table toolbar and rows
In addition to the standard buttons, the application developer can also provide additional action buttons at table toolbar or table row using:
- UI.DataFieldForAction annotation for function imports defined in your service.
- UI.DataFieldForIntentBasedNavigation for indent based navigation with help of semantic object and action
All these table action buttons related annotations should be part of UI.LineItems annotation:
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Product"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Currency"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="DeliveryDateTime"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Revenue"/>
</Record>
<Record Type="UI.DataFieldForIntentBasedNavigation">
<PropertyValue Property="SemanticObject" String="testObject"/>
<PropertyValue Property="Inline" Bool="true"/>
<PropertyValue Property="Action" String="testAction"/>
<PropertyValue Property="RequiresContext" Bool="true"/>
<PropertyValue Property="Determining" Bool="false"/>
<PropertyValue Property="Label" String="{@i18n>TEST}"/>
</Record>
<Record Type="UI.DataFieldForAction">
<PropertyValue Property="Action" String="SEPMRA_PROD_MAN.SEPMRA_PROD_MAN_Entities/SEPMRA_C_PD_ProductFavorites_add"/>
<PropertyValue Property="Inline" Bool="true"/>
<PropertyValue Property="Determining" Bool="false"/>
<PropertyValue Property="Label" String="{@i18n>ADD}"/>
</Record>
<Record Type="UI.DataFieldForIntentBasedNavigation">
<PropertyValue Property="SemanticObject" String="testObject1"/>
<PropertyValue Property="Inline" Bool="false"/>
<PropertyValue Property="Action" String="testAction1"/>
<PropertyValue Property="RequiresContext" Bool="true"/>
<PropertyValue Property="Determining" Bool="false"/>
<PropertyValue Property="Label" String="{@i18n>TEST}"/>
</Record>
<Record Type="UI.DataFieldForAction">
<PropertyValue Property="Action" String="SEPMRA_PROD_MAN.SEPMRA_PROD_MAN_Entities/SEPMRA_C_PD_ProductFavorites_toggle"/>
<PropertyValue Property="Inline" Bool="false"/>
<PropertyValue Property="Determining" Bool="false"/>
<PropertyValue Property="Label" String="{@i18n>ADD}"/>
</Record>
</Collection>
<Annotation Term="UI.Criticality" EnumMember="UI.CriticalityType/Critical"/>
</Annotation>
After modifying your lineItem annotation you shuld be able to see two additional action buttons at the table toolbar and two addtional action button in each row of the table. property “Inline” of the action annotation id marked as true will render the action button at each row or else at the table toolbar.
property “RequireContext” marked as true means that action needs some context to perform that action i.e. one or more table row must be selected by the user in order to make these action button enabled.
Defining criticality for the table row
The criticality of the table row can be defined by adding “UI.Criticality” annotation to your lineItem annotation. Kindly refer to the above annotation example. For the sake of simplicity, I have used hardcoded enum value but in a productive scenario, criticality should be on basis of property path.
A word of caution !!
Make sure you always mark the property “Determining” as false, otherwise the action button will appear in the application’s footer bar.
Conclusion
In this blog, we successfully configured the table section of our ALP application and learnt about different settings for the table area and table toolbar and inline action buttons.
What Next?
In the next blog, I’ll about how to configure ALP’s KPI tag.
HI Anish, Thanks for these! I will add them to the Fiori elements wiki.
One small note - it would be really helpful to state which SAPUI5 version you used for each example. Just so people know what was used in case any of the behaviours change in later versions
Thanks
Jocelyn
Hello Jocelyn,
Thanks for the insightful feedback, I'll add to the existing and future blogs.
Thanks and Regards
Ashish 🙂
Hi Jocelyn,
I have a requirement to display analytical data and CRUD operations in the app. Can i create CRUD operations in Analytical list page??
hi Anish,
usually i can click the item of table area to open a new object page.
and i can develop that object page by change annotation file code.
but if i want to create a new object page fiori elements application,
and click the item of table to calling that object page application,i dont know how can i do it
(can i use the list report page application to call the object page?)
Look forward to your reply
Thanks
XU
Hi Ashish Anand , How can we navigate to an Object Page which does not use the same EntitySet as the List page? Is there a possibility to do so?
Hi Neha,
It's possible, please refer to the below documentation for more details:
https://sapui5.hana.ondemand.com/sdk#/topic/75002b3c5ad7407dadce2f88f15f4253
Hope it helps 🙂
Can anyone advise me on how to create CRUD operations in Analytical list page because my requirement is to display too much Chart and graph data combined with table and also CRUD operations should be present
Hi Sanchit Shedale ,
ALP, as the name suggests, is meant for analytical application and not transactional Hence CRUD operations are not supported out of the box. However, you achieve this using some custom actions and have your own Implementation. For out of the box CRUD support kindly use LROP floorplan from Fiori Elements.
Hope it helps 🙂
Thanks and Regards
Ashish