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, select the Adaptation Project template, and choose the Start button.
   
   
3. Select ABAP as the target environment in which you want to create your new application variant and choose Next.
4. 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>.
   • Press the Next button.
5. On the Adaptation Project – Configuration screen, select from the Select 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.)
6. From the dropdown list in the Select Application field, choose the SAP Fiori application that you wish to use as the basis for your application variant. Choose F4596 Manage Credit Accounts.
7. Press the Next button.
8. Configure the Fiori Launchpad Configuration settings. In the Inbound ID field, select the inbound ID from the dropdown list BusinessPartner-manageCreditAccounts.
9. 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>
10. In the Subtitle field (optional), you can enter the subtitle to be displayed on the new tile. Simplified.
11. 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.
    • Enter the name of the package in the Package field (created under prerequisites Create ABAP Package).
    • Enter the name of your transport request in the Transport Request field (created under prerequisites Create a transport request).

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

13. As soon as your SAPUI5 Adaptation Project has been created, the following message is displayed “The project has been generated and will be saved for future use.” 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.

1. In UI Adaptation mode, select the SmartFilterBar area (displayed below the header area of the screen).
2. In the SmartFilterBar pane displayed on the right of the screen, scroll down to the Show Clear On FB field and change the setting from false to true.
3. Press Save.
4. In your project workspace, the propertyChange you have just made is listed in the webapp folder under changes.
5. Switch to Navigation mode to check that the Clear button has been added to the filter bar.
6. Close the adaptation editor tab.

The variant management and table type changes must be made in the manifest.appdescr_variant file:

1. In your workspace under webapp, open the manifest.appdescr_variant file.
2. Insert the following code at the end of the content array:

   	{ 
   		"changeType": "appdescr_ui_generic_app_changePageConfiguration", 
   		"content": { 
   			"parentPage": { 
   				"component": "sap.suite.ui.generic.template.ListReport", 
   				"entitySet": "CrdtMBusinessPartner" 
   			}, 
   			"entityPropertyChange": { 
   				"propertyPath": "component/settings", 
   				"operation": "UPSERT", 
   				"propertyValue": { 
   					"smartVariantManagement": false 
   				} 
   			}             
   		} 
   	} 
   

   

3. Right-click the webapp folder and choose Open Adaptation Editor. Switch to Navigation mode to see the changes made to the table to enable variant management.

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

1. In your workspace under webapp, open the manifest.appdescr_variant file.
2. Insert the following code at the end of the content array:

   {
     "changeType": "appdescr_ui_generic_app_changePageConfiguration",
     "content": {
       "parentPage": {
         "component": "sap.suite.ui.generic.template.ListReport",
         "entitySet": "CrdtMBusinessPartner"
       },
       "entityPropertyChange": {
         "propertyPath": "component/settings/tableSettings",
         "operation": "UPSERT",
         "propertyValue": {
           "type": "GridTable"
         }
       }
     }
   },
   {
     "changeType": "appdescr_ui_generic_app_changePageConfiguration",
     "content": {
       "parentPage": {
         "component": "sap.suite.ui.generic.template.ListReport",
         "entitySet": "CrdtMBusinessPartner"
       },
       "entityPropertyChange": {
         "propertyPath": "component/settings",
         "operation": "UPSERT",
         "propertyValue": {
           "condensedTableLayout": true
         }
       }
     }
   }
   

   

3. Close the editor tab in which you’ve made changes in the file manifest.appdescr_variant.

4. Right-click the webapp folder and choose Open Adaptation Editor to open the List Report. Switch to Navigation mode.
5. On the List Report page, press Go to populate the table with data to preview the new grid table in condensed table layout

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) and in the visual context menu that’s displayed, press the Remove button (minus (-)). Select the Scoring Trend facet and select Remove from the visual context menu.

   

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, and the changes are logged in your workspace in the webapp folder under changes.

6. Change to Navigation mode and verify the changes you’ve made.

7. 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, selecting the entire tab, for example, External Ratings, you want to remove from your application variant and select Remove from the visual context menu.

   

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