SAPUI5 Reusable Table Fragment Data Binding

user_19509273 0
Viewed 111

I am starting to develop SAPUI5, trying to apply concepts and best practices from other web dev toolkits I know so far, please be kind as my knowledge is still fairly limited.

I want to re-structure a project and replace copy-paste code with reusable parts. Custom controls are not the right way as far as I checked, basically it is purely standard functionality of a SAPUI5 control with different data binding. The data binding and propagation should be done via XML as it fits the project architecture best, my initial idea was to use fragments.

Sample: An identical table should be used multiple times in the same view and in different views, single model with different object arrays.

Fragment:

    <Table items="{???}">
        <columns>
            <Column >
                <Text text="Name"/>
            </Column>
            <Column>
                <Text text="Amount"/>
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <ObjectIdentifier title="{dataModel>name}"/>
                    <Text text="{dataModel>amount}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</core:FragmentDefinition>

Model:

let oTemp = new JSONModel({
    data: {
        a: [{
            name: "Product 1 Entry 1",
            amount: "Product 1 Amount 1"
        }, {
            name: "Product 1 Entry 2",
            amount: "Product 1 Amount 2"
        }],
        b: [{
            name: "Product 2 Entry 1",
            amount: "Product 2 Amount 1"
        }, {
            name: "Product 2 Entry 2",
            amount: "Product 2 Amount 2"
        }]
    }
});
this.getView().setModel(oTemp, "dataModel");

XML View Usage:

<core:Fragment objectBindings="dataModel>/data/a" type="XML" fragmentName="...view.ReusableTable"></core:Fragment>
<core:Fragment objectBindings="dataModel>/data/b" type="XML" fragmentName="...view.ReusableTable"></core:Fragment>

I tried various ways to bind the item aggregation in the table or the fragment itself, without success. As hopefully shown in this sample, I want to pass a specific model property to the fragment and its table to display a different set of items (a or b) without the use of javascript in the view controller.

Desired Output:

2 Tables, identical header (Name, Amount column) with 2 rows each using data from datamodel, property a [] and b []

From what I saw in the SAPUI5 library offering regarding code reuse, fragments should be the best way to achieve this result as no additional controller logic is required to display | interact. I would appreciate any suggestions how to approach this, or maybe change the approach in general if necessary? Thank you lots!

sapui5 xml javascript
2 Answers

Turns out it wasn't that complicated after all.

https://plnkr.co/edit/ssWEKqICoY5il5o3

Fragments (and basically every other control which is a ManagedObject) have a property binding. Set this to your fragments:

<core:Fragment binding="{dataModel>/data/a}" fragmentName="ui.Table" type="XML" />
<core:Fragment binding="{dataModel>/data/b}" fragmentName="ui.Table" type="XML" />

To reuse this binding inside your fragment just point relatively to the current context (which is basically no path at all)

<Table items="{dataModel>}">

If your JSONModel had no name you would literally write items="{}" to get the same result.

user_10839210

for XML:

<core:Fragment fragmentName="fragmentlocation.fragmentName" type="XML"/>

controller binding:

if (!this._DialogFragment) {
    Fragment.load({
    id: oView.getId(),
    name: "fragmentlocation.name",
    controller: this
  }).then((oDialog) => {
    this._DialogFragment = oDialog;
    oView.addDependent(this._DialogFragment );
    this._DialogFragment.open();
  });
} else {
  this._DialogFragment.open();
}
user_163526550
Related