Custom Forms

interface ICustomForm {
    // Custom form ID.
    // Exclude this value for new records.
    ID?: number;
    // This is the Entity Type ID that this custom form is associated with.
    "EntityType.ID"?: string;
    // Human readable custom form name.
    Name?: string;
    // Custom form type. This helps identify how to parse the settings.
    // The only type that's supported is "COMPONENT_STACK", other types are currently deprecated.
    Type?: "COMPONENT_STACK";
    // Custom form content.
    Settings?: {
        // If null then it'll use the default value within the application.
        // For Navigator this is 430px (subject to change).
        size?: {
            // Value is in pixels.
            width: number;
        },

        // Title is the Entity and Entity Type's names.
        // Default = true.
        includeTitle?: boolean;
        // Tools is the toolbar that includes buttons such as delete, fly, etc.
        // Default = true.
        includeTools?: boolean;

        // The stack of components that make up the form.
        // See below for the stack item data model.
        stack: IStackItem[];
    }
}

/**
 * Represents a component in the Custom Form stack.
 */
interface IStackItem {
    // Indicates what component should be loaded.
    component: "STATIC_TEXT" | "ENTITY_TEXT" | "IFRAME" | "LINK" | "ENTITY_GALLERY" | "ENTITY_ATTRIBUTES" |
               "ENTITY_ATTRIBUTE_GROUP" | "ENTITY_COMMENTS" | "BUTTON" | "NUMBER_CHART" | "NUMBER_SERIES_CHART"

    // Params are based on the component type.
    // See below for each component's params.
    // Not all components require params, for example "ENTITY_GALLERY" will load the typical Entity gallery-
    // that you see in the default Info View.
    params?: any[];
}

interface IStaticTextParams {
    // Typed text by user we populate box with.
    text: string;
}

interface IEntityTextParams {
    // Path to attribute we want to populate this text with.
    // Attribute path segments are separated by a forward slash. Eg: 'address/city'.
    attrPath: string;
}

interface IIFrameParams {
    // URL to load in the iframe.
    // Use ${"your_attribute_path"} to substitute in the attribute value of the Entity.
    url: string;
    // Height of the iframe in pixels.
    height: number;
}

interface ILinkParams {
    // URL to navigate to.
    // Use ${"your_attribute_path"} to substitute in the attribute value of the Entity.
    url: string;
    // Label to display on the link.
    label: string;
}

/**
 * The button component is used to perform some sort of navigation or action.
 * Navigation is between other forms or the default info-view dialog.
 */
interface IButtonParams {
    action: "OPEN_FORM" | "OPEN_INFO_VIEW";
    // Custom Form ID to load if the action is to open a form.
    formId?: number;
    // Text to display on the button.
    // Can be empty if you want to just display an icon.
    buttonText?: string;
    // Expected is a font-awesome icon.
    // Eg: "fas fa-plus".
    buttonIcon?: string;
    // If the icon should be on the left or right of the text.
    buttonIconSide?: "LEFT" | "RIGHT";
}


/**
 * This is an alternative to the entity attributes section.
 * The other one will use the entity type's schema to display all attributes whereas this one will display specific ones.
 */
interface IEntityAttrGroupParams {
    items: IAttrRow[];
}

interface IAttrRow {
    // Attribute path segments are separated by a forward slash. Eg: 'address/city'.
    attrPath: string;
}

interface INumberChartParams {
    /**
     * The kind of chart to draw.
     *
     * Bar = rectangle that fills up based on the value.
     * Battery = rectangle that fills up based on the value, but has a battery shape.
     * Thermometer = rectangle that fills up based on the value, but has a thermometer shape.
     * Needle Gauge = a gauge that fills up based on the value. Similar look to a speedometer.
     */
    type: "BAR" | "BATTERY" | "THERMOMETER" | "NEEDLE_GAUGE" | "LARGE_NUMBER" | "ON_OFF_SWITCH";
    // Static min value to use. This will be used if the attribute is not provided, or if the attribute is not a number.
    minValue?: number;
    // Path to the attribute that holds the chart's min value.
    minValueAttrPath?: string;
    // Static max value to use. This will be used if the attribute is not provided, or if the attribute is not a number.
    maxValue?: number;
    // Path to the attribute that holds the chart's max value.
    maxValueAttrPath?: string;
    // Suffix to append to the value. Eg: "%" to turn the number 5 into "5%".
    textSuffix?: string;
    // Path to the attribute that holds the chart's value.
    // Attribute path segments are separated by a forward slash. Eg: 'address/city'.
    valueAttrPath: string;
    // Default value to use if the attribute is null or not a number.
    value?: number;
    // Array of colors to use for the chart.
    /*
        Example:
        [
            {
                percent: 0,
                color: "red"
            },
            {
                percent: 50,
                color: "yellow"
            },
            {
                percent: 100,
                color: "green"
            }
        ]
    */
    colors?: {
        percent: number;
        color: string;
    }[];
    // Default = false.
    // If true then the chart will be a gradient of colours instead of solid colours.
    gradient?: boolean;
    // Chart title. This will be displayed above the chart.
    title?: string;
}

/**
 * A series chart differs to a number chart in that it displays how a value changes over time.
 * If configured, it will sample a historic-attribute's history.
 */
interface INumberSeriesChartParams {
    // The kind of chart to draw.
    type: "LINE";
    // Path to the attribute that holds the chart's value.
    // Attribute path segments are separated by a forward slash. Eg: 'address/city'.
    valueAttrPath: string;
    // Default value to use if the attribute is null or not a number.
    value?: number;
    // Chart title. This will be displayed above the chart.
    title?: string;
    // Suffix to append to the value. Eg: "%" to turn the number 5 into "5%".
    textSuffix?: string;
}