Customize a Board with HTML

Audience: WebEOC Nexus administrators and solution builders who want to customize board Display and Input views using HTML and WebEOC Nexus HTML tags.

Goal: Create a customized HTML board that enhances the presentation of board data by using HTML formatting, WebEOC Nexus HTML tags, and conditional logic.

What You'll Learn

In this guide, you'll learn how WebEOC Nexus uses HTML to customize board views, how to use the HTML editor, where to find the available HTML tags, and how to use display, input, notification, and conditional tags to create dynamic board layouts.

What You'll Accomplish

By the end of this guide, you'll have created and tested a board with customized HTML that uses WebEOC Nexus HTML tags to display and interact with board data.

Introduction

HTML display views allow you to customize how information is presented within WebEOC Nexus boards. In addition to standard HTML, WebEOC provides a rich set of custom HTML tags that display board data, update fields, embed maps, launch notifications, and perform conditional logic.

This guide introduces the HTML customization framework and walks through the process of building your first HTML display view using the existing HTML documentation.

Follow these steps

1. Learn the HTML customization framework.

   Before creating a display view, familiarize yourself with how WebEOC Nexus uses HTML.

   See HTML Conventions and Access the HTML Section of the Board Editor..

   This topic introduces:

   • The HTML editor

   • Editing modes

   • HTML syntax

   • Supported conventions

   • HTML reference topics

2. Review board tags and attributes.

   WebEOC Nexus provides many HTML tags that extend standard HTML functionality.

   See Board Tags and Attributes.

   This topic serves as the primary reference for all available HTML tags. Review the available tag categories, including:

   • Display tags

   • Input tags

   • Notification tags

   • Conditional tags

   • Mapping tags

3. Display information from the current board.

   These tags control how board information is presented to users. See Display tags.

   Experiment with such tags as:

   • <field>

   • <eocfield>

   • <boardname>

   • <notificationlink>

   • <attachment>

   • <calendar>

4. Add search and filtering.

   Allow users to find information more quickly and make Display views easier to navigate.

   Review the Filter and Search tags.

   Examples include:

• <search>

• <searchbutton>

• <filterbutton>

• <filterdropdown>

• <filterlistdropdown>

• <clearsearchbutton>

5. Display user and organization information.

   Personalize the display using information tags.

   Examples include:

   • <agencyinfo>

   • <userinfo>

   • <username>

6. Add input controls.

   Allow users to enter or update information.

   Examples include:

   • <input>

   • <textarea>

   • <select>

     The <select> tag can populate dropdowns from WebEOC Nexus Lists, making it especially useful for standardized data entry.

   • <insertfields>

   • <updatefields>

   • <savebutton>

   • <cancelbutton>

7. Add related data.

   Display information from related tables. These tags help build parent/child relationships and display related records.

   Review:

   • <foreignkey>

   • <foreignkeyreference>

   • <relatedlist>

   • <relatedexpression>

8. Add notification and utility features.

   Enhance the board with operational tools. These tags extend the board beyond simple data display by adding notification, printing, mapping, and monitoring capabilities.

   Examples include:

   • <openAdhocNotificationTemplate>

   • <notificationRecipientsPicker>

   • <recordmonitoring>

   • <printbutton>

   • <pdflink>

   • <embedmap>

9. Create dynamic displays with XSLT tags.

   Use XSLT tags to make your display respond to board data. These tags allow you to show or hide content, loop through data, display field values, and apply conditional formatting. For example, the <if> tag can display content only when a field meets a specified condition, while <attribute> can be combined with <if> to dynamically change HTML attributes such as colors or styles.

   Review:

   • <if>

   • <choose>

   • <when>

   • <otherwise>

   • <value-of>

   • <for-each>

   • <attribute>

10. Add calculations and expressions (Advanced).

    If your display needs calculated values, review the expression tags.

    Examples include:

    • <expression>

    • <externalexpression>

    • <relatedexpression>

    These tags support calculations, aggregate values, and SQL/T-SQL expressions that can summarize or transform board data.

11. Test your HTML view.

    Verify that:

    • Board data displays correctly.

    • Search and filtering work.

    • Input controls update records.

    • Related data displays properly.

    • Notifications launch correctly.

    • Maps and embedded content display.

    • Conditional logic behaves as expected.

    • Calculated values are accurate.

    • The display renders correctly across supported browsers.