Wednesday, September 24, 2014

Create Info Path Accordion (Show Hide Section)

Previously i worked on the project which used InfoPath form. The Form had many sections and each section had scrolling and lot of data. I needed to introduce accordion in the form. I needed to add buttons to show hide any section of the form so that user can focus on what is required. InfoPath is different than the normal JQuery accordion where you can hide or show any thing based on script or just CSS. In InfoPath you need to add behavior and Rules for each button and section which we want to hide or we want to use as changing behavior or variable. Following is the how i achieved it,
1- First thing first, add two picture buttons (Having up and down pictures).  

2- Add Boolean variable ESShow and set its default value as 0 if you want to hide section when InfoPath form loads otherwise set its default value 1.


3- Add section on the form and add Formatting rule. Set the condition: when ESShow variable is 0, section should hide.


4.a- Now it is time to add rules on the picture buttons. Lets us take Down button first The first rule is the formatting rule. We do not want to show this button when section is already shown. So we need to hide this button when ESShow variable is 1.


4.b- The second Rule on the down button is, when this button is clicked, it should tell infopath form that user need to show this section so we will set ESSHow to 1 on this button click.





5.a- Let us move to up button rules. The first rule is the formatting rule. We do not want to show this button when section is already closed. So we need to hide this button when ESShow variable is 0.








5.b- The second Rule on the up button is, when this button is clicked, it should tell infopath form that user need to hide this section so we will set ESSHow to 0 on this button click.




The Final InfoPath file in Designer would look like this



If you preview the InfoPath file, it would look like this, at a time one button is there. When section is closed, it would display the down button and when section is opened, it would show up button.






No comments:

Post a Comment