** PLEASE NOTE: In order to use the PANELS feature, you must be using
DNN6+ and Data Springs Module Dynamic Forms 4.0.
Often when you want to collect information from people, you run into instance where you would prefer some of the information to be displayed later, instead of all of it at once.
There are several reasons for this, such as.
- You don't want to 'overload' the website visitor visually, by giving the impression that filling out the form will take too long.
- You want to capture basic information now, but want to give the person filling out the form the option to submit additional details later. (as the example below).
- You may want 'blocks of questions' to suddenly load based on the answer of another question.
In the past, some of the hiding and revealing of data through the stages mentioned above needed to be done through using separate pages. With the introduction of 'Panels' in version 4 of Dynamic Forms, this speeds up the process and reduces the complexity of building such a form.
In this tutorial, we'll demonstrate how to easily implement PANELS into your form flow.
STEP 1 - Create All Questions First
Although you may want some questions hidden and be revealed later, you begin by first creating all of your questions as if the form was going to be one long questionnaire. You can always add questions later and alter the flow at any time, but the more questions you have ready to go, the faster the process with go.
You'll also want to make sure the questions appear in the order that you want, based on the content of the panels you'll want to create. The reason for this is that when you go to place them in panels, you'll need a 'starting' and 'ending' question for each panel. If questions are out of sequence, they may get left out of the panel group.
STEP 2 - Placing Groups of Questions in Panels
Once your questions have been created in a linear flow, click on the MODULE CONFIGURATION icon located above the questions. You will see several expandable sections. Expand the section ' LAYOUT' and the sub-section 'Dynamic Panels / Sections / Tabs' - View SCREENSHOT).
Make sure for the first question once the layout section is expanded, that you have the following selected from the drop-down menu.
After that, you can now create different panel names and adjust their sort order. You can change these at any time similar to how you would change a question name.
Once you create a panel name, you'll then want to select the starting question and the ending question. If you need to add or include a question that is not in the linear order of your current set-up, you may need to go alter the sort-order of your questions.
Next, make sure the 'Initial Expand' box is checked if you want to make sure the particular panel appears automatically at the appropriate time.
You also have the option of having the panels be able to be viewed or kept hidden based on their DNN user role.
If you plan to have your panels appear based on a question event, as in our example below, you'll want to check the box 'Hide until forced visible by Question Event', and then follow step four after saving your changes.
STEP 3 - Saving Your Panel Changes to the Module Configuration.
One crucial step is to save your panel adds or updates each time. Underneath the layout section after the last question on panels, you will see the 'Add/Update' button.
Once the panels have been updated, hit the 'Exit' link, which is near the bottom of the 'Module Configuration' section options.
STEP 4 - Making Panels Appear Using 'Question Events'.
In our example below, we have a total of three panels, one which shows initially, and then two which were created to be revealed to any user depending on how they answer the last question.
If you need to create a similar operation, set all of your panels up first as described above, and then click on the 'QUESTION EVENTS' icon in the Dynamic Forms control panel.
This SCREENSHOT shows how 'Panels' have now been added to the list of options for Question Events.
Use can test this out below by switching back and forth between panels when answering 'Now' or 'Later' for the last question.