[WebIDE] SAPUI5 Application with Mock Data

[#1]

Hi everybody,

it has taken me far too long to get a SAPUI5 project running with mock data in the WebIDE.

Yes it is easy to do it with the given templates but what about a "raw" UI5 app created by the template "SAPUI5 Application".

Step 1: Create the application

So the first thing I did was creating the app. "New" -> "Project from template" -> "SAP UI5 Application". I called it "TestMockup" and created a view "View1".

So far, so good.

Step 2: the OData Service

I created a little OData Service and saved it as metadata.xml in the model folder. Here is the EDMX:

<edmx:Edmx Version="1.0"
    xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
    xmlns:sap="http://www.sap.com/Protocols/SAPData">
    <edmx:DataServices
        xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" m:DataServiceVersion="2.0">
        <Schema
            xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="de.mindsquare">
            <EntityType Name="privmailinfo" >
                <Key>
                    <PropertyRef Name="pernr"/>
                </Key>
                <Property Name="pernr" Type="Edm.String" Nullable="false"></Property>
                <Property Name="privmail" Type="Edm.String" Nullable="false" sap:label="privmail"></Property>
                <Property Name="time" Type="Edm.Boolean" Nullable="false"></Property>
                <Property Name="salary" Type="Edm.Boolean" Nullable="false"></Property>
            </EntityType>
            <EntityContainer Name="ec1" m:IsDefaultEntityContainer="true">
                <EntitySet Name="privmailinfoset" EntityType="mindsquare.privmailinfo"></EntitySet>
            </EntityContainer>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

Next I rightclicked on the project and chose "New" -> "OData Service". I chose "Workspace" and navigated to my "metadata.xml". I selected yes to "Overwrite existing OData Service connection".

Then I went to the "manifest.json" and manipulated the service to have the name "mainService" and gave it the artificial URL "/sap/opu/odata/mind2/privmailinfo".

Then I rightclicked on the project and chose "Project Settings" and navigated to "Mock Data". The settings are as follows:

Step 3: Creating a run configuration

Next I created a new run configuration and selected the "Run with mock data" checkbox.

Step 4: Creating mock data

I rightclicked on the metadata.xml and chose "Edit mock data". In the next window I generated some mock data. I don't know if this step is necessary because I chose "Generated data" in the mock data settings of the project.

Step 5: Binding the data

In the view I created just a list with some bindings. I selected the privmailinfoset as the data source. As far as I understand this means that the model is configured correctly.

The result

As you can see in the next screenshot, if I run the mock data configuration the list is empty.

It would be awesome if someone could tell me what is missing?

I found the in the other templates a mockserver is created manually. But they do not use the "Run with mock data" checkbox in the mock data run configuration.

If you need any more info just ask.

Thanks, Hendrik

[Former Member · Accepted solution]

Hi Hendrik,

there are a few issues in your flow:

1.  you should update line 18 in your metadata.xml. the namespace of the entiryType is missing the "de" in the beginning.

<EntitySet Name="privmailinfoset" EntityType="de.mindsquare.privmailinfo"></EntitySet>

you can easily find semantic issues in your metadata by using the OData Model Editor

2. The "Local URI" of the Data sources should be:  localService/metadata.xml

3.  you are missing the model declaration in the manifest.json file. please add the following under "sap.ui5" -> "models"

"": {
       "dataSource": "mainService",
       "settings": {
       "defaultBindingMode": "TwoWay",
       "defaultCountMode": "Inline",
       "refreshAfterChange": false
  }

Best regards,

Elina