This is Jerry’s 28th article of 2021, and the 299th original article of Wang Zixi’s official account.

Jerry’s previous article on creating the first SAP Fiori Elements application without any front-end development experience explained how to create an SAP Fiori Elements application using Visual Studio Code.

Later, a friend of mine consulted me on wechat. In the Fiori Elements Application generated by using the steps described in the article, there is no Application Specific View and Controller, so I don’t know how to carry out secondary development of the Application.

Indeed, the generated project file contains only a bare component. js that declares a json metadata description file manifest.json. We know that you can’t write application logic in json files.

Another friend asked me whether the Fiori Elements development tool recommended by SAP is WebIDE or Visual Studio Code.

Jerry answers the second friend’s question first.

The SAP community has a blog on how to use SAP Business Application Studio for Vue Application development. Yuval, product manager for SAP WebIDE and Business Application Studio, When answering questions in the comments section, I provided the following useful information:

SAP Business Application Studio is a cloud Application development tool on the SAP Business Technology Platform, compared to the traditional Full Stack WebIDE on the Neo environment. It is not limited to SAP UI5 technology, but supports any HTML5 front-end development technology including vue.js and React.

SAP Business Application Studio supports the installation of Extensions, making it easy to adapt to new technologies emerging in the cloud era. SAP Business Application Studio makes it easy to create SAP Fiori Elements applications with an extension package called SAP Fiori Tools. SAP Fiori Tools can also be used with Visual Studio Code installed locally.

Therefore, SAP Business Application Studio/Visual Studio Code are both recommended tools for developing SAP Fiori Elements applications.

For more information on SAP Business Application Studio, please refer to Jerry’s article:

SAP’s new full-stack development tool: SAP Business Application Studio

Back to the title of this article, how do I secondary develop an SAP Fiori Elements application created with Visual Studio Code?

According to the difficulty of realizing requirements, Adaptation and Extension can be adopted to complete secondary development.

  • The SAP Fiori Elements application’s manifest.json file is modified to fulfill some of its less complex requirements.
  • Extension is the SAP UI5 ExtensionHook technology introduced in Jerry’s previous SAP Product Enhancement Technology Review. Create SAP Fiori Elements Extension and develop custom code for JavaScript.

Let’s start with a practical example of Adaptation.

By following Jerry’s steps in creating the first SAP Fiori Elements application without any front-end development experience in his previous article, the table part of the Fiori Elements application is created with radio only support, the circular selection control at the far left of the row items in the table below.

Now I modify the table to support multiple selection using Visual Studio Code, based on Adaptation.

Ctrl+Shift+P to open Guided Development, which is also one of the extensions included in the SAP Fiori Tools extension pack:

The extension provides wizards that guide developers through a series of steps to build an application based on Fiori Elements.

Since I want the table to support Multiple selection, select List Report Page – Enable Multiple Selection in tables:

Click on Start Guide,

The Adaptation wizard automatically locates the manifest.json area and displays the corresponding code.

Fiori Elements List Report (Fiori Elements List Report) : Fiori Elements List Report (Fiori Elements List Report) : Fiori Elements List Report (Fiori Elements List Report) To automatically modify manifest.json, click Apply and end Adaptation.

The modified manifest.json field is shown below. That is, if you are familiar with the property Settings supported in manifest.json, you can edit the file directly, without using the Fiori Guided Development extension.

"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
                        "controllerName": "com.sap.jerry.jerryfioriapp.WangZiXi"}}}},Copy the code

The table selection mode is now multi-select:

If you want to write JavaScript custom logic for the SAP Fiori Elements application, you need to use SAP UI5 Extension technology. ABAP developers can think of this technique as a JavaScript version of BAdI.

In the manifest. Json area extends to register a extension, type for SAP. UI. ControllerExtensions, Subtype for SAP. Suite. UI.. Generic template. ListReport. The ListReport.

The semantics below are that the developer wants to define a Controller Extension specified by the controllerName field to extend the CONTROLLER of the SAP Fiori Elements List Report standard.

SAP Fiori Elements ListReport Its implementation code in SAP. The suite. The UI.. Generic template. ListReport. Controller ControllerImplementation. Js.

The Controller of this standard, 641 lines of code call onBeforeRebindTableExtension method. Suppose we wanted to re-implement this method and perform some custom logic before rendering the table, we could implement this custom logic in the Controller Extension registered with manifest.json.

In the Controller Extension implementation file, the first parameter of sap.ui. Define must declare the controller name as the same as the controllerName field registered in the manifest.json.

sap.ui.define("com.sap.jerry.jerryfioriapp.WangZiXi"[],function() {
    return {
        onBeforeRebindTableExtension: function(oEvent) {
            debugger; }}});Copy the code

This way, at runtime, our secondary development code can be called by the framework before the Fiori Elements List Report table is rendered:

Jerry will share more about the development and expansion of SAP Fiori Elements, so stay tuned. Thanks for reading.

Read more

  • SAP Fiori Application Index
  • Fiori Fundamentals and SAP UI5 Web Components
  • Why can traditional transaction codes in SAP GUI be launched with Fiori Launchpad and run in the browser
  • Step by step, configure the SAP GUI transaction code into the SAP Fiori Launchpad
  • SAP UI5 application developers understand the meaning of UI5 framework code
  • SAP UI5 Module lazy loading mechanism
  • SAP UI5 control rendering mechanism
  • HTML native events VS SAP UI5 Semantic events
  • SAP UI5 control metadata metadata implementation
  • SAP instance data modification and reading logic for UI5 controls
  • Implementation principle of SAP UI5 control data binding
  • Three data binding modes of SAP UI5 control: One Way, Two Way and OneTime
  • SAP UI5 OData rumor Mill: Send two OData requests in a very short time, will the first one be automatically cancelled
  • SAP UI5 and Angular function Debounce and Throttle implementation principle introduction
  • SAP UI rendering mode: client-side rendering vs. server-side rendering
  • Loading animation effects and Ghost Design for SAP UI
  • Introduce StackBlitz, an online IDE for developing simple SAP UI5 applications
  • How to change the UI display style by adjusting CSS
  • The IDEA of UI enhancement inherited from SAP products is reflected in the IMPLEMENTATION of UI enhancement in SAP Commerce Cloud
  • How can I tell the difference between real and fake Fiori apps in SAP Fiori Launchpad
  • Create the first SAP Fiori Elements application without any front-end development experience
  • Rendering principles and techniques for ICONS in SAP Fiori applications

More of Jerry’s original articles can be found in “Wang Zixi” :