Create a Fiori OVP using SAP Fiori Tools

[lboehm]

Hi all,

welcome to my first ever blog post. As Peter Spielvogel announced, the new SAP Fiori Tools are now officially released. I'll try to show how you can create an Fiori OVP using the new tooling. This blog post won't do a deep dive specfic card types or annotations, as there are other blog posts regarding those topics. After that blog post you should feel confident to create Fiori OVPs using the new Fiori Tools.

Before getting started with creating the OVP, please make sure you have read the new tutorials (mentioned in Peters announcement).

First follow the tutorial Set Up SAP Fiori Tools in Your Development Environment to set up your dev environment in VSCode. After that, follow the steps explained in Set Up and Generate a New SAP Fiori App Project to create an account on the ES5 Gateway Demo System. We will create a new project now:

 

Create the SAP Fiori App Project

You should now have an account on ES5 Gateway Demo System. So now let's create a new Fiori App Project:

1. Run command palette in VSCode by pressing CTRL+SHIFT+P and type Application Generator


2. Select the "SAP Fiori Tools - Application Generator" and click "Next"


3. In the Template Selection choose the Overview Page - as we will create a Fiori OVP - and click "Next"


4. In the next step, select your data source. We will go with the ES5 Gateway Demo System, so we choose "Connect to an OData service". Paste your Service URL and provide your username and credentials. After that, you can specify which entity will be used as global filter.(documentation on global filter). We will choose SEPMRA_C_PD_Product. It should look like this. Now click "Next".


5. After specifying your data source, you'll have to provide some general information regarding your project like name, namespace, title and so on:If you like you can adapt some advanced options like SAPUI5 version or Theme but we will skip that. Now click "Next".

After that last step, the generator will create a npm based SAP Fiori App Project and it will install the npm dependencies. Depending on your network connection, this might take a minute or two. If you're interested in the installation steps, you can open output view (1) and select Yeoman UI.Generators (2):

Create a table card

Now as the App Project is ready - we can start to configure the OVP by adding our first card using guided development. We will start quite easy with a table card:

1. Open VSCode command palette by pressing CTRL+SHIFT+P and type Guided Development. Then select one of the following two entries:If you like using split screen view of VSCode you can choose the "to the Side" option. This comes in handy if you like to see the files which will be modified by Guided Development.


2. In Guided Development scroll down to the Overview Page section and expand the entry "Add a table card to an overview page"


3. Now provide the requested information regarding your table card, like Card ID and Title. As entity choose SEPMRA_C_PD_Product. Now hit the "Apply" button.


4. Since the first card is defined, we now start the local web serve to see the OVP. Choose "Terminal" in the window menu and select "Run task...". In the following popup select "npm" and then npm start:VSCode will now run the start task which is specified in package.json and after a few seconds the browser will open your OVP. You will have to provide your user credentials for E5 Demo Gateway. It should loke like this:


5. Of course we don't want to show the Image column, so we will change the annotation. Open the Service Modeller using Command Palette and typing "Service Modeller".


6. Search for the Entity SEPMRA_C_PD_Product and click on the @:


7. Now copy the UI.LineItem annotations to your local annotations file to modify them:


8. We now want to alter the original UI.LineItem annotations - so we show product ID, product name, price and stock availability:
   

   <Annotation Term="UI.LineItem">
   
       <Collection>
   
           <Record Type="UI.DataField">
   
               <PropertyValue Property="Value" Path="Product" />
   
               <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
   
           </Record>
   
           <Record Type="UI.DataField">
   
               <PropertyValue Property="Value" Path="Name" />
   
               <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
   
           </Record>
   
           <Record Type="UI.DataFieldForAnnotation">
   
               <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Price" />
   
               <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
   
           </Record>
   
           <Record Type="UI.DataField">
   
               <PropertyValue Property="Criticality" Path="to_ProductStock/StockAvailability" />
   
               <PropertyValue Property="Label" String="Stock Availability" />
   
               <PropertyValue Property="Value" Path="to_ProductStock/to_StockAvailability/StockAvailability_Text" />
   
               <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/Medium" />
   
           </Record>
   
       </Collection>
   
   </Annotation>
   
   

   
   


