Skip to Content
Technical Articles
Author's profile photo Ashish Anand

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

  1. 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.
  2. 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:

  1. UI.DataFieldForAction annotation for function imports defined in your service.
  2. 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&gt;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&gt;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&gt;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&gt;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.

Assigned tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      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

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hello Jocelyn,

      Thanks for the insightful feedback, I'll add to the existing and future blogs.

      Thanks and Regards

      Ashish 🙂 

      Author's profile photo Sanchit Shedale
      Sanchit Shedale

      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??

      Author's profile photo 培尭 徐
      培尭 徐

      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

      Author's profile photo Neha Kumari
      Neha Kumari

      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?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      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 🙂

      Author's profile photo Sanchit Shedale
      Sanchit Shedale

      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

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      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