Skip to main content

Form Builder

Dynamic form creation for end users

Installation
Setup
Setup - Simplified Configuration

Download the Module

Form builder is published to the BYU private app store. It requires the following modules:

  • Mendix 9.12.8
  • Box Connector Plus
    • You do not need to set up the module after download if you do not intend on using box uploads.
  • Recaptcha
  • BYU Theme

To download recaptcha in Mendix 8.18, because the version was not update in the app store. In order to do this, open a blank app and download the module. Immediately export the module package, and you can import that into your app. If you do not need Captcha in your app, you can just remove the captcha widget from all its use cases. (Captcha is currently in a beta state)

When implementing the form builder, it consists of two major components, creating a configuration for the form and creating a place to view a form.

Creating a Configuration

To start configuring a form, add a way to navigate to the Configurations page in your app. This page allows for full customization of forms for your app. This is all you need to do on the modeler side.

To begin creating forms, navigate to the page and create a new form. You will be presented with four options, however for most practical applications you will either have a form or a rubric. A rubric creates a table with options for a user to select (imagine an English Professor giving a table on requirements for an essay, and you chose a text box as a response from that form), while a form is a regular web page. For most use cases, I highly recommend a form.

On the following page fill out Form Title and Form Abbreviation (these will be incredibly helpful when looking to retrieve a form for your processing), add a description if you'd like one, and if your form has an upload specify here. This form of configuration only supports box uploads, so keep that in mind when selecting if you wish to include an upload. Also note that a form in this configuration can only have one upload per form.

Once you have finished this, click save and it will redirect you to the form configuration page. To configure the form navigate to the 'Revisions' tab.

Creating Your First Revision

Form Builder allows for multiple revisions of a single form, so you can edit a form without editing the live version of the form. Until a form is published, you will remain on version one of your form. A form has the following structure:

  • Page
    • Sections
      • Elements
      • Sub-Sections
        • Elements

    There is little difference between a section and a sub-section, so I recommend creating one section on a page, and then have all following sections be a sub section. Start your page by creating a section. Add a title, and leave everything else as default. From here create an element to add to the page. Each element will be an individual question, if you wish to separate questions with text, use an instruction element.

    Creating most elements is self explanatory, however when choosing 'Question to be answered by selecting options' setup is a little more complicated. On the second tab, use the render mode option to pick how you want the option to be picked. Note that some options are only available if multiselect is not selected or selected. From here you will need to create options, which will be what shows up in the list/dropdown. The color property only matters for rubrics.

    Once your form has been configured, click publish and it is good to be used when creating forms.

    Viewing a Form

    While the page to view a form is provided to you, you will need to create the form and pass it into the page. Creating a form can be done in any microflow by adding in the CreateForm microflow provided by form builder. It is in Private > Forms > Conduct > Start Form folder. I also recommend associating the form to a BYU Account, that way there is an easy way to find the form later, and who took it.

    To view your created form you can either use the PageView_Snippet on a page in your app, or use the Page_View page provided.

    Configuring a Form

    For the simplified view, we take away a lot of the options from the user to make it more user friendly. It also supports new options that have not been added to the default setup, including multiple upload, non-box uploads, single checkbox questions, and captcha. To configure a form, use the Snip_AlternateConfiguration on an admin page. Here you will need to pass in a DesiredForm Entity, with the abbreviation and title of the form (or the one you will use for your future form).

    Once you have navigated to this page, it will prompt you to create a form. Once you have done this, the view for managing a form will appear. (note if you will have multiple forms, use the same snippet on a different page, and pass in different params) From here you should create a page, and create elements on the page. Each element will appear at the bottom of all previous elements. When creating a new element, you will be given the bare minimum for options.

    To configure a button, you can either use a web link or a microflow. For web links, just provide the url and the button should function. However. microflow buttons are the exception. They cannot be fully configured, and require a microflow to already be made. These buttons call a java action, that expect a microflow name in the following format: ModuleName.MicroflowName (for example, you a microflow name would be 'Main.ACT_ShowHomePage')

    Viewing the Form

    To view a form, you will need to manually create a form and pass it into the page. Creating a form can be done in any microflow by adding in the CreateForm microflow provided by form builder. It is in Private > Forms > Conduct > Start Form folder. To use the alternate view and edit, use the SNIP_EditForm_Alternate and Snip_ViewForm_Alternate. The main difference for this view is that it does not use sub-sections, and has a dynamic wizard at the top of the page. The wizard does not support on click page navigation.

    There is also an alternate form preview that can be used with Snip_PreviewFormAlternate. It will show all pages in one page, and requires a DesiredForm entity as well.