Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results forΒ 
Search instead forΒ 
Did you mean:Β 
perezjquim
Explorer
Hello everyone,

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.

 




For more UI5-related resources, feel free to:
– Follow the UI5 topic
– Post/answer UI5-related questions
– Read other UI5-related posts

 

Best regards,

Joaquim Perez



1 Comment
Labels in this area