ion Education Help Site

Building Forms in ion

Updated on

Building Forms in ion

*ion’s built-in form builder is based on the formio.js library (http://formio.github.io/formio.js). This document is not designed to cover basic use of the formio.js form builder utility. For instructions or help on the tool itself, please visit the http://formio.github.io/formio.js or (https://form.io) websites.

 

Ion has a form building interface as well as a form tester.

Introduction

Forms are a customizable, flexible way of capturing data in ion. As noted above, we have chosen the Form.io library for managing our forms, and are using it throughout the system – not only for custom forms, but for many of the system data entry points.

In the case of custom forms (which are available in the Forms dictionary, or on the Goal Template tab of the CBM dictionary) – it is possible to connect a form field to records in ion. For example, by using the ion.studentId tag (see below) within a custom form, the form will be attached to the student’s profile.

This document will eventually be part of the ion cookbook – but for now, it is stand-alone. As mentioned in the italicized introduction at the top of the page – this document does not cover the use of the Form.io library. You should visit the Form.io website for more information. However, this document will detail what is necessary to connect form responses to profiles and plans.

Tags

Tags are used in a form to connect the form element to certain functionality within ion. To set a tag, navigate to the API tab of the element, type the tag EXACTLY (it is case sensitive), and press enter to set it as a “tag.”

Figure 1 - the API tab for a student drop down field.

Available Tags

  • Goals
    • goalDate
      • Sets the date for which the goal should be accomplished.
    • score
      • Sets the goal score.
    • goalStatement
      • Sets a goal statement.
    • baselineScore
    • startDate
      • Sets the start date of the goal period.
    • roi
      • Targeted Rate of Improvement for the goal
  • Meetings
    • notes
      • Feeds the field to the review notes field of the plan review record.
    • meetingDate
      • Feeds the field to the date field of the plan review record.
    • actionSteps
      • Feeds the field to the review actions field of the plan review record.
    • meetingType
      • Records the meeting type (Not currently used). The meeting type is saved with the form – and not pushed to an ion component.
  • Cases
    • searchable
      • Used to add the field to the table on the “triage” page of form responses.
    • openCase
      • When used in conjunction with a student (ion.studentId) tag, this tag will open a case when the form is submitted and Case Management is configured to open a case on form submission.
  • Misc
    • ion.studentId
      • Attaches a form response to a student’s record.
    • ion.userId
      • Attaches a form response to a staff record.

Special Functions

Forms have the ability to pre-populate, for example, drop downs with student names. We will insert a series of codes and fields to accomplish this task.

Student Names in Drop Down

  1. Add a select element to your form.
  2. On the “Data” tab, do the following:
    1. Set “Data Source Type” to “URL”
    2. In the “Data Source URL” field, type (exactly) ##base_url##/api/students?$select=id,last_name,first_name,grade&$orderby=last_name,first_name
    3. In the “Request Headers” section, type “Authorization” in the key, and “##auth_token##” in the value field (exactly).
  1. In the “Item Template” field, type (exactly)
    {{item.last_name}}, {{item.first_name}} (Gr. {{item.grade}})
  1. On the “API” tag, do the following
    1. Set the ion.studentId, openCase and searchable tags in the “Field Tags” field.

Staff Names in Drop Down

  1. Add a select element to your form.
  2. On the “Data” tab, do the following:
    1. Set “Data Source Type” to “URL”
    2. In the “Data Source URL” field, type (exactly) ##base_url##/api/users?$select=id,last_name,first_name &$orderby=last_name,first_name
    3. In the “Request Headers” section, type “Authorization” in the key, and “##auth_token##” in the value field (exactly).
  1. In the “Item Template” field, type (exactly)
    {{item.last_name}}, {{item.first_name}} (Gr. {{item.grade}})
  1. On the “API” tag, do the following
    1. Set the ion.userId and searchable (if necessary) tags in the “Field Tags” field.

Other Utility Helpers

evaluateGoalStatement

evaluateGoalStatement will use the template field, and attempt to evaluate every field with data either from the form, or from the ion namespace. Use in the “Calculated Value” field of a form. Case Sensitive. Must be typed exactly as below:

value = ion.utility.evaluateGoalStatement(data);

Previous Article Behavior Admin
Next Article Introduction to Case Management