SAP Fiori Elements Analytical List Page - Creating the Basic App

[former_member103161]

Now that you know about the anatomy of an Analytical List Page and when to use it, Let us get the basic Analytical List Page working with the bare minimum required to create the app, and then move on to add further details. SAP Web IDE supports creation of Analytical List Pages, details of the same can be found here.

For this you need the following:

• The service metadata to be used for the app


• Basic Annotations as described below
  
  
  
  • Default SelectionPresentationVariant(SPV) i.e it has no qualifier: SPV will in-turn include the following annotations
    
    
    
    • SelectionVariant - used to filter the incoming data with further selection ranges
    
    
    • PresentationVariant - used for visualising the data in terms of sort order, grouping, chart visualisation and lineItem visualisation
    
    
    
    
  
  
  
  

In case the default SPV is not present the other possible options are detailed in the documentation link

A sample SelectionVariant will be as follows for the sample ALP App created based on the steps detailed in this blog.

<Annotations Target="DummyNamespace.SO_SALESORDERANALYSISType">

<Annotation Term="UI.SelectionPresentationVariant">

<Record Type="UI.SelectionPresentationVariantType">

	<PropertyValue Property="SelectionVariant">

		<AnnotationPath>@UI.SelectionVariant#Default</AnnotationPath>

	</PropertyValue>

	<PropertyValue Property="PresentationVariant">

		<AnnotationPath>@UI.PresentationVariant#Default</AnnotationPath>

	</PropertyValue>

</Record>

</Annotation>

<Annotation Term="UI.SelectionVariant" Qualifier="Default">

<Record>

	<PropertyValue Property="Text" String="Default"/>

	<PropertyValue Property="SelectOptions">

		<Collection>

			<Record Type="UI.SelectOptionType">

				<PropertyValue Property="PropertyName" PropertyPath="GrossAmount"/>

				<PropertyValue Property="Ranges">

					<Collection>

						<Record Type="UI.SelectionRangeType">

							<PropertyValue Property="Sign" EnumMember="UI.SelectionRangeSignType/I"/>

							<PropertyValue Property="Option" EnumMember="UI.SelectionRangeOptionType/GE"/>

							<PropertyValue Property="Low" String="100"/>

						</Record>

					</Collection>

				</PropertyValue>

			</Record>

		</Collection>

	</PropertyValue>

</Record>

</Annotation>

<Annotation Term="UI.PresentationVariant" Qualifier="Default">

<Record>

	<PropertyValue Property="Text" String="KPI: Net Sales per Calendar Month"/>

	<PropertyValue Property="SortOrder">

		<Collection>

			<Record Type="Common.SortOrderType">

				<PropertyValue Property="Property" PropertyPath="NetAmount"/>

				<PropertyValue Property="Descending" Bool="false"/>

			</Record>

		</Collection>

	</PropertyValue>

	<PropertyValue Property="Visualizations">

		<Collection>

			<AnnotationPath>@UI.Chart#Default</AnnotationPath>

			<AnnotationPath>@UI.LineItem#Default</AnnotationPath>

		</Collection>

	</PropertyValue>

</Record>

</Annotation>

<Annotation Term="UI.Chart" Qualifier="Default">

<Record Type="UI.ChartDefinitionType">

	<PropertyValue Property="Title" String="Sales per Month, Current Year"/>

	<PropertyValue Property="Description" String="Net Sales per Calendar Month"/>

	<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>

	<PropertyValue Property="Dimensions">

		<Collection>

			<PropertyPath>DeliveryCalendarMonth</PropertyPath>

		</Collection>

	</PropertyValue>

	<PropertyValue Property="DimensionAttributes">

		<Collection>

			<Record Type="UI.ChartDimensionAttributeType">

				<PropertyValue Property="Dimension" PropertyPath="DeliveryCalendarMonth"/>

				<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>

			</Record>

		</Collection>

	</PropertyValue>

	<PropertyValue Property="Measures">

		<Collection>

			<PropertyPath>NetAmount</PropertyPath>

		</Collection>

	</PropertyValue>

	<PropertyValue Property="MeasureAttributes">

		<Collection>

			<Record Type="UI.ChartMeasureAttributeType">

				<PropertyValue Property="Measure" PropertyPath="NetAmount"/>

				<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>

				<PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#KPIValue"/>

			</Record>

		</Collection>

	</PropertyValue>

</Record>

</Annotation>

<Annotation Term="UI.LineItem" Qualifier="Default">

<Collection>

	<Record Type="UI.DataField">

		<PropertyValue Property="Value" Path="Currency"/>

	</Record>

	<Record Type="UI.DataField">

		<PropertyValue Property="Value" Path="Product"/>

	</Record>

	<Record Type="UI.DataField">

		<PropertyValue Property="Value" Path="NetProductPrice"/>

	</Record>

</Collection>

</Annotation>

</Annotations>

With just this, you will get the basic app working but let us also get the filter to have some meaningful attributes. For this we need to add a valueList annotation to the Currency Property as shown below, you may also give it a default value as shown here:

<Annotations Target="DummyNamespace.SO_SALESORDERANALYSISType/Currency">

	<Annotation Term="Common.FilterDefaultValue" String="EUR"/>

		<Annotation Term="Common.ValueList">

		<Record>

			<PropertyValue Property="Label" String="Currency"/>

			<PropertyValue Property="CollectionPath" String="CurrencyVH"/>

			<PropertyValue Property="SearchSupported" Bool="true"/>

			<PropertyValue Property="Parameters">

				<Collection>

					<Record Type="Common.ValueListParameterInOut">

						<PropertyValue Property="LocalDataProperty" PropertyPath="Currency"/>

						<PropertyValue Property="ValueListProperty" String="Currency"/>

					</Record>

					<Record Type="Common.ValueListParameterInOut">

						<PropertyValue Property="LocalDataProperty" PropertyPath="CurrencyT"/>

						<PropertyValue Property="ValueListProperty" String="CurrencyText"/>

					</Record>

				</Collection>

			</PropertyValue>

		</Record>

         </Annotation>

</Annotations>

With this the app will result in a UI as follows on click of Go Button, if compact filter mode is chosen:



Next we will add KPI Tags to this sample. For this we need to change the manifest setting as follows:

"keyPerformanceIndicators": {

    "KPIRevenue":{

    "model":"kpiModel",

    "entitySet":"SO_TOTALSalesKPI",

    "qualifier":"KPIRevenue",

    "detailNavigation":"dummyNavigation"

    }

}



There is also a new kpiModel added to the manifest

"kpiModel": {

	"preload": true,

	"dataSource": "mainService",

	"settings": {

    }

}

Similarly you can add further KPIs as required by the business case, with this the Basic ALP app is ready with the Title elements KPI Tags, Variant Management, Chose filter modes and customize filter area, Share – To share the ALP application url via email/save as a tile etc as shown in the image below, marked as A, B, C and D respectively:



 

Please note that the KPIs mentioned here are purely for demo purpose. In an ideal scenario the KPIs from SAP Smart Business Service will be used to display the tags in ALP.

This project is available for download for further trial. Hope the blog was informative, look forward to your comments and feedback.

In the next blog in the series we will see how to introduce further analytical capabilities by bringing in the Visual Filter into this project.