Data Binding

Data Binding connects your UI (View) with data (Model) to keeps UI and data in sync automatically.

We will try to understand how to implement different types of Data Binding.

We have created a MyModel.json file on model folder and configured the JSON Model with name - MySampleModel.

1. One Time Binding and Resource Binding

One Time Binding means data is shown in UI only once and it will NOT update if the model changes later.
The application page title retrieved from the i18n file is a One-Time binding, as it is initialized only once during application load.
It is also an example of Resource Binding as is used to fetch text from the i18n (resource) file and display it in the UI.

We can define the same on i18n.properties file like below -

i18n/i18n.properties

title=Binding Fiori UI5 Application

And the same is binded on the Page control title -

view/View1.view.xml

<Page id="page" title="{i18n>title}">

2. Property Binding

It is used to bind a single value (like text, title, visibility, etc.) in the form of Text, Input, etc.

One-Way Binding with Property Binding

We will try to bind the below data from model from json model -

model/MyModel.json

{
    "Company": "Tech_Company"
}

And will bind it with Text on View as -

view/View1.view.xml

<Text id="view1Text4" text="Company Name - {MySampleModel>/Company}" />

Two-Way Binding with Property Binding

Two-way binding ensures that any changes made by the user update the JSON model, and those updates are automatically reflected in the UI.

We will try to bind the below data from json model -

model/MyModel.json

{
    "User": "",
    "Department": ""
}

And will bind it with Input and Text on View as -

view/View1.view.xml

<Input id="view1Input1" placeholder="Enter Login User Name" value="{MySampleModel>/User}" valueLiveUpdate="true" />
<Input id="view1Input2" placeholder="Department" value="{MySampleModel>/Department}" valueLiveUpdate="true" />

<Text id="view1Text8" text="User ID - {MySampleModel>/User}" />
<Text id="view1Text9" text="Department - {MySampleModel>/Department}" />

3. Element Binding

It is used when we wants to bind an object content from the model data in Form, Details, etc.

One-Way Binding with Element Binding

We will try to bind the below object data from json model -

model/MyModel.json

{
    "Owner": {
        "Name": "John Snow",
        "Gender": "M",
        "Location": "London"
    }
}

And will bind it with VBox and Text on View as -

view/View1.view.xml

<VBox id="panel4VBox4" binding="{MySampleModel>/Owner}" >
    <Text id="view1Panel4Text1" text="Topic - One Way Binding for Element Binding" />
    <Label id="view1Panel4Text2" text="Owner Details :" />
    <Text id="view1Panel4Text3" text="Owner Name - {MySampleModel>Name}" />
    <Text id="view1Panel4Text4" text="Gender - {MySampleModel>Gender}" />
    <Text id="view1Panel4Text5" text="Location - {MySampleModel>Location}" />
</VBox>

Two-Way Binding with Element Binding

We will try to bind the below object data from json model -

model/MyModel.json

{
    "NewEmployee": {
        "Name": "",
        "Gender": "",
        "Location": ""
    }
}

And will bind it with Form to read the User input, VBox and Text to show the data on View as -

view/View1.view.xml

<VBox id="panel5VBox1" >
    <Text id="view1Panel5Text1" text="Topic - Two-Way Binding for Element Binding" />
    <form:SimpleForm
        editable="true"
        id="simpleForm1"
        layout="ResponsiveGridLayout"
        class="sapUiMediumMargin"
        binding="{MySampleModel>/NewEmployee}" 
        >

        <Title id="form1Title1" text="New Employee Form" />

        <Label id="form1Lable1" text="Name" />
        <Input id="form1Input1" value="{MySampleModel>Name}" placeholder="Enter Name" valueLiveUpdate="true" />

        <Label id="form1Lable2" text="Gender" />
        <Input id="form1Input2" value="{MySampleModel>Gender}" placeholder="Enter Gender" valueLiveUpdate="true" />

        <Label id="form1Lable3" text="Location" />
        <Input id="form1Input3" value="{MySampleModel>Location}" placeholder="Enter Location" valueLiveUpdate="true" />

        <Button id="form1Button1" text="Submit" press="onFormSubmit" />

    </form:SimpleForm>
