Adaptation Projects or say it application variant, is a feature to extend SAP delivered/Standard fiori elements app.

In this blog post, I will show step by step:

1. How to re-define the OData service
2. Create adaptation project in web IDE with new facet
3. Deployment process
4. Translation for the variant, tile and entity in another language
5. And last configuring the tile for the FLP

Completing the above steps will deploy an app variant for the standard fiori elements-based application which will refer to the source/original delivered application and will keep your changes completely separate and if you want you can run both applications (original and extension), configure both applications as different tiles on FLP.

Pre-requisite: Access to an ABAP on premise and Web IDE

The app which I will extend is the Display Quality Info Record for Procurement

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps(‘F2256’)/S19OP

This is how it will look like with a new facet and a smart table on the object page (the smart table gets the data from a custom entity Manufacturer(I have not displayed all the properties below).

Lets Start:

Step 1: Extend/Redefine the standard OData Service

Create a new SEGW project -> Right click Data Model folder and select Redefine OData Service

Select the technical service/version -> Select all OData artifacts

Generate Runtime objects (Select the checkbox Overwrite Base/Extended Service)

Create a new entity -> import properties -> define the keys

Create an association from entity C_QLTYINPROCUREMENTOBJPAGETYPE to MANUFACTURER

Translate the properties (I have done it in French)

Option1: Using SEGW

Option2: Using MPC_EXT class -> Redefine Define method to Overwrite SAP Label property

    TRY .
        super->define( ).

        " Code to add/overwrite SAP LABEL Annotation
        TRY.
            DATA: lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ,
                  lo_property    TYPE REF TO /iwbep/if_mgw_odata_property.

            lo_entity_type = model->get_entity_type( iv_entity_name = 'Manufacturer').
            lo_property = lo_entity_type->get_property( iv_property_name = 'Material').
            
            lo_property->set_label_from_text_element(
            EXPORTING
            iv_text_element_symbol    = TEXT-001     " Text element number
            io_object_ref             = me
            ).
          CATCH /iwbep/cx_mgw_med_exception. " Meta data exception
        ENDTRY.

      CATCH /iwbep/cx_mgw_med_exception.    " Meta data exception
    ENDTRY.

Generate runtime objects again and register your service

Define your logic in DPC_EXT class method: /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITYSET to handle GET_ENTITYSET call for your entity set

method /iwbep/if_mgw_appl_srv_runtime~get_entityset.

  DATA(lv_entityset_name) = io_tech_request_context->get_entity_set_name( ).   

    CASE lv_entityset_name.

      WHEN 'ManufacturerSet'. “ <your entity> 

        TRY.
            DATA(ls_material) = it_key_tab[ name = 'Material' ].
          CATCH cx_sy_itab_line_not_found.
        ENDTRY.

        TRY.
            DATA(ls_procmtid) = it_key_tab[ name = 'QltyInProcmtIntID' ].
          CATCH cx_sy_itab_line_not_found.
        ENDTRY.

        "your code to retrieve your data ....

            copy_data_to_ref(
              EXPORTING
                is_data = gt_manufacturer
              CHANGING
                cr_data = er_entityset
            ).  

 when others.         

        super->/iwbep/if_mgw_appl_srv_runtime~get_entityset(
          EXPORTING
            iv_entity_name           = iv_entity_name
            iv_entity_set_name       = iv_entity_set_name
            iv_source_name           = iv_source_name
            it_filter_select_options = it_filter_select_options
            it_order                 = it_order
            is_paging                = is_paging
            it_navigation_path       = it_navigation_path
            it_key_tab               = it_key_tab
            iv_filter_string         = iv_filter_string
            iv_search_string         = iv_search_string
            io_tech_request_context  = io_tech_request_context
          IMPORTING
            er_entityset             = er_entityset
            es_response_context      = es_response_context ).

        IF er_entityset IS INITIAL.
          RETURN.
        ENDIF.

        mo_flx_runtime_api->enrich_entityset(
          EXPORTING
            io_tech_request_context = io_tech_request_context
            ir_entityset            = er_entityset ).
endcase.

endmethod.

Run the service and check the metadata for Entity and navigation:

Step 2: Create Adaptation Project with fragment (Sections) in Web IDE

Select Workspace (Right Click) -> New-> Adaptation Project -> Give Project name & namespace

Find the ‘SAP UI5 Component: i2d.qm.qltyinproc.objectpages1’ from app library and finish

NOTE: there is no manifest.json file in Adaptation Project (Open MANIFEST.APPDESCR_VARIANT file to find id, namespace and original application reference)

To create a fragment: open the project in SAP UI5 Visual Editor

(If the UI5 visual editor fails to load the application, change the version of Visual Editor to any lower version say 1.78 and open again)

Be in PREVIEW mode and NAVIGATE to the object page first, then click on EDIT button and disable safe mode

To add a fragment: Scroll at the bottom of the page, right Click -> Select Sections and create new fragment

Use below code as reference for Manufacturer.fragment.xml file (Note: change/remove the entity property names as per your need)

<!-- Use stable and unique id's!-->
<core:FragmentDefinition
	xmlns:core='sap.ui.core'
	xmlns:uxap='sap.uxap'
	xmlns='sap.m'
	xmlns:table="sap.ui.table"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:u="sap.ui.unified"
	xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
	xmlns:smartTable="sap.ui.comp.smarttable"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
	controllerName="customer.qmmanufacturervar.Manufacturer" height="100%">
	<uxap:ObjectPageSection id="idOPS_Manuf">
	<uxap:subSections>
		<uxap:ObjectPageSubSection id="idOPSS_Manuf" title="{i18n>fragmentname}">
			<uxap:blocks>
				<VBox id="idVboxMain" fitContainer="true">
					<Text id="idTextSection"></Text>
						<smartTable:SmartTable id="IdManufacturerSmartTable" entitySet="ManufacturerSet" tableType="Table" 
useVariantManagement="true" useTablePersonalisation="true" 
header="Records" showRowCount="true"	
enableAutoBinding="true" class="sapUiResponsiveContentPadding" 
showFullScreenButton="true" placeToolbarInTable="true"
tableBindingPath="To_Manufacturer" initiallyVisibleFields="Plant,Material" 
requestAtLeastFields="Plant" initialNoDataText="Loading..." 
ignoredFields="Qltyinprocmtintid" persistencyKey="Material">
		<smartTable:layoutData id="idSmartTableLayout">
				<FlexItemData growFactor="1" baseSize="0%" id="idFid1"/>
							</smartTable:layoutData>
						</smartTable:SmartTable>
					</VBox>
				</uxap:blocks>
			</uxap:ObjectPageSubSection>
		</uxap:subSections>
	</uxap:ObjectPageSection>
</core:FragmentDefinition>

Note: Each element/control in below XML code has a respective property: id

Now translate the variant in French (If required)

Create i18n_fr.properties file for translated text inside folder i18->object page and copy the texts from English file and paste them in the i18n_fr. properties file with the translated texts (as shown below)

Step 3: Deployment & Tile configuration

BUILD and DEPLOY the project

Go to transaction SUI_SUPPORT in GUI -> Select option List Repository Files-> and search with the namespace you provided when creating the web IDE project

(Note: this is not deployed as a BSP application)

Step 4: Configuring the tile and translating the tile (if required)

I have assigned this tile to a new catalog (ZDEEPESH) for test purpose.

Settings for Tile Navigation

(Parameter: sap-ui-tech-hint=UI5)

Setting for Target Mapping

Note:

1. Add the url of the standard service
2. Add ID from the manifest file
3. Add parameter because the standard app has a parameter value

Translate the tile:

Open transaction /N/UI2/FLPD_CONF and copy the last part of the tile catalog, where u have created the tile

Run Transaction /N/UI2/FLC -> deselect the checkbox Analyze roles and paste the Catalog name and execute

Select your tile with green Status and click Icon Display -> On the details popup copy the Property Main WD config Key

Go to SE63 -> On MENU bar select (Translation -> ABAP objects -> Transport Objects)

1. Fill in R3TR, WDCC and paste the id as below
2. Select Source and target language and click edit

Congratulations, now you’re ready to run your application in EN and FR login.

Conclusion:

I hope this tutorial will help you to understand the basic steps involved in creating an adaptation project, redefining OData service, the purpose of i18n file and other options for translation and configuring the adaption variant for launchpad.

sapui5 SDK is the place to explore ready to use code samples

To know more about Adaptation project, check below links

Extending an SAP Fiori Application

Adaptation Projects: A Tutorial by Jessica Merz