Phone Number Component

The Phone Number component inserts a phone number field on the form. Phone numbers are validated for format.

When you add this field, a template (called an Input Mask) appears within the field to indicate the proper format for entering the numbers. The default format is (___) ___-____. You can change this input mask, or add multiple input masks, allowing the user to select the proper phone number type from a list before they input the number. See Input Mask.

Example of a Phone Number Field Rendered on a Form

Phone Number Field Example

Settings

The settings for each component are grouped under tabs. While there are multiple tabs and many fields, some are applicable to advanced users (for example, the API and Conditional tabs and JSON fields) and you do not need to complete them to render the component. For this reason, the settings that are necessary are detailed for each component. In some cases, when an optional field is frequently used, it is listed in a second optional settings table. For tabs and fields that are not listed, advanced users are assumed to have pre-existing knowledge of how to work with them if they elect to apply them; however, they should be aware that the fields may not be compatible with WebEOC. Contact the Juvare Support Center at +1 (877) 771-0911 for additional information.

Phone Number Component Settings Window

The following setting is necessary to render the component:

Phone Number settings fields (required)
Field	Description	Procedure
Label (Display tab)	Text that appears above the phone number field.	Enter the text using unlimited alphanumeric characters.

The following settings are frequently used but are optional:

Phone Number settings fields (optional)
Field	Description	Procedure
Label Position (Display tab)	Determines the positioning for the label in relation to the field.	Select one of the following options from the drop-down list. The default value is Top. Top Left (Left-aligned) Left (Right-aligned) Right (Left-Aligned) Right (Right-aligned) Bottom Label position options set both where the label displays in relation to the component and how the label text is aligned. For example, if you select the Left (Right-aligned) option, the label displays to the left of the component with right-aligned text.
Input Mask (Display tab)	A string of characters that indicates the format of valid input values. An example of an input mask is (____) ___-____ You can add multiple input masks. Adding more than one allows the user to select the correct format from a list preceding the phone number: You cannot use placeholders and input masks at the same time.	To add an input mask Under Input Masks, in the Label field, enter numbers and characters in the format you want to appear in the field. This format is validated when the user enters the phone number. For example, (999) 999-9999. When the field appears in the form, the numbers are removed but the expected format remains visible. For example, (____) ___-____ To add multiple input masks Under the Apply Mask On dropdown, select the Allow Multiple Masks checkbox. Under Input Masks, in the Label field, enter the label for the type of phone number (for example, Domestic). This phone type appears in the drop-down list that precedes the input mask. In the Mask field, enter the numbers and characters in the format you want to appear in the field. This format is validated when the user enters the phone number (for example, (999) 999-9999). Click + Add Another. In the newly-added line, enter the Label and Mask for the second number. Repeat steps 4 and 5, as needed.

Icons

The following tool icons are available:

Tool icons and descriptions
Name	Description	Procedure
Settings	Displays the settings window, in which you can modify the component’s settings.	In the Design area, move the mouse pointer over the component. A toolbar appears on the top right. The icons that appear depend on the component. Click the Settings icon. Modify the fields as needed. See Add Form Components. Click Save.
Move	Moves the component to another position on the board. This option is useful with touch pages. If you are not using a touch page, you can drag the component to its new location.
Copy Paste	Copies the current component and its settings and pastes it after the current component.	In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Copy icon. Click the Paste below icon. A copy of the component appears below the original component. Click the Settings icon and modify the settings for the new component. Click Save to save the new settings for the newly-copied component.
Remove	Removes the current component from the form.	To remove the component In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Remove icon.