Using a Data Model in an X4 Web App

How to create a data model in an X4 Web App

Create a new Web App Project or open an existing Web App Project.
Right-click on the ViewModels folder and choose New > View Model.
Enter a view model name in the File Creation Wizard dialog and select Finish.
Move the .datamodel file via drag-and-drop from the Data Model Project into the Properties element in the .viewmodel file.
The Select Entities dialog opens. In this dialog, you select which entities from your data model are to be referenced in the .viewmodel file.

The entities and their properties are referenced in the .viewmodel file. You can edit the properties with additional attributes (displayName, readOnly).

Example:

CODE

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ViewModel xmlns="http://softproject.de/viewmodel/1.0">
    <Properties>
        <Model path="Demo/Entities/Customer.entity">
            <ModelProperty name="Name" displayName="Name" readOnly="false"/>
            <ModelProperty name="Firstname" readOnly="false"/>
            <ModelObject name="DeliveryAddress" path="Demo/Entities/Address.entity">
                <ModelProperty name="City" readOnly="false"/>
                <ModelProperty name="Zip" readOnly="false"/>
                <ModelProperty name="Street" readOnly="false"/>
            </ModelObject>
            <ModelList name="Order" path="Demo/Entities/Order.entity">
                <ModelProperty name="Product" readOnly="false"/>
                <ModelProperty name="Quantity" readOnly="false"/>
                <ModelObject name="Customer" path="Demo/Entities/Customer.entity">
                    <ModelProperty name="Name" readOnly="false"/>
                    <ModelProperty name="Firstname" readOnly="false"/>
                    <ModelObject name="DeliveryAddress" path="Demo/Entities/Address.entity">
                        <ModelProperty name="City" readOnly="false"/>
                        <ModelProperty name="Zip" readOnly="false"/>
                        <ModelProperty name="Street" readOnly="false"/>
                    </ModelObject>
                </ModelObject>
            </ModelList>
        </Model>
    </Properties>
</ViewModel>

Example for embedding a .viewmodel file in a component:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent xmlns="http://softproject.de/webapp/1.0" viewmodel="ViewModel.viewmodel">
<Properties>
</Properties>
<FlowLayout>
<Header value="Welcome to my new Web App!" />
<TextBox value="#Customer.Name" />
</FlowLayout>
</DetailComponent>