9. Now save your annotation xml file - and the app will reload instantly. You will only see three of the four columns defined in UI.LineItem, because the card isn't large enough. So we want to adjust the card size. We have to do that in OverviewPage.json. On the left side you will find the Application Modeler (1). In the Application Modeler, click on OverviewPage.json (2):


10. VSCode will open the JSON file. We now can make use of the good code completion, provided by Fiori Tools. At the end of the annotationPath line add a comma and press enter. After that press CTRL+SPACE to show code completion:


11. That last step was important - get used to using code completion, as it really speeds up your development! So now use code completion to specify the columns and rows as you like (I choose "cols": 2, "rows": 4 ). Tip: By default Fiori Tools provide "auto" as a value for default span - when you add curly breakets you will get code completion for all options:

You will now see your first card, showing all four columns.

 

Add an analytical card (line chart)

Now let's head to our next card. We will go with an analytical card, displaying a line chart of the revenue:

1. As before - open Guided Development to the side, open the section "Add an analytical card to an overview page", provide the following data and hit the Apply button:


2. Now adapt the annotations. Go to the Service Modeler, search for the SEPMRA_C_PD_ProductSalesDataType and click on the @.


3. Copy the UI.Chart annotation to your local annotation file:


4. Your code should look like this:
   

   <Annotation Term="UI.Chart">
   
       <Record Type="UI.ChartDefinitionType">
   
           <PropertyValue Property="Title" String="Revenue History" />
   
           <PropertyValue Property="Description" String="Revenue History" />
   
           <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line" />
   
           <PropertyValue Property="Dimensions">
   
               <Collection>
   
                   <PropertyPath>DeliveryMonth</PropertyPath>
   
               </Collection>
   
           </PropertyValue>
   
           <PropertyValue Property="DimensionAttributes">
   
               <Collection>
   
                   <Record Type="UI.ChartDimensionAttributeType">
   
                       <PropertyValue Property="Dimension" PropertyPath="DeliveryMonth" />
   
                       <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
   
                   </Record>
   
               </Collection>
   
           </PropertyValue>
   
           <PropertyValue Property="Measures">
   
               <Collection>
   
                   <PropertyPath>Revenue</PropertyPath>
   
               </Collection>
   
           </PropertyValue>
   
           <PropertyValue Property="MeasureAttributes">
   
               <Collection>
   
                   <Record Type="UI.ChartMeasureAttributeType">
   
                       <PropertyValue Property="Measure" PropertyPath="Revenue" />
   
                       <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
   
                   </Record>
   
               </Collection>
   
           </PropertyValue>
   
       </Record>
   
   </Annotation>
   
   ​

   
   


5. Defining texts in the annotation.xml file is a bad habit - so Fiori Tools are telling us that there is a problem by showing warnings in the Problems view:


6. Go to the first warning regarding 'Revenue History' and hover with the mouse over the underlined, hard coded text. In the Popup select "Quick Fix":


7. VSCode will show you the Quick Fixes, which are provided for this Quick Fix. Select the one Quick Fix provided:


8. VSCode now created an i18n key and created a reference to the newly created key. In the line below, the same text is found again. As we just created a translation for that text, the Quick Fix for that line just substitutes the text with the i18n key, without creating a new key. Execute that Quick Fix as well as the Quick Fix for the text "Stock Availability".


9. Your OVP Application should now look like this:

Add a stack card

Let's add a stack card, that gives us a glimpse on the reviews:

1. You know the drill 🙂 - open Guided Development, open the section "Add a stack card to an Overview Page". As entity choose SEPMRA_C_PD_ReviewPost, provide the other information and hit the Apply-Button:


2. Now we can add annotations for SEPMRA_C_PD_ReviewPostType to our annotations.xml file. Add a new line after the last closing </Annotations> tag and hit CTRL+SPACE:Now use code completion to add UI.Facets annotation: Important: From my point of view, if you're typing XML code manually you're doing it wrong. Code completion is so good and provides so much information, that you don't have to write XML code manually. My workflow basically is: CTRL+SPACE, choose an entry and hit ENTER.


3. As ReviewPostType only has one annotation to be referenced (the UI.HeaderInfo provided by the service), add this annotation as ReferenceFacet.


