Hi All,
Welcome to my first blog on SAP Fiori Elements. 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.
screen 1
Initial Page & Object Page is as shown in below screenshots
screen 2
screen 3
Object Page Edit Screen
screen 4
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.
screen 5
2. In Preview screen, click on the record to go to Object Page.
screen 6
3. Go to the Edit Mode of Visual Editor.
screen 7
We can Select
Collapse Right Panel to view expanded Screen.
screen 8
4. Select field we want to be hidden on Unchecking checkbox.
screen 9
5. Set property
Visible to Make sure field selected in editor is
SmartField.
screen 10
6. Save the changes. You can see the field is hidden for which we set Visibility to False in Preview screen.
screen 11
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.
screen 12
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.
screen 13
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.
screen 14
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.
screen 15
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
screen 16
11. Set
Property – Visible=False & save the changes
.
screen 17
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.
screen 18
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
screen 19
screen 20
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.
Thank you .
Reference:
https://sapui5.netweaver.ondemand.com/#/topic/4754094fbf4046e88271d9ca881ceaa1.html