This blog was years in the making, but finally here it is 😊

In short words, I’ll be addressing one hack I’ve been recurring to in almost every SAP Fiori Elements application development – the expanded usage of Visual Changes.

Introduction

Over the years, we’ve been able to add visual changes to SAP Fiori Elements applications (without any code involved) – e.g, to enable Export to Excel functionalities, to enable auto binding of a table. That is either possible through the following ways:

• Through Visual Editor (back in the days of ol’ SAP Web IDE) – example
• Through Guided Development / Page Map (in BAS) – example

However, in either tool there are limitations in terms of which controls we can select and what can we alter.

Luckily, by looking at the resulting .change files (generated by either tool, and stored in the changes folder), I found out there is a linear pattern that each one has, revolving the control, the control property and the control property value.

After testing and messing with it for a bit, I came to the conclusion that I could create my own .change files and/or adjust the existing ones to other needs – to apply to other controls, to apply to other control properties, … – having a broader usage of this functionality.

How-to

Basically, all you need to do is the following:

• Get yourself a .change file to modify (you can create one from scratch or copy from another one)
  • To ease this step, for example, you can start by enabling Export to Excel, leading to the generation of a .change file:

• Having a .change file, you can proceed and adjust the following:
  • That is:
    • selector.id – the control ID
    • selector.type – the control type
    • content.property – the property you intend to change
    • content.newValue – the intended property value
  • Exemplifying, let’s imagine we intend to change the “Go” button to a green one – resulting in the following:
    • selector.id – “com.perezjquim.demo.testvisualchanges::sap.suite.ui.generic.template.ListReport.view.ListReport::Products–listReportFilter-btnGo” (you can find the ID by looking it up in the UI5 Inspector, for example)
    • selector.type – “sap.m.Button”
    • content.property – “Type”
    • content.newValue – “Accept”
  • Resulting in the following .change file:
    
• With those modifications applied, we should see the results (and see the “Go” button change its appearance)
  • Before:
    
  • After:
    

Observations

As you can see, with a given control ID, a property and an intended value, we can pretty much alter it to our needs.

Fun fact: by manually adjusting these .change files, you can also bind values to the control properties. Exemplifying:

Also, consider that you can only use this method for controls identified with a stable ID, otherwise it won’t work.

Conclusion

To conclude, you are not limited to the generated Visual Changes, since you can make a wider scope of Visual Changes by manually creating/changing .change files. From my experience, I can tell this is a easy way to visually adapt (even more 😊) your Fiori Elements apps to your needs without any code whatsover, leaning torwards clean and fitting solutions for your intended scenarios.

Any questions/comments/suggestions?

Feel free to leave them down below.