</VBox >
<!-- Display Section -->
<VBox binding="{MySampleModel>/NewEmployee}">
    <Text text="Employee Name - {MySampleModel>Name}" />
    <Text text="Employee Gender - {MySampleModel>Gender}" />
    <Text text="Employee Location - {MySampleModel>Location}" />
</VBox>

And if you want to get the data on Controller based on Submit button event, you can use the below logic -

controller/View1.controller.ts

public onFormSubmit(oEvent : any): void {
    //  We can get the input data by targetting the id of input fields like - 
    const oInput1 = this.getView()?.byId("form1Input1") as Input;
    const inp1NameValue = oInput1.getValue() ;
    const oInput2 = this.getView()?.byId("form1Input2") as Input;
    const inp2LocationValue = oInput2.getValue() ;
    const oInput3 = this.getView()?.byId("form1Input3") as Input;
    const inp2GenderValue = oInput3.getValue() ;


    //  Best Approach - Since Form Input Data is mapped and stored on Model, better to extract it from there.
    const myModel = this.getView()?.getModel("MySampleModel") as JSONModel ;
    const modelData = myModel.getData();
    const sName = modelData.NewEmployee.Name ;
    const sGender = modelData.NewEmployee.Gender ;
    const sLocation = modelData.NewEmployee.Location ;

    // Show output
    MessageBox.information(
        "Employee Details :- " +
        "Name: " + sName + 
        "Gender: " + sGender +
        "Location: " + sLocation
    );
}

4. Aggregation Binding

It is used when we wants to bind multiple records (array/list of objects) from the model data in Table, List, etc.

We will try to bind the below array data from json model -

model/MyModel.json

{
    "employees": [
        {
        "name": "User1",
        "role": "Developer",
        "city" : "Delhi",
        "rating" : 4
        },
        {
        "name": "User2",
        "role": "Admin",
        "city" : "Mumbai",
        "rating" : 2
        },
        {
        "name": "User3",
        "role": "Viewer",
        "city" : "Kolkata",
        "rating" : 3
        }
    ]
}

And will bind it with Table on View as -

view/View1.view.xml

<Table id="idProductsTable" items="{MySampleModel>/employees}" headerText="Employee Table" mode="SingleSelectMaster" selectionChange="onRowSelect">		
    <columns>
        <Column>
            <Text text="Employee Name" />
        </Column>
        <Column>
            <Text text="Role" />
        </Column>
        <Column>
            <Text text="City" />
        </Column>
        <Column>
            <Text text="Rating" />
        </Column>
    </columns>

    <items>
        <ColumnListItem vAlign="Middle">
            <cells>
                <Text text="{MySampleModel>name}" />
                <Text text="{MySampleModel>role}" />
                <Text text="{MySampleModel>city}" />
                <Text text="{MySampleModel>rating}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

And can define logic on Controller to get the details of selected row of table defined on selectionChange event of Table -

controller/View1.controller.ts

public onRowSelect(oEvent : any) : void {
    const selectedName = oEvent.getParameter("listItem").getBindingContext("MySampleModel").getObject().name ;
    const selectedRole = oEvent.getParameter("listItem").getBindingContext("MySampleModel").getObject().role ;
    const selectedCity = oEvent.getParameter("listItem").getBindingContext("MySampleModel").getObject().city ;
    
    // Show output
    MessageBox.information(
        "Employee Details:
" +
        "Name: " + selectedName + "
" +
        "Role: " + selectedRole + "
" +
        "Location: " + selectedCity
    );
}

5. Expression Binding

Expression Binding is writing small logic (conditions or calculations) directly inside the XML view.
It changes UI dynamically based on data.

So, from above Aggregation Binding example, if we wants to change the color of Rating color, we can define Expression Binding like -

view/View1.view.xml

<ObjectStatus text="{MySampleModel>rating}" state="{=${MySampleModel>rating} >=4 ? 'Success' : 'Warning'}"/>

--- END ---