DesignStudio Key Concepts

In DesignStudio, Boards are created, designed, edited, and published to display and capture information in WebEOC. In WebEOC, boards are used to manage and share information with authorized groups and individuals in your system and between linked systems.

In the context of a crisis information management system (CIMS), a board is equal to a large, chronological or categorical paper-based status board that is used to dominate EOCs and command centers around the country.

The Board Gallery displays a series of cards that represent the boards in your solution. If you prefer a list view, you can toggle the view to a list format in the board Gallery. The background colors of the Gallery banner and the cards differ according to the type of Gallery. The Board Gallery is blue; the Forms Gallery (described further down) is red.

In the Gallery, you can perform the following actions:

• Begin the process of creating a board or form.

• Locate and open an existing board or form in their associated workspace.

• Open the Settings page where you can access administrative, board, and form settings.

The Board Workspace is where you can create and manage boards, including editing board details, cloning existing boards, exporting boards, and previewing boards.

Access the board Details page by clicking the Details tab, which appears in the top right of every page after you select a board. Some of the details that are displayed on the Details page are for display only; however, there are many actions that you can perform on this page.

In the Board Workspace, in Design mode, the Explorer displays on the left. It contains the views, resources, and tables that comprise the board and its settings.

Board Design mode allows you to create and modify the board structure, including the views, resources, and tables. In this mode, you can drag components to design your board. Design mode is the default mode in the Board Workspace.

Code mode allows you to design the board through HTML coding. A Theme mode sets your viewing preference to Light, Dark, and Dark - High Contrast when you are in Code mode.

The Components tray is available in the Board Workspace. This tray contains the elements that comprise your board. When you drop a component on the canvas, its corresponding settings window appears in which you enter identifying details about the component (for example, its label). The components that are available depend on which type of view, such as Input, Display, List, or Dashboard, that is selected in the Explorer.

Board components are the user interface elements that you add to a board. In DesignStudio, components appear in Design mode, on the Components tray. Components are grouped by categories. The categories that display depend on which type of view, such as Input, Display, List, or Dashboard, that is selected in the Explorer.

Input views are views where users enter data. You can also create an Input view by copying a view.

Display views display the output of the data. View filters can be used to filter the data on Display views and can also be added as filter criteria if you add a Filter/Search button to a board. View filters can also be created in WebEOC.

When you design a board, you can add a delete confirmation message called a Delete view that appears on your board in WebEOC when a user attempts to delete a record. These messages help to prevent the accidental deletion of records. A default message is provided; however, you can configure the message header and message body. You can also add dynamic tags to the message body, containing information about the record in relation to the incident, or any other related field.

A Details view provides a more granular view of individual records. You can also create a Details view by copying a view.

A List view is referenced by the board so that it can load the data. DesignStudio provides you with the tools to add components to enhance the view. You can also create a List view by copying a view.

In DesignStudio Pro, you can create Dashboard views that allow you to arrange a combination of boards or maps on a dashboard. Dashboard views represent your data visually with statistical summations, graphs, charts, and embedded content.

Typically reserved for more advanced coders, resources allow you to use CSS, HTML, or JavaScript to style the resource’s views. Resources must be imported into the views after they have been created, but once imported, you can edit, rename, delete, and copy resources in Design mode. Resources, like boards, are tracked in History.

To publish a board, you must have already set up publish profiles. In DesignStudio, publish profiles allow you to publish boards into one or more WebEOC environments by following a sequence of steps that take place in the process. Publish profiles can include a single step, or they can be more complex with multiple steps. In DesignStudio, these steps are called connections. To add publish profiles, you must be a WebEOC Administrator with Service Account type permissions.

In DesignStudio Pro, forms are created, designed, edited, and published for capturing information. Forms are embedded, high-speed intake pages that can handle tens of thousands of hits per minute, allowing you to capture and manage information from people that do not have access to WebEOC. For example, you can create a form to manage a vaccination waiting list and embed the form on your website. Every time the form is completed, the information is sent to your board in WebEOC. Forms are available in DesignStudio Pro. Contact your Client Success Manager (CSM) for additional information.

The Gallery contains several filter tools to help you quickly find the form that you need. Forms are available in DesignStudio Pro. Contact your Client Success Manager (CSM) for additional information.

The Form Workspace is where you can create and manage forms, including designing forms, editing form details, and publishing forms.

Access the form Details page by clicking the Details tab, which appears in the top right of every page after you select a form. Some of the details that are displayed on the Details page are for display only; however, there are many actions that you can perform on this page.

The Components tray is available in the Form Workspace. This tray contains the elements that comprise your form. When you drop a component on the canvas, its corresponding settings window appears in which you enter identifying details about the component (for example, its label).

Form Design mode allows you to create and modify the form structure and components. In this mode, you can drag components to design your form. Design mode is the default mode in the Form Workspace.

Form components are the UI elements that you add to a form. In DesignStudio Pro, form components appear in the Form Workspace, in the Design mode, on the left. The following types of components are available for forms: Basic, Advanced, Layout, and Security.

When a user completes and submits a form, a message displays to signify the end of the user's interaction with the form. The default message is: Your form has been submitted successfully.

This default message does not mean that the form's submission has been validated and that it has been successfully submitted. It is a configurable page that appears when the user clicks the Submit button.

In DesignStudio Pro, you can modify what appears on this page using the Layout components and rich text tools.

As part of creating the form, after you validate the form fields, you publish it to make it available to users. If any of the fields were entered incorrectly, the publish action will fail and a description of the error appears, along with an error ID that you can give to support, if needed for troubleshooting purposes. Correct the errors, republish the board, and then republish the form.

After users have completed a form and submitted it, you can track the data submitted on these forms in DesignStudio Pro.