Fiori in S/4HANA – 2 – Fiori Elements – Configure a List Report Page using SAP BAS

1 month ago 13

This nonfiction provides a step-by-step usher connected however to configure a List Report Page utilizing Fiori Elements successful SAP Business Application Studio (BAS). Fiori Elements is simply a almighty model that simplifies the instauration of SAP Fiori applications by offering ready-to-use templates, minimizing the request for manual coding. The List Report Page, successful particular, is perfect for presenting and interacting with ample datasets. Before going to start, you indispensable person created a improvement abstraction successful the SAP Business Application Studio (BAS).

Go to the dev abstraction to make the project.

Before we proceed with our tutorial, we would similar to springiness you an accidental to articulation our ZAPYard’s learning community where we person much than 35 groups and much than 1600 existent SAP Consultants interacting with each different daily. Only SAP topics and not BS. Else, they volition beryllium banned from the assemblage without warning. 👇👇👇👇

If you privation to beryllium portion of ZAPYard’s Discussion Community, delight consciousness escaped to cheque the beneath Link. We Ask, Answer, Help and Learn Together. There are much than 35 groups from antithetic topics like Generative AI, SAP Joule, CAPM, BTP, RAP, BPT, Fiori, iRPA, CAI, CPI, PI/PO, ABAP connected HANA, SAPUI5, SAP Build, SAP Adobe Forms, ChatBots, SAC etc. Join immoderate radical of your involvement and interact with our Community.

Join ZAPYard’s WhatsApp Community – Ask, Answer, Propose & Defend SAP Topics

Now, lets determination connected to the adjacent topic.

Step 1: Create a caller Project from the Template

Go to the View > Command Palette.

Search for Fiori Open Application Generator

From the Template selection,

Template Type: SAP Fiori

Choose SAP List Report Page

Click Next

Step 2: Configure work for List Report Object Page

Now it’s clip to link a information source. From the information source,

Select Connect to an OData Service from the dropdown menu.

A tract to participate the OData work URL volition appear. Copy and paste the work URL:

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN

You whitethorn beryllium prompted to participate credentials to entree the service.

Enter your username and password, and click the icon to validate.

Then click connected Next.

Note: If you don’t person credentials, delight travel the beneath step.

You indispensable person entree to the Gateway Demo System. This tutorial shows you however to entree it: Create an Account connected the Gateway Demo System

https://developers.sap.com/tutorials/gateway-demo-signup.html

Now you person to prime the Entity of the Data Service

Select the Main Entity as SEPMRA_C_PD_Product

Navigation Entity to None.

Click Next.

Before we spell to the adjacent step. If you are a woman, we invitation you to articulation the pistillate exclusive backstage assemblage – Women In IT Community. 👈👈Please JOIN.👇👇

Step 3: Configure the main task attributes

With the leafage benignant and information root defined, the adjacent measurement is to configure the main task attributes:

Select No for the 3 vigor fastener settings: Add deployment configuration, Add FLP configuration and Configure precocious options. Click Finish.

At this point, your exertion folder volition beryllium generated based connected the input from above.

Once your task has been generated, you volition person the enactment to adhd it to your existing workspace. Verify that your task has been created and looks akin to this:

Step 4: Preview the app with existent backend data

Since the fixed OData work came with pre-configured backend annotations, you tin preview your app close away.

Right-click connected the webapp folder and select Preview Application.

You whitethorn request to participate the credentials you created if you had to petition entree to the OData service.

Step 5: Enable aggregate selections successful the table

When processing an application, you whitethorn cognize that extremity users necessitate definite functionality but not beryllium definite however to instrumentality it. The Guided Development extension provides entree to how-to guides and tutorials that tin assistance you adhd a diagnostic to your SAP Fiori Elements application.

You tin work done the steps required to instrumentality a diagnostic and past either use the generated codification to marque the changes to the task oregon transcript the codification snippet to your clipboard and marque the changes yourself. To statesman this tutorial, you volition instrumentality aggregate selections for the array truthful that your extremity users tin prime aggregate rows successful the database astatine once.

To begin, unfastened the Command Palette using CMD/CTRL + Shift + P and type: Guided Development. Select Fiori: Open Guided Development.

If this is your archetypal project, you should present see Guided Development with a database of guides grouped unneurotic by leafage type. If you person different projects disposable successful Visual Studio Code, prime your tutorial task to entree Guided Development.

Using the hunt container astatine the apical close of the screen, type multi and expand List Report Page | Enable aggregate enactment successful tables, and past click the usher rubric to grow the guide.

To recognize what the diagnostic does, you tin work the description. To instrumentality this functionality, you are going to usage the codification snippet generated by Guided Development. Press Start to statesman utilizing the guide.

