第 191 页 / 共 465 页
5.1 Core Data Services Views
We need a total of five main consumption views for the app as listed here. Each CDS
view needs to fetch the required data for the corresponding cards:
(cid:2) Z_C_PurchaseDocumentOVP for the analytical card
(cid:2) Z_C_PurchaseDocsforApprovalOVP for the list card (standard)
(cid:2) Z_C_PurchaseDocBudgetOVP for the list card (bar)
(cid:2) Z_C_PurchaseDocumentPendingOVP for the table card
(cid:2) Z_C_PurchaseDocumentFiltersOVP for building the filter bar
In this section, we’ll build all the necessary CDS views for fetching the required data
for the different type of Cards and the basic filter consumption view for the filter bar
of the OVP. And, in Section 5.2, we’ll concentrate on building metadata extensions for
these CDS views with the same name (like we did in Chapter 4) where we’ll use UI
annotations for generating the different type of cards.
Build a Consumption View for the Analytical Card
Now let’s move on to the next consumption CDS view Z_C_PurchaseDocumentOVP for
the analytical card.
Listing 5.1 shows the consumption view code for the analytical card. For the analytical
card, we’re planning to show a donut chart. A donut chart will require some key data
to act as dimensions and measure attributes. Our plan is to create an analytical card
that can display the chart based on priority and status, so we need the Priority, Pri-
orityText, Status, and StatusText fields to be present in our consumption view. In
addition to these fields, we need one field to act as measure to count the number of
rows based on the priority or status for the chart. So, we need to add a custom column
called TotalNumberofDocuments with a default value of 1, and we’ll also need to aggre-
gate the sum of the column using @DefaultAggregation: #SUM annotation.
@AbapCatalog.sqlViewName: 'ZCPURCHDOCOVP'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Purchasing Document Overview Page'
@VDM.viewType: #CONSUMPTION
@Metadata.allowExtensions: true
define view Z_C_PurchaseDocumentOVP
as select from Z_I_PurchaseDocument
association [0..1] to Z_I_PurchaseDocumentPriority as _
191
第 192 页 / 共 465 页
5 Developing an Overview Page
Priority on $projection.Priority = _Priority.Priority
association [0..1] to Z_I_PurchaseDocumentStatus as _
Status on $projection.Status = _Status.Status
{
key PurchaseDocument,
Priority,
_Priority.PriorityText,
Status,
_Status.StatusText,
…
@DefaultAggregation: #SUM
cast( 1 as eam_num_orders_outstanding ) as TotalNumberofDocuments,
…
}
Listing 5.1 Z_C_PurchaseDocumentOVP Consumption View for the Analytical Card
Build a Basic Interface View for the List Card
For most of these consumption views, we already created the required basic interface
views in the previous chapter, except for the Z_C_PurchaseDocsforApprovalOVP view,
which needs a new interface view to fetch some fields that aren’t within the other
existing interface views. We can also slightly modify one of the existing interface
views to adapt it for our purpose, but let’s just make one interface view for this con-
sumption view. Because it’s for the approval consumption view, we’ll name it Z_I_
PurchaseDocAprovalStat.
Let’s start with building our interface view. To create a CDS view in the ABAP develop-
ment tools in Eclipse/SAP HANA Studio, you can follow the same steps as described
in Chapter 4. Listing 5.2 shows the composite interface view for purchase documents
that require approval. The @VDM.viewType: is set as #COMPOSITE because the view is
fetching it from an underlying basic interface view. The underlying composite view
Z_I_PurcDocOverallPrice will provide the necessary information required for our
consumption view and the Approval field that is calculated based on the case state-
ment to determine whether the document exceeds the threshold of 1000 euros and
sets the value as Approval Required or No Approval Required. This view also provides
other key information such as the creation date of the document, priority of the doc-
ument, status, and so on. Press (Ctrl)+(F3) to activate the view.
192
第 193 页 / 共 465 页
5.1 Core Data Services Views
@AbapCatalog.sqlViewName: 'ZIPRCHDOCAPRSTAT'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Purchasing Docs with Approval Status'
@VDM.viewType: #COMPOSITE
define view Z_I_PurchaseDocAprovalStat
as select from Z_I_PurchDocOverallPrice
{
key PurchaseDocument,
…
Priority,
OverallPrice,
…
case
when OverallPrice > 1000
then 'Approval Required'
else 'No Approval Required' end as Approval,
_Priority,
_Status
}
Listing 5.2 Composite Interface View Z_I_PurchaseDocAprovalStat to fetch from the
Underlying Composite View
Build a Consumption View for the List Card (Standard)
Now we have our composite view ready, let’s build the consumption view Z_C_Pur-
chaseDocAprovalStat as shown in Listing 5.3. Here the @VDM.viewType is set to #CONSUMP-
TION because it’s fetching data from a COMPOSITE interface view. Here we must set a
where condition to fetch only the records with the Status value 1 (Created) and the
purchasing documents with an OverallPrice more than 1000 euros. In addition, we
need to add the @Metadata.allowExtensions:true to enable metadata extensions for
the consumption view.
@AbapCatalog.sqlViewName: 'ZCPURHPNDNGAPRVL'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Purchase orders Pending for Approval'
@Metadata.allowExtensions:true
@VDM.viewType: #CONSUMPTION
193
第 194 页 / 共 465 页
5 Developing an Overview Page
define view Z_C_PurchaseDocsforApprovalOVP
as select from Z_I_PurchaseDocAprovalStat
{
@ObjectModel.foreignKey.association: '_PurchaseDocument'
@Consumption.semanticObject: 'PurchasingDocument'
key PurchaseDocument,
Description,
OverallPrice,
Priority,
crea_uname,
…
}
where
Status = '1'
and OverallPrice > 1000
Listing 5.3 Z_C_ PurchaseDocsforApprovalOVP Consumption View for Pending Approvals
List Card in the OVP
Now press (F8) on the keyboard to view the output of the consumption view. Figure
5.2 shows the output of the view in which you can see that the Approval field value
only shows results with Approval Required.
Figure 5.2 Pending Approval Consumption View Output
Build a Consumption View for the List Card (Bar)
Now let’s create the consumption view Z_C_PurchaseDocBudgetOVP for the bar list card
(Listing 5.4). This view provides information regarding the percentage of the total bud-
get used by each purchasing document. In this view, we’re doing two main things. One
is the calculation of the budget used under the BudgetUtilization field and the decla-
ration of % as a unit of measure via the @Semantics.quantity.unitofMeasure:true for
the field Percentage. The Percentage field is bound to the BudgetUtilization as its unit
194
第 195 页 / 共 465 页
5.1 Core Data Services Views
of measure via @Semantics.quantity.unitOfMeasure: annotation. The budget utiliza-
tion is calculated by dividing the overall price of the purchasing document with the
budget limit set to 10000 euros.
@AbapCatalog.sqlViewName: 'ZPUCHDOCBUDGT'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'OVP card for Overall Budget'
@VDM.viewType: #CONSUMPTION
@Metadata.allowExtensions:true
define view Z_C_PurchaseDocBudgetOVP
as select from Z_I_PurchaseDocumentTP
{
key PurchaseDocument,
…
@Semantics.quantity.unitOfMeasure: 'Percentage'
division(OverallPrice * 100, 10000, 2) as BudgetUtilization,
…
@Semantics.unitOfMeasure: true
cast(' % ' as abap.unit(3)) as Percentage
}
Listing 5.4 Z_C_PurchaseDocBudgetOVP Consumption View for the Bar List Card
Build a Consumption View for the Table Card
Now we need to create the consumption view Z_C_PurchaseDocumentPendingOVP for
the table card (Listing 5.5). This view shows purchasing documents at the item level
with a status of Created. So, let’s keep a where condition at the end of the select with
Status as 1. Because the table card can be resized in the UI, we can choose to display
several fields from the items table. We can decide which fields to be displayed via UI
annotations in the metadata extension of this view.
@AbapCatalog.sqlViewName: 'ZCPURCHDOCITMOVP'
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Pending Purchase Documents item list'
@VDM.viewType: #CONSUMPTION
@Metadata.allowExtensions: true
define view Z_C_PurchaseDocumentPendingOVP
as select from Z_I_PurchaseDocumentItem
195
第 196 页 / 共 465 页
5 Developing an Overview Page
{
key PurchaseDocument,
key PurchaseDocumentItem,
_PurchaseDocument.Description as PurchaseDocumentDescription,
Description,
OverallItemPrice,
…
_PurchaseDocument.Priority,
_PurchaseDocument.Status,
…
}
where
_PurchaseDocument.Status = '1'
Listing 5.5 Z_C_PurchaseDocumentPendingOVP Consumption View for the Table Card
Build a Consumption View for the Filter Bar
We’ve now built all the necessary CDS views for all five cards. Now we need to build a
CDS view for the filter bar with filters that are common across all the CDS views. This
is important because when you set/choose a filter from the filter bar, the correspond-
ing OData call to the backend system from the OVP will automatically add those fil-
ters to all the OData services bound to the cards. If one of the card’s CDS views behind
the OData service call is missing this filter, then that card won’t load the results. So,
we need to choose the filters accordingly. Because the basic idea of the cards for this
OVP-based application is based on the priority of the purchasing documents and for
the documents with a status that isn’t yet approved or closed, we can use the Priority
and Status fields as the common filter for all the cards.
Let’s create the consumption view for the filter bar CDS view. Listing 5.6 shows the
code for the Z_C_PurchaseDocumentFiltersOVP consumption view. The fields for the
filters should not be linked from the CDS views from the cards directly; instead, you
can cast an empty value with reference to its corresponding ABAP type. In addition,
to make the filters visible by default and in the correct required order, we need to use
the UI annotation @UI.SelectionField. The property exclude:false will make the field
visible by default, and the property Position sets the order in which the filters should
be displayed.
196
第 197 页 / 共 465 页
5.1 Core Data Services Views
@AbapCatalog.sqlViewName: 'ZCPRCHDOCFILTERS'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Filters for Purchasing Document OVP'
@VDM.viewType: #CONSUMPTION
define view Z_C_PURCHASEDOCUMENTFILTERSOVP
as select from Z_I_PurchaseDocument
{
…
@UI: {
selectionField: { exclude: false, position: 10 }
}
@Consumption: {
valueHelpDefinition: [{ entity: { name: 'Z_C_
PriorityVH', element: 'Priority' }}]
}
cast('' as abap.char(1)) as Priority,
@UI: {
selectionField: { exclude: false, position: 20 }
}
@Consumption: {
valueHelpDefinition: [{ entity: { name: 'Z_C_
StatusVH', element: 'Status' }}]
}
cast('' as abap.char(1)) as Status
}
Listing 5.6 Z_C_PurchaseDocumentFiltersOVP Consumption View for the Filter Bar
In Listing 5.6, you might have noticed that the Priority and Status fields have one
additional annotation named @Consumption.valueHelpDefinition. This annotation is
used to set the value help for the fields that will act as an (F4) helps in the UI of the
app. But we could have used the normal Interface views, Z_I_PurchaseDocumentPrior-
ity and Z_I_PurchaseDocumentStatus, via a foreign key association @ObjectModel.for-
eignKey.association annotation. It’s also possible to create custom and add value
helps using a CDS view that has a UI annotation @ObjectModel.dataCategory: #VALUE_
HELP. This will help the OData project identify such views as value helps (discussed
later in the chapter when we create the OData service using the CDS views, where the
197
第 198 页 / 共 465 页
5 Developing an Overview Page
value helps will be automatically recognized by the framework). With this new
approach, we have enhanced modeling options compared to an annotation based on
a foreign key, so, we’ve created two new CDS views as value helps for Priority and
Status. The naming format of a value help should end with VH to identify those CDS
views as value helps. For our purposes, we named them Z_C_PriorityVH and Z_C_Sta-
tusVH.
Listing 5.7 shows the coding for the value help CDS view Z_C_PriorityVH. The annota-
tion @ObjectModel.dataCategory: #VALUE_HELP helps the framework identify the CDS
view as a value help view. In addition, we wanted the filters to be a dropdown list
instead of a regular value helps because the values for Priority are High, Medium, and
Low, so it isn’t much use to have these fixed values as an (F4) help. For this purpose,
we must use the annotation @ObjectModel.resultSet.sizeCategory:#XS to make them
appear as a dropdown list. The value help for Status is also made in the same way.
@AbapCatalog.sqlViewName: 'ZPRIOVH'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Value Help for Priority'
@Search.searchable: true
@ObjectModel.semanticKey: [ 'priority' ]
@ObjectModel.representativeKey: ['priority']
@VDM.viewType: #CONSUMPTION
@ObjectModel.resultSet.sizeCategory: #XS
@ObjectModel.dataCategory: #VALUE_HELP
define view Z_C_PriorityVH as select from Z_I_PurchaseDocumentPriority {
@ObjectModel.text.element: [‘PriorityText’]
key Priority,
@Search: { defaultSearchElement: true, ranking: #
HIGH, fuzzinessThreshold: 0.7 }
PriorityText
}
Listing 5.7 Value Help CDS View for Priority
Note
If you want to know more about value helps, visit http://bit.ly/2Q0dp9G.
198
| Note |
| If you want to know more about value helps, visit http://bit.ly/2Q0dp9G. |
第 199 页 / 共 465 页
5.2 Adding User Interface Annotations
5.1.2 Adding a Data Control File
Like the previous chapter, we’ve created a data control language (DCL) file for our CDS
view to restrict access to the CDS view via ABAP authorization objects.
For this app scenario, we’ll reuse the authorization object for the purchase organiza-
tion. By using the purchase organization for DCL, we can restrict the results for end
users to their purchasing organization.
Listing 5.8 shows the DCL for the CDS view Z_C_Purchasedocumentpendingovp. After
we’ve created the access control file, we need to update the corresponding CDS view’s
annotation as shown in @AccessControl.authorizationCheck:#CHECK. Similarly, we can
restrict unauthorized access to the other CDS views.
@EndUserText.label: 'ACL Pending Purchase Documents Item List'
@MappingRole: true
define role Z_C_Purchasedocumentpendingovp {
grant
select
on
Z_C_PurchaseDocumentPendingOVP
where
( PurchasingOrganization ) =
aspect pfcg_auth(
ZPURCHORGA,
ZPURCHORGA ,
ACTVT = '03' ) ;
}
Listing 5.8 Access Control File for the View Z_C_Purchasedocumentpendingovp
5.2 Adding User Interface Annotations
None of the CDS views we created so far (except for the filter bar CDS view) contain
any UI-specific annotations that are required to generate the cards in the OVP. The
CDS view guidelines recommend putting all the UI-related annotations in a separate
metadata extension file with the same name of its corresponding consumption CDS
view to separate the UI and functional aspects.
199
第 200 页 / 共 465 页
5 Developing an Overview Page
5.2.1 Creating Annotations for an Analytical Card
Now, let’s create a metadata extension for the consumption view of our analytical
card. To do so, right-click on the Metadata Extension folder in the Project Explorer tab
of your project, and click New Metadata Extension, as shown in Figure 5.3. Give the
same name as your consumption view (in this case, its Z_C_PurchaseDocumentOVP) and
its description, and create the metadata extension view.
Figure 5.3 Creating a Metadata Extension for the Z_C_PurchaseDocumentOVP
Consumption View
Listing 5.9 shows the code for the metadata extension for Z_C_ PurchaseDocumentOVP.
Because this is for an analytical card, and our plan is to display a chart, we’ll need
to use the @UI.chart annotation. We’ll also need a qualifier to make each chart
unique. (You’ll see how this qualifier comes into use when we create the OVP via the
SAP Web IDE template later in this chapter.) Because we need the charts to display
the values By Priority and By Status, let’s name the first qualifier ByPurchaseDocu-
mentPriority and the second qualifier ByPurchaseDocumentStatus. We must set the
chartType as #DONUT. Dimensions to be shown are the Priority and the PriorityText.
The measures attribute will be our custom field TotalNumberofDocuments created in
the Z_C_PurchaseDocumentOVP consumption view, and the measures attribute will be
used by the chart to determine the total number of purchasing documents that
belongs to each Priority and Status category. In addition, we’ll have to assign the UI
annotation @UI.dataPoint.visualization: #NUMBER to the TotalNumberofDocuments
fields to indicate that this field is a number. Like the first chart, we’ll use the same
annotations, but this time, the dimensions are Status and StatusText. We’ve also
200
第 201 页 / 共 465 页
5.2 Adding User Interface Annotations
assigned a UI annotation @UI.identification: with type #FOR_INTENT_BASED_NAVIGA-
TION and semanticObjectAction: for the PurchaseDocument field to enable navigation
to the list report application from the chart. We’ll look in detail at cross-app naviga-
tion in Chapter 8.
@Metadata.layer: #CORE
@UI.chart: [
{
qualifier: 'ByPurchaseDocumentPriority',
title: 'Purchasing documents by Priority',
chartType: #DONUT,
dimensions: [ 'Priority', 'PriorityText' ] ,
measures: [ 'TotalNumberofDocuments' ],
dimensionAttributes: [
{dimension: 'Priority', role: #CATEGORY},
{dimension: 'PriorityText', role: #CATEGORY}
],
measureAttributes: [
{measure: 'TotalNumberofDocuments', role: #AXIS_1, asDataPoint: true}
]
},
{
qualifier: 'ByPurchaseDocumentStatus',
title: 'Purchasing documents by Status',
chartType: #DONUT,
dimensions: [ 'Status', 'StatusText' ] ,
measures: [ 'TotalNumberofDocuments' ],
…
annotate view Z_C_PurchaseDocumentOVP
with
{
@UI.identification: [{
type: #FOR_INTENT_BASED_NAVIGATION,
semanticObjectAction: 'PurchasingDocument',
label: 'Display Purchasing Document Information'
}]
201
第 202 页 / 共 465 页
5 Developing an Overview Page
PurchaseDocument;
@UI.dataPoint.visualization: #NUMBER
TotalNumberofDocuments;
@UI.textArrangement: #TEXT_FIRST
Priority;
@UI.textArrangement: #TEXT_FIRST
Status;
}
Listing 5.9 Metadata Extension for Consumption View Z_C_PurchaseDocumentOVP
5.2.2 Creating Annotations for a List Card
As mentioned earlier, there are two types of list cards: standard list card and bar list
card. We’ll create the annotation for a standard list card to display the list of purchas-
ing documents pending for approval and an annotation for a bar list card to display
the percentage of budget used by each purchasing document. In addition to this, we’ll
create a table card. A table card is slightly different from a list card in that it shows the
column header name and can show more columns than a list card.
Create Annotations for a Standard List Card
Listing 5.10 is the metadata extension for the consumption view. Here you can see
that we’re using the annotation @UI.lineItem with properties such as position, impor-
tance, and label. These annotations are specific to line items, and because we’re
building this CDS view for a list card, it will help us control the properties of the list in
the card. Using this, we can specify at which order a field should appear in the list via
the position property starting with 10 as the first position of the table columns. The
label property will set the text for the column in the table. The Importance property
will set the field values to appear as bold.
@Metadata.layer: #CORE
annotate view Z_C_PurchaseDocsforApprovalOVP with
{
@UI.lineItem: [{
position: 10,
importance: #HIGH,
label: 'Document',
type: #FOR_INTENT_BASED_NAVIGATION,
semanticObjectAction: 'manage'
202
第 203 页 / 共 465 页
5.2 Adding User Interface Annotations
}]
PurchaseDocument;
@UI.lineItem: [{
position: 20,
importance: #HIGH,
label: 'Description'
}]
Description;
…
@UI.lineItem: [{
position: 60,
importance: #HIGH,
label: 'Quantity'
}]
Approval;
}
Listing 5.10 Metadata Extension for Consumption View Z_C_PurchaseDocsforApprovalOVP
Create Annotations for a Bar List Card
Listing 5.11 shows the metadata extension for the bar list card CDS view. In this view,
our plan is to generate a bar list with a criticality calculation annotation that will visu-
ally represent whether a purchasing document is within the allowed budget or not.
To achieve this, we need to make use of the @UI.datapoint.criticalityCalculation
annotation. The annotations that belong to the UI.dataPoint are used for visualiza-
tion of a single point of data that is usually a number or sometimes even text. In this
CDS view, we’re declaring the BudgetUtilization field, which is a calculated field, as
datapoint. The datapoint has some other features as listed here:
(cid:2) valueFormat.numberOfFractionalDigits
This sets the number of fractional digits to be displayed.
(cid:2) minimumValue
This acts as an indicator for the minimum threshold value.
(cid:2) maximumValue
This acts as an indicator for the maximum threshold value.
203
第 204 页 / 共 465 页
5 Developing an Overview Page
(cid:2) criticalityCalculation
This annotation, which is a part of the @UI annotation, acts as an alternative to the
usual way of setting criticality for a field. This annotation has the following further
properties:
– deviationRangeHighValue: Specifies the maximum deviation a field can have
before it reaches a negative value. If the value crosses the deviationRangeHigh-
Value threshold, it turns yellow as a warning.
– toleranceRangeHighValue: Specifies the maximum tolerance range for a field. If
the value crosses the tolreanceRangeHighValue, it turns red to indicate that
you’ve exceeded the allowed limit.
– improvementDirection: The improvement direction is critical to how the visual-
ization will react to the field value. For example, if improvementDirection is set to
#MINIMIZE, then if the value of the respective field goes under toleranceRange-
HighValue, it’s displayed in green (to indicate a positive value). The values
between toleranceRangeHighValue and deviationRangeHighValue will be dis-
played in yellow (indicating it’s critical), and values above deviationRangeHigh-
Value are displayed in red (indicating a negative value). The other values of
improvementDirection are #MAXIMIZE (which is the opposite of #MINIMUM) and #TAR-
GET. For our scenario, #MINIMIZE is the better fit because the visualization is
supposed to be green whenever the overall price for a purchasing document is
below 40% of the budget, should start moving to yellow when the utilization
is between 80% and 100%, and should be red when the utilization is above
100%.
@Metadata.layer: #CORE
annotate view Z_C_PurchaseDocBudgetOVP with
{
…
@UI: {
lineItem: [{
type: #AS_DATAPOINT,
importance: #HIGH,
position: 10
}],
dataPoint: {
title: 'Overall Price',
valueFormat.numberOfFractionalDigits: 2,
minimumValue: 0,
204
第 205 页 / 共 465 页
5.2 Adding User Interface Annotations
maximumValue: 100,
criticalityCalculation: {
improvementDirection: #MINIMIZE,
toleranceRangeHighValue: 80,
deviationRangeHighValue: 100 }
}
}
BudgetUtilization;
}
Listing 5.11 Metadata Extension for Consumption View Z_C_PurchaseDocBudgetOVP
Create Annotations for a Table Card
Listing 5.12 is for the metadata extension for the table card CDS view. The UI annota-
tions for a list card and a table card are the same. The only difference is that the list
card won’t show the column names but only its values with a maximum number of
six columns, whereas a table card will show the column names. So, like the list card
metadata extension we did earlier, in this extension, we’ll also specify the order of
the columns via the @UI.lineItem UI annotation.
@Metadata.layer: #CORE
annotate view Z_C_PurchaseDocumentPendingOVP with
{
@UI.lineItem: [{
position: 10,
importance: #HIGH,
label: 'Document'
}]
PurchaseDocumentDescription;
…
@UI.lineItem: [{
position: 80,
importance: #HIGH,
label: 'Currency'
}]
Currency;
}
Listing 5.12 Metadata Extension View for Z_C_PurchaseDocumentPendingOVP
205
第 206 页 / 共 465 页
5 Developing an Overview Page
5.3 Creating an OData Service
After we’ve created all the required CDS views, now it’s time to create our OData ser-
vice project.
5.3.1 Creating the OData Project
For this, go to Transaction SEGW, click on the Create Project icon, and name the
OData project (in this case, we’re naming it “Z_PurchDocsOVP”).
Now we need to add our CDS views into the OData project:
1. Expand the OData project tree structure.
2. Right-click on Data Model, and choose Reference (cid:2) Data Source (as shown in Figure
5.4).
3. Add our first CDS view for the filter bar Z_C_PurchaseDocumentFiltersOVP.
4. Click Next and then click Finish to add the CDS view to the project.
Figure 5.4 Importing CDS Views into the OData Project
5.3.2 Adding Overview Page Card CDS Views into the Project
With the OData project created, now it’s time to add our CDS views for the OVP cards
into the project. To do so, click on the Add CDS-Entity button at the top of the screen,
and add the remaining CDS views one by one as shown in Figure 5.5.
206
第 207 页 / 共 465 页
5.3 Creating an OData Service
Figure 5.5 Adding the Remaining CDS Views into the Project
Now click on the Generate icon on the toolbar, and click on Continue in the popup
window, as shown in Figure 5.6.
Figure 5.6 Generating the OData Project
207
第 208 页 / 共 465 页
5 Developing an Overview Page
On the next popup window, you can either save it into your package or as a local
object (in this case, we save it as a local object). After you’ve generated the project,
you’ll notice a few green checkmarks against the three CDS views in the project (see
Figure 5.7). Two of them are checked against Z_C_PriorityVH and Z_C_StatusVH, and
this is the part we explained earlier in the chapter where we discussed about adding
value helps to the filter bar CDS view. The framework automatically detected these
views as value helps and marked them. The third CDS view with the checkmark is for
Z_C_PurchaseDocumentOVP because the metadata extensions for the CDS view con-
tain analytical annotations for the charts.
Figure 5.7 Value Helps and Analytical Views Automatically Marked by the Framework
5.4 Exposing CDS Views as an OData Service
After the OData project is generated, we need to register the OData service so that we
can use it in SAP Web IDE to generate the OVP application.
5.4.1 Importing the OData Service
Execute Transaction /n/IWFND/MAINT_SERVICE on the SAP Gateway hub system.
Click on the Add Service button, as shown in Figure 5.8.
208
第 209 页 / 共 465 页
5.4 Exposing CDS Views as an OData Service
Figure 5.8 Adding OData Service into the System
5.4.2 Registering the OData Service
In the next screen shown in Figure 5.9, enter the System Alias as “Local” 1 because
your OData project is being registered on the same system. If you want to register the
service in another SAP Gateway system, then enter the respective system alias. Enter
the project name “Z_PURCHDOCSOVP*” or the name you’ve given for your project
into the External Service Name field and press (Enter) 2. You should see your OData
service ending with _SRV. Select the checkbox next to the service name 3, and click
the Add Selected Services button 4. Click Continue on the popup window and the
subsequent pop ups asking for confirmation.
Figure 5.9 Registering the OData Service in the System
Note
We’ll use the External Service Name that appeared in the popup after clicking the
Add Selected Services button later in this chapter for generating the app using SAP
Web IDE.
209
| Note We’ll use the External Service Name that appeared in the popup after clicking the Add Selected Services button later in this chapter for generating the app using SAP |
| Web IDE. |
第 210 页 / 共 465 页
5 Developing an Overview Page
5.5 Generating an Overview Page Template Project in SAP Web IDE
Now that we have our CDS view exposed via the OData service. We can start with our
front-end application using the SAP Web IDE.
5.5.1 Generating the Basic Overview Page Layout
SAP Web IDE offers multiple application templates to choose from. To create an OVP,
open the SAP Web IDE, and click on File (cid:2) Project from Template, as shown in Figure 5.10.
Figure 5.10 Creating a New Project from Template in SAP Web IDE
From the Template Selection page, select the Category as SAP Fiori Elements. Then
select Overview Page from the templates (as shown in Figure 5.11), and click the Next
button.
Figure 5.11 Selecting the Overview Page Template
210
第 211 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
In the Basic Information tab (see Figure 5.12), enter the details as shown in Table 5.1,
and click the Next button.
Figure 5.12 Basic Information Tab for the Overview Page Template
Field Parameter
Project Name “PurchaseDocumentsOVP”
Namespace “fiori.monitor.purchase.documents”
Title “Purchasing Documents Over View”
Description “Overview of all purchase Documents”
Application Component Hierarchy “MM-PUR”
Table 5.1 Values for Basic Information Overview Template Creation
On the Data Connection tab, under the Service Catalog section as shown in Figure
5.13, select the system in which you’ve registered the OData service as explained in
211
| Field | Parameter |
|---|---|
| Project Name | “PurchaseDocumentsOVP” |
| Namespace | “fiori.monitor.purchase.documents” |
| Title | “Purchasing Documents Over View” |
| Description | “Overview of all purchase Documents” |
| Application Component Hierarchy | “MM-PUR” |
第 212 页 / 共 465 页
5 Developing an Overview Page
Section 5.4.2. After selecting the system, enter the OData service name (in this case,
it’s “Z_PURCHDOCSOVP_SRV”), and click the Next button.
Figure 5.13 Selecting the OData Service from the SAP Gateway System
In the Annotation Selection section, the wizard will list the annotation model and the
service metadata that the framework detected from the OData service. Select both
services, as shown in Figure 5.14, and click the Next button.
Figure 5.14 Annotation Model and Service Metadata File List from the OData Service
212
第 213 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
In the Template Customization tab shown in Figure 5.15, we’ll select the EntityType for
Filter name from the OData service (in this case, it’s Z_C_PURCHASEDOCUMENTFIL-
TERType). This will generate the filter bar in the OVP.
Figure 5.15 Selecting the Entity Type for Filter the OVP’s Filter Bar
Now we’ve created a basic template for the OVP along with the default filter. Let’s cre-
ate a Run Configuration for the app so that we can test the output. Right-click on the
project, and choose Run (cid:2) Run Configurations, as shown in Figure 5.16.
Figure 5.16 Create Run Configurations for the OVP App
213
第 214 页 / 共 465 页
5 Developing an Overview Page
In the Run Configurations for PurchasingDocuments wizard screen, click on the +
symbol on the top-left side, as shown in Figure 5.17 1, and select SAP Fiori Launchpad
Sandbox. Now click the Save and Run button 2.
Figure 5.17 Running Configuration Wizard
Now we can see the output of our app. We can see that the filter bar has been gener-
ated with the Priority and Status fields and has picked up the UI annotation from the
CDS views accordingly and converted the regular filter fields into a dropdown list (see
Figure 5.18). But we don’t see any cards in the app yet because we need to configure
each card for the app one by one.
214
第 215 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
Figure 5.18 OVP Output with Filter Bar
5.5.2 Adding the List Analytical Card
Now, let’s start adding the cards (see Figure 5.19). First, we’ll add the analytical card,
which contains our donut chart for Priority and Status. Right-click on the project, and
select New (cid:2) Card.
Figure 5.19 Adding Cards to the OVP Project
In the wizard, select the Analytic Card and then select the Select to enable view
switch for this card. checkbox, as shown in Figure 5.20. This checkbox is required
because we’re planning to show the chart for Priority and Status. If you don’t check
215
第 216 页 / 共 465 页
5 Developing an Overview Page
this checkbox, then in the next screen, you’ll get the option to only add one of the
values for the chart.
Figure 5.20 Selecting the Analytic Card from the Wizard
In the Configure Datasource tab (Figure 5.21), select the Use existing Datasource radio
button, which will be listed with our default OData service for the app.
Figure 5.21 Configuring the Data Source for the Analytic Card
In the Template Customization tab shown in Figure 5.22, enter the values as shown in
Table 5.2. You can see in the figure that we have the Annotation: First View and Anno-
tation: Second View options; the second one was enabled because the checkbox was
selected in the Select a card tab. In the Value fields for each annotation view, we enter
“Priority” and “Status” as the values, respectively. The Chart Annotation Path is a
dropdown list with the qualifiers we’ve created via UI annotations earlier in the chap-
ter (refer to SectionSection 5.2.1).
216
第 217 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
Figure 5.22 Template Customization for the Analytic Card
Field Parameter
Entity Set “Z_C_PurchaseDocumentOVP”
Title “Purchasing Documents”
Subtitle “By Priority, By Status”
Annotation: First View Value “Priority”
Chart Annotation Path “com.sap.vocabularies.UI.v1.Chart#ByPurchaseDoc-
umentPriority”
Annotation: Second View Value “sap”
Chart Annotation Path “com.sap.vocabularies.UI.v1.Chart#ByPurchaseDoc-
umentStatus”
Table 5.2 Values for Template Customization: Analytic Card
217
| Field | Parameter |
|---|---|
| Entity Set | “Z_C_PurchaseDocumentOVP” |
| Title | “Purchasing Documents” |
| Subtitle | “By Priority, By Status” |
| Annotation: First View Value | “Priority” |
| Chart Annotation Path | “com.sap.vocabularies.UI.v1.Chart#ByPurchaseDoc- umentPriority” |
| Annotation: Second View Value | “sap” |
| Chart Annotation Path | “com.sap.vocabularies.UI.v1.Chart#ByPurchaseDoc- umentStatus” |
第 218 页 / 共 465 页
5 Developing an Overview Page
Listing 5.13 from the manifest.json file shows what the app generates when we add the
analytical card using the wizard.
"card00": {
"model": "Z_PURCHDOCSOVP_SRV",
"template": "sap.ovp.cards.charts.analytical",
"settings": {
"title": "{{card00_title}}",
"subTitle": "{{card00_subTitle}}",
"entitySet": "Z_C_PurchaseDocumentOVP",
"tabs":
[{"value": "Priority",
"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#
ByPurchaseDocumentPriority",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.
Identification",
"navigation": "dataPointNav"
},{
"value": "Status",
"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#
ByPurchaseDocumentStatus",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.
Identification",
"navigation": "dataPointNav"
}]
}
},
Listing 5.13 The manifest.json Entry for the Analytical Card
5.5.3 Adding the Standard List Card
Now, let’s add the standard list card, as shown in Figure 5.23. The first step to open the
Select a Card wizard is the same as the one explained in Section 5.5.2 (see Figure 5.23).
Select the List card from the wizard and click Next.
In the Template Customization tab for the List card (Figure 5.24), we need to select the
Entity Set Z_C_PurchaseDocsforApprovalOVP. To display the maximum number of
fields for the list card, we need to set the List Type as Extended so that it will display
the maximum six fields (enter the values given in Table 5.3). We’ll also specify the List
Flavor as Standard. We want the list to be sorted by OverallPrice in Descending order.
218
第 219 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
Figure 5.23 Selecting the List Card from the Wizard
Figure 5.24 Template Customization for the Standard List Card
219
第 220 页 / 共 465 页
5 Developing an Overview Page
Field Parameter
Entity Set Z_C_PurchaseDocsforApprovalOVP
Title “Purchasing Documents Pending Approval”
Subtitle “Pending List of Purchasing Documents for Approval”
List Type Extended
List Flavor Standard
Sort By OverallPrice
Sort Order Descending
Table 5.3 Values for Template Customization: Standard List Card
Listing 5.14 from the manifest.json file shows what the app generates when we add the
standard list card using the wizard.
"card01": {
"model": "Z_PURCHDOCSOVP_SRV",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card01_title}}",
"subTitle": "{{card01_subTitle}}",
"entitySet": "Z_C_PurchaseDocsforApprovalOVP",
"listType": "extended",
"listFlavor": "standard",
"sortBy": "OverallPrice",
"sortOrder": "descending",
"addODataSelect": false,
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.
Identification",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
}
},
Listing 5.14 The manifest.json Entry for the Standard List Card
5.5.4 Adding the Bar List Card
Now, let’s add the bar list card, as shown in Figure 5.25. The first step to get to the
Select a Card wizard is the same as explained in Section 5.5.2 (see Figure 5.25). The card
220
| Field | Parameter |
|---|---|
| Entity Set | Z_C_PurchaseDocsforApprovalOVP |
| Title | “Purchasing Documents Pending Approval” |
| Subtitle | “Pending List of Purchasing Documents for Approval” |
| List Type | Extended |
| List Flavor | Standard |
| Sort By | OverallPrice |
| Sort Order | Descending |
第 221 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
to be selected is a list card as shown earlier in Figure 5.23. In the Template Customiza-
tion tab for the card, we select the Entity Set Z_C_PurchaseDocBudgetOVP, which
contains the data point for criticalityCalculation that will populate the bar list card.
In addition, we set the List Flavor as Bar. Enter the values as shown in Table 5.4.
Figure 5.25 Template Customization for the Bar List Card
Field Parameter
Entity Set Z_C_PurchaseDocBudgetOVP
Title “Budget Overview”
Subtitle “Budget Overview per Purchasing Document”
List Type Extended
List Flavor Bar
Table 5.4 Values for Template Customization: Bar List Card
Listing 5.15 from the manifest.json file shows what the app generates when we add the
bar list card using the wizard.
221
| Field | Parameter |
|---|---|
| Entity Set | Z_C_PurchaseDocBudgetOVP |
| Title | “Budget Overview” |
| Subtitle | “Budget Overview per Purchasing Document” |
| List Type | Extended |
| List Flavor | Bar |
第 222 页 / 共 465 页
5 Developing an Overview Page
"card02": {
"model": "Z_PURCHDOCSOVP_SRV",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card02_title}}",
"subTitle": "{{card02_subTitle}}",
"entitySet": "Z_C_PurchaseDocBudgetOVP",
"listType": "extended",
"listFlavor": "bar",
"addODataSelect": false,
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
}
},
Listing 5.15 The manifest.json Entry for the Bar List Card
5.5.5 Adding the Table Card
Now, let’s add the table card, as shown in Figure 5.26. Select the Table Card from the
wizard, and click Next.
Figure 5.26 Selecting the Table Card from the Wizard
In the Template Customization tab shown in Figure 5.27, select the Entity Set Z_C_
PurchaseDocumentPendingOVP, and enter the values as shown in Table 5.5.
222
第 223 页 / 共 465 页
5.5 Generating an Overview Page Template Project in SAP Web IDE
Figure 5.27 Template Customization for the Table Card
Field Parameter
Entity Set Z_C_PurchaseDocumentPendingOVP
Title “Purchasing Document Items”
Subtitle “Purchasing Documents Items List”
Table 5.5 Values for Template Customization: Table Card
Listing 5.16 from the manifest.json file shows what the app generates when we add the
table card using the wizard.
"card03": {
"model": "Z_PURCHDOCSOVP_SRV",
"template": "sap.ovp.cards.table",
"settings": {
"title": "{{card03_title}}",
"subTitle": "{{card03_subTitle}}",
223
| Field | Parameter |
|---|---|
| Entity Set | Z_C_PurchaseDocumentPendingOVP |
| Title | “Purchasing Document Items” |
| Subtitle | “Purchasing Documents Items List” |
第 224 页 / 共 465 页
5 Developing an Overview Page
"entitySet": "Z_C_PurchaseDocumentPendingOVP",
"addODataSelect": false,
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
}
}
Listing 5.16 The manifest.json Entry for the Table Card
5.5.6 Overview Page Output
After we’ve added all the cards, we can run the application again to see that now all
the cards are visible in our app (Figure 5.28). The cards are resizable, so if we want the
table card (Purchasing Document Items) to show all the fields, then we can increase
the width of the card by dragging the card’s edge with the mouse.
Figure 5.28 Purchase Documents OVP Output
224