Home > WebEOC > Admin Guide > Boards > Create and Edit Input Views

Create and Edit Input Views

The Board Editor page allows you to visually design and edit data entry (input) views that users can use to enter data.

Note: This procedure is used in conjunction with the creation of board procedure.

To create a board input view
  1. In the Admin window, go to Process: Boards. The Boards page opens.

  2. Click the name of the board you want to add the input view to. The Board: Edit Board page opens.

  3. In the Edit section, click Board Editor. The Board Editor: [Board Name] page opens.

  4. In the Input Views section, click Create Input View. The New Input tab opens.
    WebEOC_inputviews.png

    Tip: Alternatively, if you want to create a board input view from an existing view, click the existing view's associated Copy link. See Copy a View.

  5. Enter or change the input view Name.
    Boards_Manager_New_Input_Tab.png

  6. For Table, select a table from the drop-down list. Alternatively, to automatically generate a table, click Create Table.

  7. In the HTML section, go to the Design View tab.

    Tip: For help using the Advanced and Plain Code Editors, see HTML Options.

    Boards_Manager_Editor_Input.png

  8. The Design View tab of the HTML section includes four components.

    • Cell formatting tools.
      Advanced_Board_Editor_View_Editor_Format.png

    • Undo and Redo buttons.
      Advanced_Board_Editor_View_Editor_Undo.png

    • Field types and properties editing.
      Boards_Manager_fields.png

    • Design pane. Use this pane to create the input view design, assign cell and formatting properties, and view a visual representation of the input view.

  9. Begin constructing the input view layout by selecting one of the baseline cells label and field and applying the Split Horizontal, Split Vertical, or Merge button. You must have a cell selected in order to apply the operation.
    Advanced_Board_Editor_View_Editor_Split.png

    • To create a horizontal cell, select a cell and click the Split Horizontal button.

    • To create a vertical cell, select a cell and click the Split Vertical button.

    • To merge cells into a single cell, hold down the CTRL key, click adjoining cells to form a rectangle, and click the Merge button.

      Note: Merging cells deletes some of the merged content of the selected cells as part of the process.

  10. Continue to split and merge cells until you get the layout you want. Once you have the layout constructed, you are ready to assign the field type and properties to each cell.

    Advanced_Board_Editor_View_Editor_Field_Add.png

  11. If the cell is to be used as a label in the input view:

    • Select the cell.

    • Enter a name for the label in the cell content's text field.

    • Click Apply. The label appears in the Label cell.

  12. If the cell is to be used as a data field in the input view:

    • Select the cell.

    • Select the appropriate field type (for example, Text, Textarea, Dropdown, or Checkbox).

    • Select the cell with the field that was created to display additional field options.

    • In the field properties section, enter a unique name for the field (this will be used in the database).

      Note: Ensure all field name declarations are unique so you can easily identify them when building your display view.

    • Define the field Size and Value, if needed.

    • Click Apply.

      Tip: It is a good practice to periodically save the view as you are working on it. Saving allows you to revert back to a previous version at any time using the History feature.

    • Select the cell.

    • Click a field type, and set any additional cell properties required. The type of field selected determines the field properties available.

      • Text – Displays a single line of text. You need to set additional cell values for the text field.

      • Textarea – Displays multiple lines of text. A scroll bar is available to view inputs that exceed the row count set for the field. You need to set additional cell values for the Textarea field.

      • Dropdown – Presents a (drop-down) list of items. You need to set additional cell values and specify the list to be used.

      • Checkbox – Allows a user to mark a selection or selections. You need to set the value for the check box (for example, Yes).

  13. When you have configured the cell label and field, edit the appearance by using the cell formatting tools.

    Note: You can also choose not to alter the default appearance as a standard format is already applied.

    • Select the cell.

      Tip: If you wish to apply changes to multiple cells, hold the CTRL button and select the applicable cells.

    • To change the background color of a selected cell, click the Background Color field and enter a hexadecimal color code or choose the color from the palette. Click Apply.

    • To change the text color of the selected cell, click the Font Color field and enter a hexadecimal color code or choose the color from the palette. Click Apply.

    • To set the font for the text, open the Font drop-down list and click the font name.

    • To set the size for the text, open the Size drop-down list and click the point size for all selected cells.

    • Set the style for the text by clicking (B) Bold, (I) Italic, or (U) Underlined for the selected cell.

    • To set the text horizontal alignment, click Left Justify, Center Justify, or Right Justify.

    • For Vertical Align, set the vertical alignment for the text in the cell by selecting Top, Middle, Bottom, or Default

      Note: The Default alignment setting relates to the alignment specified through the HTML written in an external editor and imported to a board. The default setting in this case can be overwritten by clicking Top, Middle, or Bottom in the Board Editor.

    • To set the width of the cell, for Width, enter a number with a unit and click Apply.

      Note: Valid units include the percent symbol (%), inches (in), centimeters (cm), or pixels (px).

  14. Click Save.

    Tip: Refer to Board Tags and Attributes for detailed information about tags that can be added to enhance functionality in the view.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.