Assign image source dynamically in XML View in Fiori app in SAP UI5

Yes, it can be done but you need to compute the dynamic field using a formatter function. This approach allows you to dynamically assign image sources based on data from your model in SAP UI5 XML views.

Steps to Assign Dynamic Image Source

To implement dynamic image source assignment, follow these three steps ?

Step 1: Enable Complex Binding Syntax

First, you need to mention that the binding is complex so change the flag in your HTML file ?

data-sap-ui-bindingSyntax="complex"

Step 2: Create a Formatter Function

Then have a helper function which can be used for formatting. This function will be called to compute the dynamic image path ?

fnImageFmtr: function(value) {
    var imgSrc = "Image" + value;
    return imgSrc;
}

This formatter function takes the model property value and concatenates it with "Image" to create the complete image source path.

Step 3: Apply Formatter in XML View

And lastly, use the function in the image tag in the XML view ?

<Image src="{path:'<Model Property>',formatter:'.fnImageFmtr'}"/>

Replace <Model Property> with your actual model property name. The formatter function will be called automatically when the binding is evaluated, and the returned value will be used as the image source.

Complete Example

Here's how it would look with a concrete example ?

<Image src="{path:'ProductType',formatter:'.fnImageFmtr'}"/>

If the ProductType value is "Electronics", the formatter will return "ImageElectronics" as the image source.

Conclusion

By using complex binding syntax with formatter functions, you can dynamically assign image sources in XML views based on model data, providing flexible and data-driven image rendering in your Fiori applications.