In this blog post, I’ll try to demonstrate how to enable dynamic visibility of filters in object page based on checkbox filter selection.
Requirement:
We have a requirement to enable/disable some input fields in Fiori Elements Object Page based on checkbox provided is selected/unselected
Solution:
We will do some modification using visual editor & make changes in file created by visual editor changes folder.
Here are the steps to follow:
We have Fiori Element List Report Application created using pre-developed CDS view on S4 Hana System.
Initial Page & Object Page is as shown in below screenshots
Object Page Edit Screen
In object Page Edit screen, We will disable Expiry Date Format combo box if Expiry Date checkbox is unchecked. Similar with Manufacture Date Format combo box, we will disable if Date of Manufacture is unchecked.
Expiry Date Format & Manufacture Date Format filters only enabled if user checks the corresponding filters.
1. Open SAP Visual Editor for current application.
2. In Preview screen, click on the record to go to Object Page.
3. Go to the Edit Mode of Visual Editor.
We can Select Collapse Right Panel to view expanded Screen.
4. Select field we want to be hidden on Unchecking checkbox.
5. Set property Visible to Make sure field selected in editor is SmartField.
6. Save the changes. You can see the field is hidden for which we set Visibility to False in Preview screen.
After changes are saved, you can see new folder being created named changes with one file id_16xxxxxxxxxx….
For each visual editor change we make, there will be new id file gets created in the changes folder.
7. Open the file created in changes folder.
We can see the structure of file in screenshot attached. Highlighted field in line 13 is property of field hidden & newValue in line 10 is property we set.
8. Make following changes at highlighted places.
“changeType”: “propertyBindingChange”
“content”: {
“property”: “editable”,
“oldValue”: true,
“newBinding”: “{chkboxProperty}”The screen will look like as attached screenshot after making the changes.
9. Save the changes & open visual editor again.
We can see in the screenshot, the inline relevant filters for checkbox are getting enabled/disabled.
Repeat the steps 4 to 9 for all Other filter to be disabled dynamically.
If some mistakes/errors/issue comes because of changes in ID file, we can just delete the file & follow the same procedure again.
We can set multiple input fields Enabled/Disabled or Visible/invisible on single checkbox selection as well.
Now We will try to hide last 8 input field/checkbox in Object Page based on Batch Quantity checkbox selection.
10. Open Visual Editor- Preview-Go to Object Page-Click on Edit-Object Page Edit Mode – Select Smart field for Filter to be hidden
11. Set Property – Visible=False & save the changes.
12. Go to the ID file created & do following changes.
“changeType”: “propertyBindingChange”
“content”: {
“property”: “visible”,
“oldValue”: true,
“newBinding”: “{chkboxProperty}”The screen will look like as attached screenshot after making the changes.
Follow step 10 to 12 for all other remaining fields/inputs to be hidden dynamically, save changes & open visual editor to test.
We can see in below screenshot, on checking Batch Quantity checkbox, all 8 inputs above get visible & vice versa
Sometimes changes made using Visual Editor doesn’t reflect when we run in browser locally. So I recommend always test changes in Visual Editor or in Launchpad after deployment.
