Create Icon programmatically with custom data and layout property

user_7926415 0
Viewed 198

I'm trying to create programmatically this Icon from xml view

<core:Icon
      src="sap-icon://sys-help-2"
      class="size1"
      dataHelp:description="{i18n>path.to.description}"
      width="100px"
      color="#1C4C98" >
      <core:layoutData>
            <l:GridData span="L1 M1 S1" />
      </core:layoutData>
</core:Icon>

I could figure out easy props:

  const icon = new sap.ui.core.Icon({
    src: 'sap-icon://sys-help-2',
    color: '#1C4C98',
    width: '100px'
  })
  icon.addStyleClass('size1');

but for dataHelp:description and <core:layoutData> I have no idea and cannot find any good examples. Is it possible by any chance?

sapui5 javascript
1 Answers

Nested properties (aka aggregations) can also created with new.

sap.ui.require([
    "sap/ui/core/Icon",
    "sap/ui/layout/GridData"
], function(Icon, GridData) {
    const oGridData = new GridData({ span: "L1 M1 S1" });
    const oIcon = new Icon({
        src: "sap-icon://sys-help-2",
        color: "#1C4C98",
        width: "100px",
        layoutData: oGridData
    });
    oIcon.data("description", this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("path.to.description"));
});

I have never heard of dataHelp:description and cannot find it in any UI5 API.

Custom data can be added with oControl.data("key", "value");

user_10839210
Related