Skip to main content

Custom Widgets

Overview​

Custom widgets allow you to extend the UI functionality of your frontend application by adding new components to your view layouts.
These widgets:

  • Are not associated with any fields in the model.
  • Are used to enhance the UI by providing custom rendering or interaction capabilities.

SolidX provides a built-in way to create custom widgets using the CustomHtml widget.

How to Configure the CustomHtml Widget​

Example: Display how many characters a user has typed in a text field.

Code: CustomHtml Widget Configuration

{
  "type": "custom",
  "attrs": {
    "name": "page-1-row-1-div-1-div-1-title-custom",
    "widget": "CustomHtml",
    "html": "<span>You have typed {{ctxtTitleAlphpabetCount}}</span>",
    "visible": false
  }
}

Explanation​

  • Uses the CustomHtml widget to show a dynamic message.
  • Displays the number of characters typed in a text field.
  • Receives props of type SolidFormWidgetProps.
  • The variable {{ctxtTitleAlphpabetCount}} is replaced dynamically.

This placeholder can represent:

  • A field value (referenced by field name).
  • A custom variable, set in the form data via a form handler.

Learn more here: Form View Event Listeners

How It Works​

  1. SolidX loads the form layout in edit/view mode.
  2. It identifies custom fields (type: custom).
  3. It dynamically imports the corresponding widget component.
  4. The widget is rendered with the following props:

Code: Props Interface

export type SolidFormWidgetProps = {
    field: any;
    // This comes from Formik...
    formData: Record<string, any>;
    viewMetadata: SolidView;
    fieldsMetadata: FieldsMetadata;
    formViewData: any;
};
  1. The widget applies your custom rendering logic.

With this approach, you can create reusable UI enhancements and extend your SolidX frontend with ease.