ex2

Exercise 2 - Flexible Programming Model: Using Fiori Elements Building Blocks on a Custom Page

The available Fiori elements floorplans for OData V4 cover most business scenarios that customers encounter with SAP. In fact, SAP uses these SAP Fiori elements floorplans to create roughly 80% of new SAP S/4HANA apps.
If these floorplans do not meet your needs, the flexible programming model provided by SAP Fiori elements allows to assemble your custom design by combining the available building blocks with SAPUI5 controls, and leverage controller extensions in order to fine-tune the behaviour of your app.
Please be aware that when using custom code in your SAP Fiori elements apps, you will also have to make sure your extensions remain aligned with the evolving SAP Fiori design specification, whereas the parts generated by annotations will automatically be updated if the standard changes.
For our scenario, we want to mimic the behaviour of the list report and combine it with some SAPUI5 controls and add some app specific behaviours.

Exercise 2.1 Guided Development: Adding Filter Bar Building Block

After completing these steps we will have added building blocks filter bar and table to your custom page.

(1) In Business Application Studio, on the Application Information tab Click Open Page Map.

(2) Click Configure Page.

(3) Click the Add menu item.

(4) Click .

(5) Click .

(6) In Step 1 of the dialog, the selection fields to be shown in the filter bar are defined.
Open drop-down CDS File and select annotation file the annotations are to be inserted.

(7) Open drop-down Service and select .

(8) Open drop-down Entity and select .

(9) Now let's add some selection fields. We start with .

(10) Click Add selection field twice.

Enter selection fields to_Customer_CustomerID (11) and TravelStatus_code (12) as shown.

(13) In the annotation preview pane, you can see the generated annotation.
Clicking inserts it into the target annotation file.

(14)  File annotations.cds is opened, showing the inserted annotation.

(15) Click to get to step 2 in the development guide.

(16) Open drop-down Service and select .

(17) Open drop-down Entity and select .

(18) Open drop-down Selection Fields Qualifier and select .

(19) Open drop-down Aggregation Path and select .
The aggregation path points to the location in the xml view where the building block is to be inserted.

(20) Click .

(21) Click .

(22) the Page Editor shows the added filter bar building block for the Custom Page.

(23) In the opened file Main.view.xml, you can see the inserted filter bar building block.

Please note property metaPath referring to the SelectionFields annotation that has been inserted in the first step of the guide .

(24) If not already started, let's start the App Preview. Click in the left toolbar of the Business Application Studio.

(25) Click Preview Application .

(26) This opens a drop-down on top. Select npm script .

(27) A separate browser tab is opened, showing the filter bar on top. Open a value help to make sure that filter values are shown.

The corresponding value list annotations are provided in the project and can be found in file app/value-helps.cds.

Exercise 2.2 Adding Table Building Block

We will now use another development guide to add a table building block to the custom page and semantically connect it to the filter bar.

(28) In the page editor for the custom page, click menu item .

(29) Click .

(30) The development guide Add a table building block is opened. Click .

Open drop-downs and select entries for CDS File (31), Service (32) and Entity (33) as shown below.

(34) In section Column Parameters, open drop-down Property and select .

(35) Click Add column 6 times .

(36) Add the following properties as shown below:

• TravelStatus_code
• BeginDate
• EndDate
• to_Agency_AgencyID
• to_Customer_CustomerID
• TotalPrice

(37) Click .

(38) File app/managetravels/annotations.cds is opened, showing the inserted UI.LineItem annotation.

(39) In the development guide, click .

(40) Enter the values as shown in the marked fields below. Keep the Binding Context Path Type set to relative. This makes sure that the metaPath to the LineItem annotation is relative to entity Travel. The Aggregation Path defines where building block table is to be inserted in the target xml view. Defining the Associated Filter Bar ID ensures that the filter bar can interact with the table. Leave all other values as proposed.

(41) Scroll a bit down and open the drop-down for table property Enable Read Only Mode. Select .

(42) Click .

(43) File Main.view.xml is opened, showing the inserted code snippet.

(44) Click .

(45) In the Page Editor we will now add some actions related to the table. Click .

(46) Click .

(47) Open the drop-down and select both available actions.

(48) Click .

(49) Enter Accept Travel in field Label for the action and click .

(50) This will replace the entered string with a text key. Click .

(51) Define a label for action Reject Travel and replace it with a text key in the same way.

(52) Click .

(53) Open drop-down Criticality and select .
The column values are then highlighted with semantic colors and icons based on the criticality calculation logic defined for the selected property in the back end.

(54) Click .

Exercise 2.3 Page Map: Add Object Page and Switch to Flexible Column Layout

In this exercise we will add an object page to check on the navigation capabilities of the table building block.
We will then switch the page layout to flexible column layout. The flexible column layout allows users to see more
details on the page, and to expand and collapse the screen areas.

(55) Click Add New Page .

(56) On the Add Page dialog, open the drop-down of field Navigation and Select Travel. This defines the context binding of the object page and automatically enables navigation for the custom page table.

(57) Click .

(58) Enable Flexible Column Layout by selecting the corresponding radio button.

(59) For Select Layout for 2 Columns, select Mid-Expanded.

(60) Below of it, set the Flex Enabled drop down to false as we don't require key user adaptation capabilities for the scenario. .

As the object page is yet empty, we will define a title and description.

(61) Click Configure Page.

(62) Click .

(63) Enter Travel in field Type Name and create a translatable text key for it.

(64) Enter Travels in field Type Name Plural and create another text key for it.

(65) Open drop-down field for Title and select property Description.

(66) Open the drop-down for field Description Type and select Property.

(67) In the Define Property dialog, open the drop-down for field Description and select .

(68) Click .

(69) Search for property Editable Header Content and set it to false.

Switch back to the preview browser tab. It is now showing the filter bar and the table. Use the selection fields and trigger selection with Go to test the connection between both building blocks.
(70) Click on a table line to navigate to the object page. By using table building block, navigation works solely through the context path without having to apply any additional custom coding.

The pages are shown in the flexible column layout. You can use the expand/collapse buttons in to upper right corner to change the layout of the screen areas.
The configured travel description and travel ID are shown in the object page header.

Summary

You've now successfully added building blocks filter bar and table to a custom view.

Continue to - Exercise 3 - Improve Page Layout and add UI5 Freestyle Controls