UI5 – Usage of Visual Changes in SAP Fiori Elements
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.
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.
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:
- That is:
- With those modifications applied, we should see the results (and see the “Go” button change its appearance)
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.
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.
Feel free to leave them down below.
For more UI5-related resources, feel free to:
– Follow the UI5 topic
– Post/answer UI5-related questions
– Read other UI5-related posts
Great work doing reverse engineering of .change generation logic, it shows the power of the concepts in SAPUI5 flexibility.
Regarding your idea to broaden a usage of changes by manual creation / editing of the files, the UI5 team wants to set a clear warning, as there’s a good reason, why the SAPUI5 Visual Editor does not offer extension options for some controls and properties: This is because they are not considered stable from the SAP Fiori elements or application side and might be modified in an incompatible way and break the extension logic. Please do not use this hack for productive apps as SAP does not support such cases.
If you feel important extension options are missing, please raise them in the community so the UI5 team can investigate and implement. Thanks a lot!