Recently I came across a requirement from a client to implement expand/collapse functionality on an Adxstudio Entity Form.

As the form had 91 fields grouped into several sections, the rendered entity form had a long vertical scroll. From the very limited number of ways to customize an Adxstudio Entity Form, I chose to get this task done using a custom JavaScript to move around elements of the generated HTML document and inject CSS styles and JavaScript event handlers.

Structure of the Rendered Entity Form

When the Adxstudio entity form that I wanted to work with gets rendered, it had the following element structure originally.

 

Which rendered as below in the browser.

implement-expand-collapse-functionality-on-sections-of-an-adxstudio-entity-form

Therefore, I wanted to figure out an element which I can uniquely identify a section where I insert a button to show and hide a section. I decided that the <legend> element is the best element that I can use because it had the sections’ name in it. I used the JavaScript given below to move the sections and apply styles. This JavaScript could be placed in the “Custom JavaScript” attribute of the entity form record.

 

Outcome of the above Script

The outcome of the above script will look similar to the screen capture below.

outcome-of-script

 

If you inspect the HTML of the rendered entity form, it would be similar to the screen capture below.

html-of-rendered-entity-form

 

Even at times where you can’t make any modifications to the Adxstudio out of the box components, you’d be still able to customize the entity form like this using JavaScript.

That’s from me for now folks, Till I share another problem/solution I faced in a future post.. Happy ‘Ming!!