sap.suite.ui.commons.networkgraph.ElementAttribute: wrapping behavior and text align of label and value should be configurable via properties

[rpbouman]

OpenUI5 version: 1.76.1

Attribute labels and values in the networgraph will always wrap using hyphenation, always left aliging the labels and right aliging the values.

One can debate about whether these are appropriate defaults, but what seems a shortcoming in the design is that it is impossible to influence this behavior.

The source where it happens is

https://sapui5.hana.ondemand.com/1.76.1/resources/sap/suite/ui/commons/networkgraph/ElementAttribute.js

The code that does the rendering is:

    a.prototype._getLabelControl = function(r) {
        if (!this._oLabel) {
            this._oLabel = new T(this.getId() + "-label",{
                textAlign: "Left",
                wrappingType: "Hyphenated"
            }).addStyleClass("sapSuiteUiCommonsNetworkGraphDivNodeText");
        }
        this._oLabel.setText(this.getLabel());
        return this._oLabel;
    }
    ;
    a.prototype._getValueControl = function(r) {
        if (!this._oValue) {
            this._oValue = new T(this.getId() + "-value",{
                textAlign: "Right",
                wrappingType: "Hyphenated"
            }).addStyleClass("sapSuiteUiCommonsNetworkGraphDivNodeText");
        }
        this._oValue.setText(this.getValue());
        return this._oValue;
    }
    ;

The constructor T happens to be a simple sap.m.Text control.
Things can be improved a lot by simply adding a few properties, and using the property getters instead of hard values for textAlign and wrappingType:

    metadata: {
      properties: {
        labelTextAlign: {type: "sap.ui.core.TextAlign", defaultValue: TextAlign.Left},
        labelWrapping: {type: "boolean", defaultValue: true},
        labelWrappingType: {type: "sap.m.WrappingType", defaultValue: WrappingType.Hyphenated},
        valueTextAlign: {type: "sap.ui.core.TextAlign", defaultValue: TextAlign.Right},
        valueWrapping: {type: "boolean", defaultValue: true},
        valueWrappingType: {type: "sap.m.WrappingType", defaultValue: WrappingType.Hyphenated}
      }
    },
    _getLabelControl: function(){
      if (!this._oLabel) {
        this._oLabel = new Text(this.getId() + "-label", {          
          textAlign: this.getLabelTextAlign(),
          wrapping: this.getLabelWrapping(),
          wrappingType: this.getLabelWrappingType()
        }).addStyleClass("sapSuiteUiCommonsNetworkGraphDivNodeText");
      }
      this._oLabel.setText(this.getLabel());
      return this._oLabel;
    },
    _getValueControl: function() {
      if (!this._oValue) {
        this._oValue = new Text(this.getId() + "-value",{
          textAlign: this.getValueTextAlign(),
          wrapping: this.getValueWrapping(),
          wrappingType: this.getValueWrappingType()
        }).addStyleClass("sapSuiteUiCommonsNetworkGraphDivNodeText");
      }
      this._oValue.setText(this.getValue());
      return this._oValue;
    },

[tsanislavgatev]

Hello @rpbouman,

The sap.suite.ui.commons.NetworkGraph is not a part of OpenUI5 framework and for that reason I am closing this issue.

Best Regards,
Tsanislav

[rpbouman]

Hi @tsanislavgatev

thanks, fair enough.

[boghyon]

@tsanislavgatev Is there a legal restriction that customers are not allowed to report SAPUI5 bugs on GitHub in general? If not, how about creating another repo just for the SAPUI5 issues? Or any other ideas to make reporting, discovering, and discussing SAPUI5 bugs as easy as possible?