Skip to Content
Technical Articles
Author's profile photo Kiran Pawar

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%201

screen 1

 

Initial Page & Object Page is as shown in below screenshots

screen2

screen 2

 

screen%203

screen 3

Object Page Edit Screen

screen%204

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%205

screen 5

2. In Preview screen, click on the record to go to Object Page.

screen%206

screen 6

3. Go to the Edit Mode of Visual Editor.

screen%207

screen 7

We can Select Collapse Right Panel to view expanded Screen.

screen%208

screen 8

4. Select field we want to be hidden on Unchecking checkbox.

screen%209

screen 9

5. Set property Visible to Make sure field selected in editor is SmartField.

screen%2010

screen 10

6. Save the changes. You can see the field is hidden for which we set Visibility to False in Preview screen.

screen%2011

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%2012

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%2013

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%2014

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%2015

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%2016

screen 16

11. Set Property – Visible=False & save the changes.

screen%2017

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%2018

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%2019

screen 19

screen%2020

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

 

 

 

 

Assigned tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.