Work with SAPUI5 Adaptation Projects to generate and make simple changes to an application variant of an SAP Fiori application in SAP S/4HANA Cloud Public Edition (1 of 3)

1. Log onto SAP Business Application Studio (BAS) and access your SAP Fiori development space.

2. Choose New Project from Template (which can be selected from either the File menu, or which is available directly on the Get Started screen), select the SAPUI5 Adaptation Project template, and choose the Start button.

   

3. On the System and Application Selection screen, select from the System dropdown list the SAP S/4HANA Cloud system you want to use.

   • Ensure that Project Type: cloudReady is shown. (Select for this tutorial another system / a cloud system if Project Type: onPremise should be shown.)

4. From the dropdown list in the Application field, choose the SAP Fiori application that you wish to use as the basis for your application variant. Choose F4596 Manage Credit Accounts.

5. Press the Next button.

6. On the Project Attributes screen, enter the basic information required for your adaptation project:

   • Project Name: uniquely identifiable name creditaccounts.appvar.<your initials>, e.g. creditaccounts.appvar.cl1.
   • Application Title: uniquely identifiable name <Manage Credit Accounts Simplified><your initials>.
   • Add Deployment Configuration: Yes
   • Add SAP Fiori Launchpad Configuration: Yes

7. Press the Next button.

8. Configure the Deployment Configuration settings.

   • Enter a unique SAPUI5 ABAP Repository name, for example, ZMCA<your initials>, e.g. ZMCACL1
   • Enter an optional deployment description.
   • Choose Enter Manually for the field Select How You Want to Enter the Package.
   • Enter the name of the package in the Package field (created under prerequisites Create ABAP Package).
   • Choose Enter Manually for the field Select How You Want to Enter the Transport Request.
   • Enter the name of your transport request in the Transport Request field (created under prerequisites Create a transport request).

9. Press the Next button.

10. Configure the SAP Fiori Launchpad Configuration – Tile Settings settings.

    • Choose Add a New Tile for the field Choose a Tile Handling Action.
    • Choose Yes for the field Copy Configuration from an Existing Inbound.

11. Press the Next button.

12. Configure the SAP Fiori Launchpad Configuration settings.

    • In the Inbound ID field, select the inbound ID from the dropdown list BusinessPartner-manageCreditAccounts.
    • In the Semantic Object field, enter the name of the semantic object of the original application BusinessPartner.
    • In the Action field, enter a unique new action manageCreditAccountsAppVariant1.
    • In the Title field, enter the title of your application variant of Manage Credit Accounts that is to be displayed on the new tile <Manage Credit Accounts Simplified>
    • In the Subtitle field (optional), you can enter the subtitle to be displayed on the new tile Simplified.

13. To create your new SAPUI5 Adaptation Project, press the Finish button.

14. As soon as your SAPUI5 Adaptation Project has been created, the Application Information page is displayed. You can view the adaptation project in your Projects folder and expand the nodes in your workspace.

Context Infos for Next Steps: Define changes to your newly created application variant

To make the changes requested for the specific group of Credit Controllers, you need to extend the source code of your application variant in SAP Business Application Studio.

In your workspace, navigate to the newly created SAPUI5 Adaptation Project under projects, right-click on the manifest.appdescr_variant file in your adaptation project and choose Open Adaptation Editor.

The List Report Quick Actions are available for common changes in an adaptation project, while more sophisticated changes might require control property changes. For the sake of completeness, we show in the Control Property Change tab how the Clear button could alternatively be enabled via a control property change.

The List Report Quick Actions are available for common changes in an adaptation project, while more sophisticated changes might require manifest changes. For the sake of completeness, we show in the Manifest Change tab how the variant management could alternatively be enabled via a manifest change.

1. In UI Adaptation mode, select the Table and choose Configuration from the context menu.

   

2. In the Configure Table popup, select for Table Type the value Grid Table and select the checkbox for Condensed Table Layout. Choose Apply.

   

3. Press Save.

For more information, see Extending Delivered Apps Manifest Using an Adaptation Project

1. Right-click the webapp folder and choose Open Adaptation Editor from the context menu to display the List Report in UI Adaptation mode. Switch to the Navigation mode and press the Go button to display Business Partner data in the table.

2. Select a Business Partner in the table by pressing the chevron icon at the end of the row. By selecting a Business Partner, you can navigate from the List Report to the Object Page.

3. On the Object Page, switch to UI Adaptation mode. Select the header facet you want to remove, for example Scoring Trend.

4. To remove a header facet from the Object Page, select the entire facet (not just its title), open the context menu and select Remove.

   

5. To remove further header facets from the Object Page, repeat this action for the following facets: Credit Limit Trend, Aging Grid, Payment Trend. The facets are removed immediately.

6. Press Save

Working with the open Adaptation Editor in which you deleted the facets not required, you can now remove the tabulated sections by:

1. In UI Adaptation mode, select the entire tab you want to remove from your application variant (for example External Ratings). Afterwards open the context menu and select Remove.

   

2. Remove the following additional sections:

   • Financial Statement Data
   • Collateral
   • Negative Credit Events
   • Check Exceptions
   • Score Evaluation Log
   • Notes
   • Attachments
   • Change Documents

3. Change to Navigation mode and verify the changes you’ve made. The sections displayed are now limited to Scoring, Credit Segments, Documents with Credit Block, Credit Limit Requests, and Credit Insurances.

4. Press Save.

For more information, see - Adapt the UI

To track all the changes you’ve made, see the changes folder in the project folder structure.

After you’ve finished making the requested changes to your application variant, you can preview the changes made. To do this, expand the webapp folder in your SAP Business Application workspace and right-click on the manifest.appdescr_variant file. In the context menu, choose Preview Application.

Preview the Adaptation Project

The List Report of our newly created application variant:

• Provides a Clear button in the filter bar
• Enables use of variant management in the table
• Uses Grid Table with condensed table layout


The Object Page of our newly created application variant:

• No longer displays unnecessary facets in the header
• No longer displays the superfluous sections


In this developer tutorial, you have learned what SAPUI5 adaptation projects are and how to work with them.

You have:

1. Created an SAPUI5 Adaptation Project in SAP Business Application Studio to generate a variant of an SAP Fiori application.
2. Used the Adaptation Editor to define simple and effective changes to your application variant.
3. Added simple source code to the Manifest file to change the table properties.

Test your knowledge

After completing this tutorial, you can continue the end-to-end process with:

• Tutorial 2: Work with SAPUI5 Adaptation Projects to extend the source code of an application variant to be deployed to SAP S/4HANA Cloud Public Edition

• Tutorial 3: Make Your Application Variant (created in an SAPUI5 Adaptation Project) Available to Business Users in SAP S/4HANA Cloud Public Edition