Exercise: Generating a User interface

Generate the UI with an SAP Fiori Elements Template.

1. In SAP Business Application Studio, invoke the Command Palette (View → Find Command or Cmd+Shift+P) and choose Fiori: Open Application Generator.

   

2. Choose SAP Fiori Elements and List Report Object Page and select Next.

   

3. In the next dialog, choose Use a Local CAP Project and point to the folder of your current RiskManagement project. Select RiskService (Node.js) as the OData service and select Next.

   

4. As the Main entity, choose Risks, and as answer to the question, choose Yes.

   

5. Enter risks as the module name. Enter Risks as the application title and Risk Management as the description for the application. Enter riskmanagement as the namespace. Choose No for all additional settings. Choose Finish.

   

   (If you get a pop-up that says A project has been generated. What would you like to do with it?, you can ignore it and just close the pop-up).

   The application is now generated and after a couple of seconds you can see it in the app folder of your project. It contains a risk-management and a webapp folder with a Component.js file, which is characteristic for a UI5 app. However, the code there is minimal and it basically inherits its logic from the sap/fe/core/AppComponent.

6. If cds watch isn't still running from the previous lesson, execute it in a terminal and press on the Open in New Tab button in the right lower corner. If it is still running from the last exercise, it is enough to refresh the browser page where it is running.

   You can now see that cds watch has discovered an HTML page in your app folder:

   

   Note

   You also see the launchpad.html file, which was part of the cloned starter template from GitHub. With this, you will get the look and feel of the SAP Fiori Launchpad integration and you are able to navigate through the SAP Fiori Elements User Interfaces. We recommend opening the app using the launchpad instead of opening it directly.

7. Click on the launchpad.html link. On the launch page that now comes up, Choose the Risks tile.

   

   You can now see the list page, it looks like this:

   

   Unfortunately, the app looks rather empty and not yet ready for the rollout to the end users. For example, the list has still its technical column names. This is because we miss an essential part of a SAP Fiori elements application that tells it about columns, form fields, and many other things: it is missing UI annotations.

   Note

   UI-specific annotations can either be added manually to the annotations files (.cds-files inside the generated risk-management UI folder) or visually with the SAP Fiori Tools. These tools are pre-installed in the SAP Business Application Studio and in the following steps you will use them to customize the user interface.

Open the Page Map.

When it is opened, it should look like this the following:

Choose the plus sign to add a filter field.

Choose prio_code from the dropdown menu and choose Add

Rename the field and activate localization (i18n).

Select the added filter field under Filter Fields , set the title to Priority, and choose Apply.

Note

By clicking on Apply, the _i18n folder will be added to your project and the name is set to Variable {i18n>Priority}. When you access the application later, your browser's default language will be used to choose from which language to choose. Read more about Localization, i18n in CAP here.

Update the table columns.

1. Rename the table columns like you renamed the filter field. Ensure to click on the globe icon to activate localization. See the table below for the new names of the columns.

   

   Actions for Updating Table Columns

   Old Name	New Name	Action
   title	Title	Rename & Activate Localization
   owner	Owner	Rename & Activate Localization
   prio_code	Priority	Rename & Activate Localization
   descr		Remove this column
   impact	Impact	Rename & Activate Localization

2. Add a new column for Mitigation Description

   Select the + sign next to Columns to add a new column. Choose miti/descr from the dropdown menu.

3. Rename the mitigation field to Mitigation and activate localization by choosing the globe icon. Then rearrange the order of columns by dragging and dropping the Mitigation column further up.

   

Go back to the Page Map

Open the Object Page in Editing Mode.

Configure the Header Section of the Object Page.

Set the following properties:

Object Page Header

Property	Value
Title	title
Description Type	Property
Description	descr
Icon URL	sap-icon://alert

It should look like the following:

Remove the General Information section under Sections.

Add a new Group Section and name it Risk Overview.

In the newly created Risk Overview section, add a new Form Section and call it Risk Details.

Add Basic Fields to the Risk Details section.

Choose title, owner, descr, prio_codeand impact.

It should then look like this:

Rename the fields accordingly and enable localization (i18n).

Note

Repeat this step for all added fields (owner → Owner, descr → Description, prio_code → Priority, impact → Impact).

It should look like this:

Add a new Group Section and call it Mitigation Overview

Add a new Form Section and call it Mitigation Details

Add Basic Fields to the Mitigation Details 'Form'

1. Choose Add Basic Fields

   

2. Choose miti_ID, miti/owner, miti/timeline and select Add.

   

Rename and configure the added basic fields.

1. Rename and configure miti_ID.

   Rename mitigation to Mitigation and enable localization by choosing the globe icon. Additionally, choose descr as value for the Text property. For Display Type choose Value Help. Configure the Value Help in the dedicated pop-up as shown in the following figure.

   

2. Rename and configure owner

   

3. Rename and configure the timeline field.

   

Preview the application.

Note

Ensure that the cds watch is still running. If not, run cds watch in your terminal again.

1. Select an entry on the list page.

   Choose Go to fetch the data and select one entry to navigate to the object page.

2. Choose Edit to update the entry and test the value help.

   

3. Choose a different Mitigation and choose Save.

   

   It will look like the following: