CRUD UI5 Table-Data with an Action Column

[former_member202858]

In Enterprise applications you very often use CRUD-Operations (Create, Retrieve, Update, Delete) on a set of data. Most UI5 applications are using a Table with Toolbar-Buttons to trigger the operations for the selected Table-Items.

Most applications in the Non-SAP space are using a different Look&Feel with the operations available for a row item placed in a so called Action Column on the right side of the table.

This kind of Look&Feel can be realized with UI5 too. The upcoming sourcecode is meant only for demonstration. Please keep in mind that you probably will have to transfer this in a more MVC-like structure for a real-world application implementation.

First we create a Table control with JavaScript:

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

    selectionMode: sap.ui.table.SelectionMode.None

}

Nothing special so far. The most interessting part is the creation of the action column:

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

    label: 'Actions',

    width: '100px',

    template: new  sap.ui.commons.layout.HorizontalLayout({

      content: [

        new sap.ui.commons.Button({

          style: sap.ui.commons.ButtonStyle.Reject,

          icon: 'sap-icon://delete',

          press: onPressDelete

        }),

        new sap.ui.commons.Button({

          icon: 'sap-icon://edit',

          style: sap.ui.commons.ButtonStyle.Emph,

          press: onPressEdit

        }).addStyleClass("actionButton")

      ]

    })

  }));

That's enough to get the table column with two buttons for the Delete- and Edit-Action rendered. The following code shows you how you can obtain the clicked row item for the delete action, fire up a confirm message box.

function onPressDelete(e) {

            var model = this.getModel();

            var elements = model.getData();

            var path = this.getBindingContext().getPath();

            var idx = parseInt(path.substring(path.lastIndexOf('/')+1));

           

            sap.ui.commons.MessageBox.confirm("Delete '"+elements[idx].lastName+"'?", function(bResult) {

                if (bResult == true) {

                  elements.splice(idx, 1);           

                  model.setData(elements);

                 

                  sap.m.MessageToast.show(JSON.stringify(elements[idx]) + ' removed');

                }  

            }, "Demo");

          }

The same can be used for the Edit-Action. Here is the Link to the complete sourcecode on JSBin

Hope this helps. Please let me know if you have any additions / ideas / questions

Timo