Skip to Content

Run a SAP Fiori Elements Application using Mockserver

Using mockserver and advance features in running SAP Fiori Elements application.
You will learn
  • How to use mock server with SAP Fiori elements application
  • How to create mock data with Data Editor
  • How to add additional services to mock server
reginasheynblatRegina SheynblatJanuary 14, 2022
Created by
ARiesterer
January 14, 2022
Contributors
ARiesterer
reginasheynblat

Prerequisites

-An OData V4 service and an application based on that service that was generated by SAP Fiori tools.
-Starting point could be to run through the tutorial Create a Travel App with SAP Fiori Elements Based on OData V4 RAP Service.

  • Step 1
    1. Check the dependency that the mock server is installed.

      Check package.json

      Package.json

      Check ui5-mock.yaml

      ui5-mock.yaml
    2. If you need to install mock server manually to a project, see the following.

      URL
      Copy
      https://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware
      
  • Step 2
    1. In the SAP Business Application Studio open the context menu by right clicking on your webapp folder and select menu entry Preview Application.

      Righ-click on webapp folder
    2. From the dropdown menu select start-mock

      Start-Mock

      If you will see some status messages in the console window and a popup-message telling you that the application will open in a new browser tab. Click the Open button to switch to the new browser tab.

      Confirm new tab

      In the new browser tab showing your application, choose Go to load data.

      Click go on list report to see data

    In which files of your project do you find the setup for your mockserver?

  • Step 3

    When running an application using start-mock the mock data is generated on the fly. But, by using the Data Editor you can generate mock data that will be stored as .json format under the webapp/localService/mockdata folder. Therefore, allowing you to change data and make it more meaningful for your application.

    1. In the SAP Business Application Studio open the context menu by right clicking on your webapp folder and select menu entry Open Data Editor.

      Open DataEditor
    2. Data Editor opens with No Data. Click on Create Mock Data

      Create Mock Data

      Data will be generated for each entity and property combination and stored under webapp/localService/mockdata

      Mock Data
    3. Preview your application using start-mock again and the application will be using mock data from the stored location.

  • Step 4

    In the step above you generated mock data for your table. But your application also has a filter bar that is still connected to the backend for its Value Help.

    ValueHelp

    You can also see the call in your metadata.xml file.

    MetadataFile

    To test this out you can also disable the backend and show that the Value Help is blank. Open your ui5-mock.yaml file, and comment out the backend call.

    BackEnd

    Validate that Value Help is blank.

    If you don’t see blank values,please make sure you stop your server and restart.

    Blank ValueHelp

    Before proceeding to the next steps, please enable your Value Help.

    To be completely off-line, you would need to add additional mock services for each of the Value Lists References in your metadata.xml. In this step you will add a mock service for Agency that will support your Value Help.

    1. To mock the service for Agency value Help you need the following:

      • Agency Value Help metadata file
      • Agency Value Help service URL (urlBasePath)
      • A config.json file that will tell mock server where to find these file
      • Adjust your ui5-mock.yaml file to read your new config.json file
    2. Agency Value Help metadata

      Open the application and click on the Agency Value Help button.

      Agency Value Help Button

      Go back to your projects Terminal , you should see a dedicated info server:ux-proxy call to a new $metadata file.

      Metadata call

      It might help to use notepad to construct the following url.

      Construct a new URL to your Agency value help metadata file by combining from your running application https://xxxx.xxx + Metadata Call

      New Metadata File

      You should see the new metadata document, save it to webapp/localService/AgencyVHMetadata.xml

    3. Agency Value Help service URL (urlBasePath)

      urlBasePath - is the path you copied from your info server:ux-proxy without the $metadata

    4. Putting it all together in a new config.json file.

      Right-click on localService folder and select New File. Create the config.json under the following path webapp/localService/config.json.

    5. In your ui5-mock.yaml file copy the configuration-service.

      Depending on where you place your config.json adjust the file path for the metadata file in metadataXmlPath and the mock data in mockdataRootPath.

      UI-Mock Copy
      json
      Copy
      [{
        "urlBasePath": "/sap/opu/odata4/sap/zui_fe_travel_######_o4/srvd/sap/zui_fe_travel_######_o4/0001",
        "name": "",
        "metadataXmlPath": "./metadata.xml",
        "mockdataRootPath": "./mockdata",
        "generateMockData": true
      }]
      

      Paste the code into your new config.json file.

      You will need to add parenthesis and double quotes since the format of the .json file is different then the .yaml file.

      Config File
    6. In your ui5-mock.yaml switch the configuration to use the config.json file that you created earlier.

      It is extremely important that the yaml file reflects hierarchy.

      In order to do that you need to replace your sap-fe-mockserver code snippet with this:

      yaml
      Copy
      name: sap-fe-mockserver
      beforeMiddleware: fiori-tools-proxy
      configuration:
        mockFolder: webapp/localService
      
      UI5-Mock.yaml File
    7. Validate that your mock server still works by executing start-mock command under Preview Application

      If you are running into issues, make sure your formatting of the ui5-mock.yaml is correct.

      ui5-mock.yaml formatting
    8. Adding the new configuration to your config.json

      • urlBasePath - is the path you copied from your info server:ux-proxy without the $metadata
      • metadataXmlPath - reflects the path and the name of your new metadata file that was saved in the above step.
      json
      Copy
      {
          "urlBasePath": "/sap/opu/odata4/sap/zui_fe_travel_######_o4/srvd_f4/dmo/i_agency/0001;ps=%27srvd-zfe_travel_######-0001%27;va=%27com.sap.gateway.srvd.zfe_travel_######.v0001.et-zc_fe_travel_######.agencyid%27",
          "name": "",
          "metadataXmlPath": "./AgencyVHMetadata.xml",
          "mockdataRootPath": "./mockdata",
          "generateMockData": true
      }]
      
      New Config File

      After restarting your application using start-mock you should see mock values in your value help dialog for Agency.

      New Application using mock Value Help

      Currently the data editor only supports the saving of a single mock service. For the time being, you may see a difference between table data (which was created in Step 2) and value help.

Back to top