The Start button is lone enabled successful Wizard Mode. If Wizard Mode is disabled (via the Settings button), you tin simply scroll down to spot the remainder of the usher content.

To make the codification snippet, guarantee that ListReport_SEPMRA_C_PD_Product is selected and click Insert Snippet.

Guided Development volition spell to the respective leafage configuration record and use the changes.

The ListReport_SEPMRA_C_PD_product.json will unfastened to the side, with the caller codification inserted and highlighted. Save the record and adjacent some tabs.

Step 6: Copy the backend annotation visually to the section annotation file

This app features a people entity benignant that has already been pre-configured with the UI.SelectionFields annotation term. This is what provides the filters supra the database successful your app preview. This adjacent measurement involves adding a caller filter for Supplier, utilizing the Service Modeler in SAP Fiori tools to transcript the already existing backend annotation word and adhd a caller field.

The Service Modeler is simply a graphical instrumentality that provides a visualization of an OData service, including its backend and section annotations. The Service Modeler helps you easy find entities oregon projections and their associated annotations.

To entree the Service Modeler, motorboat the Visual Studio Code Command Palette by pressing CMD/Ctrl + Shift + P and past typing Service Modeler. Select Fiori: Open Service Modeler.

If you person much than 1 task successful your workspace, you volition person to prime the task you person created for this tutorial.

The Service Modeler will unfastened successful a database presumption mode, listing each the projections (e.g., entity types) contiguous successful the underlying OData service. Some entries diagnostic an @ icon, which signifies that determination are annotations attached to those targets.

For the projection SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType, click connected the @ icon to presumption each the annotations for SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType.

This opens Annotation List View, wherever you tin spot that for target SEPMRA_PROD_MAN.SEPMRA_C_PD_ProductType, each the annotation presumption travel from sources specified arsenic the section annotation file annotation.xml, the backend annotation file SEPMRA_PROD_MAN_ANNO_MDL.xml, and metadata.xml. Since the request is to adhd a caller filter, you person to modify UI.SelectionFields.

Copy UI.SelectionFields from the backend SEPMRA_PROD_MAN_ANNO_MDL.xml source to the local annotation.xml source by clicking the Copy icon adjacent to UI.SelectionFields under SEPMRA_PROD_MAN_ANNO_MDL.xml.

UI.SelectionFields under SEPMRA_PROD_MAN_ANNO_MDL.xml has present been formatted with a onslaught through, giving you a ocular denotation that UI.SelectionsFields at runtime volition beryllium picked up from the section annotation file.

The local annotation.xml file volition unfastened successful different tab, with the nonstop codification to beryllium changed highlighted.

Close the Service Modeler tab.

Step 7: Edit UI.SelectionFields successful codification editor

With UI.SelectionFields in the section annotation file, you present request to edit it truthful that caller filter of Supplier shows up successful your SAP Fiori elements application. To bash so, you volition usage the XML Annotation Language Server, which provides features that assistance with defining annotations successful the codification editor.

The features utilized successful this tutorial include:

Code Completion, which provides a database of suggestions based connected the task metadata and OData vocabularies;

Micro-Snippets, which are generic snippets that adhd bigger blocks of codification patterns, specified arsenic Annotations and Annotation and Records

These features assistance you to rapidly and consistently make codification for your projects.

To start, guarantee that section annotation file annotation.xml is open. If its closed, navigate to myfioriapp(or your task name)->webapp->annotations->annotation.xml in the task explorer.

For the SAP.SEPMRA_C_PD_ProductType annotation term UI.SelectionFields, spot your cursor aft the enactment beneath and press Enter.

In your caller line, trigger the codification completion by pressing CMD/Ctrl + Space, which displays a database of suggested values.

Select <PropertyPath> and judge it by pressing Enter or clicking with your mouse. Your cursor volition beryllium betwixt the tags <PropertyPath> and </PropertyPath>.

Press CMD/Ctrl + Space again to spot the adjacent database of options (the properties of target SEPMRA_C_PD_ProductType). Your desired worth is Supplier.

Use the up/down arrows connected your keyboard oregon your rodent to navigate to it successful the database and past press Enter or prime it with your mouse.

Save your annotation.xml file and past cheque your moving application. The new Supplier filter should present beryllium successful your app.

At this point, you should person a List Report Object Page with multi-select functionality, arsenic good arsenic the quality to filter by supplier.

I anticipation this station has provided immoderate bully insights. Thank you for speechmaking till the end. If you liked it delight consciousness escaped to stock your thoughts oregon experiences successful the comments below. Stay tuned for much related contented successful the future!