Bringing responsive UI5 Forms to SAP TRM

[morzech]

We are pleased to announce the introduction of UI5 Forms within the SAP TRM Framework's Tax Cockpit. This new feature offers seamless integration with our Tax solution and shares commonalities with the established Web Dynpro Forms, enhancing the user experience and streamlining form rendering processes.

To incorporate UI5 Forms into your Form Bundle Processing, the following steps must be completed:

1. Customizing:

   In the process of configuring a TRM Form, there are several essential steps that need to be addressed. For the purpose of this discussion, we will focus on a critical component: the ISR configuration. It is important to note that while no new settings have been introduced in this area, the significance of Data Types has been elevated, as they play a pivotal role in determining the user interface elements presented on the Form View.

   The rendering rules based on Data Types are as follows:

   • Domains containing fixed values that correspond to an ABAP Boolean will be displayed as a CheckBox using the UI5 element 'sap.m.CheckBox'
   • Domains with either fixed or table values will be represented as a ComboBox, utilizing the 'sap.m.ComboBox' element
     
     Associated texts will be included in the internationalization (i18n) file(s)
     
     
   • Date fields will be shown using the DatePicker element 'sap.m.DatePicker'
   • Monetary amounts will be entered through an Input field 'sap.m.Input' set to the Number type 'sap.m.InputType.Number'
   • General text fields will be presented as an Input field 'sap.m.Input' with the Text type 'sap.m.InputType.Text'

   However, these default settings can be customized in two ways:

   • Through the implementation of a Business Add-In (BAdI)
   • By manually adjusting the Form View in the XML layout

   Further details on customization will be provided in a subsequent section of this document.

   In the example scenario we are examining, the ISR configuration comprises 17 fields, which include a mix of individual fields and two embedded tables. These fields will be sequentially arranged and displayed on the UI5 View, ensuring a structured and user-friendly interface.

   
   
   
   
2. Copying the Template WD Component:

   The standard WD Component FMCA_WD_UI5_FORM_TEMPLATE is provided as a foundation for UI5 Form implementation. It should be copied to the Customer Space and activated accordingly.

3. Implementing BAdI for UI5 Form View Generation:

   This section provides guidance on an optional step that can be beneficial under certain circumstances:

   • When the ISR configuration lacks comprehensive detail in data types
   • When minor adjustments are necessary, such as setting format options, which can be applied to multiple fields simultaneously rather than individually editing each field in the XML view
   • When additional control is needed beyond what the standard code for User Interface Elements (UIEs) offers

   To implement a Business Add-In (BAdI), you can initiate the process through the specified SPRO activity.

   

   Alternatively, the BAdI can be created using Transaction SE18, named FMCA_UI5_FORM_GEN. The filter for this BAdI encompasses both the Scenario and Version of the ISR. The interface, IF_FMCA_UI5_FORM_GEN, includes the method GENERATE_ELEMENT, which is invoked for each ISR Characteristic during the generation of the UI5 Form View. This method is supplied with all necessary information to determine the UIE to be generated and its corresponding XML structure for the Form View.

   The default class, CL_FMCA_UI5_FORM_GEN, utilizes two standard methods:

   • DERIVE_FROM_TYPE: This method deduces the UIE based on the data type of the ISR Characteristic.
   • GENERATE_ELEMENT: This method fetches the corresponding XML template from the MIME Repository located at SAP/BC/WebDynpro/SAP/PUBLIC/FMCA_UI5_FORMS/templates.

   

   As a developer, you have a couple of choices:

   • You can select the UIE to be generated from a list of predefined types and allow the second method to retrieve the XML template
   • You can choose the UIE and also craft your own XML template

   It's important to adhere to data binding constraints to ensure compatibility with the standard code that manages data exchange between the UI5 Form and the Tax Cockpit Form Buffer. If the changes needed are extensive, it may be necessary to replace the standard code with custom code that supports a different data binding methodology.

4. Adjusting Your WD Component to Match ISR Config:

   To achieve our objective, we will utilize the Report FMCA_GENERATE_UI5_FORM (Transaction code FMCA_GEN_UI5_FORM_UI) or navigate through the corresponding SPRO activity.

   

   In this example, we will proceed with the following selection criteria:

   

   It's important to clarify a few elements that may not be immediately apparent:

   • WD View:

     This refers to the Web Dynpro (WD) View that contains the IFrame for the UI5 Form. By default, it is set to VIEW_MAIN to align with the Template Component, but there is flexibility to change this setting to accommodate more customized implementations

   • Generate WD Context:

     Selecting this option ensures that the Web Dynpro Context, including both Component and View, accurately reflects the current ISR configuration

   • Generate UI5 view file:

     The system will create a UI5 view file based on the ISR configuration, taking into account the relevant Business Add-In (BAdI)

   • Input Field as UI element:

     This feature is accessible only when regenerating the View. It is designed to create the View in a straightforward manner by rendering all fields as Input fields. This is particularly useful when the configuration is deemed unreliable, and modifications are preferred to be made directly in the View (XML) rather than through ABAP (BAdI)

   • Generate UI5 i18n file(s):

     By selecting this option, the system will produce internationalization (i18n) files for each language specified in the ISR configuration. It will also generate placeholders for non-ISR elements, such as operations for Table controls like inserting, copying, and deleting entries

   Upon executing the program with the specified settings, a summary will be provided.

   

   Should there be multiple i18n files created, the summary will indicate the precise count.

Short Demo 

Availability:

2023 SP01 (planned April 2024)

Prerequisites:

Phaseless Form (TTF Storage)

Supported features:

• Comments (configurable)

  Field Comments are enabled through Standard (existing) config

  

• Field highlights

  Comparison works in a same way as it did before (comparison between current and previous version/snapshot of the data)

  Style can be altered by update to STYLE.CSS file

• BRF+ Message navigation

  Navigation from BRF+ Message is supported

• Table operations

  Append/Insert/Copy/Delete row is supported

Extensibility:

• BAdI

  This approach has already been described in great detail

• Manual UI5 adjustments (View, Controller etc)

  Another extensibility approach would be to alter either (or both) View or Controller of the respective UI Application

These files can be edited in any text editor or IDE (for example VSC with UI5 extension) and reuploaded back into MIMEs Repository

With this approach we have a complete control over the application (layout, events etc).

• WD Component

  You can easily change size of the IFrame which hosts UI5 Application