Fiori Elements- (List Report /Object Page)-Enable/Disable/Hide/Unhide input field based on checkbox selection dynamically using Visual Editor

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