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.

{
  "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:

export type SolidFormWidgetProps = {
    field: any;
    // This comes from Formik...
    formData: Record<string, any>;
    viewMetadata: SolidView;
    fieldsMetadata: FieldsMetadata;
    formViewData: any;
};

5. The widget applies your custom rendering logic.

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