Proposales uses a simple JSON based schema for defining UI layouts. These allow the user to customize parts of the UI. Currently customization is possible in the following places: integration config, proposal content details, proposal editor widget, and proposal data widget.

​
Icons

Some of the integration fields can be customized with an icon. The icon is specified by name. Currently the following icons are supported: 
type IconName =
  | 'person'
  | 'attendees' // Alias for person
  | 'accommodation'
  | 'chevron-right'
  | 'add'

​
Select

The select field creates a select input.
Select Field
type IntegrationSelectField = {
  type: 'select';
  id: string; // the value will be stored in data using this key
  helpLabel?: string; // this text will be displayed underneath the field
  defaultValue?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  options?: {
    name: string;
    value?: string;
  }[];
};

​
Text Input

The text input can be of various HTML text input types, and can be customized with optional icons. Text input Input with help label
Text Field
type IntegrationTextField = {
  type: 'text' | 'url' | 'tel' | 'email' | 'password';
  id: string; // the value will be stored in data using this key
  helpLabel?: string; // this text will be displayed underneath the field
  defaultValue?: string;
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  icon?: IconName;
};

​
Number Input

This works the same as text fields, but with numeric values. Input with icon Input with icon
Number Field
type IntegrationNumberField = {
  type: 'number';
  defaultValue?: number | string;
  id: string; // the value will be stored in data using this key
  helpLabel?: string; // this text will be displayed underneath the field
  placeholder?: string;
  required?: boolean;
  readOnly?: boolean;
  icon?: IconName;
  min?: number;
  max?: number;
  integerOnly?: boolean; // restricts the value to be an integer within the range defined by min (default 0) and max
};

​
Hidden field

Hidden fields are useful for setting properties internally without showing them them to the user. For example default values in a integration config. These are not visible in the UI, and are set to the default value specified.
Hidden field
type IntegrationHiddenField = {
  type: 'hidden';
  defaultValue?: string | number | boolean;
};

​
Switch

A toggleable switch for boolean values. Input with icon
Switch Field
type IntegrationSwitchField = {
  type: 'switch';
  defaultValue?: boolean;
  id: string; // the value will be stored in data using this key
  helpLabel?: string; // this text will be displayed underneath the field
  readOnly?: boolean;
};
A button linking to an external page. Link button
Link button
type LinkButtonField = {
  type: 'linkButton';
  label: string;
  href: string;
  icon: IconName;
};

​
Divider

A horizontal divider with an optional label
Divider
type DividerField = {
  type: 'divider';
  text?: string;
};
A header for dividing fields into sections.
Header
type HeaderField = {
  type: 'header';
  text: string;
};

​
Text

A section of text, with optional markdown support.
Text body
type TextBodyField = {
  type: 'textBody',
  text: string;
  markdown?: boolean;
}