Skip to Content

The challenge was as follows: it was necessary to select from the database information to compare the values โ€‹โ€‹in the columns (sent and confirmed) in the case where the values โ€‹โ€‹were different from each other – it was necessary to simplify to highlight search problematic records.

For a start create controller and define model (messagesSearchResult) to save result of query. Also define url to query (searchMessages).


sap.ui.controller("controller_name.page", {
    models: {
        messagesSearchResult: null
    },
    urls: {
        searchMessages: "/XMII/Illuminator?QueryTemplate=PATH/TO/query&Content-Type=text/xml"
    },

Then create init-function, where create XML-object (new sap.ui.model.xml.XMLModel()) and connect functions for started, completed and failed request.


    onInit: function() {
      this.models.messagesSearchResult = new sap.ui.model.xml.XMLModel();
      this.models.messagesSearchResult.attachRequestCompleted(this._dataLoadingFinished)
      this.models.messagesSearchResult.attachRequestFailed(this._dataLoadingFinished)
      this.models.messagesSearchResult.attachRequestSent(thisLoadingStarted);
    },

Next step, create main function where binding request data with Table control and connect function to manipulation with request data.


    searchMessages: function() {
      var t = this.byId('searchResultTbl'); // get Table element from page
      t.setModel(this.models.messagesSearchResult); // connect XML-model to Table element at page
// aggregation binding data from XML-path (/Rowset/Row) to Table rows
// and manipulation with data by function _addTableRows(this.models.messagesSearchResult).
// At the end, loading data from query by url. (this.models.messagesSearchResult.loadData())
      t.bindAggregation("rows",
      {
          path: "/Rowset/Row",
          factory: $.proxy(this._addTableRows(this.models.messagesSearchResult), this)
      });
      this.models.messagesSearchResult.loadData(this.urls.searchMessages, {}}, false, "POST");
    },

Finally, function to manipulate data and highlight ‘problem” cells.


    _addTableRows: function (oContext) {
      var _this = this; // save handler _this to controller
      var backgroundColor = '#fcdd82'; // define background-color for "problem" cells
      var ConfRecColumn, SentRecColumn;
      var TMP_REC;
      // Compare this field with next.
      // Bind property (CONF_REC) from XML-model to new TextField value and save it to temporary variable (TMP_REC).
      // By jQuery set attribute readonly to true ($('#' +  this.getId()).attr("readonly", true)).
      // Set this TextField not editable (this.setEditable(false)).
      var ConfRecColor = new sap.ui.commons.TextField().bindProperty("value", "CONF_REC", function(cellValue){
    
        $('#' +  this.getId()).attr("readonly", true);
        this.setEditable(false);
        _this.TMP_REC = cellValue;
        return cellValue;
      });
      // Compare this field with previous and highlight if doesn't match.
      // Bind property (SENT_REC) from XML-model to new TextField value and compare it with temporary variable (TMP_REC).
      // By jQuery set background-color if doesn't match ($('#' +  this.getId()).parent().parent().css("background-color", backgroundColor)).
      // Or remove by jQuery attribute style if previous and this values is match ($('#' +  this.getId()).parent().parent().removeAttr('style')).
      // By jQuery set attribute readonly to true ($('#' +  this.getId()).attr("readonly", true)).
      // Set this TextField not editable (this.setEditable(false)).
      var SentRecColor = new sap.ui.commons.TextField().bindProperty("value", "SENT_REC", function(cellValue){
        if(cellValue != _this.TMP_REC)
        {
          $('#' +  this.getId()).parent().parent().css("background-color", backgroundColor);
        }
        else
        {
          $('#' +  this.getId()).parent().parent().removeAttr('style');
        }
        $('#' +  this.getId()).attr("readonly", true);
        this.setEditable(false);
        return cellValue;
      });
      this.byId('searchResultTbl').getColumns()[11].setTemplate(ConfRecColor); // set template, which we prepare above ConfRecColor
      this.byId('searchResultTbl').getColumns()[12].setTemplate(SentRecColor); // set template, which we prepare above SentRecColor
    },

At the end define functions for started, completed and failed request.


    _dataLoadingStarted: function() {
      sap.ui.core.BusyIndicator.show();
    },
    _dataLoadingFinished: function(oEvent) {
      sap.ui.core.BusyIndicator.hide();
      if (oEvent.getId() == "requestFailed") {
        sap.ui.commons.MessageBox.alert(oEvent.getParameter('message'));
      }
    }
}); // close controller body

Demonstration how it works (blue and red blocks combined cells, wich must be identical).

1.JPG

Full controller script: at JSFiddle

To report this post you need to login first.

5 Comments

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

  1. Kostia Kharchenko

    Thanks Kirill,


    its a nice example and you have used templates and factory functions here a lot!

    Maybe you know how to use different Controls for specific values.

    For example:

    if row is “manual”, then value should use TextField control

    if row is “automatic”, then value should use Label control (not editbale)

    test.PNG

    Here is my JSBin example, which anyone can improve if you have ideas.

    Thank you,

    Kostia

    (0) 
    1. Kirill Levitskiy Post author

      Hi, Kostia,

      I try to make easy solution:

      Create temporary variable for save status Manual or Automatic:

              var _this = this;

              var isEditable;

      In column with values “Manual/Automatic” get current value and save result in temporary variable:

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

                  label: new sap.ui.commons.Label({text: “Type”}),

                  template: new sap.ui.commons.Label().bindProperty(“text”,”entryType”, function(cellValue){ 

                  if(cellValue == ‘Manual’)

                  {

                      _this.isEditable = 1;

                  }

                  else

                  {

                      _this.isEditable = 0;

                  }

                  return cellValue; 

                })

              })); 

      In next column check isEditable and make current cell editable or readonly:

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

                  label: new sap.ui.commons.Label({text: “Value”}),

                  template: new sap.ui.commons.TextField().bindProperty(“value”, “value”, function(cellValue){  

                  if(_this.isEditable)

                  {

                      this.setEditable(true);

                  }

                  else

                  {

                      this.setEditable(false);

                  }

                  return cellValue; 

                })

              })); 

      Here is example: JSBin

      (0) 
        1. Kirill Levitskiy Post author

          Kostiantyn, for example:


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

                      label: new sap.ui.commons.Label({text: “Value”}),

                      template: new sap.ui.commons.TextField().bindProperty(“value”, “value”, function(cellValue){ 

                      if(_this.isEditable)

                      {

                          this.setEditable(true);

                      }

          Here “this” – TextField object, “_this” – context-variable of page controller.

          (0) 

Leave a Reply