Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
0 Kudos

in my all components until Design Studio SDK: Data Bound Top/Flop Chart I had a full repaint after every selection. Then I asked myself how to figure out if the content has changed or if only selection has changed.. here the (not neccessary best) practice how this is possible.


this is based on the functions available form 1.3 SP1, as in the blog SAP UI5 SDK - Component Life Cycle.


alsways serialize all properties (in generic way) with some excluding list. if the serialization is different, rerender. if same - just update the properties which are on the excluding list.

Script for Serialization

By this script I could get a dynamic serialization of all given properties:

  _serializeProperites : function (excluding){
    var props = this.oComponentProperties.content.control;
// should also work if no excluding parameter is given
    if(excluding == undefined) {
      excluding = "";
// create some primitive string and loop on all properties
    var serialization = "";
    for (var key in props) {
      if (props.hasOwnProperty(key) && excluding.indexOf(key) == -1) {
        serialization = serialization + key + "->" + props[key] + ";";
    // serialize also width, or other size values (here only width is important)
serialization = serialization + "W->" + this.oComponentProperties.width;
  serialization = serialization + "H->" + this.oComponentProperties.height;
// data (for data based components)
  serialization = serialization + "DATA->" + JSON.stringify(this._data);
  serialization = serialization + "METADATA->" + JSON.stringify(this._metadata);
    return serialization;

Where to bind the check

the check must be executed in some method which is called after all properties from current response are updated - this will be:

afterDesignStudioUpdate : function() {

the script is quite basic:

var propertiesNow = this._serializeProperites("selectedKey;pressedKey");
if(this._serializedPropertiesAfter != propertiesNow) {
  this._serializedPropertiesAfter = propertiesNow;
  rerender = true;

and then you can simply have a flow...

if(rerender) {
  // destroy old content and recreate
} else {
  // update existing content


by this you can save a lot of rendering time in quite easy way.