Configure a List Report Page Using SAP Fiori Tools
- How to use Guided Development in SAP Fiori tools to add functionality
- How to use the Service Modeler to visualize OData services and the associated annotations in your apps
- How to use XML Annotation Language Server to define annotations in the code editor
Prerequisites
- You should have a preview of your app running with either real or mock data from previous tutorial Set Up and Generate a new SAP Fiori App Project.
- Step 1
When developing an application, you may know that end users require certain functionality but not be sure how to implement it. The Guided Development extension provides access to how-to guides and tutorials that can help you add a feature to your SAP Fiori elements application.
You can read through the steps required to implement a feature and then either apply the generated code to make the changes to the project or copy the code snippet to your clipboard and make the changes yourself. To begin this tutorial, you will implement multiple selection for the table so that your end users can select multiple rows in the list at once. You will then enable the auto load setting for users so that they do not have to press
Go
to view the items in the list report. This saves them a step and streamlines the experience for newer users who may not be as familiar with how to interact with a list report.To begin, open the Command Palette using CMD/CTRL + Shift + P and type:
Guided Development
. Select Fiori: Open Guided Development.If this is your first project, you should now see Guided Development with a list of guides grouped together by the page type. If you have other projects available in Visual Studio Code, select your tutorial project to access Guided Development.
Using the search box at the top right of the screen, type
multi
to filter the guide list. Under the List Report Page section, click the guide title Configure multiple selection in tables to open the guide.To understand what the feature does, you can read the description. To implement this functionality, you are going to use the code snippet generated by Guided Development. Press Start Guide to begin using the guide.
The Start Guide button is only enabled in in Wizard Mode. If Wizard Mode is disabled (via the Settings button), you can simply scroll down to see the rest of the guide content.
To generate the code snippet, select
ListReport_SEPMRA_C_PD_Product
for the Page parameter and set the Toggle Multi Select parameter toTrue
. Click Insert Snippet.Guided Development will go to the respective page configuration file and apply the changes.
The
ListReport_SEPMRA_C_PD_product.json
will open to the side, with the new code inserted and highlighted. The changes are saved automatically. You can close this tab to free up screen space.The app preview will refresh and display the multi-select boxes.
To enable auto load functionality for the table, return to the search box in the Guided Development toolbar. If you have the Configure multiple selection in tables guide still open, it will be to the left of the open guide, above the list of guides. If you have closed it, it will be in its original position. Click the Clear button in the search bar (
X
) to clear the previous search and then enterauto
. Open the Enable table to auto load data guide under the List Report Page section. Just like the previous step with the Configure multiple selection in tables guide, press Start Guide to navigate past the description and view the code snippet, if required.The Start Guide button is only enabled in in Wizard Mode. If Wizard Mode is disabled (via the Settings button), you can simply scroll down to see the rest of the guide content.
As with the last guide, you may read the guide and step descriptions to get a better understanding of what the Enable table to auto load data guide does. When you are ready to apply the setting, select
always
under the Mode dropdown. This will ensure that the table will automatically load the data, even when filters aren’t set. Click Insert Snippet to make the change to your project. If you closed the tab with the page configuration file previously, it will reopen with the new snippet highlighted and the changes saved. Your app preview will also refresh and should look something like this without having to pressGo
:
At this point, you are done with Guided Development. You can close the
ListReport_SEPMRA_C_PD_product.json
tab, as well as the Guided Development tab:Guided Development - myfioriapp
. - Step 2
This app features a target entity type that has already been pre-configured with the
UI.SelectionFields
annotation term. This is what provides the filters above the list in your app preview. This next step involves adding a new filter for Supplier, using the Service Modeler in SAP Fiori tools to copy the already existing backend annotation term and add a new field.The Service Modeler is a graphical tool that provides a visualization of an OData service, including its backend and local annotations. The Service Modeler helps you easily find entities or projections and their associated annotations.
- To access the Service Modeler, launch the Visual Studio Code Command Palette by pressing
CMD/Ctrl + Shift + P
and then typingService Modeler
. Select Fiori: Open Service Modeler.
If you have more than one project in your workspace, you will have to select the project you have created for this tutorial.
The Service Modeler will open in a list view mode, listing all the projections (e.g., entity types) present in the underlying OData service. Some entries feature an
@
icon, which signifies that there are annotations attached to those targets.For the projection
SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType
, click on the@
icon to view all the annotations forSEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType
.This opens Annotation List View, where you can see that for
target SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType
, all the annotation terms come from sources such as the local annotation fileannotation.xml
, the backend annotation fileSEPMRA_PROD_MAN_ANNO_MDL.xml
, andmetadata.xml
. Since the requirement is to add a new filter, you have to modifyUI.SelectionFields
.Copy
UI.SelectionFields
from the backendSEPMRA_PROD_MAN_ANNO_MDL.xml
source to the localannotation.xml
source by clicking the Copy icon next toUI.SelectionFields
underSEPMRA_PROD_MAN_ANNO_MDL.xml
.UI.SelectionFields
underSEPMRA_PROD_MAN_ANNO_MDL.xml
has now been formatted with a strike through, giving you a visual indication thatUI.SelectionsFields
at runtime will be picked up from the local annotation file.The local
annotation.xml
file will open in another tab, with the exact code to be changed highlighted.Close the Service Modeler tab.
- To access the Service Modeler, launch the Visual Studio Code Command Palette by pressing
- Step 3
With
UI.SelectionFields
in the local annotation file, you now need to edit it so that new filter of Supplier shows up in your SAP Fiori elements application. To do so, you will use the XML Annotation Language Server, which provides features that assist with defining annotations in the code editor.The features used in this tutorial include:
- Code Completion, which provides a list of suggestions based on the project metadata and OData vocabularies;
- Micro-Snippets, which are generic snippets that add bigger blocks of code patterns, such as Annotations and Annotation and Record.
These features help you to quickly and consistently generate code for your projects.
To start, ensure that local annotation file
annotation.xml
is open. If its closed, navigate tomyfioriapp(or your project name)->webapp->annotations->annotation.xml
in the project explorer.For the
SAP.SEPMRA_C_PD_ProductType
annotation termUI.SelectionFields
, place your cursor after the line below and press Enter.In your new line, trigger the code completion by pressing CMD/Ctrl + Space, which displays a list of suggested values.
Select
<PropertyPath>
and accept it by pressing Enter or clicking with your mouse. Your cursor will be between the tags<PropertyPath>
and</PropertyPath>
.Press CMD/Ctrl + Space again to see the next list of options (the properties of target
SEPMRA_C_PD_ProductType
). Your desired value isSupplier
.Use the up/down arrows on your keyboard or your mouse to navigate to it in the list and then press Enter or select it with your mouse.
Save your
annotation.xml
file and then check your running application. The new Supplier filter should now be in your app.
At this point, you should have a List Report Object Page with multi-select functionality, as well as the ability to filter by supplier.
Good job! In the next tutorial, you will configure the object pages that users can access from this list.
Which command would you enter into the Visual Studio Code command palette to give yourself access to step-by-step instructions for adding new functionality to your app?