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

Create and Edit Display Views

The Board Editor page allows you to visually design and edit board display views that users can use to view data.

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

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

    Boards_Manager_Boards_List.png

  2. Click the name of the board you want to add the display 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 Display Views section, click Create Display View. The New Display tab opens.
    Advanced_Board_Editor_Display_View_List.png

  5. Enter or change the display view Name.

  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, access 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 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

    • Cell types and properties editing.
      Advanced_Board_Editor_View_Editor_Cells.png

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

      Advanced_Board_Editor_View_Editor_Design_Pane.png

  9. Begin constructing the display 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.

    • Display views may be designed to use fixed header and footer rows, similar to a spreadsheet. To increase or decrease the number of header or footer rows, use the Header Rows and Footer Rows plus (+) and minus (-) buttons located just above the Design pane. If no header or footer rows will be used, set the values to 0 (zero).

  10. Continue to split and merge cells until you get the layout you want.

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

    • Select the cell.

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

    • Click Apply. The label appears in the cell.

  12. If the cell is to be used to display information in the display view:

    • Select the cell.

    • For Field, select the field for which data will be displayed in the cell.
      Advanced_Board_Editor_View_Editor_Field.png

    • Click Apply.

    • Repeat these steps for each data field.

  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.

    • 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.

    • Set the vertical alignment for the text in the cell by going to the Vertical Align drop-down field and 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 overridden 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. 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.