Let's go to reuse SAPUI5

[former_member182650]

Motivation

First time we develop complex UIs/Views in SAPUI5 could write 1000-2000 lines in a view. Table creations, forms, layouts, etc. could produce several lines of code. Also we want to standarize our components with same aspect, same styles, same button icons, etc.

SAPUI5 offers a simple mechanism to reuse code: Fragments (https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Fragments.html).

This blog describes a simple example to create two SAPUI5 tables with one Fragment and reuse table code creation.

NOTE: As of the initial release of Fragments in version 1.15.0 of SAPUI5, they are marked as experimental, so the API can change at any time and they are not guaranteed to work properly.

Step by step

1. Declare your new fragments package.

Remember load new fragment resources in your html file:

sap.ui.localResources("fragment");

2. Create a fragment

This fragment creates a table with data binding, different type columns, etc.

sap.ui.jsfragment("fragment.Table", {

    createContent: function(oController) {

       //Obtain data from controller

       var aData = oController.fragmentInitData.data;

       //Create an instance of the table control

       var oTable = new sap.ui.table.Table({

            title: oController.fragmentInitData.title, //Obtain title from controller

            visibleRowCount: 7

       });

       //Obtain column definition from controller

       for (var i=0; i<oController.fragmentInitData.columns.length; i++) {

            var template;

            //Define the columns and the control templates to be used

            if (oController.fragmentInitData.columns[i].type == "Text")

                 template = new sap.ui.commons.TextView().bindProperty("text", oController.fragmentInitData.columns[i].bindingPath);

            else if (oController.fragmentInitData.columns[i].type == "Rating")

                 template = new sap.ui.commons.RatingIndicator().bindProperty("value", oController.fragmentInitData.columns[i].bindingPath);

            else if (oController.fragmentInitData.columns[i].type == "Checkbox")

                 template = new sap.ui.commons.CheckBox().bindProperty("checked", oController.fragmentInitData.columns[i].bindingPath)

            if (template != undefined) {

                 oTable.addColumn(new sap.ui.table.Column({

                 label: new sap.ui.commons.Label({text: oController.fragmentInitData.columns[i].title}),

                 template:  template,

                 sortProperty: oController.fragmentInitData.columns[i].bindingPath,

                 filterProperty: oController.fragmentInitData.columns[i].bindingPath,

                 width: "200px"

            }));

       }

  }

  var oModel = new sap.ui.model.json.JSONModel();

  oModel.setData({modelData: aData});

  oTable.setModel(oModel);

  oTable.bindRows("/modelData");

  //Initially sort the table

  oTable.sort(oTable.getColumns()[0]);

  //Bring the table onto the UI

  return oTable;

    }

});

3. Use your new fragment

In this view, we reuse the previous fragment twice:

//Define some sample data

var aData = createSampleData();

//Define fragment init data

oController.fragmentInitData = {

       title: "This is a Table Fragment Example",

       data : aData,

       columns: [{title: 'Last Name', bindingPath: 'lastName', type: "Text"},

                            {title: 'Name', bindingPath: 'lastName', type: "Text"},

                            {title: 'Selected', bindingPath: 'checked', type: "Checkbox"},

                            {title: 'Rating', bindingPath: 'rating', type: "Rating"}]

   };

//Instantiate fragment.Table with this init data "oController.fragmentInitData"

var table1 = sap.ui.jsfragment("fragment.Table", oController);

//Define some sample data again

var aData2 = createSampleData();

//Define fragment init data. Different init data this time (different title and less columns).

oController.fragmentInitData = {

       title: "This is a Table Fragment Example 2",

       data : aData,

       columns: [{title: 'Last Name', bindingPath: 'lastName', type: "Text"},

                            {title: 'Name', bindingPath: 'lastName', type: "Text"}]

   };

//Instantiate fragment.Table with this init data "oController.fragmentInitData"

var table2 = sap.ui.jsfragment("fragment.Table", oController);

var oDivider1 = new sap.ui.commons.HorizontalDivider("divider1");

oDivider1.setHeight(sap.ui.commons.HorizontalDividerHeight.Large);

//Present data into VerticalLayout

var oLayout = new sap.ui.layout.VerticalLayout({

       content: [table1, oDivider1, table2]

})

Result

EDIT: JSBin Example

We could reuse our JS code with functions (for example: createTable()), protyping "classes", etc. This is a different SAPUI5 standard way to create common Fragments to be reused in our apps as the same way with "Views".

Enjoy! :wink: