Intro
When you are developing a SAPUI5 application with an OData backend it is handy to have some mock data available. The most obvious reason to use mock data is when the backend is not available, but there are several other use cases.
Image you’re giving a demo and realize the backend data is not up-to-date (e.g. shows examples from 2015). Maybe you don’t have access to the backend, can’t reach your backend developer, or you ran out of time before your demo: instead of updating the data in the backend, you could also provide up-to-date mock data.
Another use case would be when you want to show your application to a certain customer, and you want to display their data (their products, suppliers, employee names). You could also easily do this via mock data without touching the backend data.
A third use case would be when you want to test your app with certain edge case data – like very long names or big numbers. This can also be done very easily with mock data.
In your normal development workflow, you would provide a JSON file per entity with your mock data and edit the data there. If you have ever edited a JSON file, you know that you must be careful in matching brackets and handling commas.
Sample project
Now, let’s see how we can maintain the mock data in the SAP Web IDE. For the sake of simplicity, let’s use a SAPUI5 sample application and explore the mock data of the service. You can find the sample applications in the SAP Web IDE in the Menu via File → New → Project from Sample Application.
Select the Approve Purchase Orders application and click Next at the bottom of the screen. Agree to the license agreement on the next screen and click Finish.
You should now have a folder called nw.epm.refapps.ext.po-apv in your workspace. In the subfolder webapp/localService, you’ll find a subfolder called mockdata where all the mock data for this application is stored.
In order to run the application, select the folder nw.epm.refapps.ext.po.apv, and click the green Play (Run) button.
In the pop-up that follows, choose flpSandboxMockServer.html to run the application with mock data.
In the SAP Fiori Launchpad (FLP) sandbox, click the Approve Purchase Orders tile.
We now see the running app with the same mock data as we have seen in the PurchaseOrders.json file:
Mock Data Editor
Now, let’s say we want to change the ordered by person name for the purchase order ID 300000037. As mentioned before, you would normally have to edit the PurchaseOrders.json file manually; instead, let’s see how this can be achieved using the mock data editor of the SAP Web IDE. You can access the mock data editor via the metadata.xml file; right-click the file, and choose Edit Mock Data:
Now, you can see a tabular representation of the current mock data. This is much more readable than the JSON representation which we have seen before. Select the entity set PurchaseOrders, scroll to the left to see the column OrderedByName and down to the bottom to edit the purchase Order 300000037, and change the OrderedByName to your name.
In the top right corner, you also see the button Generate Random Data which you can use if you don’t have any initial mock data available. You could also Add and Delete Rows to add and remove entries from your mock data.
Feel free to make additional changes to your mock data. When you are done, make sure that "Use the data above as my mock data source" is checked and click OK.
When you run the app again in the FLP sandbox (press the green Play button), you’ll see the changed ordered by-name for our purchase order:
The mock data was saved in the mockdata folder into the PurchaseOrders.json file:
Conclusion
I think the mock data editor is a quite handy tool to edit the mock data more easily in tabular form, and it is available out-of-the-box, inside the SAP Web IDE.
Excurse
Getting mock data
I will show you how you can get and create the initial mock data for a service. We will use the EPM_REF_APPS_PO_APV_SRV service which is also available in your own SAP system, it is delivered with the SAP_BASIS 740 SP10 (SAPKB74010). We can also access this service in the public SAP Demo Gateway System ES4. You can sign up here and get started: https://archive.sap.com/documents/docs/DOC-40986
As we have seen before, we must use JSON files to provide mock data for our service. When we enter the URL of an entity set into our browser, we will get the data in an XML format per default. To get the data from an entity set, append ?$format=json at the end of the URL. Let’s inspect the Purchase Orders entities via this URL in the ES4 system:
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders?$format=jso...
I have used Google Chrome with the Sight syntax highlighter plugin to nicely display the JSON formatted data: https://github.com/tsenart/sight.
You could now copy your data beginning from the first square bracket to the last square bracket:
and save it as PurchaseOrders.json. You can clean-up/re-arrange the dataset and leave out the __metadata and __deferred information. Your result could look like this:
You can find additional information in the document Editing Mock Data.
Link Collection
ES4 Demo System
How to get access to the ES4 Demo Gateway System: https://archive.sap.com/documents/docs/DOC-31221
?$format=json for PurchaseOrders
Accessing the PurchaseOrders data of EPM_REF_APPS_PO_APV_SRV in ES4 in JSON format
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders?$format=jso...
When you are developing a SAPUI5 application with an OData backend it is handy to have some mock data available. The most obvious reason to use mock data is when the backend is not available, but there are several other use cases.
Image you’re giving a demo and realize the backend data is not up-to-date (e.g. shows examples from 2015). Maybe you don’t have access to the backend, can’t reach your backend developer, or you ran out of time before your demo: instead of updating the data in the backend, you could also provide up-to-date mock data.
Another use case would be when you want to show your application to a certain customer, and you want to display their data (their products, suppliers, employee names). You could also easily do this via mock data without touching the backend data.
A third use case would be when you want to test your app with certain edge case data – like very long names or big numbers. This can also be done very easily with mock data.
In your normal development workflow, you would provide a JSON file per entity with your mock data and edit the data there. If you have ever edited a JSON file, you know that you must be careful in matching brackets and handling commas.
Sample project
Now, let’s see how we can maintain the mock data in the SAP Web IDE. For the sake of simplicity, let’s use a SAPUI5 sample application and explore the mock data of the service. You can find the sample applications in the SAP Web IDE in the Menu via File → New → Project from Sample Application.
Select the Approve Purchase Orders application and click Next at the bottom of the screen. Agree to the license agreement on the next screen and click Finish.
You should now have a folder called nw.epm.refapps.ext.po-apv in your workspace. In the subfolder webapp/localService, you’ll find a subfolder called mockdata where all the mock data for this application is stored.
In order to run the application, select the folder nw.epm.refapps.ext.po.apv, and click the green Play (Run) button.
In the pop-up that follows, choose flpSandboxMockServer.html to run the application with mock data.
In the SAP Fiori Launchpad (FLP) sandbox, click the Approve Purchase Orders tile.
We now see the running app with the same mock data as we have seen in the PurchaseOrders.json file:
Mock Data Editor
Now, let’s say we want to change the ordered by person name for the purchase order ID 300000037. As mentioned before, you would normally have to edit the PurchaseOrders.json file manually; instead, let’s see how this can be achieved using the mock data editor of the SAP Web IDE. You can access the mock data editor via the metadata.xml file; right-click the file, and choose Edit Mock Data:
Now, you can see a tabular representation of the current mock data. This is much more readable than the JSON representation which we have seen before. Select the entity set PurchaseOrders, scroll to the left to see the column OrderedByName and down to the bottom to edit the purchase Order 300000037, and change the OrderedByName to your name.
In the top right corner, you also see the button Generate Random Data which you can use if you don’t have any initial mock data available. You could also Add and Delete Rows to add and remove entries from your mock data.
Feel free to make additional changes to your mock data. When you are done, make sure that "Use the data above as my mock data source" is checked and click OK.
When you run the app again in the FLP sandbox (press the green Play button), you’ll see the changed ordered by-name for our purchase order:
The mock data was saved in the mockdata folder into the PurchaseOrders.json file:
Conclusion
I think the mock data editor is a quite handy tool to edit the mock data more easily in tabular form, and it is available out-of-the-box, inside the SAP Web IDE.
Excurse
Getting mock data
I will show you how you can get and create the initial mock data for a service. We will use the EPM_REF_APPS_PO_APV_SRV service which is also available in your own SAP system, it is delivered with the SAP_BASIS 740 SP10 (SAPKB74010). We can also access this service in the public SAP Demo Gateway System ES4. You can sign up here and get started: https://archive.sap.com/documents/docs/DOC-40986
As we have seen before, we must use JSON files to provide mock data for our service. When we enter the URL of an entity set into our browser, we will get the data in an XML format per default. To get the data from an entity set, append ?$format=json at the end of the URL. Let’s inspect the Purchase Orders entities via this URL in the ES4 system:
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders?$format=jso...
I have used Google Chrome with the Sight syntax highlighter plugin to nicely display the JSON formatted data: https://github.com/tsenart/sight.
You could now copy your data beginning from the first square bracket to the last square bracket:
{
"d": {
"results": [{
"__metadata": {
"id": "https://SAPES4.SAPDEVCENTER.COM:443/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders('300000000')",
"uri": "https://SAPES4.SAPDEVCENTER.COM:443/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders('300000000')",
"type": "EPM_REF_APPS_PO_APV_SRV.PurchaseOrder"
},
"POId": "300000000",
"OrderedById": "400000038",
…
},
"PurchaseOrderItems": {
"__deferred": {
"uri": "https://SAPES4.SAPDEVCENTER.COM:443/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders('300000019')/PurchaseOrderItems"
}
}
}]
}
}and save it as PurchaseOrders.json. You can clean-up/re-arrange the dataset and leave out the __metadata and __deferred information. Your result could look like this:
You can find additional information in the document Editing Mock Data.
Link Collection
ES4 Demo System
How to get access to the ES4 Demo Gateway System: https://archive.sap.com/documents/docs/DOC-31221
?$format=json for PurchaseOrders
Accessing the PurchaseOrders data of EPM_REF_APPS_PO_APV_SRV in ES4 in JSON format
https://sapes4.sapdevcenter.com/sap/opu/odata/sap/EPM_REF_APPS_PO_APV_SRV/PurchaseOrders?$format=jso...
- SAP Managed Tags:
4 Comments
