Form Builder allows districts to create forms for use with the SIS, ERP and/or SSS modules.
This document shows the creation of a Practice Template for learning the components and a second template to build a sample form referring a student for support services.
1. In the Setup menu, click Form Builder.
If the district is currently using Form Builder, existing forms will display on the District Forms tab; otherwise, the District Forms tab will be empty.
The Focus Forms tab houses forms created and maintained by Focus. The Tags tab is used to build tags to designate which module the form is associated with (SIS, ERP, SSS, etc.). The Headers tab is used to create custom headers for the district forms.
2. Click Create at the top of the screen.
The Components used to build the form will display on the left side of the palette and Form Settings used to control access to and some of the functioning of the form display on the right.
Form Settings should be selected prior to adding components to the palette.
1. Form Name: Open text box for naming the form. This is the title that will display in the District Forms list, in the Forms menu on the SIS/ERP module and/or in the pull-down for form selection in SSS when creating the Sequence for an Event.
2. Main Layout: Currently, the Main Layout field only has one option, Absolute.
3. Header Type: In the Header Type pull-down, select a header type if desired. The header will display at the top of the first page of the form.
The Student Header option contains the Student Name, Student ID, Gender, Grade, Campus, DOB, Parent, Address, and Phone number fields.
The Student Header 2 option contains the same fields, in addition to the Primary Exceptionality and Email field.
The District Header option displays your district logo and district name. The district name that displays on forms can be modified in Setup > System Preferences > District Preferences tab. Please enter a ticket to have your district logo added.
Headers can be customized in the Headers tab. Saved headers are available for selection in the Header Type pull-down.
4. Language: The Language field defaults to English.
5. Can View: In the Can View pull-down, select the profiles that can view the form. One or multiple profiles can be selected. If no profiles are selected, then all profiles can view the form.
6. Can Edit: In the Can Edit pull-down, select the profiles that can edit the form (fill out the form). One or multiple profiles can be selected. If no profiles are selected, then all profiles can edit the form.
Only use the Can View and Can Edit fields if you need to restrict the ability to view or edit the field from the profiles selected in Form Settings. The Can View and Can Edit settings should NOT be used for SSS forms.
7. District Fee(s): If the system preference "Enable Form Fees" is enabled in Setup > System Preferences > Default School Preferences > Billing tab, and fees will be collected when completing the form, select the District Fee(s) from the pull-down.
8. Show Footer: To turn the footer on, click the Show Footer toggle. The footer includes the district name, Student ID, and Student Name, which may not be applicable to SIS forms. The footer displays at the bottom of each page of the form.
9. Remove School From Requests: Click the Remove School From Requests toggle to remove the School pull-down that displays above the form when the user completes the form.
10. Require File Upload: Click the Require File Upload toggle to require supporting documentation to be uploaded in the file upload box when the user fills out the form.
11. Suppress Approval Emails: Click the Suppress Approval Emails toggle to not send an email to the user when the form is approved.
- If not done already, name the current form Practice and Save it.
- Click Return to Form List.
- Create a new form.
- Name the form Test Student Referral.
- Do not select View or Edit profiles.
- Save the form and click Return to Form List.
- Reselect your Practice template.
Selecting a component from the left displays a list of Common Properties on the right, which are the same for all components. Options specific to a selected component display beneath the Common Properties.
View the Common Properties
1. Click and drag the component from the Components or Presets list onto the form.
For this training, DO NOT select Computed Table, Line, Link, or Rectangle as they do not display the most common properties.
The ID and Parent ID are assigned by default and will be negative integers until the form is saved. These field IDs are used by the district/Focus programmers for query-based reports.
2. Enter a Field Name for the component. Do not use spaces. You can use underscores between words, such as Parent_Name.
3. The Data Binding pull-down is used if you want to disable this field from user input and instead mirror the value displayed in another field. Select the field you want to mirror in the pull-down.
4. Select the profiles that Can View this field on the form. One or multiple profiles can be selected. Only the profiles selected in the Form Settings will display as options.
5. Select the profiles that Can Edit this field on the form. One or multiple profiles can be selected. Only the profiles selected in the Form Settings will display as options.
Only use the Can View and Can Edit fields if you need to restrict the ability to view or edit the field from the profiles selected in Form Settings. The Can View and Can Edit settings should NOT be used for SSS forms.
6. The Tab Index is used to define the order fields are selected when the user filling out the form presses Tab to navigate through the form. Enter the appropriate number for the field.
7. The Enabled check box is selected by default. This allows data to be entered or selected in the field. Click the toggle if you want to disable the field.
8. Click the Required toggle to make this field required when filling out the form.
9. Adjust the Font Size by entering a numeric value, if needed.
10. Click the Don't Print toggle to hide this field on the printed form.
11. Click the Include in Pending Approvals toggle to display the field value in a column in the Pending Approval tab for the form and in the email sent to the form approver(s) when the form is pending approval.
12. Click the Include in Approval/Denial Emails toggle to include the field name and its value in the email the user receives when the form request is approved or denied.
If you have a field selected and you want to go back to viewing the Form Settings, click the field in the work area to deselect it. The blue dotted line around the field will go away and the Form Settings will display.
Components are used to build the form. Each component has properties specific to that component that will display below the Common Properties with the type of component selected displayed on a gray background.
- Components are added by clicking and dragging to the work area.
- Right clicking on components provides spacing and alignment options including the option to delete the component from the form. These options will be covered in detail in the Formatting and Form Layout section of this document.
- Best practice is to Save the form after adding each component.
The Text component is used to add text to the form, such as headings, titles, and directions.
1. Enter the Text to be displayed by typing the text in the text box, or click Expand to use the Text Editor.
2. In the Text Editor, enter the text and use the formatting options as needed. Click Update when finished.
3 Adjust the Width of the text as needed by entering a numeric value. Leave it blank to not limit the width of the text.
4. When using the translation feature for SSS forms, select Don't Translate to prevent the text from being translated.
The Checkbox Group component allows the user to select one or multiple check boxes on the form.
1. On the right side of the screen in the Checkbox Group options, select the desired Orientation of the check boxes, Horizontal or Vertical.
2. If Vertical is selected, enter a numeric value for the Width of the checkbox group. Leave it blank if you do not want to define a limit.
3. When using the translation feature for SSS forms, select Don't Translate to prevent check box options from being translated.
4. Select Enable for Parents to allow parents to edit the component on an SSS form.
This functionality is intended for use along with a "Signable by Parent" e-signature component on a form. When an SSS form that contains a "Signable by Parent" e-signature component is saved and validated by a user in Manage Student, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can make a check box selection, complete the signature, and save the form.
5. To add a check box option, enter the Text of the option.
6. If desired, enter an Info Tip to provide additional information to the user filling out the form.
An i will display next to the option on the form. When the user hovers the mouse over the i icon, the info tip will display.
7. Enter a Value for the option. This is the value that is stored in the database. If left blank, one will be automatically generated.
8. Click Add.
9. To edit an option, click the option in the list (1), make the necessary changes to the Text, Info Tip, or Value (2), and click Edit (3).
10. To delete an option, click the option in the list (1) and click Remove (2).
A default "Checkbox" option is included when creating a new checkbox group. This option can be deleted or edited.
The Radio Group component allows the user to select one option from a group of radio buttons.
1. Select the desired Orientation of the radio group, Horizontal or Vertical.
2. To adjust how the radio group options are spaced and sized, enter the Radio Diameter and Option Spacing in inches.
You must use Google Chrome for the Radio Diameter and Option Spacing options.
3. If desired, enter a Group Name.
The Collection pull-down is used to select a SQL query that has been set up in the Collections tab in order to select the radio group option.
4. Click the Print Borderless toggle to hide all unselected radio options (circles) when printing. Only the selected radio option (circle) will display, and the input borders will not display.
5. When using the translation feature for SSS forms, select Don't Translate to prevent the radio options from being translated.
6. Select Enable for Parents to allow parents to edit the component on an SSS form.
This functionality is intended for use along with a "Signable by Parent" e-signature component on a form. When an SSS form that contains a "Signable by Parent" e-signature component is saved and validated by a user in Manage Student, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can make a radio group selection, complete the signature, and save the form.
7. To add a radio group option, enter the Text of the option.
8. If desired, enter an Info Tip to provide additional information to the user filling out the form.
An i will display next to the option on the form. When the user hovers the mouse over the i icon, the info tip will display.
9. Enter a Value for the option. This is the value that is stored in the database. If left blank, one will be automatically generated.
10. Click Add.
11. To edit an option, click the option in the list (1), make the necessary changes to the Text, Info Tip, or Value (2), and click Edit (3).
12. To delete an option, click the option in the list (1) and click Remove (2).
A default "Radio" option is included when creating a new radio group. This option can be edited as needed.
Save the current Practice template; click Return to Form List and select your Referral form.
Add the following components to your form:
- Text: Use the Text Editor to title your form “Student Referral to School Support Team”; bold and center your title.
- Text: Enter instructions for selecting reasons for the referral.
- Two Vertical Checkbox groups with 2 or 3 reasons in each group.
- Name the checkbox fields reason1 and reason2.
- Text asking if the Parent has been contacted.
-
Radio Group with “Yes” and “No” options for if the parent has been contacted.
- Name the radio group field parent_contacted.
- Make the checkboxes and radio groups Enabled and Required. (Later you will add programming for the check box and the radio groups).
- Save the form, click Return to Form list and select your Practice template.
The Text Box component allows the user to enter a single line of text on the form. The text box can be restricted to only allow a certain format, numbers only, date, date/time, phone, or time.
1. Select a Format to restrict the user to enter the text in a specific format. The options are Numbers Only, Date, Date/Time, Phone, or Time. Leave None selected to have no restrictions on the format.
When Numbers is selected as the Format, enter a value in the Limit Precision field to limit the number of decimal places that can be entered in the text box. When Date is selected as the Format, select Disable Weekends to prevent the user from being able to select a date on a weekend.
2. Enter Placeholder Text that will display as instructions or an example for the user in the text box, if desired.
The Collection pull-down is used to select a SQL query that has been set up in the Collections tab in order to populate the text box.
3. Adjust the Width of the text box by entering a numeric value, if needed.
4. Enter a number in the Max Characters field to limit the text box to a maximum number of characters. Leave 0 entered to not limit the number of characters.
5. When using the translation feature for SSS forms, select Don't Translate to prevent the text from being translated.
6. Select Enable for Parents to allow parents to edit the component on an SSS form.
This functionality is intended for use along with a "Signable by Parent" e-signature component on a form. When an SSS form that contains a "Signable by Parent" e-signature component is saved and validated by a user in Manage Student, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can enter text in the text box, complete the signature, and save the form.
The Text Area component allows the user to enter multiple lines of text on the form.
1. Adjust the Width and Height of the text area as needed.
The Width and Height fields do not use the same logic for determining size, therefore entering 80 for width and 80 for height does not produce a perfect square.
2. When using the translation feature for SSS forms, select Don't Translate to prevent the text from being translated.
3. Select Enable for Parents to allow parents to edit the component on an SSS form.
This functionality is intended for use along with a "Signable by Parent" e-signature component on a form. When an SSS form that contains a "Signable by Parent" e-signature component is saved and validated by a user in Manage Student, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can enter text in the text area, complete the signature, and save the form.
4. Select Rich Text to provide a rich text editor in the text area. This allows the end user to use text formatting options, as well as upload images and insert tables. The user's entries will print in line with the rest of the form.
The Collection pull-down is used to select a SQL query that has been set up in the Collections tab in order to populate the text area.
The Dropdown component allows the user to select one or multiple options from a drop-down list.
1. Click the Select Multiple toggle to allow the user to select more than option in the drop-down. Leave the toggle disabled if the user can only select one option.
2. Click the Allow editing of selection text toggle to allow the user to edit the text of the option selected in the drop-down.
When this option is enabled, a pencil icon will display next to the drop-down on the form. After the user filling out the form selects an option in the drop-down, the pencil icon will be enabled. Clicking the pencil icon will convert the drop-down into a text box where the option text can be edited. Clicking the pencil icon again will convert the text box back into a drop-down. The selected option text displays the edited value.
3. Modify the Max Width by entering a numeric value, if needed.
4. Enter a numeric value for the Max Height, if needed.
This sets the height of the drop-down, and enables word wrapping. The text will also shrink to fit the area.
5. When using the translation feature for SSS forms, select Don't Translate to prevent drop-down options from being translated.
6. Select Enable for Parents to allow parents to edit the component on an SSS form.
This functionality is intended for use along with a "Signable by Parent" e-signature component on a form. When an SSS form that contains a "Signable by Parent" e-signature component is saved and validated by a user in Manage Student, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can make a dropdown selection, complete the signature, and save the form.
7. To manually enter the drop-down options, leave the Hard Coded radio button selected. The Collection radio button is used if you want to populate the drop-down options using a SQL query that has been set up in the Collections tab.
8. To add a drop-down option, enter the Text for the option.
9. Enter a Value for the option. This is the value that is stored in the database. If left blank, one will be automatically generated.
10. Enter a Sort Order for the option. Options will display for selection in the defined sort order.
11. Click Add.
12. To edit an option, click the option in the list (1), make the necessary changes to the Text, Value, and Sort Order (2), and click Edit (3).
13. To delete an option, click the option in the list (1) and click Remove (2).
Use the Student Dropdown preset to add a drop-down that is populated with student names, the School Dropdown preset to add a drop-down that is populated with a list of schools, or the Staff Dropdown preset to add a drop-down that is populated with a list of staff members. Options for selection are based on the profile permissions of the user filling out the form. The drop-down can be select one or select multiple.
Save your Practice form, click Return to Forms List and select your Referral Form.
Add the following components to your form:
- Text Box and select Date for the format. Disable Weekends.
- Put the Text Box to the right of the Yes/No radio group.
- Text instruction “Describe efforts to contact parent/guardian and results”.
- Text Area: set the Width to 40 and the Height to 3.
- Text instruction “Select your Subject Area”.
- Dropdown: leave set to Select one. Select Hard Coded and enter 4 subject areas.
Make each field required except the Date field.
Save the form (best practice is to Save after each component is added).
Click the Preview option to view the form as the user would see it.
Close the Preview, click Return to Forms list and select your Practice form.
The E-Signature component allows the user to electronically sign the form.
1. Adjust the Width and Height of the signature box by entering numeric values, if needed.
2. When the Bypass Authentication option is enabled, users are not prompted to enter their username and password to authenticate the their signature.
3. Enable Signable by Parent to allow parents to complete the e-signature on an SSS form.
When the "Ready to Sign" button is clicked on an event in the Manage Student screen, the parent receives an alert in the Alerts box on the Parent Portal: “Signature required in a student service event for (student name).” When the parent clicks the alert, the Student Services screen is opened for the event. The parent can complete the signature(s) and submit the form.
If check box, dropdown, radio group, text area, or text box components on the form have "Enable for Parents" selected, the parent can also edit these components on the form.
When using the "Signable by Parent" option, ensure the appropriate parent profiles have the "View" permission enabled for the Student Services screen in Users > Profiles.
In SSS > User Profile Permissions > System Permissions tab, ensure the parent profiles have the “Allow” permission for “View Events” for the appropriate programs.
In SSS > User Profile Permissions > Event Permissions tab, ensure the parent profiles have the “View All” and “Edit All” permissions for the appropriate events.
In SSS > Setup > Events, ensure the "Publish to Parent Portal" option is enabled on the appropriate events.
If the parent profile does not have proper permissions, the alert and event will not be available on the Parent Portal until the permissions are set.
Lines are used to separate sections on a form or are used as a design element.
1. Select the Orientation of the line, Horizontal or Vertical.
2. Adjust the Length of the line as needed by entering a numeric value.
The Link component allows the user to click on a link and be directed to an outside website or document.
1. Enter the link Text.
2. Copy and paste the URL into the Link field.
3. When using the translation feature for SSS forms, select Don't Translate to prevent the link text from being translated.
The Rectangle component is used to add a rectangle to the form for organizing other components.
1. Adjust the Width and Height of the rectangle by entering a numeric value, if needed.
2. Alternatively, the rectangle can be adjusted by clicking and dragging the sides or corners of the rectangle.
3. Other components can be dragged into the rectangle.
- Save your Practice form then click Return to Forms List.
- Retrieve your Student Referral template.
- Add a rectangle as a border on the entire form or around one or more components OR
- Use the Line component to separate one or more components.
- Click Save then Return to Forms List.
- Retrieve your Practice form.
The dropdown values of a Preset component are based on the profile permissions of the end-user. There are 3 options, each intended to be used specifically for SIS/ERP forms. If the user filling out the form needs to be able to make selections beyond those available to his/her profile, then use an SQL collection to populate the preset dropdown field instead.
Student Dropdown Preset populates with student names.
School Dropdown Preset populates with a list of schools.
Staff Dropdown Preset populates with a list of staff members.
1. Click and drag a Preset to the work space.
2. A Field Name should be entered on the Common Properties.
3. Selecting Don’t Print prevents the user’s selection on the form from displaying when the form is printed.
4. The available Options for Presets are Select Multiple, Max Width, and Max Height (Max Height allows for text-wrapping and allows the text to shrink to fit the area).
The option to Allow editing of selection text would not be used as the preset values displayed to the end-user are profile based.
5. Don’t Translate toggle prevents the options in the dropdown from being translated.
6. Enable for Parent toggle would not apply to a preset and is only for SSS forms.
- Save your Practice form then click Return to Forms List.
- Retrieve your Student Referral template.
- We will now add formatting to the components on your Referral.
Form Builder provides a number of options for formatting and laying out the components of a form. The options can be utilized as the components are added or after all components have been added, depending upon the complexity of the form.
1. To equally space or align two or more components on a form, hold down the Shift key and click each of the components. Alternatively, click the mouse and draw a selection box around the components.
2. Right-click a component and select the spacing or alignment option in the context menu.
The selected components will align to the component that was right-clicked.
- Vertical: Equally spaces 3 or more components
- Horizontal: Equally spaces 3 or more components
- Left: Aligns two or more components to the left edge of the last selected component
- Center: Aligns the component(s) to the center of the form (this may cause components to overlap)
- Right: Aligns two or more components to the right edge of the last selected component
- Top: Aligns two or more components to the top edge of the last selected component
- Middle: Aligns two or more components to the middle of the last selected component
- Bottom: Aligns two or more components to the bottom edge of the last selected component
- Parallel Vertical: Aligns vertically to the left edge of the last selected line without regard for spacing
3. To copy and paste one or multiple components, select the component(s) to copy by clicking and drawing a selection box around the component(s).
4. After the component(s) are selected, press the Ctrl key and click and drag the component(s) to the area on the form where the new component(s) should be.
5. To delete a component, right-click the component and click Delete in the context menu.
6. To delete a page, click the X to the left of the page.
Other form features include:
| Return to Form List | Click Return to Form List to exit the work area and return to the list of forms. |
| File > Import | In the File menu, click Import to import a form. A pop-up window is displayed where you will paste the JSON in the provided area. Use the import feature in a blank form. After importing, click Save. |
| File > Export | In the File menu, click Export to export a form. A pop-up window is displayed where you will copy the JSON. This can be used to export a form from a test environment to be imported into production. |
| Edit > Add Page | In the Edit menu, click Add Page to add a page to the end of the form. |
| Edit > Insert Page | In the Edit menu, click Insert Page to insert a page into the form. A pop-up window is displayed where you will enter where the page should be inserted. |
| Edit > Undo | In the Edit menu, click Undo to undo the last action. |
| Edit > Redo | In the Edit menu, click Redo to redo the last action. |
| Click Print to print the form. | |
| Preview | Click Preview to preview the form as it will appear to the end user. A new tab or window is displayed where you can fill out the form to test the fields. Please note, you will only be able to edit the fields in the preview if your profile was selected in Can Edit. |
| Programming | Click Programming to add programming to fields in the form using JavaScript. Level 1 training is recommended before using this feature. |
| Save | Click Save to save the form. The form will also auto-save periodically. |
| D | Click the D to enable or disable drag and drop. When the D is blue, drag and drop is enabled, and components can be dragged and dropped in the work area. When the D is red, drag and drop is disabled, and components cannot be dragged and dropped in the work area. Disabling drag and drop may be useful when you are finalizing the form and do not want to accidently move components on the form. |
| S | Click the S to enable or disable selection mode. When the S is blue, selection mode is enabled, and components can be selected in the work area. When the S is red, selection mode is disabled, and components cannot be selected in the work area. Disabling selection mode may be useful when you are finalizing the form and do not want to modify the component options. |
| Select Component | Select a component in the Select Component pull-down at the bottom of the screen to jump to that component on the form. The component’s options will display on the right side of the screen. The ID and Field Name is displayed (if one was entered). |
If a form requires multiple instances of a single or group of components, the component(s) can be duplicated rather than repeatedly dragging the component(s) to the form.
1. Select one or multiple component(s).
2. Hold down control on the keyboard and click the component(s) one or more times.
Duplicated text components appear bolded while others appear “stacked."
3. Click and drag the duplicated component(s) to the desired placement on the form. If the 4-point arrow does not display, draw a selection box around the components then click and drag the duplicated component(s).
Align and equally space the components on the form.
The Headers tab is used to customize headers for use on forms. Headers can be created using lines, links, images, text, rectangles, student fields, and student barcodes. Saved headers are available for selection in the Header Type pull-down in the Form Settings.
1. In the Setup menu, click Form Builder.
2. Click the Headers tab.
3. Click Create.
4. On the right side of the screen in the Header Settings, enter a name for the header in the Header Name field.
5. Edit the header Height (in inches) if desired.
6. To build the header, click and drag the component from the Components list on the left side of the screen.
The Common Properties are displayed on the right side of the screen. Component specific settings are displayed beneath the Common Properties.
The ID and Parent ID assigned to the field are negative numbers until the form is saved.
7. Enter a Field Name for the component. Do not use spaces. You can use underscores between words, such as student_name.
8. Select Include in Pending Approvals to display the field value in a column in the Pending Approval tab for the form and in the email sent to the form approver(s) when the form is pending approval.
9. To save the header, click Save.
In the Headers tab of the Form Builder, click View next to the header.
1. In the Headers tab of the Form Builder, click Remove next to the header.
2. In the confirmation message, click OK.
Lines are used to separate sections on a header or are used as a design element.
1. Select the Orientation of the line, Horizontal or Vertical.
2. Adjust the Length of the line as needed by entering a numeric value.
The Link component allows the user to click on a link and be directed to an outside website or document.
1. Enter the link Text.
2. Copy and paste the URL into the Link field.
The Image component allows for an image, such as a district or school logo, to be included in the header.
1. Enter the URL of the image.
The image will display in its native size.
2. To adjust the size of the image, enter the Width and Height.
The Text component is used to add text to the header.
1. Enter the Text to be displayed by typing the text in the text box, or click Expand to use the Text Editor.
2. In the Text Editor, enter the text and use the formatting options as needed. Click Update when finished.
3. Adjust the Width of the text as needed by entering a numeric value. Leave it blank to not limit the width of the text.
The Rectangle component is used to add a rectangle to the header for organizing other components.
1. Adjust the Width and Height of the rectangle by entering a numeric value, if needed.
2. Alternatively, the rectangle can be adjusted by clicking and dragging the sides or corners of the rectangle.
3. Other components can be dragged into the rectangle.
The Student Field component is used to add a student field to the header. Student fields with the types select multiple, checkbox, text, long text, select one, date, and numeric are available for selection. On the form, the student field will display the relevant data for the currently selected student.
1. In the Field pull-down, select the student field.
The student barcode component displays the student ID in a barcode format.
1. Enter the Width (pixels) and Height (pixels) for the barcode.
The Footers tab is used to customize footers for use on forms. Footers can be created using lines, links, images, text, rectangles, student fields, and student barcodes. Saved footers are available for selection in the Footer Type pull-down in the Form Settings.
1. In the Setup menu, click Form Builder.
2. Click the Footers tab.
3. Click Create.
4. On the right side of the screen in the Footer Settings, enter a name for the footer in the Footer Name field.
5. To build the footer, click and drag the component from the Components list on the left side of the screen.
The Common Properties are displayed on the right side of the screen. Component specific settings are displayed beneath the Common Properties.
The ID and Parent ID assigned to the field are negative numbers until the form is saved.
6. Enter a Field Name for the component. Do not use spaces. You can use underscores between words, such as student_name.
7. Select Include in Pending Approvals to display the field value in a column in the Pending Approval tab for the form and in the email sent to the form approver(s) when the form is pending approval.
8. To save the header, click Save.
Lines are used to separate sections on a footer or are used as a design element.
1. Select the Orientation of the line, Horizontal or Vertical.
2. Adjust the Length of the line as needed by entering a numeric value.
The Link component allows the user to click on a link and be directed to an outside website or document.
1. Enter the link Text.
2. Copy and paste the URL into the Link field.
The Image component allows for an image, such as a district or school logo, to be included in the footer.
1. Enter the URL of the image.
The image will display in its native size.
2. To adjust the size of the image, enter the Width and Height.
The Text component is used to add text to the footer.
1. Enter the Text to be displayed by typing the text in the text box, or click Expand to use the Text Editor.
2. In the Text Editor, enter the text and use the formatting options as needed. Click Update when finished.
3. Adjust the Width of the text as needed by entering a numeric value. Leave it blank to not limit the width of the text.
The Rectangle component is used to add a rectangle to the footer for organizing other components.
1. Adjust the Width and Height of the rectangle by entering a numeric value, if needed.
2. Alternatively, the rectangle can be adjusted by clicking and dragging the sides or corners of the rectangle.
3. Other components can be dragged into the rectangle.
The Student Field component is used to add a student field to the footer. Student fields with the types select multiple, checkbox, text, long text, select one, date, and numeric are available for selection. On the form, the student field will display the relevant data for the currently selected student.
1. In the Field pull-down, select the student field.
The student barcode component displays the student ID in a barcode format.
1. Enter the Width (pixels) and Height (pixels) for the barcode.
In the Footers tab of the Form Builder, click View next to the footer.
1. In the Footers tab of the Form Builder, click Remove next to the footer.
2. In the confirmation message, click OK.
Once a basic form has been completed, additional options are available for determining how fields on a form interact with or are dependent upon other fields.
The Programming feature is used to add programming to fields on the form using JavaScript. For example, a field for start date can have programming behind it to only allow users to pick days between Monday and Friday (not Saturday or Sunday) in the future. Level 1 training is recommended before using this feature.
1. Click a field on the form to select it.
2. Click Programming at the top of the screen.
3. In the pop-up window, enter the programming in the State tab.
4. When finished, close the pop-up window. The programming will auto-save.
5. Click Save on the form.
6. Click Preview to verify the programming is working as intended.
When using programming, ensure that all fields have a Field Name set in order to reference other fields on your form. Best practice is to use lowercase letters in field names to avoid programming errors, as Javascript is case sensitive.
Default this date field to today's date
if (!this.getValue().length) {this.setValue(moment().format('L')); }/*Replace moment().format('L')) above with the below examples for the other formats.
moment().format('LT'); // H:MM AM/PM e.g., 1:15PM
moment().format('LTS'); // H:MM:SS AM/PM e.g., 1:15:30PM
moment().format('L'); // MM/DD/YYYY e.g., 01/01/2000
moment().format('l'); // M/D/YYYY e.g., 1/1/2000
moment().format('LL'); // Month Day, Year e.g., January 1, 2000
moment().format('ll'); // Mon Day, Year e.g., Jan 1, 2000
moment().format('LLL'); // Month Day, Year H:MM AM/PM e.g., January 1, 2000 1:15PM
moment().format('lll'); // Mon Day, Year H:MM AM/PM e.g., Jan 1, 2000 1:15PM
moment().format('LLLL');// Day of Week, Month Day, Year H:MM AM/PM e.g., Thursday,
January 1, 2000 1:15PM
moment().format('llll');// DoW, Mon Day, Year H:MM AM/PM e.g., Thu, Jan 1, 2000 1:15PMIf a field has a json value of 0, enable this field
this.setEnabled($field_name.isSelected(0));If a field has a json value of 1, set this field required
this.setRequired($field_name.isSelected(1));If a field has a json value of 2, set this field enabled and required
this.setEnabled($field_name.isSelected(2));
this.setRequired($field_name.isSelected(2));Default a hardcoded dropdown to the value of 4
this.getSelectedValues(true));Get a text box total based on drop-downs selected
this.setValue(
Number(+$field_name1.getSelectedValues(true) +
+$field_name2.getSelectedValues(true) +
+$field_name3.getSelectedValues(true) +
+$field_name4.getSelectedValues(true)));Get a total based on other text box numbers
this.setValue(
Number(+$field_name1.getValue(true) +
+$field_name2.getValue(true) +
+$field_name3.getValue(true) +
+$field_name4.getValue(true)));3 checkbox groups are set up but acting as 1, only 1 option is required across all 3, set each group as enabled and use the programming in the second group
var name1 = $field_name1.isSelected();
var name2 = this.isSelected();
var name3 = $field_name3.isSelected();
if (name1 === true || name2 === true || name3 === true) {
$field_name1.setRequired(false);
this.setRequired(false);
$field_name3.setRequired(false);
}
else {
$field_name1.setRequired(true);
this.setRequired(true);
$field_name3.setRequired(true);
}An alternative for the above functionality is to name each set in the group, disable the Required slider, and then use the Validation (right) side of the programming panel and enter the following on EACH checkbox group:
return Validator.oneSelected($field_name1,$field_name2,$field_name3);Disable a pulldown once a value has been selected
if (this.getSelectedValues(true) !== null) {
$(this.elem).find("swift-box").attr("disabled", true);
}The Collections tab is used to set up SQL queries that can be used to populate computed tables, drop-down options, radio groups, text areas, and text boxes.
When the field name is changed on a field that is used in a collection, the collection will automatically update to use the new name.
1. Click the Collections tab at the bottom of the screen.
2. Enter a Collection Name for the query. Do not use any spaces.
3. Enter the query in the SQL box.
4. To test the query, click Run Query.
Run query is opened in a new browser tab or window where you can submit your query for testing. If the query runs properly, go back to the Form Builder tab/window.
The query must have "value" in the select statement. If it does not, and the query is used in a text field on the form, an error will occur.
If a dropdown has a collection, the query must have a value and text column. If a text box or text area has a collection, the query must have a value column.
Using {student_id} vs. {$student_id} in the query: The dollar sign indicates that a value from a field on the current form (usually a dropdown) is being used. {student_id} would be the current student whereas {$student_id} is the student selected in a dropdown with the field name of student_id. The format {$fieldname} is used to call from a field that is set up on the form.
If you decide to not add this collection, click Cancel to clear the Collection Name and SQL fields.
5. Click Add/Edit Collection to add the query.
The query is added to the list beneath the Collections area.
6. To edit a collection, click the edit icon next to the collection.
The collection displays at the top of the screen.
7. After making the changes, click Add/Edit Collection.
8. To delete a collection, click the X next to the collection.
9. To add a collection to component, go back to the form by clicking the Builder tab at the bottom of the screen.
10. Click the computed table, dropdown, radio group, text area, or text box component in the work area.
11. For a dropdown component, click the Collection radio button on the right side of the screen and select the collection in the Collection pull-down.
12. For a computed table, radio group, text area, or text box, select the collection in the Collection pull-down.
13. Click Save.
Click the edit icon next to the Collection field to open the selected collection in the Collections tab ready for editing.
The Computed Table component is used in conjunction with the collections feature to display a read-only table on the form. See Using Collections below for more information on setting up collections.
1. In the Collection pull-down, select the collection that will populate the table.
2. Adjust the Width and Height of the computed table by entering numeric values, if needed.
The Actions tab in the Form Builder is used to designate a SQL query that will run when the form is approved or denied in SIS. Fields in the form can be used in the query with the {$fieldname} format. A certain value in a field on the form can cause a field in the student's record to be updated upon form approval. For example, an action can be set up so that when the school nurse approves a School Accident Report Form that has the Medical_Alert field on the form checked, the "Medical Alert Icon" field in the student's record is also checked. This will then trigger a medical alert icon to appear on the student, based on alert icon setup in Setup > Edit Rules & Workflow. The Actions tab is primarily used by Focus staff.
In Users > Profiles > Menu permissions, the "Edit Form Actions" permission listed under Form Builder must be enabled for users to be able to view and use the Actions tab.
1. Click the Actions tab at the bottom of the screen.
2. Enter an Action Name. Do not use any spaces.
3. Enter the Priority.
When there are multiple actions set up for a form, the priority dictates the order the actions run. The lowest number priority will run first.
4. In the Run On pull-down, select whether the query will run when upon form approval or denial.
5. Enter the query in the SQL box.
If your query references a field on the form, ensure the field has a name and that the name is properly referenced in the query using the ${fieldname} format. You must also know the value of that field that will trigger the alert. For the student field that will be updated, ensure you know the field ID and the value that will be set in the field.
If you decide to not add this action, click Cancel to clear the Action Name and SQL fields.
In this example query, the field custom_l772 will be updated to display a check mark upon form approval when the Medical_Alert field on the form has the defined value.
6. Click Add/Edit Action to add the query.
The query is added to the list beneath the entry fields.
7. To edit an action, click the edit icon next to the action.
The action displays at the top of the screen.
8. After making the changes, click Add/Edit Action.
9. To delete an action, click the X next to the action.
