Create Web IDE Fiori App from EDMX Mock data file without connection to backend SAP system

This builds on the knowledge gained from SAP Web IDE Demo 1 which creates a Fiori app linked to an OData servie. But what if you don't have a backen system avaialable?? In this situation creating Fiori App�s using the Web IDE without any connection to a back end system can be very useful, for example if you don�t have one or you are waiting for it to be configured/upgraded etc. This is achieved using an EDMX OData model file.

Step 1 - Activate OData model Editor plugin
First you need to activate the model editor, which is very easy to do. Simply go to menu option Tools->Preferences.

Then within the Optional Plugins section check the appropriate checkbox (i.e. OData Model Editor)

Step 2 - Create folder for EDMX file
First create a new folder by right clicking on the Local hierarchy branch and selecting menu option Local->New->Folder.

Give the folder a name

Step 3 - Create EDMX file
Return to the main development screen and ensure you re-load it so that it picks up the plugin chnages. Now right click on the new folder name and select New->OData Model File

Give it a name (i.e. test_edmx) and click ok

Your file should now have been created

You will now need enter the following coding into the EDMX file to create the data object and values which will replicate that used in demo 1.

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"  xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
    xmlns:sap="http://www.sap.com/Protocols/SAPData">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema Namespace="SALESORDERXX" xml:lang="en"
            xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityType Name="SOHeader" sap:content-version="1">
                <Key>
                    <PropertyRef Name="OrderId"/>
                </Key>
                <Property Name="OrderId" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Sales Document"/>
                <Property Name="DocumentType" Type="Edm.String" MaxLength="4" sap:label="Sales Doc. Type"/>
                <Property Name="DocumentDate" Type="Edm.DateTime" sap:label="Document Date"/>
                <Property Name="CustomerId" Type="Edm.String" MaxLength="10" sap:label="Sold-to party"/>
                <Property Name="SalesOrg" Type="Edm.String" MaxLength="4" sap:label="Sales Org."/>
                <Property Name="DistChannel" Type="Edm.String" MaxLength="2" sap:label="Distr. Channel"/>
                <Property Name="Division" Type="Edm.String" MaxLength="2" sap:label="Division"/>
                <Property Name="OrderValue" Type="Edm.Decimal" Precision="15" Scale="2" sap:label="Net value"/>
                <Property Name="Currency" Type="Edm.String" MaxLength="5" sap:label="Doc. Currency" sap:semantics="currency-code"/>
                <NavigationProperty Name="SOItems" Relationship="SALESORDERXX.SOHeader_SOItems" FromRole="FromRole_SOHeader_SOItems" ToRole="ToRole_SOHeader_SOItems"/>
            </EntityType>
            <EntityType Name="SOItem" sap:content-version="1">
                <Key>
                    <PropertyRef Name="OrderId"/>
                    <PropertyRef Name="Item"/>
                </Key>
                <Property Name="OrderId" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Sales Document"/>
                <Property Name="Item" Type="Edm.String" Nullable="false" MaxLength="6" sap:label="Item"/>
                <Property Name="Material" Type="Edm.String" MaxLength="18" sap:label="Material"/>
                <Property Name="Description" Type="Edm.String" MaxLength="40" sap:label="Description"/>
                <Property Name="Plant" Type="Edm.String" MaxLength="4" sap:label="Plant"/>
                <Property Name="Quantity" Type="Edm.Decimal" Precision="15" Scale="3" sap:label="Order quantity"/>
                <Property Name="UoM" Type="Edm.String" MaxLength="3" sap:label="Sales unit" sap:semantics="unit-of-measure"/>
                <Property Name="Value" Type="Edm.Decimal" Precision="15" Scale="2" sap:label="Net value"/>
                <NavigationProperty Name="SOHeader" Relationship="SALESORDERXX.SOItem_SOHeader" FromRole="FromRole_SOItem_SOHeader" ToRole="ToRole_SOItem_SOHeader"/>
            </EntityType>
            <Association Name="SOItem_SOHeader" sap:content-version="1">
                <End Type="SALESORDERXX.SOItem" Multiplicity="1" Role="FromRole_SOItem_SOHeader"/>
                <End Type="SALESORDERXX.SOHeader" Multiplicity="1" Role="ToRole_SOItem_SOHeader"/>
            </Association>
            <Association Name="SOHeader_SOItems" sap:content-version="1">
                <End Type="SALESORDERXX.SOHeader" Multiplicity="1" Role="FromRole_SOHeader_SOItems"/>
                <End Type="SALESORDERXX.SOItem" Multiplicity="*" Role="ToRole_SOHeader_SOItems"/>
            </Association>
            <EntityContainer Name="SALESORDERXX" m:IsDefaultEntityContainer="true">
                <EntitySet Name="SOHeaders" EntityType="SALESORDERXX.SOHeader" sap:content-version="1"/>
                <EntitySet Name="SOItems" EntityType="SALESORDERXX.SOItem" sap:content-version="1"/>
                <AssociationSet Name="SOHeader_SOItems_AssocSet" Association="SALESORDERXX.SOHeader_SOItems" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:content-version="1">
                    <End EntitySet="SOHeaders" Role="FromRole_SOHeader_SOItems"/>
                    <End EntitySet="SOItems" Role="ToRole_SOHeader_SOItems"/>
                </AssociationSet>
                <AssociationSet Name="SOItem_SOHeader_AssocSet" Association="SALESORDERXX.SOItem_SOHeader" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:content-version="1">
                    <End EntitySet="SOItems" Role="FromRole_SOItem_SOHeader"/>
                    <End EntitySet="SOHeaders" Role="ToRole_SOItem_SOHeader"/>
                </AssociationSet>
            </EntityContainer>
                </Schema>
            </edmx:DataServices>
        </edmx:Edmx>

Now press the save button

Step 4 - Create your Fiori app using this EDMX file
Within the file menu select New->Project from template

Select the SAP Fiori Master Details Application template

Give it a name such as 'Demo2_Mock'

Within Workspace section select your EDMX file from the tree structure and press select. Note you need to click on the actual folder icon to expand it rather than the folder name.

Once you have done that hit next and enter the customization settings as you did before in demo 1.

Click next and then finish on the following page

Step 7 - Test the application
You run this one slightly differently by right clicking on the index.html file and selecting menu option Run->Run with Mock Data

Your application should look something like this

<--Return to SAP Web IDE Demo 1 page

SAP FIORI helpful links to get you started on the road to creating SAPUI5 apps
FIORI introduction and helpful links to get you started on the road to creating SAPUI5 apps
FIORI introduction and helpful links to get you started on the road to creating SAPUI5 apps
Install local SAP Web IDE development environment onto your own PC
SAP Web IDE (formally River RDE) is a Browser based development environment
SAP Web IDE (formally River RDE) is a Browser based development environment
SAP Fiori app setup and activation so that it can be accessed via the launchpad

Create Web IDE Fiori App from EDMX Mock data file without connection to backend SAP system

Related Articles