Dynamic form creation
In this tutorial, we will learn how to create a form with conditional logic. This means, that based on the patient's answers the result will be calculated differently and some form fields will be displayed conditionally.
A toggle button can be used to display all form fields despite the calculated PHQ2 score.
The first two questions representing PHQ-2 are used for quick depression screening. If the patient's score for PHQ-2 lies above the defined threshold, further questions will be shown to calculate the PHQ-9 score and the toggle button will be disabled.
We'll omit some form fields to keep this example short.
Prerequisites
To accomplish the goal we assume the SDC Forms project is already configured as described in "Getting Started".
Next, we need an example namespace to put the form we are about to create into. Let's create a file zrc/tutorial/phq2phq9.edn
and declare the desired namespace:
Make sure the created Zen file is imported into the project so Zen can (re-) load it. Available forms can be imported via an aggregation file (e.g. /zrc/forms.edn
) or directly via the entry point file /zrc/sdc-box.edn
like this:
Steps
What helps in building dynamic forms?
Declare dynamic rules using lisp expressions under
:sdc/rules
attributeConditionally render form fields or field groups using
:sdc/display-when
attribute bound to SDC rulesDisable or enable elements via
:sdc/disable-when
attribute and SDC rules
Form layer
First we create an example form to illustrate conditional rendering and dynamic rule based calculation. In the following steps we'll describe the document and the form layout using the form layers. Launch description is not relevant for this tutorial and can be found in Appendix for completeness.
Add following lines to /zrc/tutorial/phq2phq9.edn
file:
Describe static document structure
Let's describe form questions we want to be answered in order to calculate the final score. First, we define two fields from PHQ2 and then we take only one additional field from PHQ9.
To keep the example short we define common schema LL358-3
for each answer.
Rule to calculate PHQ scores
Now we define the calculation formula using Zen Lisp expression. With get-in
we grab the user's answer score and sum them up.
The rule name must be the same as the document's field name.
The final score will be chosen conditionally based on the calculated PHQ-2 score. If the PHQ-2 score is too high we should display additional questions to the user. Calculated fields can be used to implement conditional rendering. Let's see an example in the Layout layer.
Layout with conditional questions
In the Layout
layer we define how the form fields are rendered. All fields should be placed vertically in a single-column layout.
We split the declared fields in two groups using aidbox.sdc/fields
container. To declare conditional rendering block we make use of :sdc/display-when
attribute and bind it to the previously defined rule with a meaningful name.
Combine conditions
The form layout can be easily extended to be more complex and dynamic using this simple technique. Let's add a button to show additional PHQ-9 questions regardless of the PHQ-2 score. This button should be disabled if the PHQ-2 score threshold is already exceeded. Use :sdc/disable-when
attribute in combination with a rule to achieve this.
Appendix
Last updated