Sample Property Definitions

When building custom components, you can make use of the Component Manager props to make your custom component configurable in the UI Designer. Below you can find some sample property definition that you can adopt in your custom component.

Common Properties

export interface BaseProp {
  category?: string;
  helpText?: ((item: RequiredItem<never>) => string) | string;
  hidden?: boolean;
  label: string;
  preventMultiEdit?: boolean;
  required?:
    | ((item: RequiredItem<never>, context: PropertyContext) => boolean)
    | boolean;
  type: string;
}

Text

{
  label: "Gap",
  type: "string",
  placeholder: "e.g. 8px",
  helpText: "The flex gap to be added between the child components. e.g. 8px", // markdown can be used here
  category: "Flex",
  required: true
}

Dynamic help text sample

        helpText: (item: RequiredItem<'ActionButton'>) => {
          const key =
            item.props.hotKey ||
            (item.props.text.type === 'text' && item.props.text.value?.length
              ? item.props.text.value.charAt(0)
              : '<Hot Key>');

          return `A shortcut key to be mapped for this button click event. User can use Ctrl+Shift+${key} or Cmd+Shift+${key} as a keyboard shortcut instead of a mouse click on this button.`;
        },

Number (slider)

{
  label: "FlexGrow",
  type: "number",
  min: 0,
  max: 12,
  step: 1,
  category: "Flex",
  required: true
}

Boolean

{
  label: "Full Width",
  type: "boolean",
  helpText: "If checked, the button will take up the full width of its container."
}

Boolean Expression

{
  label: 'Updatable',
  type: 'booleanExpression',
  category: 'Data',
}

Expression

{
    label: 'BG Image',
    type: 'expression',
    returnType: async (item, context) => 'string', // Return type must return one of the following 'string' | 'boolean' | 'number' | 'date' | 'yn' | 'tf' | 'array' | 'object' | 'any'
    required: true,
}

Color Expression

{
  label: "Header BG Color",
  type: "ColorExpression",
  category: "Look & Feel",
  helpText: `Use one of the following values for a gray background with darkmode support.

divider
background.default
action.selected
primary.main
primary.dark
primary.light

Similar to how primary palette is used above, you can also use one of the following palette secondary, success, warning, error.
`
}

Select

Use toOptions function to auto create display labels based on the value

import { toOptions } from 'cloudio';

{
  label: 'Align Content',
  type: 'select',
  options: toOptions([
    'auto',
    'baseline',
    'center',
    'end',
    'flex-end',
    'flex-start',
    'inherit',
    'initial',
    'normal',
    'revert',
    'self-end',
    'self-start',
    'start',
    'stretch',
    'unset',
  ]),
  category: 'Flex',
  required: true,
}

Manually specify both value & display labels

{
  label: "Component",
  type: "select",
  options: { "span": "Span", "div": "Div", "img": "Image" }
}

View Attribute Chooser

{
  label: 'View Attribute',
  type: 'ViewAttributeChooser',
  required: true,
  category: 'Data',
  aliasType: 'STORE',
  getAttributeDataTypes: () => ['String'], // FieldType[] | 'ALL' where FieldType is "Date" | "DateTime" | "Attachment" | "Boolean" | "Decimal" | "Double" | "Email" | "EncryptedString" | "Integer" | "JSON" | "Percent" | "Phone" | "Reference" | "String" | "Textarea" | "URL" | "UserID" | "YN" | "TF"
  preventMultiEdit: true,
}

Margin

{
  label: "Margin",
  type: "margin",
  category: "Spacing"
}

Controller Function

{
  label: 'On Change',
  type: 'controllerFunction',
  category: 'Controllers',
}

DataSource Alias Chooser

{
    label: 'Data Store Alias',
    type: 'DataSourceAliasChooser',
    category: 'Select Options',
    allowedTypes: ['CloudDataStore', 'ReadOnlyDataStore'], // "CloudDataStore" | "DataStore" | "LocalDataStore" | "ReadOnlyDataStore" | "TransientDataStore"
    helpText:
      'Only ReadOnlyDataStore allowed. Use Query Select action to query it externally.',
    required: (item: RequiredItem<'Select'>) =>
      isEmpty(item.props.optionValues),
}

Attribute Chooser

{
  label: 'Value Attribute',
  type: 'ComboAttributeChooser',
  aliasType: 'LOV',
  category: 'Select Options',
  getAttributeDataTypes: () => 'ALL',
  required: (item: RequiredItem<'Select'>) =>
    !!item.props.comboDatasourceAlias,
}

Options

{
  type: 'options',
  label: 'Option Values',
  category: 'Select Options',
  helpText:
    'If the options are fixed, then you can specify here instead of providing a Data Store Alias below. e.g. B:Blue, G:Green, Yellow, Red',
}