How to create forms with collapsible and expandable sections

Process Design Form Designer
1

You can make form sections collapsible and expandable using JavaScript and the FORM_FIELDS_COLLAPSED parameter.

  1. In the Form Designer, add a section called FORM at the top of the form. The code below will set it to hidden for every web form action.

  2. Add a textbox field with the ID FIELDS_COLLAPSED to the FORM section.

  3. On the Web References tab in the Form Designer configuration panel, check the Include jQuery API and jQuery UI libraries, and add the following code:

    <script type="text/javascript">

    if (typeof $selectedObject === "undefined") {
        $(document).ready(function () {
            // Hide the FORM section
            $("#FORM").css("display", "none");

            // Add the collapse image
            $("div.SectionHeader").append("<img style='float: right;' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAArElEQVQ4T+3SoQoCQRAG4O8Qq8Vg8Q0Eq9kHEIOPaTFo9AnMms1azCIiC7dwHHe7J1wSN+6yHzP/TKHnU/Ts+R1wjRcOuYi6tBywXQmtsE+hOTBgWwxL5IlNCk2BEXtgiQGOGKXQNrCOncsK5zm0CWzDYnRJtA7msCxaBbtiSTSCIfATpuUAYma5tYvtX7HAu1rhBGNcckrtfYYb7uE+t4df2n/w68AaPvQ+lA+eJicValFKQwAAAABJRU5ErkJggg=='>");

            // Collapse the sections defined in FORM_FIELDS_COLLAPSED
            if ($("#FORM_FIELDS_COLLAPSED").val() != "") {
                var sections = $("#FORM_FIELDS_COLLAPSED").val().split(",");
                for (i = 0; i < sections.length; i++) {
                    $("#" + $.trim(sections[i]) + " > div.SectionHeader").find("img").attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAtElEQVQ4T+3ToQrCUBQG4E8Fi9EkvoOYfAGTaPBFTRYNPoJF7GarTRCRwTbm2HavuKaDWzbOx9n5z+1o+em07PmD30+0OMMRhjh/yE5wTU8eSg9HjDHHKRKd4oALZngWO1xhg1skmmEDrLFLmiivTSxaiVWBybsQWovVgU1oI9YEVqHdNIC3mZXDC1297Pf7aeG9GEDVJoTArNNtWrzI0qxbqxgwqV3igX1oP2PBkJN//0HwBYpdJxXft7aqAAAAAElFTkSuQmCC");
                    $("#" + $.trim(sections[i])).find("div.Fields").css("display", "none");
                }
            }

            $("div.SectionHeader").click(function () {
                var $fields = $(this).parent().find("div.Fields");
                if ($fields.css("display") == "none")
                {
                    $(this).find("img").attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAArElEQVQ4T+3SoQoCQRAG4O8Qq8Vg8Q0Eq9kHEIOPaTFo9AnMms1azCIiC7dwHHe7J1wSN+6yHzP/TKHnU/Ts+R1wjRcOuYi6tBywXQmtsE+hOTBgWwxL5IlNCk2BEXtgiQGOGKXQNrCOncsK5zm0CWzDYnRJtA7msCxaBbtiSTSCIfATpuUAYma5tYvtX7HAu1rhBGNcckrtfYYb7uE+t4df2n/w68AaPvQ+lA+eJicValFKQwAAAABJRU5ErkJggg==");
                }
                else
                {
                    $(this).find("img").attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAtElEQVQ4T+3ToQrCUBQG4E8Fi9EkvoOYfAGTaPBFTRYNPoJF7GarTRCRwTbm2HavuKaDWzbOx9n5z+1o+em07PmD30+0OMMRhjh/yE5wTU8eSg9HjDHHKRKd4oALZngWO1xhg1skmmEDrLFLmiivTSxaiVWBybsQWovVgU1oI9YEVqHdNIC3mZXDC1297Pf7aeG9GEDVJoTArNNtWrzI0qxbqxgwqV3igX1oP2PBkJN//0HwBYpdJxXft7aqAAAAAElFTkSuQmCC");
                }
                $(this).parent().find("div.Fields").toggle("blind", 500);
            }).mouseover(function() {
                $(this).css("background-color", "#5892ED");
            }).mouseout(function() {
                $(this).css("background-color", "#72A3EF");
            }).attr("title", "Click to collapse or expand").css("cursor", "pointer");
        });
    }
</script>

  4. For every web form action, add the FORM_FIELDS_COLLAPSED parameter with a comma-separated list of section IDs for the sections you want to display collapsed when the form is first loaded.

Download the 2 Levels Approval Collapsed sample process, unzip it, and import the XPDL into WorkflowGen to see it in action.

2

This sample works great. But, for example if I put ac dropdown and a function on the SelectedIndexChanged event, the forms sections defined as collapsed always collapse back at each postback.

Is it possible to keep the actual collapse state at each postback???

3

I was having trouble getting the script to run. Step 2 in the instructions say to give the textbox the ID value of “FORM_FIELDS_COLLAPSED” but it should be just be “FIELDS_COLLAPSED”.

1 Like
4

Hi James,

Yes, you are correct. The textbox field ID is always automatically prefixed by the section ID which in this case is FORM.

5

Hi James,

Thanks for letting us know. We corrected the error and clarified some of the instructions.

6

Is there a way to reference the current action step or active form section that is not hidden or read only to change the background color of the section title? Such as making the background color green behind the active form section title to quickly visually reinforce what section is active. I am using the Form Designer method and javascript or .Net code would be available to me.

Thanks,

James

7

Hi James,

In code behind, you can use the property CurrentWorkflowActionName to identify which action you are currently on. And to change the background color, you can use the BackColor attribute of the section’s panel control.

For example:

if(CurrentWorkflowActionName == "REQUEST"){
   // REQUEST is the ID of the section
  REQUEST.BackColor = System.Drawing.Color.LightGreen; 
 }

Here is a list of all the different colors that you can use:
https://msdn.microsoft.com/en-us/library/system.drawing.color(v=vs.110).aspx

Regards,
Eddy.