Adaptation Project: New Facet with Smart table (OData Redefinition & Translation)

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

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

1. How to re-define the OData service
2. Create an adaptation project in web IDE with a 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 help you 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.

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

Pre-requisite: Access to an ABAP on premise, Web IDE and data to run your app (you should be able to open the object page in UI5 Editor for EDIT)

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, this is your choice, however your entity should have Material and Procurement ID as key field in your entity).

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
NOTE: Get the Standard technical service name from fiori app library

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

Create a new entity with at least properties Material & Qltyinprocmtintid -> Set them as keys (Material & Qltyinprocmtintid )

Create an association from C_Qltyinprocurementobjectpagetype to the new entity

Translate the properties in other language text (Below) – if you need to

Option1: Using SEGW editor

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

(Use option 2 in case if you have any issues in your metadata with property SAP Label)

    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 = '<your entity>').
            lo_property = lo_entity_type->get_property( iv_property_name = '<entity's property name>').
            
            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 in /IWFND/MAINT_SERVICE and check metadata for your new entity and association

Now 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 <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.

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 NewSection.fragment.xml file (Note: change/remove the entity property names as per your need)

<!-- Use stable and unique id's!-->
<core:FragmentDefinition 
controllerName="customer.adpvar.qm_qltyinprocs1" height="100%" 
xmlns:core="sap.ui.core" xmlns="sap.m" 
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" 
xmlns:smartTable="sap.ui.comp.smarttable" 
xmlns:table="sap.ui.table" 
xmlns:u="sap.ui.unified" 
xmlns:uxap="sap.uxap">
<uxap:ObjectPageSection id="idOPSNewSection">
<uxap:subSections>
<uxap:ObjectPageSubSection id="idOPSSNewSection" title="NewSection">
<uxap:blocks>
<VBox id="idVboxMain" fitContainer="true">
<Text id="idTextSection" text="{i18n>fragmentname}"/>
<smartTable:SmartTable id="IdNewSectionSmartTable" 
entitySet="NewSectionSet" tableType="Table" 
useVariantManagement="true" useTablePersonalisation="true" 
header="Records" showRowCount="true" enableAutoBinding="true" 
class="sapUiResponsiveContentPadding" showFullScreenButton="true" 
placeToolbarInTable="true" tableBindingPath="To_NewSection" 
initiallyVisibleFields="Plant,Vendor,Material" 
requestAtLeastFields="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>

Few important properties to be aware of in above UI code:

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

Now lets translate the variant in other language ( for example : 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 here 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 (catalog name : 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, click edit and fill your texts

Congratulations, now you’re ready to run your application in both logins.

Conclusion:

I hope this tutorial will help you to understand the 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