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
        }).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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply