Configuring chart content area of an Analytical List Page (ALP) application

[AshishAnand]

As I have also discussed in my first blog of this blog series, an Analytical List Page or an ALP application's content area have 2 sub-sections i.e. chart area and table area. So an ALP application can have 3 variants or mode:

1. Chart only mode


2. Table only mode


3. Hybrid mode containing both chart and table

The end-user can switch among these modes using the segmented button given on the chart toolbar. In this blog, I'll discuss how to configure the chart area of an ALP application which allows the end-user to analyse the data using the chart and drill down and also act as an additional filter to further filter the table data based on the chart selection.

Prerequisites

1. Make sure you have been to the previous blog of this blog series


2. For reference, you can clone the GIT repo for this sample application which we are building.

Configuring Chart

ALP's chart area need a selectionPresentationVariant (SPV) Annotation which points to another chart annotation. In our demo application for this blog series I haven't provided any qualifier setting in the manifest file, so the default SPV annotation will be considered.

				<Annotation Term="UI.SelectionPresentationVariant">

					<Record Type="UI.SelectionPresentationVariantType">

						<PropertyValue Property="SelectionVariant">

							<Record Type="UI.SelectionVariantType">

								<PropertyValue Property="Parameters">

									<Collection>

										<Record Type="UI.Parameter">

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

											<PropertyValue Property="PropertyValue" String="USD"/>

										</Record>

									</Collection>

								</PropertyValue>

							</Record>

						</PropertyValue>

						<PropertyValue Property="PresentationVariant">

							<Record Type="UI.PresentationVariantType">

								<PropertyValue Property="Visualizations">

									<Collection>

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

									</Collection>

								</PropertyValue>

							</Record>

						</PropertyValue>

					</Record>

				</Annotation>

In the UI.chart annotation, we will define measures, measureAttributes, dimension and dimesionAttributes just as same we have done for visual filters.

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

					<Record Type="UI.ChartDefinitionType">

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

						<PropertyValue Property="Measures">

							<Collection>

								<PropertyPath>Revenue</PropertyPath>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="MeasureAttributes">

							<Collection>

								<Record Type="UI.ChartMeasureAttributeType">

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

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

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="Dimensions">

							<Collection>

								<PropertyPath>DeliveryDateTime</PropertyPath>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="DimensionAttributes">

							<Collection>

								<Record Type="UI.ChartDimensionAttributeType">

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

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

								</Record>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

The above annotation should yield you a chart like this:



As you can see in the above image that by default end-user gets a chart toolbar which provides activities such as view switch segmented buttons, change graph type button, zoom in and out functionality for the chart, view by button to further drill down the chart and the details button which shows the details of the selected data point of the chart.

Configuring additional action buttons in ALP's chart toolbar

In addition to the standard buttons, the application developer can also provide additional action buttons in chart toolbar 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 chart's actions related annotations should be part of chart's UI.Chart annotation:

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

					<Record Type="UI.ChartDefinitionType">

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

						<PropertyValue Property="Measures">

							<Collection>

								<PropertyPath>Revenue</PropertyPath>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="MeasureAttributes">

							<Collection>

								<Record Type="UI.ChartMeasureAttributeType">

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

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

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="Dimensions">

							<Collection>

								<PropertyPath>DeliveryDateTime</PropertyPath>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="DimensionAttributes">

							<Collection>

								<Record Type="UI.ChartDimensionAttributeType">

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

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

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="Actions">

							<Collection>

								<Record Type="UI.DataFieldForIntentBasedNavigation">

									<PropertyValue Property="SemanticObject" String="testObject"/>

									<PropertyValue Property="Action" String="testAction"/>

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

									<PropertyValue Property="Label" String="{@i18n&gt;TEST_ACTION}"/>

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

								</Record>

								<Record Type="UI.DataFieldForAction">

									<PropertyValue Property="Action" String="SEPMRA_PROD_MAN.SEPMRA_PROD_MAN_Entities/SEPMRA_C_PD_ProductFavorites_add"/>

									<PropertyValue Property="Label" String="{@i18n&gt;ADD}"/>

								</Record>

							</Collection>

						</PropertyValue>

					</Record>

				</Annotation>

After adding the above action property the chart annotation, you can see two additional buttons in the chart's toolbar each coming from one annotation discussed above.

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 chart section of our ALP application and learnt about different settings for the chart area and chart's action buttons.

What Next?

In the next blog, I’ll about how to configure ALP table area.