第 225 页 / 共 465 页
5.6 Summary
Note
If you want to further modify any of the card properties, you can edit them in the
projectname (cid:2) webapp (cid:2) manifest.json under the sap.ovp (cid:2) Cards section.
5.6 Summary
In this chapter, we discussed OVPs. We created the CDS views required for the OVP
cards and covered the required CDS view annotations for generating different OVP
cards. Then we talked about creating OData projects and registering the OData ser-
vice. Later on, we used the SAP Web IDE to generate the OVP from the OData services
and explored configuring different OVP cards (e.g., list card, analytical card, and table
card). In the next chapter, you’ll learn about creating an analytical list report page.
225
| Note If you want to further modify any of the card properties, you can edit them in the (cid:2) (cid:2) (cid:2) |
| projectname webapp manifest.json under the sap.ovp Cards section. |
第 226 页 / 共 465 页
第 227 页 / 共 465 页
Chapter 6
Developing an Analytical List Page
In this chapter we will cover the basic concepts of building an SAP Fiori
Elements based Analytical List Report application and its features such
as KPIs, Visual filters, charts etc.
You’ll learn about building an analytical list page (ALP) application. We’ll cover the
different Core Data Services (CDS) views required and the annotations to build an
ALP, such as building key performance indicators (KPIs), visual filters, and default
charts and tables. Then we’ll generate the ALP using the SAP Web IDE analytical list
template from the CDS views.
6.1 Introduction
As explained in Chapter 2, an analytical list page (ALP) is a type of SAP Fiori elements
app used to create a dashboard consisting of different KPIs, visual filters, charts, and
tables. This type of application is suitable for users who need to go through a lot of
transactional data and need some form of visualizations to gain some useful insights.
For our example, we’re going to use all the data from our purchase documents to cre-
ate a dashboard for the user that will provide all the relevant information. We’ll use a
combination of charts, tables, and visual filters for building this application.
6.2 Building the Required CDS Views
To build an ALP for our example scenario, we need to build an analytical CDS view
with the help of @Analytics.query: true annotation. This will be the topmost or root
view of Virtual Data Model (VDM) type CONSUMPTION. But for this analytical CDS view
to get all the relevant information, we need child views with data categories DIMEN-
SION and CUBE. Let’s build these views and then build our main view on top of them.
Following are the analytical view data categories that might be used while building
views for analytics:
227
第 228 页 / 共 465 页
6 Developing an Analytical List Page
(cid:2) Fact
Views containing just transactions data, as well as measures. Syntax: @Analyt-
ics.dataCategory: #FACT.
(cid:2) Cube
Views containing transactional data with all relevant fields for data aggregation
(associations to master data elements, dimensions, etc.). Syntax: @Analytics.data-
Category: #CUBE.
(cid:2) Dimension
Views containing business documents, configurations, and master data. It also
contains associations to attributes and texts. Syntax: @Analytics.dataCategory:
#DIMENSION.
(cid:2) Text
Views with language-dependent texts. Syntax: @Analytics.dataCategory: #CUBE.
(cid:2) Hierarchy
Views with hierarchy notes containing keys of the hierarchy directory. Syntax:
@Analytics.dataCategory: #HIERARCHY.
Figure 6.1 shows how the different analytical view categories are related to each other
for the application scenario in this chapter.
OData Service
Analytical Engine
Consumption View Layer
Analytical Query
View
Interface View Layer
Text View Dimension View Cube View
Database Tables
Figure 6.1 Analytical View Relationships
228
| Consumption View Layer Analytical Query View | ||
|---|---|---|
第 229 页 / 共 465 页
6.2 Building the Required CDS Views
Note
You can learn more about analytics annotations at http://bit.ly/2xCdNo7.
6.2.1 Building Dimension Views
As explained in the previous section of this chapter, the dimension view contains mas-
ter data, business documents, and configurations, including associations to attributes
and texts. Annotation for the dimension view is @Analytics.dataCategory: #DIMENSION.
In , you can see that the CDS view has annotated the analytics data category as DIMEN-
SION and has fields such as Priority, PriorityText, and so on that fit the classification
(you have to annotate all relevant CDS views that we’ve used for our previous chapter
examples with #DIMENSION; the sample source codes for this book will have all the rel-
evant CDS views annotated accordingly).
@AbapCatalog.sqlViewName: 'ZIPURCHDOCPRIO'
…
@Analytics.dataCategory: #DIMENSION
define view Z_I_PurchaseDocumentPriority
as select from zpurchdocprio
{
@ObjectModel.text.element: ['PriorityText']
@EndUserText.label: 'Priority'
key priority as Priority,
@Semantics.text: true
@EndUserText.label: 'Priority Text'
prioritytext as PriorityText
}
Listing 6.1 Z_I_PurchaseDocumentPriority Dimension View to Be Used in the Analytical
Query View
6.2.2 Building Cube Views
Cube views contain the transactional data required for data aggregations and analy-
sis. For our scenario, we need a cube view to collect data from purchase documents
229
| Note |
| You can learn more about analytics annotations at http://bit.ly/2xCdNo7. |
第 230 页 / 共 465 页
6 Developing an Analytical List Page
and items DIMENSION CDS views. The annotation for a cube view is @Analytics.data-
Category:#CUBE. In Listing 6.2, the CDS view is categorized as a CUBE view. This view
fetches from the Z_I_PurchaseDocumentItem, and because this view deals with trans-
actional data, the classification CUBE is appropriate for the data it’s displaying. In the
cube view, we take advantage of aggregation annotations, such as the @DefaultAggre-
gation: #SUM for fields like OverallItemPrice, so that we can use them to display the
aggregated values in the table for our ALP.
@AbapCatalog.sqlViewName: 'ZIPURCHDOCCUBEVW'
…
@EndUserText.label: 'Purchase Document Cube View'
@Analytics: { dataCategory: #CUBE }
@VDM.viewType: #COMPOSITE
define view Z_I_PurchaseDocumentCube
as select from Z_I_PurchaseDocumentItem
{
@ObjectModel.text.element: ['PurchaseDocumentName']
key PurchaseDocument,
@ObjectModel.text.element: ['Description']
key PurchaseDocumentItem,
@Semantics.text: true
_
PurchaseDocument.Description as PurchaseDocumentName,
…
@Semantics.amount.currencyCode: 'Currency'
@DefaultAggregation: #SUM
OverallItemPrice,
…
…
Listing 6.2 Z_I_PurchaseDocumentCube Cube View to Be Used in the Analytical Query
Listing 6.3 shows the CDS view Z_I_PurchaseDocumentItem annotated with data cate-
gory DIMENSION. The view has business document data, such as the purchase docu-
ment items, which makes the classification DIMENSION appropriate for this view.
@AbapCatalog.sqlViewName: 'ZIPURCHDOCITEM'
…
@Analytics: { dataCategory: #DIMENSION }
230
第 231 页 / 共 465 页
6.2 Building the Required CDS Views
define view Z_I_PurchaseDocumentItem
as select from zpurchdocitem
association [1..1] to Z_I_PurchaseDocument as _
PurchaseDocument on $projection.PurchaseDocument = _
PurchaseDocument.PurchaseDocument
…
{
@ObjectModel.text.element: ['Description']
key purchasedocumentitem as PurchaseDocumentItem,
…
@Semantics.amount.currencyCode: 'Currency'
@DefaultAggregation: #NONE
price as Price,
@Semantics.currencyCode: true
@ObjectModel.foreignKey.association: '_Currency'
currency as Currency,
…
@Semantics.quantity.unitOfMeasure: 'QuantityUnit'
@DefaultAggregation: #NONE
quantity as Quantity,
…
@Semantics.amount.currencyCode: 'Currency'
@DefaultAggregation: #NONE
quantity * price as OverallItemPrice,
…
Listing 6.3 Z_I_PurchaseDocumentItem Dimension View to Be Used in the Analytical Query
6.2.3 Building the Main Query View
After we’ve built all the required underlying views, we’ll now make our final con-
sumption view for the analytical query. The CDS view needs to be annotated with
@Analytics.query: true. We’ll separate this view into a normal view with all the
required fields and a metadata extension view to which we’ll add all the necessary
annotations that will build the different areas of the ALP. Listing 6.4 shows our view,
231
第 232 页 / 共 465 页
6 Developing an Analytical List Page
which is annotated as an analytical query view. This view doesn’t have any @UI anno-
tations because it will be added to the metadata extension of this CDS view. But there
are some other annotations that are specific to analytical queries, such as @Analytics-
Details.query.display: #KEY_TEXT. This annotation specifies that the field will show
its key value along with its text in the user interface (UI).
@AbapCatalog.sqlViewName: 'ZCPRCHDOCCUBE'
…
@Metadata.allowExtensions:true
@Analytics.query: true
@OData.publish: true
@VDM.viewType: #CONSUMPTION
define view Z_C_PurchaseDocumentALP as select from Z_I_PurchaseDocumentCube
{
@AnalyticsDetails.query.display: #KEY_TEXT
@ObjectModel.text.element:'PurchaseDocumentName'
key PurchaseDocument,
@AnalyticsDetails.query.display: #KEY_TEXT
@EndUserText.label: 'Purchase Document Item'
@ObjectModel.text.element:'Description'
key PurchaseDocumentItem,
…
Price,
@AnalyticsDetails.query.display: #KEY_TEXT
@EndUserText.label: 'Priority'
Priority,
…
Listing 6.4 The Main Consumption View Used for the Analytical Query
In the next section, we’ll start building the different parts of our analytical app via the
metadata extension view.
6.3 Configuring the Title Area
In the page title area, we’ll add KPIs for purchase documents. The title area can hold
up to a maximum of three KPIs, but for our example, we require only two KPIs. The
first KPI will show the overall item price per purchase document, and the second KPI
will show the quantity of total items per purchase document. Figure 6.2 shows the
232
第 233 页 / 共 465 页
6.3 Configuring the Title Area
KPIs in both a minimized look and an expanded look. When a KPI isn’t expanded, it
will only show the data points assigned to it via the annotations. When expanded, the
KPI shows further details based on the data point via charts.
Figure 6.2 Overall Item Price and Quantity KPIs
Listing 6.5 shows a UI annotation named @selectionVariant with properties such as a
qualifier (acts as a unique identifier for the variant) with the value KPIDocuments-
ByOverallItemPrice. The UI.selectionVariant is used to represent a group of parame-
ters and filters, which will be translated by the Service Adaptation Definition Language
(SADL) framework into the corresponding OData annotations to query the related
entity sets that are annotated in the CDS view. Basically, these are identifiers for the
different UI components, such as the KPIs, visual filters, default charts, and so on. For
our first KPI, we named its qualifier KPIDocumentsByOverallItemPrice so that the rele-
vant KPI can be referenced by the UI via this unique name.
@UI.selectionVariant: [{
qualifier: 'KPIDocumentsByOverallItemPrice',
text: 'KPI Documents By Overall Price'
}]
Listing 6.5 SelectionVariant Annotation for KPIs
233
第 234 页 / 共 465 页
6 Developing an Analytical List Page
Next, we need to create a UI.presentationVariant annotation for our first KPI. This
annotation defines what should be the result of the query from the SADL framework
for the annotated entities via the UI.selectionVariant and in what form the result
should be displayed. We connect both the variants using the same qualifier name
KPIDocumentsByOverallItemPrice so that the query will be able to find the correspond-
ing UI.presentationVariant.
Listing 6.6 shows an additional property named visualizations that will define the
form or shape of the result of an incoming query from the UI. Our first KPI will
show a chart for the main content, so we specify the type as #AS_CHART along with a
qualifier named ChartDocumentsByOverallItemPrice (which will act as a unique
identifier for our chart’s annotation later). But because it’s a KPI, it needs a data
point, so we also need to specify an additional type as #AS_DATAPOINT and a quali-
fier, which in this case is the name of the field in the CDS view that is supposed to
be holding that value.
@UI.presentationVariant: [{
qualifier: 'KPIDocumentsByOverallItemPrice',
text: 'Number of Documents per OverallItemPrice',
visualizations: [{ type: #AS_
CHART, qualifier: 'ChartDocumentsByOverallItemPrice'},
{ type: #AS_DATAPOINT, qualifier: 'OverallItemPrice'}]
},…]
Listing 6.6 presentationVariant Annotation for KPIs
Now we’ve specified our selection variant and the presentation variant. Next, we
need to create annotations for sending the response for the queries in the shape
we’ve specified in our UI.presentationVariant. Listing 6.7 shows a @UI.chart annota-
tion that is required because we’ve specified that our KPIs will be showing charts.
With the qualifier property of the chart, we link this chart with the corresponding
presentationVariant. And here we must specify the dimensions and measures required
for our chart. We’ll also have to specify the type of chart we’re supposed to display; in
this case, it’s a #COLUMN type chart.
@UI.chart: [ {
qualifier: 'ChartDocumentsByOverallItemPrice',
chartType: #COLUMN,
dimensions: ['PurchaseDocument'],
234
第 235 页 / 共 465 页
6.3 Configuring the Title Area
measures: [ 'OverallItemPrice' ],
dimensionAttributes: [{ dimension: 'PurchaseDocument', role: #CATEGORY}],
measureAttributes: [{ measure: 'OverallItemPrice', role: #AXIS_1}]
}…]
Listing 6.7 UI Chart Annotations for KPIs
We want our first KPI for overall item price per purchase document to show a warning
if it’s reaching a certain upper limit per purchase order; it should be highlighted in red
if it crosses the threshold. So, we’ll use the criticalityCalculation annotation like the
one we used in the budget utilization card in Chapter 5 where we created on over-
view page (OVP) app. Listing 6.8 shows the minimumValue as 0 and the maximumValue as
100000. We’ve also set improvementDirection to #MINIMIZE, toleranceRangeHighValue to
40000, and the deviationRangeHighValue to 100000. With this configuration, our KPI
will turn yellow if it has crossed 40000 (as shown in Figure 6.2 and Figure 6.3), and it
will turn red if it crosses 100000.
@UI: {
dataPoint: {
title: 'Overall Item Price',
valueFormat.numberOfFractionalDigits: 2,
minimumValue: 0,
maximumValue: 100000,
criticalityCalculation: {
improvementDirection: #MINIMIZE,
toleranceRangeHighValue: 40000,
deviationRangeHighValue: 100000
}
}
}
OverallItemPrice;
Listing 6.8 Data Point Annotation for KPIs for criticalityCalculation
We must do the same for our second KPI for showing the purchase document based
on the total quantity of its items. In Figure 6.3, you can see how the @UI.selection-
Variant, @UI.presentationVariant, and the corresponding @UI.chart are all inter-
linked together by the qualifier property.
235
第 236 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.3 Linking Selection Variant, Presentation Variant, and Charts for KPIs
6.4 Configuring the Filter Area
In the header area, we’ll add our visual filters (they behave like normal filters, but
with visually represented values). Because our app is about purchase documents,
we’ll create five visual filters that are relevant to our scenario. Figure 6.4 shows how
our five different visual filters, listed here, will look in the app:
(cid:2) Overall Item price by Purchase Documents
(cid:2) Document Items by Priority
(cid:2) Document Items by Vendor
(cid:2) Document Items by Vendor Type
(cid:2) Document Items by Purchasing Organization
236
第 237 页 / 共 465 页
6.4 Configuring the Filter Area
Figure 6.4 ALP Visual Filters
Just like the KPIs annotations, our visual filter annotations also have the same set of
configurations, but we’ll have to manually add the visual filters in the annotations
modeler of the app in the UI. In Listing 6.9, we create the @UI.selectionVariant refer-
ences with the corresponding qualifier for each Visual filter.
@UI.selectionVariant: [
//For Visual Filters
{
qualifier: 'FilterByItemPrice',
text: 'Documents By Item Price'
},
{
qualifier: 'FilterByPriority',
text: 'Documents By Priority'
},
{
qualifier: 'FilterByVendor',
text: 'Documents By Vendor'
},
{
qualifier: 'FilterByVendorType',
text: 'Documents By VendorType'
},
{
qualifier: 'FilterByPurchasingOrganization',
text: 'Documents By Purchase Org'
}
]
Listing 6.9 selectionVariant Annotations for Visual Filters
237
第 238 页 / 共 465 页
6 Developing an Analytical List Page
In Listing 6.10, we set @UI.presentationVariant for our first filter for Overall Item
Price. Here the qualifier is named FilterByItemPrice. In the visualizations prop-
erty, we set the type and qualifier name, as well as passed our #AS_Datapoint as the
type and its corresponding qualifier.
@UI.presentationVariant: [{
qualifier: 'FilterByItemPrice',
text: ' Documents By Item Price’,
visualizations: [{ type: #AS_
CHART, qualifier: 'ChartDocumentsByItemPrice'},
{ type: #AS_DATAPOINT, qualifier: 'Price'}]
},
…
{
qualifier: 'FilterByPurchasingOrganization',
text: 'Documents By Purchase Org',
visualizations: [{ type: #AS_CHART, qualifier: 'ChartPurchaseOrg'}]}]
Listing 6.10 presentationVariant Annotations for Visual Filters
Listing 6.11 shows the @UI.chart annotation where we specify the chart type as #LINE
chart. The dimensions and measures are set as PurchaseDocument and OverallItemPrice,
respectively.
@UI.chart: [{
qualifier: 'ChartDocumentsByItemPrice',
chartType: #LINE,
dimensions: [ 'PurchaseDocument'],
measures: [ 'OverallItemPrice' ],
dimensionAttributes: [{ dimension: 'PurchaseDocument', role: #
CATEGORY}],
measureAttributes: [{ measure: 'OverallItemPrice', role: #AXIS_1}]
},
… }]
Listing 6.11 UI Chart Annotations for Visual Filters
We’ll have to create similar annotations for all the remaining four visual filters, as
shown in Figure 6.5.
238
第 239 页 / 共 465 页
6.5 Configuring the Content Area
Figure 6.5 Visual Filter Presentation Variant and Chart Annotations
6.5 Configuring the Content Area
In the page content, we’ll add a chart and a table. The chart will be a column chart that
will show the quantity of each purchase document item with the associated vendor
type. The table will show the aggregation of overall item price along with the pur-
chase document, document item, vendor, vendor type, status, and priority.
6.5.1 Configuring the Default Chart
Our plan is to use the content area to display a hybrid combination of a default chart
and a table. The chart is supposed to display the purchase documents based on differ-
ent vendors and vendor types, as shown in Figure 6.6.
The default chart requires the @UI.selectionVariant (as shown in Listing 6.12) to be
specified because we can use that in the template customizing area of SAP Web IDE’ s
Create Application from Template wizard section. We give the qualifier name as
Default because it’s the default chart.
@UI.selectionVariant: [{
qualifier: 'Default',
text: 'Default'
}]
Listing 6.12 selectionVariant Annotation for Default Chart
239
第 240 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.6 Default Chart for Main Content Area of the ALP
In @UI.presentationVariant, we give the qualifier and visualizations (we also use
the same property to pass the type and qualifier for the default table as shown in List-
ing 6.13) property values accordingly. In addition to these two properties, we have
sortOrder and groupBy properties, which are used for the default table. We’ll explain
its behavior in the next section where we create the annotations for the table.
@UI.presentationVariant: [{
qualifier:'Default',
sortOrder:[{ by: 'PurchaseDocument', direction: #ASC}],
groupBy: [ 'PurchaseDocument','PurchaseDocumentItem'],
visualizations: [{ type: #AS_CHART,
qualifier: 'ChartDefault'},
{ type: #AS_LINEITEM, qualifier: 'Default' }]…}]
Listing 6.13 Presentation Variant Annotation for Default Chart
Listing 6.14 shows the @UI.chart configurations for our default chart. Here the chart is
set as a #COLUMN type, and we specify the corresponding dimensions and measures for
the chart.
@UI.chart: [{
qualifier: 'ChartDefault',
title: 'Costs by PurchaseDoc / Items',
240
第 241 页 / 共 465 页
6.5 Configuring the Content Area
description:'Costs by PurchaseDoc / Items',
chartType: #COLUMN,
dimensions: [
'PurchaseDocument','PurchaseDocumentItem','VendorType','Vendor' ],
measures: [ 'Quantity'],
dimensionAttributes:
[{ dimension: 'PurchaseDocument', role: #SERIES},
{ dimension: 'PurchaseDocumentItem', role: #CATEGORY},
{ dimension: 'VendorType', role: #CATEGORY},
{ dimension: 'Vendor', role: #CATEGORY}],
measureAttributes: [{ measure: 'Quantity', role: #AXIS_1}]
}…]
Listing 6.14 UI Chart Annotations for Default Chart
In Figure 6.7, you can see how the selectionVariant, presentationVariant, and the
chart are interlinked together via the annotations.
Figure 6.7 UI Annotations for the Default Chart
6.5.2 Configuring the Table
In our table (see Figure 6.8), we’ll take advantage of aggregations we implemented in
our CUBE views, and we’ll also use the sortBy and groupBy annotations used in the
@UI.chart (as shown earlier in Listing 6.13).
In Figure 6.9, you can see how @UI.presentationVariant is interlinked at the field
level via the @UI.lineItem annotation using the qualifier. You can also see how the
groupBy property is influencing the table layout.
241
第 242 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.8 Table for Purchase Documents with Aggregated Values
Figure 6.9 UI Annotations for the Main Content Area Table
242
第 243 页 / 共 465 页
6.6 Combining All the UI Annotations in the Metadata Extension View
6.6 Combining All the UI Annotations in the Metadata Extension View
Now, we’ve covered the individual annotations for the different parts of the ALP’s
main CDS view (Z_C_PurchaseDocumentALP). Let’s combine these annotations together
into its metadata extension CDS view. Figure 6.10 shows how the @UI.selectionPre-
sentationVariant annotations for the different UI elements are grouped together.
Figure 6.10 Grouping Together the selectionPresentationVariant and selectionVariant UI
Annotations for the Different UI Elements
243
第 244 页 / 共 465 页
6 Developing an Analytical List Page
Note
The @UI.selectionPresentationVariant annotations are used as placeholders to
group together all the different @UI.selectionVariant and @UI.presentationVari-
ant annotations. You can learn more about UI annotations at http://bit.ly/2DoVJmA.
Figure 6.11 shows how all the @UI.selectionVariant annotations for the different UI
elements are grouped together.
Figure 6.11 Grouping Together All selectionVariant Annotations for the Default Chart,
Table, KPIs, and Visual Filters
Figure 6.12 shows how all the @UI.presentationVariant annotations for our different
UI elements, such as the KPIs, visual filters, and default charts and tables, are grouped
together.
244
| Note The @UI.selectionPresentationVariant annotations are used as placeholders to group together all the different @UI.selectionVariant and @UI.presentationVari- |
| ant annotations. You can learn more about UI annotations at http://bit.ly/2DoVJmA. |
第 245 页 / 共 465 页
6.6 Combining All the UI Annotations in the Metadata Extension View
Figure 6.12 Grouping Together All presentationVariants for the Default Chart, Table, KPIs,
and Visual Filters
Now let’s group all the @UI.chart annotations (this includes annotations for the
default table and the KPIs). Figure 6.13 and Figure 6.14 show all the corresponding
annotations to build the different charts for the ALP.
245
第 246 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.13 Grouping Together All UI Chart and Table Annotations for the Default Chart,
Table, and KPIs
Figure 6.14 Grouping Together All UI Chart and Table Annotations for the Visual Filters
246
第 247 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
Figure 6.15 shows that all the table-level field’s respective UI annotations are grouped
together.
Figure 6.15 Grouping Together All UI Annotations for the Default Table
6.7 Generating an Analytical List Page from SAP Web IDE
Now that we have all the required CDS views along with the UI annotations in place,
let’s create the ALP using the template feature of the SAP Web IDE. Navigate to File (cid:2)
New (cid:2) Template from Project in the SAP Web IDE, and select Analytical List Page/
Object Page, as shown in Figure 6.16.
247
第 248 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.16 Selecting the ALP Template in SAP Web IDE
In the next window (see Figure 6.17), enter the basic information for our ALP, as
shown in Table 6.1.
Figure 6.17 Basic Information for the ALP Template
248
第 249 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
Field Parameter
Project Name “PurchaseDocumentsALP”
Title “Purchase Documents Analytical List Page”
Namespace “fiori.display.purchase.documents”
Description “Analyze Purchase Documents”
Application Component Hierarchy “MM-PUR”
Table 6.1 Basic Information Values for the ALP
Next, we must select our OData service, which is generated from the CDS view anno-
tation @OData.publish:true directly (see Figure 6.18). For our example, the Service
name is Z_C_PURCHASEDOCUMENTALP_CDS.
Figure 6.18 Selecting the OData Service from the SAP Gateway for the Project
In the Annotation Selection tab, we can see the service metadata and the annotation
model (Figure 6.19). Select both services, and click on Next.
Note
Remember our qualifier annotation for the default chart we discussed earlier in
this chapter? This is how the app will be able to link the main content area with the
corresponding chart annotations from the CDS view.
249
| Field | Parameter |
|---|---|
| Project Name | “PurchaseDocumentsALP” |
| Title | “Purchase Documents Analytical List Page” |
| Namespace | “fiori.display.purchase.documents” |
| Description | “Analyze Purchase Documents” |
| Application Component Hierarchy | “MM-PUR” |
| Note Remember our qualifier annotation for the default chart we discussed earlier in this chapter? This is how the app will be able to link the main content area with the |
| corresponding chart annotations from the CDS view. |
第 250 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.19 Annotation Model and Service Metadata File List from the OData Service
In the Template Customization tab shown in Figure 6.20, select Z_C_PURCHASEDOC-
UMENTALP from the OData Collection field, and enter the value as “Default” for the
Qualifier (content area), as shown in Table 6.2. Select the Table Type as Responsive,
and click Finish.
Figure 6.20 Selecting the OData Binding and App Descriptor Values for the ALP
250
第 251 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
Field Parameter
OData Collection Z_C_PURCHASEDOCUMENTALP
Qualifier (content area) Default
Table Type Responsive
Table 6.2 Values for ALP Template Customization
6.7.1 Adding Key Performance Indicators to the Project
After the project is created, navigate in the project folder structure to PurchaseDocu-
mentsALP (cid:2) webapp (cid:2) manifest.json 1, and click on the Descriptor Editor 2 from the
bottom side of the manifest.json file area, as shown in Figure 6.21. Click on the + but-
ton 3 on the screen under the Models tab.
Figure 6.21 Descriptor Editor for the manifest.json File
In the popup window, create a new model with the name “KPIModel” and set the
Model Source as mainService (see Figure 6.22). Then click on OK.
251
| Field | Parameter |
|---|---|
| OData Collection | Z_C_PURCHASEDOCUMENTALP |
| Qualifier (content area) | Default |
| Table Type | Responsive |
第 252 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.22 Creating a New Model for KPIs in manifest.json
After creating the model, we need to add our KPI details to the manifest.json file. For
this, we must switch from the Descriptor Editor tab to the Code Editor tab. Now we
need add the values (see Table 6.3) to the keyPerformanceIndicators JSON structure, as
shown in Figure 6.23.
Figure 6.23 Adding KPI Details to the manifest.json File
252
第 253 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
Values for KPIs
DocumentsByOverAllItemPrice
model KPIModel
enititySet Z_C_PURCHASEDOCUMENTALP
qualifier KPIDocumentsByOverallItemPrice
DocumentsByQuantity
model KPIModel
enititySet Z_C_PURCHASEDOCUMENTALP
qualifier KPIDocumentsByQuantity
Table 6.3 Values for KPIs to Be Added in the manifest.json File
6.7.2 Adding Visual Filters to the Project
After we’ve added our KPIs, now it’s time to add our visual filters. Navigate in the
project folder structure to PurchaseDocuments (cid:2) ALP (cid:2) webapp (cid:2) annotations (cid:2) annota-
tions.xml 1, and click on the Annotation Modeler tab 2. Then click on the Select Tar-
gets button 3 in the Annotation Structure window, as shown in Figure 6.24.
Figure 6.24 Select Targets Button from the Annotation Modeler
253
| Values for KPIs | |
|---|---|
| DocumentsByOverAllItemPrice | |
| model | KPIModel |
| enititySet | Z_C_PURCHASEDOCUMENTALP |
| qualifier | KPIDocumentsByOverallItemPrice |
| DocumentsByQuantity | |
| model | KPIModel |
| enititySet | Z_C_PURCHASEDOCUMENTALP |
| qualifier | KPIDocumentsByQuantity |
第 254 页 / 共 465 页
6 Developing an Analytical List Page
In the popup window, expand the Entity Types, and select Z_C_PURCHASEDOCU-
MENTALPType (see Figure 6.25). Under Properties, select the corresponding field
names that we used as measures for our visual filter charts in the CDS view annota-
tions. For our scenario, the fields to be selected are Priority, PurchaseDocument, Pur-
chasingOrganization, Vendor, and VendorType.
Figure 6.25 Selecting the Properties for Visual Filters
After adding the properties, click on the + icon next to all the added properties, as
shown in Figure 6.26.
Figure 6.26 Adding Subnodes to the Visual Filter Properties
254
第 255 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
In the popup window, expand the annotation Common Vocabulary, and select the
property ValueList, as shown in Figure 6.27.
Figure 6.27 Adding the ValueList Annotation to the Visual Filter Properties
After the ValueList property is added for all the visual filter property fields, click on
the + icon on the row with the ValueList, and select the PresentationVariantQuali-
fier annotation (this should be done for all five of our visual filter properties), as
shown in Figure 6.28.
Now in Figure 6.29, we can see the properties for our visual filters. The value for Col-
lectionPath will be the same for all properties because it’s coming from the same CDS
view. The value for PresentationVariantQualifier is the same value we gave for quali-
fier under the PresentationVariant annotation in the CDS view for the visual filters
(refer to Figure 6.3 and Listing 6.10). Table 6.4 provides the values that need to be
entered for the properties.
255
第 256 页 / 共 465 页
6 Developing an Analytical List Page
Figure 6.28 Adding PresentationVariantQualifier for the Visual Filter Properties
256
第 257 页 / 共 465 页
6.7 Generating an Analytical List Page from SAP Web IDE
Figure 6.29 Adding CollectionPath and PresentationVariantQualifier for Visual Filter
Properties
Values to Enter
Priority
CollectionPath Z_C_PURCHASEDOCUMENTALP
Parameters FilterByPriority
PurchaseDocument
CollectionPath Z_C_PURCHASEDOCUMENTALP
Parameters FilterByItemPrice
Vendor
CollectionPath Z_C_PURCHASEDOCUMENTALP
Parameters FilterByVendor
VendorType
Table 6.4 Values for CollectionPath and PresentationVariantQualifier
257
| Values to Enter | |
|---|---|
| Priority | |
| CollectionPath | Z_C_PURCHASEDOCUMENTALP |
| Parameters | FilterByPriority |
| PurchaseDocument | |
| CollectionPath | Z_C_PURCHASEDOCUMENTALP |
| Parameters | FilterByItemPrice |
| Vendor | |
| CollectionPath | Z_C_PURCHASEDOCUMENTALP |
| Parameters | FilterByVendor |
| VendorType |
第 258 页 / 共 465 页
6 Developing an Analytical List Page
Values to Enter
CollectionPath Z_C_PURCHASEDOCUMENTALP
Parameters FilterByVendorType
PurchasingOrganization
CollectionPath Z_C_PURCHASEDOCUMENTALP
Parameters FilterByPurchasingOrganization
Table 6.4 Values for CollectionPath and PresentationVariantQualifier (Cont.)
Now we’ve made all the required modifications to the project. Let’s create a Run Con-
figuration for the app so that we can test the output. Right-click on the project and
select Run (cid:2) Run Configurations. In the Run Configuration wizard screen, click on the
+ symbol on the top-left side, and select SAP Fiori Launchpad Sandbox. Click the Save
and Run button.
Figure 6.30 shows all our KPIs, visual filters, default charts, and tables that have been
generated via CDS view annotations.
Figure 6.30 ALP Application Output
258
| Values to Enter | |
|---|---|
| CollectionPath | Z_C_PURCHASEDOCUMENTALP |
| Parameters | FilterByVendorType |
| PurchasingOrganization | |
| CollectionPath | Z_C_PURCHASEDOCUMENTALP |
| Parameters | FilterByPurchasingOrganization |
第 259 页 / 共 465 页
6.8 Summary
We can see that our KPI (in the title area) based on overall item price is highlighting
the value in orange because it has crossed our tolerance value of 40000, which we set
via the criticalityCalculation annotation in the CDS view. In addition, the table in
the content area shows the sortBy and groupBy annotations that we added via UI
annotations in the CDS view in effect.
6.8 Summary
In this chapter, you learned about ALP. First, we added all required analytical annota-
tions (dimensions) to the basic interface CDS views, and then we created an analytical
cube view as the data provider for our analytical query. Subsequently, we started to
build the UI annotations for each area of the ALP, showing how to create KPI annota-
tions for the title area, visual filter annotations for the filter area, and default chart
and table annotations for the main content area. Then we combined all the annota-
tions into the metadata extension to make the main consumption view complete.
We created the app from a SAP Web IDE template using the CDS view and made the
necessary modifications, such as creating a model for KPIs in the manifest file, mod-
ifying the annotation modeler to include the visual filters, and finally running the
application to see the ALP output. In the next chapter, you’ll learn how to create a
freestyle application using SAP Web IDE full-stack.
259
第 260 页 / 共 465 页
第 261 页 / 共 465 页
Chapter 7
Developing a Freestyle Application
In this chapter you will learn how to develop a freestyle SAPUI5
application using Smart Controls and the SAP Web IDE full-stack.
Developing a freestyle application might be required in case no SAP
Fiori Elements application type fits your use case and UI design.
In the previous chapters, you’ve learned how to implement several different SAP
Fiori element template applications. These template-based applications significantly
decrease the amount of required frontend JavaScript and SAPUI5 code and provide
several generically configurable and extendable templates for different application
scenarios. However, it’s possible that none of the templates will fit the UI design and
mockups developed in the design phase. In this case, there is no way around it: you
must develop a SAPUI5 freestyle application. Luckily, with the introduction of the
SAP Fiori elements application templates, several smart controls were also intro-
duced that implement the SAP Fiori elements concept on a lower level and are also
used inside the SAP Fiori element templates. They make use of OData annotations to
reduce the required JavaScript frontend code but still give you the flexibility to use
them within a freestyle application layout. Consequently, in this chapter, you’ll get to
know the most common smart controls. After an introduction to each control, we’ll
demonstrate their usage by developing a simple freestyle application for creating
and displaying purchase documents. Additionally, you’ll learn how to set up a SAPUI5
freestyle application project in the SAP Web IDE full-stack, how to establish the back-
end OData service connection, how to configure navigation between different views,
and how to write an One-Page Acceptance (OPA5) user interface (UI) integration test
to test the whole application scenario.
7.1 Smart Controls
Smart controls are part of the sap.ui.comp SAPUI5 library, which contains compos-
ite SAPUI5 controls. As the library name suggests, controls in this library are a
261
第 262 页 / 共 465 页
7 Developing a Freestyle Application
combination of several SAPUI5 basis controls, for instance, from the sap.m library,
and are bundled together in a new reusable control. Moreover, apart from combining
several controls, controls starting with the smart prefix analyze OData metadata or
UI annotations to reduce the necessary XML and JavaScript SAPUI5 frontend code.
For instance, if a smart field detects a value help OData annotation in the service
metadata document for the property it’s bound to, it will automatically render a
value help. In the following, we’ll introduce the most common smart controls and
their main annotations.
7.1.1 Smart Field
The sap.ui.comp.smartfield.SmartField SAPUI5 control is a wrapper around several
other controls that are rendered based on the provided OData annotations of the
respective bound OData entity type property. The purpose of the smart field is to dis-
play or edit field values of an underlying OData entity. Listing 7.1 shows an example
of how a smart field can be used inside a SAPUI5 XML view definition. In this exam-
ple, the smart field is bound to the PurchasingOrganization property via its value
property. The smartField prefix is defined for the "sap.ui.comp.smartfield" XML
namespace (xmlns:smartField="sap.ui.comp.smartfield").
<smartField:SmartField value="{PurchasingOrganization}"/>
Listing 7.1 Smart Field Bound to the PurchasingOrganization Property of the Z_C_Purchase-
DocumentLrp Entity
At runtime, the SmartField is rendered as an input field with a corresponding label
and value help. What controls are rendered exactly depends on the OData service
metadata document annotation attributes of the bound entity type property. In our
example, the field is rendered as an editable input field because its property element
doesn’t contain the sap:creatable="false" and sap:updatable="false" XML attri-
butes, and it has the Entity Data Model (EDM) type Edm.String (see Figure 7.1). More-
over, the label of the field is automatically displayed without having to explicitly
define a label control and is taken from the sap:label attribute of the respective prop-
erty element. The origin of the sap:label attribute’s value is usually its data element’s
field label or the @EndUser.textLabel annotation on the Core Data Services (CDS) level.
Additionally, it’s also possible to overwrite field labels in a SAP Gateway Service
Builder project (Transaction SEGW). The sap:value-list attribute indicates that a
standard value help is available and will be displayed.
262
第 263 页 / 共 465 页
7.1 Smart Controls
Figure 7.1 OData Service Metadata Document Annotations Interpreted by the Smart Field
Control
Figure 7.2 shows the required OData annotations for rendering the generic standard
value help. The value help is based on the foreign key association to the Z_I_Purchas-
ingOrganization CDS view; it takes the PurchasingOrganization field as an in-and-out
argument and additionally displays the Description of the purchasing organization.
Figure 7.2 Value Help Annotations for the PurchasingOrganization Field
7.1.2 Smart Link
The sap.ui.comp.navpopover.SmartLink control renders a link for a field and provides
a popover containing navigation links to other related applications (see Figure 7.3). To
do this, it analyzes the SemanticObject OData annotation of the bound OData entity
type property and collects all navigation targets of the user containing the respective
semantic object—in this case, PurchasingDocument. In the example, the user has access
to the PurchasingDocument – create (Create Purchase Document), monitor (Purchase
Documents Overview Page), and analyzeKPIDetails (Purchasing Documents) applica-
tions. The possible navigation targets are restricted to the targets contained in the
263