Integration Field

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 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.

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.

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;
};

Link button

A button linking to an external page.

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;
}

API Documentation

Entities

Attachments

Companies

Content

Proposals

Icons

Select

Text Input

Number Input

Hidden field

Switch

Link button

Divider

Header

Text

​Icons

​Select

​Text Input

​Number Input

​Hidden field

​Switch

​Link button

​Divider

​Header

​Text

Icons

Select

Text Input

Number Input

Hidden field

Switch

Link button

Divider

Header

Text