4. Now let's add a FieldGroup, because we want to display the rated product and the date of review on the stack cards. After adding the FieldGroup we have to reference it in UI.Facets annotation. Your code should look like this:
   

   <Annotations Target="SAP.SEPMRA_C_PD_ReviewPostType">
   
       <Annotation Term="UI.Facets">
   
           <Collection>
   
               <Record Type="UI.ReferenceFacet">
   
                   <PropertyValue Property="Target" AnnotationPath="@UI.HeaderInfo" />
   
               </Record>
   
               <Record Type="UI.ReferenceFacet">
   
                   <Annotation Term="UI.IsSummary" Bool="true" />
   
                   <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup" />
   
               </Record>
   
           </Collection>
   
       </Annotation>
   
       <Annotation Term="UI.FieldGroup">
   
           <Record Type="UI.FieldGroupType">
   
               <PropertyValue Property="Data">
   
                   <Collection>
   
                       <Record Type="UI.DataField">
   
                           <PropertyValue Property="Value" Path="ReviewDateTime" />
   
                           <PropertyValue Property="Label" String="Review DateTime" />
   
                       </Record>
   
                       <Record Type="UI.DataField">
   
                           <PropertyValue Property="Value" Path="Product" />
   
                           <PropertyValue Property="Label" String="Rated Product" />
   
                       </Record>
   
                   </Collection>
   
               </PropertyValue>
   
           </Record>
   
       </Annotation>
   
   </Annotations>
   
   ​

   
   

So your Fiori OVP should now display Product Reviews like that:

 

Adding a scatter chart

As the last example, let's add another, a little bit more complex, analytical card. Let's say, we want to see, which products got bad reviews, but only a small number of review posts. We can use a scatter chart for that purpose:

1. First go to Guided Development and choose "Add an analytical card to an overview page". Provide the following data:Hit the Apply button


2. When in doubt how to configure the chart, you can have a look into the documentation. By reading the documentation, we learn that we need Measures (Axis1, Axis2) and one Dimension (Series). So let's use the code completion again to add the measures and dimension as written in the documentation:


3. Your code should now look like this:
   

   <Annotations Target="SAP.SEPMRA_C_PD_ReviewType">
   
       <Annotation Term="UI.Chart">
   
           <Record Type="UI.ChartDefinitionType">
   
               <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Scatter" />
   
               <PropertyValue Property="Measures">
   
                   <Collection>
   
                       <PropertyPath>AverageRatingValue</PropertyPath>
   
                       <PropertyPath>NumberOfReviewPosts</PropertyPath>
   
                   </Collection>
   
               </PropertyValue>
   
               <PropertyValue Property="MeasureAttributes">
   
                   <Collection>
   
                       <Record Type="UI.ChartMeasureAttributeType">
   
                           <PropertyValue Property="Measure" PropertyPath="AverageRatingValue" />
   
                           <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
   
                       </Record>
   
                       <Record Type="UI.ChartMeasureAttributeType">
   
                           <PropertyValue Property="Measure" PropertyPath="NumberOfReviewPosts" />
   
                           <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis2" />
   
                       </Record>
   
                   </Collection>
   
               </PropertyValue>
   
               <PropertyValue Property="Dimensions">
   
                   <Collection>
   
                       <PropertyPath>Product</PropertyPath>
   
                   </Collection>
   
               </PropertyValue>
   
               <PropertyValue Property="DimensionAttributes">
   
                   <Collection>
   
                       <Record Type="UI.ChartDimensionAttributeType">
   
                           <PropertyValue Property="Dimension" PropertyPath="Product" />
   
                           <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series" />
   
                       </Record>
   
                   </Collection>
   
               </PropertyValue>
   
           </Record>
   
       </Annotation>
   
   </Annotations>
   
   ​

   
   

 

Your Fiori OVP should now look like this:

We could create more cards (e.g. list cards), but after that tutorial you should be enabled to add more cards by yourself 🙂

 

Conclusion

With this blog post I tried to provide some explanation on how to create an Fiori OVP with the new Fiori Tools. Key take aways (from my point of view) is:

• Guided Development is a very good starting point, for creating a new card


• Code completion is very powerful when it comes to defining your annotations (CTRL+SPACE is your friend)

 

I hope this blog post helps you to start the development with the new Fiori Tools.

Thanks,

Lukas Böhm