UI-Only Fields and Models

UI-Only (“user interface-only”) fields hold data values that react to user input or interact with queried data. They work with data values that:

  • are entered by users in runtime
  • result from data queried by the user
  • are predetermined by the builder

The data in UI-Only fields is essentially temporary; as their name implies, they are not stored in any data source and do not persist across page loads. If the user refreshes the page, the data in a UI-Only field is lost.

Note

UI-Only fields are often used on UI-only models. These models do not connect to any external system, but instead serve to store temporary values at runtime, but they do not save that data.

UI-Only fields can enhance the user experience in a number of ways:

  • Create a custom formula field that interacts with data in real-time on a screen-by-screen basis:

    • Display a field that shows the sum of all projected amounts for recent sales opportunities displayed on a Table component. If the fields used to create this sum are affected by filters or conditions, the UI-Only summary field updates to reflect these changes in real-time. Because this sum only needs to provide real-time information about what the user currently viewing, a UI-Only field is perfect for the job.
  • Create on-screen checkboxes that trigger the Action Framework and conditional rendering:

    • Show or hide component elements (such as a Form section by setting a UI-Only toggle.
  • Provide user-friendly fields that automatically transform data:

    • Have a component that needs to react to, or alter, values input by the user? A UI-Only field can do just that.

More UI-Only field use cases.

Add UI-Only fields

Note

Remember, the data captured in UI-Only fields is not attached to the records on the page. For a field that stores and tracks data, create a new custom field from within the data source.

Add to a UI-Only model

A common way to use UI-Only fields is by creating a UI-Only model and adding UI-Only fields to it. By doing this, you can sensibly organize those fields, whether using one model for all of needed UI-Only fields or create separate models for different uses. This also avoids creating “dummy models” attached to existing data sources.

To create a UI-Only model:

  1. In the Elements pane, navigate to the Models tab.

  2. Click add Add Model and configure:

    • Data source type: UI-Only.
  3. Select the new UI-Only model and click Fields.

    • Click add Add Field.

      Warning

      UI-only field Ids cannot contain spaces. If spaces are needed, use them in the field’s label.

UI-Only models also support the use of model conditions and model actions.

Warning

Model conditions on UI-Only fields require the field to have a value by default. If the UI-Only field doesn’t have a value by default—for example, a UI-Only field filled in by the user at runtime—the model condition will not work correctly.

Add to other models

You may also add UI-Only fields to any other model, regardless of data source type. To do so:

  1. Create a model or navigate to an existing one.

  2. Within the model, click Fields.

    • Click add Add Field.

      Warning

      UI-only field Ids cannot contain spaces. If spaces are needed, use them in the field’s label.

Note

In Skuid, models load in the order they are listed in the models tab, with models at the top of the list loading first. Some models are dependent on others for data. In these situations, dependent models must load after their primary models. This is critical when using UI-Only fields: having a field that references a model that hasn’t loaded yet will cause errors.

Here’s an example: If an Accounts model loads before a Contacts model, but there’s a reference on that Accounts model (for example: a condition or a UI-Only field) to the Contacts model, Skuid is forced to access data that hasn’t loaded yet—which leads to errors on the page.

Properties

New UI-Only fields have metadata properties—information that describes what the data is, and is used for. Once a UI-Only field has been added to a model, it must be configured using the field’s metadata properties.

To access and update the UI-Only-field’s metadata properties, click the UI-Only field from the Fields list under the model name in the Elements pane.

UI-Only Fields and Display types

When you create a UI-Only field, you can set the field’s Display type property to determine how the raw data will be displayed to the end user.

Formula display type [[]]

If a UI-Only field’s display type is set to Formula, then the field’s value is determined by the statement listed within the Formula tab of the metadata properties pane. For more about different types of formulas and their structure and format, see the Formula and Function Reference.

Picklist display type [[]]

When creating a UI-Only field with a picklist display type, define the values in the picklist using the metadata Picklist source property by:

  • Entering them manually using the Picklist entries tab.

  • Entering them by pulling the values from a field on a model using the Picklist model tab.

    Note

    You can only draw fields from a model already included on the page.

  • Use a JavaScript snippet as a value source.

Note

To ensure that the picklist is visible to the user, set the component’s Default mode to Edit.

Reference display type [[]]

UI-Only reference fields allow users to look up a specific record, pulling that information from another model.

Note

This model does not have to be represented on the page (attached to a component that is displayed on the page).

Some use case examples:

  • Use a UI-Only field as a filter: When a particular account is selected, run actions to filter a model of the contacts object and requery the model. This option provides a different and more visual way of presenting a filter, and more granular control that what is possible with a standard Skuid filter.
  • Use a UI-Only field to pre-populate some data: When an account’s record is selected, run actions to update any contact records that include values from that account.

Troubleshooting

I’m having trouble loading my UI-Only fields [[]]

Models load in the order they are listed within the Composer’s Models tab. If Model 1 has a UI-Only field that references Model 2, and Model 1 loads before Model 2, this will produce an error because Model 1 won’t be able to reference Model 2–it’s not loaded yet. Make sure the models on the page load in an appropriate order.

My UI-Only field is displaying the wrong date or datetime [[]]

This may be caused by issues with the end user’s browser parsing the date field in an unexpected way. Skuid highly recommends date or datetime fields utilize ISO 8601 format.

If displaying dates in a different format (perhaps through the use of FORMAT_DATE), then set the Formula Return Type to text instead.

Note

The Formula Return Type property is only available when the field’s Display type is set to Formula.

  1. In the Elements pane, on the Models tab, click the model containing the UI-Only field.
  2. In Fields, click the UI-Only field.
  3. In the Metadata properties pane, set Formula Return Type to Text.

Depending on the use case, you may also consider using three curly brackets for any merge variables referencing this field. Using three curly brackets displays the raw string without attempting to transform the date/time based on the end user’s locale.