Run a SAP Fiori Elements Application using Mockserver

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

   Check package.json

   

   Check 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
   

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

   

2. From the dropdown menu select 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.

   

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

   

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.

   

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

   

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

   

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

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.

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

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.

Validate that Value Help is blank.

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

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.

   

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

   

   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

   

   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.

   
   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.

   

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
   

   

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.

   

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
   }]
   

   

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

   

   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.