Skip to Content
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

  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.

3 Comments
You must be Logged on to comment or reply to a post.
  • 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  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