Technical Articles
SAP Fiori Elements Analytical List Page – Creating the Basic App
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
- Default SelectionPresentationVariant(SPV) i.e it has no qualifier: SPV will in-turn include the following annotations
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.
Hello Prasita,
Thank you so much for your precious sharing. I actually build up an application based on your blog, which works pretty nice, thanks to you. I also added one more visual filter to my application, right now I am having an issue regarding filtering them. Each perfectly filters Main Chart and the Table, but as far as I know, and also as it is mentioned in the Visual Filter Design page of SAP, the visual filters could have also filter each other. Since they have a shared measure, I am expecting that as I click one of the data point on one of the visual filter, the other visual filter's data could have been filtered ( which is not happening right now ). I would be very glad if you can take a look at my below XML code and let me know where I might be doing wrong. Hope to hear from you. Best, Merve
Hello Merve,
Thank you for your comments. To connect the visual filters you can make use of the ValueListParameterIn and ValueListParameterOut as explained here.
Hello Prasita, It worked like a charm!!! Thank you so much!
Hello Prasita,
Thats a great blog! I m building an ALP from SEGW service. I could configure compact filter & the table is populated fine. But the chart is not getting rendered. In console i am facing the below.
assert-dbg.js:34 Assertion failed: The length of the given section must be positive greater than 0.
.
Further If i change chart type, I end up with this error:Render must not be called within Before or After Rendering Phase. Call ignored. - [object Object]
Can you please help?
Hello Sakthi,
Thanks for your comments. Have you made use of any extensions? Is this a sample project created? Can you share additional details of the project?
Hi Prasita,
I have not added extensions. It is not a sample project. Service is from SEGW. The app is purely based on front end annotations. Smart filter, Smart table with responsive behavior & smart charts are rendered from annotations. Chart x axis is of type: Edm.DateTime, Y axis is of type: Int32 Here are the annotations:
<Annotations Target=”Metadata.SERVICE_DETAILS”>
<Annotation Term=”UI.PresentationVariant” Qualifier=”ChartDefault”>
<Record Type=”UI.PresentationVariantType”>
<PropertyValue Property=”Visualizations”>
<Collection>
<AnnotationPath>@UI.Chart#ChartDefault</AnnotationPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.HeaderInfo”>
<Record Type=”UI.HeaderInfoType”>
<PropertyValue Property=”TypeName” String=”Service Detail”/>
<PropertyValue Property=”TypeNamePlural” String=”Service Details”/>
</Record>
</Annotation>
<Annotation Term=”UI.LineItem”>
<Collection>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”PrsId”/>
</Record>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”Vkorg”/>
</Record>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”Auart”/>
</Record>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”Chind”/>
</Record>
</Collection>
</Annotation>
<Annotation Term=”UI.SelectionFields”>
<Collection>
<PropertyPath>Land1</PropertyPath>
<PropertyPath>Brand</PropertyPath>
<PropertyPath>Vkorg</PropertyPath>
<PropertyPath>Auart</PropertyPath>
<PropertyPath>PrsId</PropertyPath>
<PropertyPath>Zdate</PropertyPath>
</Collection>
</Annotation>
<Annotation Term=”UI.Chart” Qualifier=”ChartDefault”>
<Record Type=”UI.ChartDefinitionType”>
<PropertyValue Property=”ChartType” EnumMember=”UI.ChartType/Line”/>
<PropertyValue Property=”Measures”>
<Collection>
<PropertyPath>TimeTaken</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”MeasureAttributes”>
<Collection>
<Record Type=”UI.ChartMeasureAttributeType”>
<PropertyValue Property=”Measure” PropertyPath=”TimeTaken”/>
<PropertyValue Property=”Role” EnumMember=”UI.ChartMeasureRoleType/Axis1″/>
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property=”Dimensions”>
<Collection>
<PropertyPath>Zdate</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”DimensionAttributes”>
<Collection>
<Record Type=”UI.ChartDimensionAttributeType”>
<PropertyValue Property=”Dimension” PropertyPath=”Zdate”/>
<PropertyValue Property=”Role” EnumMember=”UI.ChartDimensionRoleType/Category”/>
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property=”AxisScaling”>
<Record Type=”UI.ChartAxisScalingType”>
<PropertyValue Property=”ScaleBehavior” EnumMember=”UI.ChartAxisScaleBehaviorType/AutoScale”/>
</Record>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
<Annotations Target=”Metadata.SERVICE_DETAILS/Vkorg”>
<Annotation Term=”Common.ValueList”>
<Record Type=”Common.ValueListType”>
<PropertyValue Property=”CollectionPath” String=”F4_SALES_ORGSet”/>
<PropertyValue Property=”Parameters”>
<Collection>
<Record Type=”Common.ValueListParameterInOut”>
<PropertyValue Property=”LocalDataProperty” PropertyPath=”Vkorg”/>
<PropertyValue Property=”ValueListProperty” String=”Vkorg”/>
</Record>
<Record Type=”Common.ValueListParameterDisplayOnly”>
<PropertyValue Property=”ValueListProperty” String=”Vtext”/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
<Annotations Target=”Metadata.SERVICE_DETAILS/Land1″>
<Annotation Term=”Common.ValueList”>
<Record Type=”Common.ValueListType”>
<PropertyValue Property=”CollectionPath” String=”F4_CountrySet”/>
<PropertyValue Property=”Parameters”>
<Collection>
<Record Type=”Common.ValueListParameterInOut”>
<PropertyValue Property=”LocalDataProperty” PropertyPath=”Land1″/>
<PropertyValue Property=”ValueListProperty” String=”Land1″/>
</Record>
<Record Type=”Common.ValueListParameterDisplayOnly”>
<PropertyValue Property=”ValueListProperty” String=”Landx”/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
<Annotations Target=”Metadata.SERVICE_DETAILS/Auart”>
<Annotation Term=”Common.ValueList”>
<Record Type=”Common.ValueListType”>
<PropertyValue Property=”CollectionPath” String=”F4_SALES_TYPESet”/>
<PropertyValue Property=”Parameters”>
<Collection>
<Record Type=”Common.ValueListParameterInOut”>
<PropertyValue Property=”LocalDataProperty” PropertyPath=”Auart”/>
<PropertyValue Property=”ValueListProperty” String=”Auart”/>
</Record>
<Record Type=”Common.ValueListParameterDisplayOnly”>
<PropertyValue Property=”ValueListProperty” String=”Bezei”/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
</Annotations>
After clicking go btton in filter bar, table gets filled with data, where as Chart looks like this. In Console the above said error is coming.
Few pointers are to confirm that there is data for the given Zdate and TimeTaken. The console error does not seem related to this at first glance, however to confirm I will have to debug further.
Hi guys,
Do you have please any updates concrning this issue? I'm facing the same now..
Hello Prasita,
I am facing an issue while extending fiori elements app of type anaytical (fiori elements). Can you help. Below is the link to post.
https://answers.sap.com/questions/12868723/fiori-elements-app-extension-analytical-fiori-elem.html
Thanks,
Rakesh
Hello Prasita,
do you know how to add a MEasure as a filter for Analytical List Page? Many thanks!
Jeff