Run a SAP Fiori Elements Application using Mockserver
- 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
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
-
Check the dependency that the mock server is installed.
Check
package.json
Check
ui5-mock.yaml
-
If you need to install mock server manually to a project, see the following.
URLCopyhttps://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware
-
- Step 2
-
In the SAP Business Application Studio open the context menu by right clicking on your
webapp
folder and select menu entry Preview Application. -
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.
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 thewebapp/localService/mockdata
folder. Therefore, allowing you to change data and make it more meaningful for your application.-
In the SAP Business Application Studio open the context menu by right clicking on your
webapp
folder and select menu entry Open Data Editor. -
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
-
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.
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.-
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 newconfig.json
file
-
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 CallYou should see the new metadata document, save it to
webapp/localService/AgencyVHMetadata.xml
-
Agency Value Help service URL (
urlBasePath
)urlBasePath
- is the path you copied from your info server:ux-proxy without the $metadata -
Putting it all together in a new
config.json
file.Right-click on
localService
folder and selectNew File
. Create theconfig.json
under the following pathwebapp/localService/config.json
. -
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 inmetadataXmlPath
and the mock data inmockdataRootPath
.jsonCopy[{ "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. -
In your
ui5-mock.yaml
switch the configuration to use theconfig.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:yamlCopyname: sap-fe-mockserver beforeMiddleware: fiori-tools-proxy configuration: mockFolder: webapp/localService
-
Validate that your mock server still works by executing
start-mock
command under Preview ApplicationIf you are running into issues, make sure your formatting of the
ui5-mock.yaml
is correct. -
Adding the new configuration to your
config.json
urlBasePath
- is the path you copied from your info server:ux-proxy without the $metadatametadataXmlPath
- reflects the path and the name of your new metadata file that was saved in the above step.
jsonCopy{ "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.
-