Dynamic Forms Question

Topics: General
Jun 15, 2015 at 7:05 PM
How would I show/hide fields based on values of other fields on a dynamic form? For example: Say I have three fields: 1) "Return / Reassign" - drop down menu with two values (return, reassign), 2) "Reassign To" - Input field where if it is a reassignment you would provide the name of who it will be reassigned to, and 3) "Reassignment For" - drop down list with two values (Existing Employee, New Employee). By default I want the "Reassign To" and "Reassign For" fields to be hidden, and if the user selects reassign from the "Return / Reassign" drop down then I want to display the "Reassign To" and "Reassign For" fields. What would be the easiest way to accomplish this logic?

Thank you

Jun 16, 2015 at 12:32 PM
The easiest way would be to drop a Shape element onto your form, and configure that element to render a shape created using the Templates module. That shape would contain javascript that handles various form control events so you can show and hide fields accordingly. Did so myself on some site, works pretty well.
Jun 16, 2015 at 12:49 PM
Hi Sipke, would you happen to have an example of this you could share?

Thank you,

Jun 17, 2015 at 8:00 AM
I don't have a sample handy I'm afraid. It was configured on a site that is not yet public to which I no longer have access. Just try out the following steps and let me know if you need any more details on any of them:
  1. Create a new Form content item.
  2. Add an Enumeration input element that provides some values (e.g. OptionA and OptionB) and give the element an ID, e.g. SampleOptions.
  3. Add two Canvas elements and give each of them an ID (e.g. CanvasA and CanvasB). Add some sample elements to each canvas elements. Doesn't matter what you add.
  4. Save your form.
  5. Enable the Templates feature
  6. Create a new Template and write javascript to handle the "change" event for the SampleOptions element (e.g. $("#SampleOptions").on("change", function(e){...}). Inside of the event handler, evaluate the selected value of SampleOptions. If it is "OptionA", show "CanvasA". If it is "OptionB", show "CanvasB". Give your template a name (e.g. "MyFormScript" and save it.
  7. Go back to your form and add a Shape element to the canvas (doesn't matter where, but probably somewhere at the top or bottom would be a good place) and configure it to render the "MyFormScript" shape.
  8. Save your form once again and view it on the front end to try out the javascript you have added via "MyFormScript".
Hope this helps.
Marked as answer by RG29 on 6/19/2015 at 6:30 AM
Jun 17, 2015 at 11:28 AM
Thank you for the reply. I will give this a shot and let you know. Also, How would I go about doing some additional validations outside of just required and the min and max length checks? What if I wanted to do some regular expressions on some fields or a check like "if this field is populated then this one is mandatory"?

Thank you for all your help and suggestions. I promise when I get comfortable with Orchard and the framework I will contribute back to the community. I already have some ideas for additional features.

Thank you,

Jun 17, 2015 at 1:54 PM
You're welcome. To do additional validation, you will have to implement your own element and implement your validation their. In one of the earlier versions we had support for decoupled validation on input, but we decided to drop support for it in favor of specialized elements. The API still supports reuse of validation logic however, so you could reuse min and max length checks and add regular expression validation for example.
I am not sure, but I believe we discussed having an additional regular expression validation option by default for text field elements. Perhaps of you create an issue for it on GitHub we can triage and discuss again. We may decide to add it to the regular text field, or perhaps introduce a separate text field with support for regular expressions (e.g. RegularExpressionField).

Regarding the second part of your question, to implement such validation server side, you could create a workflow and add the Dynamic Form Validating event activity. A second activity could be a Decision activity that checks the submitted values, and based on its outcome add model validation errors using the AddModelError activity.
To implement this on the client side, you'd have to replicate the validation logic using JavaScript and leverage the jQuery validation API to make certain fields required based on your validation logic.

Sounds good, looking forward to it.
Marked as answer by RG29 on 6/19/2015 at 6:30 AM
Jun 18, 2015 at 7:42 PM
Hi Sipke, I was able to get the conditional show / hide of fields working the way I wanted to via the javascript in a template like you suggested. Thank you for the info. I also solved an issue with not having a date picker to work with by attaching a datepicker to a text field via javascript as well. I only have a few more validations left to handle which I am going to do through workflows and adding a model error. I really appreciate the help.

Thank you,

Jun 18, 2015 at 8:14 PM
You're quite welcome, let me know how it goes.
Jun 19, 2015 at 12:48 PM
Edited Jun 19, 2015 at 7:11 PM
Started new discussion....