Skip to Content

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.

 

Pre-requisite:

 

<?xml version="1.0" encoding="UTF-8"?><edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" Version="1.0">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" xmlns:sap="http://www.sap.com/Protocols/SAPData" Namespace="ArticleModel">
            <EntityType Name="Article">
                <Key>
                    <PropertyRef Name="ArticleID"/>
                </Key>
                <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"/>
            </EntityType>
            <ComplexType Name="Price">
                <Property Name="Amount" Type="Edm.String"/>
                <Property Name="Currency" Type="Edm.String"/>
            </ComplexType>
            <EntityContainer Name="default" m:IsDefaultEntityContainer="true">
                <EntitySet EntityType="ArticleModel.Article" Name="ArticleSet"/>
            </EntityContainer>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

 

 

Steps:

 

1. Activating external plugin OData model Editor

 

preferences.PNG

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

 

/wp-content/uploads/2015/04/plugin_682231.png

 

 

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

schemafolder.PNG

 

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

 

edmxfile.PNG

 

name it as ArticleService and choose OData Version as 2.0

odatamodel.PNG

 

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

 

artcileservice.PNG

 

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

/wp-content/uploads/2015/04/select_682346.png

 

 

(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

 

/wp-content/uploads/2015/04/masterscreen_682348.png

 

 

details.PNG

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

 

runwithmockdata.PNG

 

This is how it should look like:

 

mockdataresult.PNG

 

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

 

editmockdata.PNG

 

Click on Add Row > enter test data

 

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

 

mockdatavalues.PNG

 

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

 

articlejson.PNG

 

(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

 

newdata.PNG

 

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

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

 

Regards,

Jitendra Kansal

To report this post you need to login first.

17 Comments

You must be Logged on to comment or reply to a post.

  1. 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).

    (0) 
  2. Jagadeesh Biyyapu

    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/xfer.properties (No such file or directory)’)

    (0) 
      1. Dave Fish

        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.

        (0) 
  3. Timothy Muchena

    Hi

    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

    (0) 

Leave a Reply