Let’s go to reuse SAPUI5

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! 😉