Skip to main content

Add a Custom Item Interface

To create a custom item interface for any module, follow the steps below:

  1. Navigate to the module you want to create the custom interface for and select Editor. The module builder displays.

    select_module_editor.png
  2. Select the Interfaces button in the module builder toolbar. The Interfaces panel displays.

    select_interfaces_button.png
  3. Select Create a new interface. The Create New Interface window displays.

    select_create_new_interface.png
  4. Enter a Name and Description, if desired, for the new interface, then select Create. The interface builder displays.

    create_new_interface_window.png
  5. You have created a new custom interface for your module. Next, add widgets and fields to complete your interface.

    new_interface_blank.png

Add and Configure Widgets

Widgets are pre-built, self-contained units that serve a specific function in your interface. In many cases, this function is to display a particular group of fields, but widgets can also enable users to activate actions or leave comments using the interface.

See Custom Interface Widgets for a list of all available widgets and their functions.

  1. In the right panel of the interface builder, locate the Widgets section.

    widget_section.png
  2. Select the widget you want to add to the interface. The widget is added to the interface and displays in the interface builder, along with the configuration panel.

    widget_added_w_panel.png
  3. In the Header section of the configuration panel, select the Title and Icon for the widget, then determine whether the widget displays at half-width or full-width in the interface.

    If two adjacent widgets are set to half-width, they display side-by-side.

    config_panel_title_icon_and_width.png
  4. Below the Header section is a widget-specific section that contains the relevant content for the specific widget you're configuring. For example, in the Actions widget, this section is titled "Actions" and displays a list of available actions that you can select to include in the widget. For another widget, like Key Metrics, this section contains the various fields you may want to display.

    The Header section is shared by all widgets, but not all widgets have an additional widget-specific section. The Rich Text widget, for example, only has a Header section because it doesn't require any specific configuration.

    config_panel_widget_specific_fields.png
  5. To add another widget, select Add Widget below the existing widgets.

    add_another_widget.png

Add Fields

Fields comprise the core of most interfaces—they provide the information that users want to track and take action on. For this reason, the most common widget is the Fields widget, which enables you to display any fields that are available in the module. Additionally, some widgets, like Status and Inner Items, contain select fields you can display or complement with additional fields.

In addition to the selected fields contained within widgets like Status, there are several ways to add fields to your interface. For details about the different methods for adding fields, see the sections below:

Add Fields with the Fields Widget

The Fields widget provides a clean starting point from which you can add any fields that are available in the module. This widget contains no pre-selected fields and enables you to choose only the fields you want to include:

  1. Add a new widget and select the Fields widget. The widget is added to the interface and displays in the interface builder, along with the configuration panel.

    select_fields_widget.png
  2. In the Fields section of the configuration panel, select Add Field. A new Select Field dropdown displays.

    fields_cofig_add_field.png
  3. Select the dropdown and choose the field you want to include in the widget.

    fields_config_select_field_to_add.png
  4. When finished, select Add Field. The added field displays in the interface builder and in the Fields section of the configuration panel.

    fields_config_select_field_submit.png

    You can select the checkbox beside each field to hide or show the field.

Fields by Type

To simplify the interface building process, there are preconfigured Fields widgets for each field type, as well as for any matched entity fields in your module. To add a field type-specific Fields widget, follow the steps below:

  1. In the right panel of the interface builder, locate the Fields By Type section.

    fields_by_type.png
  2. Select the field type you want to add to the interface. The field type is added to the interface and displays in the interface builder, along with the configuration panel.

    fields_by_type_manual.png
  3. Configure the Header and Fields sections as desired.

Fields by Matched Entity

In much the same way you can add fields by type using the preconfigured Fields widgets, you can add fields created by the matched entities in your module.

  1. In the right panel of the interface builder, locate the Fields By Matched Entity section.

    fields_by_matched_entity.png
  2. Select the matched entity whose fields you want to add to the interface. The fields for the selected matched entity are added to the interface and display in the interface builder, along with the configuration panel.

    fields_by_matched_entity_email.png
  3. Configure the Header and Fields sections as desired.

Add Fields in Another Widget

Some widgets contain fields as part of their configuration. For example, the Status widget contains the Status, Due Date, and Owner basic fields, among others. To include additional fields, follow the same process outlined in steps #2-4 in Add Fields with the Field Widget.

Edit the Interface Theme

Once your interface has all the necessary content, you can customize its theme, including displaying your company logo, editing the interface title and subtitle, and choosing colors.

  1. Select anywhere in the interface header. The Theme configuration panel displays.

    theme_select_header.png
  2. Upload a company logo, if desired, and turn on the Show company logo toggle to display it on your interface.

    theme_logo.png
  3. Enter a Title and Subtitle for the interface. Select the insert field icon, insert_field.png, to include fields from your module in the title or subtitle.

    theme_title_and_subtitle.png
  4. Specify a color for the header background and text by selecting a color from the color picker. Additionally, choose whether the text is left-aligned, center-aligned, or right-aligned (center-aligned is the default).

    theme_color_and_text_align.png

Publish and View the Interface

After creating a custom interface, you must publish the solution that contains the relevant module. Then, navigate to the business report for the module to view the interface. Below is an example of a custom interface viewed in from the business report:

Set the custom interface as the default in the top right of the interface builder.

build_preview_prod.png

Once the relevant solution is published, anyone with access to the business report can view and use the custom interface.