CODEWITHSUNDEEP
sapui5sap-fiori
andresmafra
andresmafra

Reputation: 491

Dynamic ID in XML view

Experts,

I need to declare an dynamic ID into a XML view in my extended Fiori app. I need this because I need to set an image src based on Item value.

Is there a way to do something like this?

<Image id="myImage{MyModelProperty}" />

Regards, Andre

Upvotes: 0

Views: 3974

Answers (2)

Haojie
Haojie

Reputation: 5713

The calculated field will serve your requirement.

1.Set the flag in bootstrap configuration data-sap-ui-xx-bindingSyntax="complex". Details is here

2.Define a formatter function in your controller js.

imageFormatter : function(value) {
    var imageSrc = "myImage" + value;
    return imageSrc;
}

3.Declare the Image in the XML view as following

<Image src="{path:'MyModelProperty',formatter:'.imageFormatter'}"/>

Hope it will solve your issue.

Upvotes: 2

nistv4n
nistv4n

Reputation: 2535

As far as I know IDs can not be built from model properties. Why do you want to build the ID of the image instead of it's src property? If you want to make sure the uniqueness of image ID, then just let the framework to handle it.

If you use the src property with model binding, changes of the underlying model property will take effect on the UI immediately. Just call the setProperty("MyModelProperty", "new_image_postfix") on your model instance.

Short example with a button and it's text binding:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.ui.commons"
            data-sap-ui-theme="sap_goldreflection">
    </script>
    <script type="text/javascript">
      var oModel = new sap.ui.model.json.JSONModel();
      oModel.setData({txt: "Sample"});
      sap.ui.getCore().setModel(oModel);
      var oButton = new sap.ui.commons.Button({id:"testBtn", text:"{/txt}", press:function(oEvent) { oModel.setProperty("/txt", "SampleUpdated") } });
      oButton.placeAt("content");
    </script>
  </head>
  <body class="sapUiBody" role="application">
    <div id="content"></div>
  </body>
</html>

Upvotes: 1

Related Questions