Skip to Content
Author's profile photo Timo Haberkern

CRUD UI5 Table-Data with an Action Column

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.

2014-09-03 09_04_09-crud-toobar.png

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.

2014-09-03 09_04_09-crud-actioncolumn.png

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

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);           
        [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


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.