Skip to Content
Author's profile photo Jitendra Kansal

5 easy steps to create a Fiori app using an EDMX file & testing it by leveraging the #SAPWebIDE mock service

Dear All,


We have seen many posts talking about connecting the SAP Web IDE to a remote backend system and creating Fiori based apps and getting the data from the backend system. As title speaks everything, i am going to show you how we can create a Fiori app with no backend system but using an EDMX file which contains the model of the OData service and could leverage SAP Web IDE mock service to test the application.


This kind of approach is useful in that case when backend is not ready (or no connectivity to backend system) and development for frontend and backend is done in parallel.




<?xml version="1.0" encoding="UTF-8"?><edmx:Edmx xmlns:edmx="" xmlns:m="" Version="1.0">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema xmlns="" xmlns:sap="" Namespace="ArticleModel">
            <EntityType Name="Article">
                    <PropertyRef Name="ArticleID"/>
                <Property Name="ArticleID" Nullable="false" Type="Edm.String"/>
                <Property Name="Name" Type="Edm.String"/>
                <Property Name="Descirption" Type="Edm.String"/>
                <Property Name="Price" Nullable="false" Type="ArticleModel.Price"/>
            <ComplexType Name="Price">
                <Property Name="Amount" Type="Edm.String"/>
                <Property Name="Currency" Type="Edm.String"/>
            <EntityContainer Name="default" m:IsDefaultEntityContainer="true">
                <EntitySet EntityType="ArticleModel.Article" Name="ArticleSet"/>





1. Activating external plugin OData model Editor



  • Select the checkbox for the plugin OData model Editor > Save> Reload SAP Web IDE to see the new functionality





2. Now, i am going to create a schema file in a separate folder that could be used for future projects. Right click on the root folder Local > New > Folder



Give it a name as EDMX_files.  Now, right click on EDMX_files folder > New>OData Model File




name it as ArticleService and choose OData Version as 2.0



Replace it’s content with attached file content. It should look like below:




3. Create a new project File > New > Project from Template > SAP Fiori Master Detail Application

  • Project name: ArticleSeviceWithMockData
  • Under Data Connection > Workspace > select desired edmx file
  • scroll down and click on SELECT and then NEXT




(You could direct point to .edmx file if it is available on your local machine. No need of step #2. Select Workspace >Browse)



  •     Enter below details for Project settings, Master Section and Details Section > Next >Finish






Note: With the value for Project namespace (in above app it is articlemock_ns) we can assign a kind of group definition to project files. In future exercises when we create a new view, the Project Namespace value will indicate that the new view and its controller belong to your app or the respective app that you are going to extend.


4. Test the data with mock-data


Note: By default, in each and every running SAP Web IDE app there is random mock-data. As mentioned earlier, this will help application developers to test Fiori apps from design and front-end development perspectives even though there is no connectivity to backend systems.


Select index.html > Run >Run with Mock data




This is how it should look like:




5. Modify and personalize your mock-data


SAP Web IDE provides an easy table form to edit mock-data directly in the project that could reflect our specific needs properly.


Expand Model > right click metadata.xml > Edit Mock Data




Click on Add Row > enter test data


Note: PRICE is a complex type binded to ArticleSet entityset.




SAP Web IDE creates a new mock-data file Article.json in the folder model.




(SAP recommends JSON format to work with mock-data. You could also import an JSON file directly into model folder > Right click model > Import >File)


To test again, repeat step #4, select index.html > Run >Run with Mock Data




(Inputs have taken from openSAP course build your own Fiori App in Cloud)

Hope you enjoyed it. Your comments and feedback are most welcome.



Jitendra Kansal

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Very informative. Thanks for this blog Jitendra!

      Author's profile photo Sukanta Rudra
      Sukanta Rudra

      Good documentation for reference. There is also a video of the same process in the current  ongoing openSAP course - Building Fiori app in cloud.(Week 3, Unit 5).

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Yes, i referred to that video only and i have mentioned that at the end of above blog.

      Author's profile photo Former Member
      Former Member

      Hi Jitendra Kansal,

      While creating the new template I Got the following  error.Please clear me where i made a mistake

      POST /s2s/xfer/import/p1940837875trial$P1940837875-OrionContent/MOcks on behalf of user 'p1940837875trial$P1940837875': failed with '/usr/sap/ljs/configuration/org.eclipse.osgi/bundles/253/data/xfer/AN3WhBLiABQQAaSqOQCYyA/ (No such file or directory)')

      Author's profile photo Former Member
      Former Member

      I got the same error as well.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Jagadeesh Biyyapu ; David Fish

      Can you share the steps followed with screenshots? Would be easy to understand if you have missed in between.



      Author's profile photo Former Member
      Former Member

      The error occurs at the end of Step 3 after clicking the Finish button. I've entered the information as shown in the screenshots. I have the ArticleService.edmx file in a folder named EDMX_files and it shows up in the wizard and I can select it when I have Workspace selected as the source.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Dave Fish

      I just checked and got similar error. I wonder if this might be related to IDE itself. Others are also getting the same error.



      Author's profile photo Former Member
      Former Member

      Yes they have resolved the problem and it is working now. Thanks for providing this nice tutorial!

      Author's profile photo Christopher Solomon
      Christopher Solomon

      Deja Vu! Just did this in the past week for the OpenSAP course! haha

      Author's profile photo Timothy Muchena
      Timothy Muchena


      Thanks for the blog.

      I have a question: If i have 2 entity types(Header and Item) in the EDMX file, how and where do i specify the 2nd entity(say Item entity) to get line item data?

      Kind regards

      Author's profile photo Vincent Noiset
      Vincent Noiset


      something very easy to start with Web IDE.



      Author's profile photo Raphael Berger
      Raphael Berger

      Hello guys,

      where can I find/download the ArticleSearch.edmx file?



      Author's profile photo Sarvani Ponnuri
      Sarvani Ponnuri

      You can copy the EDMX format from your gateway server and paste in WEB IDE ... It worked for me 🙂

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Hello Raphel,

      I have updated blog with edmx file content for article service.



      Author's profile photo Raphael Berger
      Raphael Berger

      Hello JK,

      that is great - thank you very much! 🙂



      Author's profile photo Sarvani Ponnuri
      Sarvani Ponnuri

      Awesome material... Many Thanks.... 🙂