Skip to main content

Form Configuration

Adaptive Form Page

The adaptive form page is the actual form. By using the soiSharePoint Form Template the new form will automatically contain two primary components: the Form Container and the Root Panel. Both components are required, and need to be configured for the form to function correctly.

Adaptive Form Container

The adaptive form container, also known as the guideContainer, is the start of the form UI, and several properties that effect the entire form will be configured here. A global toolbar can also be added from the edit bar for this component. Action buttons, such as save, reset, and submit can then be added to the toolbar to perform actions on the entire form.

Basic Properties

Basic Configuration Information

  • Client Library Category: soi.form-analytics,cq.jquery.ui
  • Adaptive Form Theme: SOI Forms Theme
  • CSS File: /content/dam/soi/en/web/[your agency]/resources/css/[agency]-form.css
    •     The file path provided above contains a basic CSS file that can be used for SOI Forms
  • Mobile Navigation: Layout without panel tiles in the form header
    • Unless panels are being used within the form

Submission Properties

Submission Configuration Information

  • Use asynchronous submission: [leave unchecked]
  • Redirect URL/Path: [leave blank]
  • Store data in forms portal: [leave unchecked]
  • Revalidate on server: [leave unchecked]
  • Submit Action: select one of the following: Send Email, SOI Forms - Submit to Sharepoint List, or Send PDF via email
    • Depending on the Submit Action selected various Action Configuration fields will be presented

Options for Submit Action

  • Action Configuration
    • From* (required): AEMPortal@illinois.gov
    • To: [if an email address is not entered AEM will throw an error when someone tries to submit the form]
    • CC: [add email addresses as needed]
    • BCC: [add email addresses as needed]
    • Subject: [Example: Contact Us Ex Form - ${subject} ]
    • Email Template: [Example: The following information was submitted:
      Name: ${name}
      Email: ${email}
      Phone: ${phone}
      Subject: ${subject}
      Message: ${message} ]
      • If creating an email template with a large body of text it is much easier to type up in a text editor. Then copy and paste into the field on AEM.
    • Email Template Path: [leave blank]
    • Include attachments: [check if File Attachment button is included on form; otherwise do not check]

 

Use the following syntax to pull information directly from the a field in the form to the email.

Name (of form field): subject

Syntax for inserting field values in email: ${subject}

More information about sending email on form submission >

  • Action Configuration
    • Sharepoint API Path: [base URL of SharePoint Online site containing list]/_api/web
      • [base URL of SharePoint On-prem site containing list]/_api
    • Sharepoint List Name: [display name of list from SharePoint site]
    • Sharepoint Online or Sharepoint on-prem?* (required): select either Sharepoint Online or Sharepoint On-Prem
    • Sharepoint Client ID: [ID generated on SharePoint - App Permissions] contact DoIT.WebServices@illinois.gov to obtain/create ID
    • Sharepoint Client Secret: [Secret generated on SharePoint - App Permissions] contact DoIT.WebServices@illinois.gov to obtain/create Secret
    • Sharepoint Tenant ID / Site Realm: [do not change default (preset) Sharepoint Tenant ID]
  • Action Configuration
    • From* (required): AEMPortal@illinois.gov
    • To: [if an email address is not entered AEM will throw an error when someone tries to submit the form]
    • CC: [add email addresses as needed]
    • BCC: [add email addresses as needed]
    • Subject: [Example: Contact Us Ex Form - ${subject} ]
    • Email Template: [Example:
      Greetings ${Name_1
      Thank you for using our form to create an accommodation card. You will be able to print the card from the PDF attached to this email]
      • If creating an email template with a large body of text it is much easier to type up in a text editor. Then copy and paste into the field on AEM.
    • Email Template Path: [leave blank]
    • Include attachments: [check if File Attachment button is included on form; otherwise do not check]

 

Use the following syntax to pull information directly from the a field in the form to the email.

Name (of form field): subject

Syntax for inserting field values in email: ${subject}

More information about sending email on form submission >

Root Panel

The Root Panel of the adaptive form is where all components will be added to the form. It can also contain subpanels under the items node, and each panel (including the root panel) can have a layout associated with it.