{ "features": { "spectrumThemes": true, "intelligentLoading": true, "deviceAwareness": true, "state": true, "customThemes": true, "devicePreview": true, "messagePassing": true, "rowSelection": true, "continueIfAction": true, "showNotificationAction": true, "sidePanel": true }, "layout": { "name": "Layout", "description": "This component is specific only to layouts", "icon": "Sandbox", "hasChildren": true, "styles": [ "padding", "background" ], "settings": [ { "type": "text", "label": "Logo URL", "key": "logoUrl" }, { "type": "text", "label": "Title", "key": "title" }, { "type": "select", "label": "Navigation", "key": "navigation", "options": [ "Top", "Left", "None" ], "defaultValue": "Top" }, { "type": "select", "label": "Width", "key": "width", "options": [ "Small", "Medium", "Large", "Max" ], "defaultValue": "Large" }, { "type": "navigation", "label": "Links", "key": "links" }, { "type": "boolean", "label": "Hide title", "key": "hideTitle", "defaultValue": false }, { "type": "boolean", "label": "Hide logo", "key": "hideLogo", "defaultValue": false }, { "type": "boolean", "label": "Sticky header", "key": "sticky", "defaultValue": false } ] }, "container": { "name": "Container", "description": "This component contains things within itself", "icon": "Selection", "hasChildren": true, "showSettingsBar": true, "size": { "width": 400, "height": 200 }, "styles": [ "padding", "size", "background", "border", "shadow" ], "settings": [ { "type": "select", "label": "Direction", "key": "direction", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Column", "value": "column", "barIcon": "ViewColumn", "barTitle": "Column layout" }, { "label": "Row", "value": "row", "barIcon": "ViewRow", "barTitle": "Row layout" } ], "defaultValue": "column" }, { "type": "select", "label": "Horiz. Align", "key": "hAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "AlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "AlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "AlignRight", "barTitle": "Align right" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveLeftRight", "barTitle": "Align stretched horizontally" } ], "defaultValue": "stretch" }, { "type": "select", "label": "Vert. Align", "key": "vAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Top", "value": "top", "barIcon": "AlignTop", "barTitle": "Align top" }, { "label": "Middle", "value": "middle", "barIcon": "AlignMiddle", "barTitle": "Align middle" }, { "label": "Bottom", "value": "bottom", "barIcon": "AlignBottom", "barTitle": "Align bottom" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveUpDown", "barTitle": "Align stretched vertically" } ], "defaultValue": "top" }, { "type": "select", "label": "Size", "key": "size", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Shrink", "value": "shrink", "barIcon": "Minimize", "barTitle": "Shrink container" }, { "label": "Grow", "value": "grow", "barIcon": "Maximize", "barTitle": "Grow container" } ], "defaultValue": "shrink" }, { "type": "select", "label": "Gap", "key": "gap", "showInBar": true, "barStyle": "picker", "options": [ { "label": "None", "value": "N" }, { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ], "defaultValue": "M" }, { "type": "boolean", "label": "Wrap", "key": "wrap", "showInBar": true, "barIcon": "ModernGridView", "barTitle": "Wrap" }, { "type": "event", "label": "On Click", "key": "onClick" } ] }, "section": { "name": "Section", "description": "Add a section to your application", "icon": "ColumnTwoB", "hasChildren": true, "illegalChildren": [ "section" ], "showEmptyState": false, "size": { "width": 400, "height": 100 }, "settings": [ { "type": "section", "label": "Type", "key": "type", "defaultValue": "mainSidebar" } ] }, "screenslot": { "name": "Screenslot", "icon": "WebPage", "description": "Contains your app screens", "static": true }, "button": { "name": "Button", "description": "A basic html button that is ready for styling", "icon": "Button", "editable": true, "showSettingsBar": true, "size": { "width": 105, "height": 35 }, "settings": [ { "type": "text", "label": "Text", "key": "text", "defaultValue": "New Button" }, { "type": "select", "showInBar": true, "label": "Variant", "key": "type", "options": [ { "label": "Primary", "value": "primary" }, { "label": "Secondary", "value": "secondary" }, { "label": "Action", "value": "cta" }, { "label": "Warning", "value": "warning" }, { "label": "Over Background", "value": "overBackground" } ], "defaultValue": "primary" }, { "type": "select", "label": "Size", "showInBar": true, "key": "size", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" }, { "label": "Extra large", "value": "XL" } ], "defaultValue": "M" }, { "type": "boolean", "label": "Quiet", "key": "quiet", "showInBar": true, "barIcon": "VisibilityOff", "barTitle": "Quiet variant", "barSeparator": false }, { "type": "boolean", "label": "Disabled", "showInBar": true, "barIcon": "NoEdit", "barTitle": "Disable button", "key": "disabled" }, { "type": "event", "label": "On Click", "key": "onClick" } ] }, "divider": { "name": "Divider", "description": "A basic divider", "icon": "Separator", "illegalChildren": [ "section" ], "size": { "width": 400, "height": 10 }, "settings": [ { "type": "select", "label": "Size", "key": "size", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ], "defaultValue": "M" }, { "type": "boolean", "label": "Vertical", "key": "vertical" } ] }, "repeater": { "name": "Repeater", "description": "A configurable data list that attaches to your backend tables.", "icon": "JourneyData", "illegalChildren": [ "section" ], "hasChildren": true, "showSettingsBar": true, "size": { "width": 400, "height": 100 }, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "text", "label": "Empty Text", "key": "noRowsMessage", "defaultValue": "No rows found" }, { "type": "select", "label": "Direction", "key": "direction", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Column", "value": "column", "barIcon": "ViewColumn", "barTitle": "Column layout" }, { "label": "Row", "value": "row", "barIcon": "ViewRow", "barTitle": "Row layout" } ], "defaultValue": "column" }, { "type": "select", "label": "Horiz. Align", "key": "hAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "AlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "AlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "AlignRight", "barTitle": "Align right" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveLeftRight", "barTitle": "Align stretched horizontally" } ], "defaultValue": "stretch" }, { "type": "select", "label": "Vert. Align", "key": "vAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Top", "value": "top", "barIcon": "AlignTop", "barTitle": "Align top" }, { "label": "Middle", "value": "middle", "barIcon": "AlignMiddle", "barTitle": "Align middle" }, { "label": "Bottom", "value": "bottom", "barIcon": "AlignBottom", "barTitle": "Align bottom" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveUpDown", "barTitle": "Align stretched vertically" } ], "defaultValue": "top" }, { "type": "select", "label": "Gap", "key": "gap", "showInBar": true, "barStyle": "picker", "options": [ { "label": "None", "value": "N" }, { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ], "defaultValue": "M" } ], "context": [ { "type": "schema" }, { "type": "static", "values": [ { "label": "Row Index", "key": "index", "type": "number" } ] } ] }, "stackedlist": { "deprecated": true, "name": "Stacked List", "icon": "TaskList", "description": "A basic card component that can contain content and actions.", "illegalChildren": [ "section" ], "settings": [ { "type": "text", "label": "Image", "key": "imageUrl" }, { "type": "text", "label": "Heading", "key": "heading" }, { "type": "text", "label": "Subheading", "key": "subheading" }, { "type": "text", "label": "Link URL", "key": "destinationUrl", "placeholder": "/screen" } ] }, "card": { "deprecated": true, "name": "Vertical Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewColumn", "illegalChildren": [ "section" ], "settings": [ { "type": "text", "label": "Image", "key": "imageUrl" }, { "type": "text", "label": "Heading", "key": "heading" }, { "type": "text", "label": "Description", "key": "description" }, { "type": "text", "label": "Link Text", "key": "linkText" }, { "type": "text", "label": "Link URL", "key": "linkUrl", "placeholder": "/screen" }, { "type": "color", "label": "Link Color", "key": "linkColor", "defaultValue": "#000" }, { "type": "color", "label": "Hover Color", "key": "linkHoverColor", "defaultValue": "#222" }, { "type": "select", "label": "Image Height", "key": "imageHeight", "options": [ "auto", "12rem", "16rem", "20rem", "24rem" ], "defaultValue": "auto" }, { "type": "select", "label": "Card Width", "key": "cardWidth", "options": [ "16rem", "20rem", "24rem" ], "defaultValue": "20rem" } ] }, "text": { "name": "Paragraph", "description": "A component for displaying paragraph text.", "icon": "TextParagraph", "illegalChildren": [ "section" ], "showSettingsBar": true, "editable": true, "size": { "width": 400, "height": 30 }, "settings": [ { "type": "text", "label": "Text", "key": "text" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "M", "showInBar": true, "barStyle": "picker", "options": [ { "label": "Extra Small", "value": "XS" }, { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" }, { "label": "Extra Large", "value": "XL" }, { "label": "2XL", "value": "XXL" }, { "label": "3XL", "value": "XXXL" } ] }, { "type": "color", "label": "Color", "key": "color", "showInBar": true, "barSeparator": false }, { "type": "boolean", "label": "Bold", "key": "bold", "showInBar": true, "barIcon": "TagBold", "barTitle": "Bold text", "barSeparator": false }, { "type": "boolean", "label": "Italic", "key": "italic", "showInBar": true, "barIcon": "TagItalic", "barTitle": "Italic text", "barSeparator": false }, { "type": "boolean", "label": "Underline", "key": "underline", "showInBar": true, "barIcon": "TagUnderline", "barTitle": "Underline text" }, { "type": "select", "label": "Alignment", "key": "align", "defaultValue": "left", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "TextAlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "TextAlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "TextAlignRight", "barTitle": "Align right" }, { "label": "Justify", "value": "justify", "barIcon": "TextAlignJustify", "barTitle": "Justify text" } ] } ] }, "heading": { "name": "Headline", "icon": "TextBold", "description": "A component for displaying heading text", "illegalChildren": [ "section" ], "showSettingsBar": true, "editable": true, "size": { "width": 400, "height": 40 }, "settings": [ { "type": "text", "key": "text", "label": "Text" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "M", "showInBar": true, "barStyle": "picker", "options": [ { "label": "Extra Small", "value": "XS" }, { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" }, { "label": "Extra Large", "value": "XL" }, { "label": "2XL", "value": "XXL" }, { "label": "3XL", "value": "XXXL" } ] }, { "type": "color", "label": "Color", "key": "color", "showInBar": true, "barSeparator": false }, { "type": "boolean", "label": "Bold", "key": "bold", "showInBar": true, "barIcon": "TagBold", "barTitle": "Bold text", "barSeparator": false }, { "type": "boolean", "label": "Italic", "key": "italic", "showInBar": true, "barIcon": "TagItalic", "barTitle": "Italic text", "barSeparator": false }, { "type": "boolean", "label": "Underline", "key": "underline", "showInBar": true, "barIcon": "TagUnderline", "barTitle": "Underline text" }, { "type": "select", "label": "Alignment", "key": "align", "defaultValue": "left", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "TextAlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "TextAlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "TextAlignRight", "barTitle": "Align right" }, { "label": "Justify", "value": "justify", "barIcon": "TextAlignJustify", "barTitle": "Justify text" } ] } ] }, "tag": { "name": "Tag", "icon": "Label", "showSettingsBar": true, "size": { "width": 100, "height": 25 }, "settings": [ { "type": "text", "label": "Text", "key": "text" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "M", "showInBar": true, "barStyle": "picker", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ] }, { "type": "color", "label": "Color", "key": "color", "showInBar": true }, { "type": "boolean", "label": "Show delete icon", "key": "closable" }, { "type": "event", "label": "On click delete icon", "key": "onClick", "dependsOn": "closable" } ] }, "image": { "name": "Image", "description": "A basic component for displaying images", "icon": "Image", "styles": [ "size" ], "size": { "width": 400, "height": 300 }, "settings": [ { "type": "text", "label": "URL", "key": "url", "required": true } ] }, "backgroundimage": { "name": "Background Image", "description": "A background image", "icon": "Images", "styles": [ "size" ], "size": { "width": 400, "height": 300 }, "settings": [ { "type": "text", "label": "URL", "key": "url", "required": true }, { "type": "select", "label": "Position", "key": "position", "defaultValue": "center center", "options": [ { "label": "Center Top", "value": "center top" }, { "label": "Center", "value": "center center" }, { "label": "Center Bottom", "value": "center bottom" }, { "label": "Left Top", "value": "left top" }, { "label": "Left Center", "value": "left center" }, { "label": "Left Bottom", "value": "left bottom" }, { "label": "Right Top", "value": "right top" }, { "label": "Right Center", "value": "right center" }, { "label": "Right Bottom", "value": "right bottom" } ] } ] }, "icon": { "name": "Icon", "description": "A basic component for displaying icons", "icon": "Shapes", "size": { "width": 25, "height": 25 }, "settings": [ { "type": "icon", "label": "Icon", "key": "icon", "required": true }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "ri-1x", "options": [ { "value": "ri-xxs", "label": "XXS" }, { "value": "ri-xs", "label": "XS" }, { "value": "ri-sm", "label": "Small" }, { "value": "ri-1x", "label": "Medium" }, { "value": "ri-lg", "label": "Large" }, { "value": "ri-xl", "label": "XL" }, { "value": "ri-2x", "label": "2XL" }, { "value": "ri-3x", "label": "3XL" }, { "value": "ri-4x", "label": "4XL" }, { "value": "ri-5x", "label": "5XL" }, { "value": "ri-6x", "label": "6XL" }, { "value": "ri-7x", "label": "7XL" }, { "value": "ri-8x", "label": "8XL" }, { "value": "ri-9x", "label": "9XL" }, { "value": "ri-10x", "label": "10XL" } ] }, { "type": "color", "label": "Color", "key": "color" }, { "type": "event", "label": "On Click", "key": "onClick" } ] }, "navigation": { "deprecated": true, "name": "Nav Bar", "description": "A component for handling the navigation within your app.", "icon": "BreadcrumbNavigation", "illegalChildren": [ "section" ], "hasChildren": true, "settings": [ { "type": "text", "label": "Logo URL", "key": "logoUrl" }, { "type": "boolean", "label": "Hide logo", "key": "hideLogo", "defaultValue": false } ] }, "link": { "name": "Link", "description": "A basic link component for internal and external links", "icon": "Link", "showSettingsBar": true, "editable": true, "size": { "width": 200, "height": 30 }, "settings": [ { "type": "text", "label": "Text", "key": "text" }, { "type": "url", "label": "URL", "key": "url", "placeholder": "/screen" }, { "type": "boolean", "label": "New Tab", "key": "openInNewTab" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "M", "showInBar": true, "barStyle": "picker", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ] }, { "type": "color", "label": "Color", "key": "color", "showInBar": true, "barSeparator": false }, { "type": "boolean", "label": "Bold", "key": "bold", "showInBar": true, "barIcon": "TagBold", "barTitle": "Bold text", "barSeparator": false }, { "type": "boolean", "label": "Italic", "key": "italic", "showInBar": true, "barIcon": "TagItalic", "barTitle": "Italic text", "barSeparator": false }, { "type": "boolean", "label": "Underline", "key": "underline", "showInBar": true, "barIcon": "TagUnderline", "barTitle": "Underline text" }, { "type": "select", "label": "Alignment", "key": "align", "defaultValue": "left", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "TextAlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "TextAlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "TextAlignRight", "barTitle": "Align right" }, { "label": "Justify", "value": "justify", "barIcon": "TextAlignJustify", "barTitle": "Justify text" } ] } ] }, "cardhorizontal": { "deprecated": true, "name": "Horizontal Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewRow", "settings": [ { "type": "text", "label": "Image", "key": "imageUrl" }, { "type": "text", "label": "Heading", "key": "heading" }, { "type": "text", "label": "Description", "key": "description" }, { "type": "text", "label": "Subtext", "key": "subtext" }, { "type": "text", "label": "Link Text", "key": "linkText" }, { "type": "text", "label": "Link URL", "key": "linkUrl", "placeholder": "/screen" }, { "type": "color", "label": "Link Color", "key": "linkColor", "defaultValue": "#000" }, { "type": "color", "label": "Hover Color", "key": "linkHoverColor", "defaultValue": "#222" }, { "type": "select", "label": "Card Width", "key": "cardWidth", "options": [ "24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%" ], "defaultValue": "32rem" }, { "type": "select", "label": "Image Width", "key": "imageWidth", "options": [ "auto", "8rem", "12rem", "16rem" ], "defaultValue": "8rem" }, { "type": "select", "label": "Image Height", "key": "imageHeight", "options": [ "auto", "8rem", "12rem", "16rem", "auto" ], "defaultValue": "auto" } ] }, "cardstat": { "name": "Stat Card", "description": "A card component for displaying numbers.", "icon": "Card", "size": { "width": 260, "height": 143 }, "settings": [ { "type": "text", "label": "Title", "key": "title", "placeholder": "Total Revenue", "defaultValue": "Title" }, { "type": "text", "label": "Value", "key": "value", "placeholder": "$1,981,983", "defaultValue": "Value" }, { "type": "text", "label": "Label", "key": "label", "placeholder": "Stripe", "defaultValue": "Label" } ] }, "embed": { "name": "Embed", "icon": "Code", "description": "Embed content from 3rd party sources", "styles": [ "size" ], "size": { "width": 400, "height": 100 }, "settings": [ { "type": "text", "label": "Embed", "key": "embed", "required": true } ] }, "bar": { "name": "Bar Chart", "description": "Bar chart", "icon": "GraphBarVertical", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "boolean", "label": "Stacked", "key": "stacked", "defaultValue": false }, { "type": "boolean", "label": "Horizontal", "key": "horizontal", "defaultValue": false }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": false } ] }, "line": { "name": "Line Chart", "description": "Line chart", "icon": "GraphTrend", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "select", "label": "Curve", "key": "curve", "options": [ "Smooth", "Straight", "Stepline" ], "defaultValue": "Smooth" }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": false } ] }, "area": { "name": "Area Chart", "description": "Line chart", "icon": "GraphAreaStacked", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "select", "label": "Curve", "key": "curve", "options": [ "Smooth", "Straight", "Stepline" ], "defaultValue": "Smooth" }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": false }, { "type": "boolean", "label": "Stacked", "key": "stacked", "defaultValue": true }, { "type": "boolean", "label": "Gradient", "key": "gradient", "defaultValue": false } ] }, "pie": { "name": "Pie Chart", "description": "Pie chart", "icon": "GraphPie", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataProvider", "required": true }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": false } ] }, "donut": { "name": "Donut Chart", "description": "Donut chart", "icon": "GraphDonut", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataProvider", "required": true }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": false } ] }, "candlestick": { "name": "Candlestick Chart", "description": "Candlestick chart", "icon": "GraphBarVerticalStacked", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "field", "label": "Date Col.", "key": "dateColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "Open Col.", "key": "openColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "Close Col.", "key": "closeColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "High Col.", "key": "highColumn", "dependsOn": "dataProvider", "required": true }, { "type": "field", "label": "Low Col.", "key": "lowColumn", "dependsOn": "dataProvider", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": true } ] }, "form": { "name": "Form", "icon": "Form", "hasChildren": true, "illegalChildren": [ "section", "form" ], "actions": [ "ValidateForm", "ClearForm", "ChangeFormStep", "UpdateFieldValue" ], "styles": [ "size" ], "size": { "width": 400, "height": 400 }, "settings": [ { "type": "select", "label": "Type", "key": "actionType", "options": [ "Create", "Update" ], "defaultValue": "Create" }, { "type": "schema", "label": "Schema", "key": "dataSource", "defaultValue": { "name": "Custom", "label": "Custom" } }, { "type": "select", "label": "Size", "key": "size", "options": [ { "label": "Medium", "value": "spectrum--medium" }, { "label": "Large", "value": "spectrum--large" } ], "defaultValue": "spectrum--medium" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ], "context": [ { "type": "static", "values": [ { "label": "Value", "key": "__value", "type": "object" }, { "label": "Valid", "key": "__valid", "type": "boolean" }, { "label": "Current Step", "key": "__currentStep", "type": "number" }, { "label": "Current Step Valid", "key": "__currentStepValid", "type": "boolean" } ] }, { "type": "form" } ] }, "formstep": { "name": "Form Step", "icon": "AssetsAdded", "hasChildren": true, "illegalChildren": [ "section", "form", "form step" ], "styles": [ "size" ], "size": { "width": 400, "height": 400 }, "settings": [ { "type": "number", "label": "Step", "key": "step", "defaultValue": 1, "min": 1 } ] }, "fieldgroup": { "name": "Field Group", "icon": "Group", "illegalChildren": [ "section" ], "styles": [ "size" ], "hasChildren": true, "size": { "width": 400, "height": 400 }, "settings": [ { "type": "select", "label": "Labels", "key": "labelPosition", "defaultValue": "above", "options": [ { "label": "Left", "value": "left" }, { "label": "Right", "value": "right" }, { "label": "Above", "value": "above" } ] } ] }, "stringfield": { "name": "Text Field", "icon": "Text", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/string", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/string", "label": "Validation", "key": "validation" }, { "type": "select", "label": "Alignment", "key": "align", "defaultValue": "left", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "TextAlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "TextAlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "TextAlignRight", "barTitle": "Align right" }, { "label": "Justify", "value": "justify", "barIcon": "TextAlignJustify", "barTitle": "Justify text" } ] } ] }, "numberfield": { "name": "Number Field", "icon": "123", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/number", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/number", "label": "Validation", "key": "validation" } ] }, "passwordfield": { "name": "Password Field", "icon": "LockClosed", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/string", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/string", "label": "Validation", "key": "validation" } ] }, "optionsfield": { "name": "Options Picker", "icon": "Menu", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/options", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder", "placeholder": "Choose an option" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "select", "label": "Type", "key": "optionsType", "defaultValue": "select", "placeholder": "Pick an options type", "options": [ { "label": "Select", "value": "select" }, { "label": "Radio buttons", "value": "radio" } ] }, { "type": "select", "label": "Direction", "key": "direction", "defaultValue": "vertical", "options": [ { "label": "Horizontal", "value": "horizontal" }, { "label": "Vertical", "value": "vertical" } ], "dependsOn": { "setting": "optionsType", "value": "radio" } }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "boolean", "label": "Autocomplete", "key": "autocomplete", "defaultValue": false, "dependsOn": { "setting": "optionsType", "value": "select" } }, { "type": "boolean", "label": "Sort in alphabetical order", "key": "sort", "defaultValue": true }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "select", "label": "Options source", "key": "optionsSource", "defaultValue": "schema", "placeholder": "Pick an options source", "options": [ { "label": "Schema", "value": "schema" }, { "label": "Data provider", "value": "provider" }, { "label": "Custom", "value": "custom" } ] }, { "type": "dataProvider", "label": "Options Provider", "key": "dataProvider", "required": true, "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "field", "label": "Label Column", "key": "labelColumn", "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "field", "label": "Value Column", "key": "valueColumn", "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "options", "key": "customOptions", "dependsOn": { "setting": "optionsSource", "value": "custom" } }, { "type": "validation/string", "label": "Validation", "key": "validation" } ] }, "multifieldselect": { "name": "Multi-select Picker", "icon": "ViewList", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/array", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder", "placeholder": "Choose an option" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Autocomplete", "key": "autocomplete", "defaultValue": false, "dependsOn": { "setting": "optionsType", "value": "select" } }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "select", "label": "Type", "key": "optionsType", "defaultValue": "select", "placeholder": "Pick an options type", "options": [ { "label": "Select", "value": "select" }, { "label": "Checkboxes", "value": "checkbox" } ] }, { "type": "select", "label": "Direction", "key": "direction", "defaultValue": "vertical", "options": [ { "label": "Horizontal", "value": "horizontal" }, { "label": "Vertical", "value": "vertical" } ], "dependsOn": { "setting": "optionsType", "value": "checkbox" } }, { "type": "select", "label": "Options source", "key": "optionsSource", "defaultValue": "schema", "placeholder": "Pick an options source", "options": [ { "label": "Schema", "value": "schema" }, { "label": "Data provider", "value": "provider" }, { "label": "Custom", "value": "custom" } ] }, { "type": "dataProvider", "label": "Options Provider", "key": "dataProvider", "required": true, "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "field", "label": "Label Column", "key": "labelColumn", "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "field", "label": "Value Column", "key": "valueColumn", "dependsOn": { "setting": "optionsSource", "value": "provider" } }, { "type": "options", "key": "customOptions", "dependsOn": { "setting": "optionsSource", "value": "custom" } }, { "type": "validation/array", "label": "Validation", "key": "validation" } ] }, "booleanfield": { "name": "Checkbox", "icon": "SelectBox", "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/boolean", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Text", "key": "text" }, { "type": "select", "label": "Size", "key": "size", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" }, { "label": "Extra large", "value": "XL" } ], "defaultValue": "M" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/boolean", "label": "Validation", "key": "validation" } ] }, "longformfield": { "name": "Long Form Field", "icon": "TextAlignLeft", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 150 }, "settings": [ { "type": "field/longform", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder", "placeholder": "Type something..." }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "select", "label": "Formatting", "key": "format", "placeholder": null, "options": [ { "label": "Auto", "value": "auto" }, { "label": "Plain text", "value": "plain" }, { "label": "Rich text (markdown)", "value": "rich" } ], "defaultValue": "auto" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/string", "label": "Validation", "key": "validation" } ] }, "datetimefield": { "name": "Date Picker", "icon": "Date", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/datetime", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Show time", "key": "enableTime", "defaultValue": true }, { "type": "boolean", "label": "Time only", "key": "timeOnly", "defaultValue": false }, { "type": "boolean", "label": "24-Hour time", "key": "time24hr", "defaultValue": false }, { "type": "boolean", "label": "Ignore time zones", "key": "ignoreTimezones", "defaultValue": false }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/datetime", "label": "Validation", "key": "validation" } ] }, "codescanner": { "name": "Barcode/QR Scanner", "icon": "Camera", "styles": [ "size" ], "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/barcode/qr", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Button text", "key": "scanButtonText" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "boolean", "label": "Allow manual entry", "key": "allowManualEntry", "defaultValue": false }, { "type": "validation/string", "label": "Validation", "key": "validation" } ] }, "embeddedmap": { "name": "Embedded Map", "icon": "Location", "styles": [ "size" ], "draggable": false, "size": { "width": 400, "height": 320 }, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Latitude Key", "key": "latitudeKey", "dependsOn": "dataProvider" }, { "type": "field", "label": "Longitude Key", "key": "longitudeKey", "dependsOn": "dataProvider" }, { "type": "field", "label": "Title Key", "key": "titleKey", "dependsOn": "dataProvider" }, { "type": "event", "label": "On Click Marker", "key": "onClickMarker", "context": [ { "label": "Clicked marker", "key": "marker" } ] }, { "type": "boolean", "label": "Enable creating markers", "key": "creationEnabled", "defaultValue": false }, { "type": "event", "label": "On Create Marker", "key": "onCreateMarker", "dependsOn": "creationEnabled", "context": [ { "label": "New marker latitude", "key": "lat" }, { "label": "New marker longitude", "key": "lng" } ] }, { "type": "boolean", "label": "Enable fullscreen", "key": "fullScreenEnabled", "defaultValue": true }, { "type": "boolean", "label": "Enable location", "key": "locationEnabled", "defaultValue": true }, { "type": "boolean", "label": "Enable zoom", "key": "zoomEnabled", "defaultValue": true }, { "type": "text", "label": "Tile URL", "key": "tileURL", "defaultValue": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }, { "type": "text", "label": "Default Location (when empty)", "key": "defaultLocation", "placeholder": "51.5072,-0.1276" }, { "type": "number", "label": "Default Location Zoom Level (0-100)", "key": "zoomLevel", "placeholder": 50, "max": 100, "min": 0 }, { "type": "text", "label": "Map Attribution", "key": "mapAttribution", "defaultValue": "OpenStreetMap contributors" } ] }, "attachmentfield": { "name": "Attachment", "icon": "Attach", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 200 }, "settings": [ { "type": "field/attachment", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Extensions", "key": "extensions" }, { "type": "number", "label": "No. of attachment", "key": "maximum", "min": 1 }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/attachment", "label": "Validation", "key": "validation" } ] }, "relationshipfield": { "name": "Relationship Picker", "icon": "TaskList", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 50 }, "settings": [ { "type": "field/link", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Autocomplete", "key": "autocomplete", "defaultValue": false }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/link", "label": "Validation", "key": "validation" } ] }, "jsonfield": { "name": "JSON Field", "icon": "Brackets", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 100 }, "settings": [ { "type": "field/json", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "text", "label": "Default value", "key": "defaultValue" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "s3upload": { "name": "S3 File Upload", "icon": "UploadToCloud", "styles": [ "size" ], "editable": true, "size": { "width": 400, "height": 200 }, "settings": [ { "type": "field/attachment", "label": "Field", "key": "field", "required": true }, { "type": "text", "label": "Label", "key": "label" }, { "type": "dataSource/s3", "label": "S3 Datasource", "key": "datasourceId", "info": "This component can't be used with S3 datasources that use custom endpoints" }, { "type": "text", "label": "Bucket", "key": "bucket" }, { "type": "text", "label": "File Name", "key": "key" }, { "type": "event", "label": "On Change", "key": "onChange", "context": [ { "label": "Field Value", "key": "value" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, { "type": "validation/attachment", "label": "Validation", "key": "validation" } ] }, "dataprovider": { "name": "Data Provider", "icon": "Data", "illegalChildren": [ "section" ], "hasChildren": true, "actions": [ "RefreshDatasource" ], "size": { "width": 400, "height": 100 }, "settings": [ { "type": "dataSource", "label": "Data", "key": "dataSource", "required": true }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field/sortable", "label": "Sort Column", "key": "sortColumn" }, { "type": "select", "label": "Sort Order", "key": "sortOrder", "options": [ "Ascending", "Descending" ], "defaultValue": "Descending" }, { "type": "number", "label": "Limit", "key": "limit", "defaultValue": 50 }, { "type": "boolean", "label": "Paginate", "key": "paginate", "defaultValue": true, "info": "Pagination is only available for data stored in tables" } ], "context": { "type": "static", "values": [ { "label": "Rows", "key": "rows", "type": "array" }, { "label": "Extra Info", "key": "info", "type": "string" }, { "label": "Rows Length", "key": "rowsLength", "type": "number" }, { "label": "Schema", "key": "schema", "type": "object" }, { "label": "Page Number", "key": "pageNumber", "type": "number" } ] } }, "table": { "name": "Table", "icon": "Table", "illegalChildren": [ "section" ], "hasChildren": true, "showEmptyState": false, "size": { "width": 600, "height": 400 }, "settings": [ { "type": "dataProvider", "label": "Data provider", "key": "dataProvider", "required": true }, { "type": "number", "label": "Row count", "key": "rowCount", "defaultValue": 8 }, { "type": "columns", "label": "Columns", "key": "columns", "dependsOn": "dataProvider", "nested": true }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "spectrum--medium", "options": [ { "label": "Medium", "value": "spectrum--medium" }, { "label": "Large", "value": "spectrum--large" } ] }, { "type": "boolean", "label": "Quiet", "key": "quiet" }, { "type": "boolean", "label": "Compact", "key": "compact" }, { "type": "boolean", "label": "Show auto columns", "key": "showAutoColumns", "defaultValue": false }, { "type": "boolean", "label": "Allow row selection", "key": "allowSelectRows", "defaultValue": false, "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "event", "label": "On row click", "key": "onClick", "context": [ { "label": "Clicked row", "key": "row" } ] } ], "context": { "type": "schema" } }, "daterangepicker": { "name": "Date Range", "icon": "Calendar", "styles": [ "size" ], "hasChildren": false, "size": { "width": 200, "height": 50 }, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true, "info": "Your data provider will be automatically filtered to the given date range." }, { "type": "field", "label": "Date field", "key": "field", "required": true }, { "type": "select", "label": "Default range", "key": "defaultValue", "options": [ "Last 1 day", "Last 7 days", "Last 30 days", "Last 3 months", "Last 6 months", "Last 1 year" ], "defaultValue": "Last 30 days" } ] }, "spectrumcard": { "name": "Card", "icon": "PersonalizationField", "styles": [ "size" ], "size": { "width": 300, "height": 120 }, "settings": [ { "type": "text", "key": "title", "label": "Title", "defaultValue": "Title" }, { "type": "text", "key": "subtitle", "label": "Subtitle", "defaultValue": "Subtitle" }, { "type": "text", "key": "description", "label": "Description", "defaultValue": "Description" }, { "type": "text", "key": "imageURL", "label": "Image URL" }, { "type": "url", "key": "linkURL", "label": "Link URL" }, { "type": "boolean", "key": "linkPeek", "label": "Open link in modal" }, { "type": "boolean", "key": "horizontal", "label": "Horizontal" }, { "type": "boolean", "label": "Use button for click action", "key": "showButton" }, { "type": "text", "key": "buttonText", "label": "Button text", "dependsOn": "showButton" }, { "type": "event", "label": "Click action", "key": "buttonOnClick" } ] }, "dynamicfilter": { "name": "Dynamic Filter", "icon": "Filter", "showSettingsBar": true, "size": { "width": 100, "height": 35 }, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider", "required": true }, { "type": "multifield", "label": "Allowed filter fields", "key": "allowedFields", "placeholder": "All fields" }, { "type": "select", "label": "Button size", "showInBar": true, "key": "size", "options": [ { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" }, { "label": "Extra large", "value": "XL" } ], "defaultValue": "M" } ] }, "chartblock": { "block": true, "name": "Chart block", "icon": "GraphPie", "hasChildren": false, "settings": [ { "type": "select", "label": "Chart Type", "key": "chartType", "required": true, "options": [ { "label": "Pie", "value": "pie" }, { "label": "Bar", "value": "bar" }, { "label": "Line", "value": "line" }, { "label": "Donut", "value": "donut" }, { "label": "Candlestick", "value": "candlestick" }, { "label": "Area", "value": "area" } ] }, { "type": "dataSource", "label": "Data", "key": "dataSource", "required": true }, { "type": "text", "label": "Title", "key": "chartTitle" }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field", "label": "Sort Column", "key": "sortColumn" }, { "type": "select", "label": "Sort Order", "key": "sortOrder", "options": [ "Ascending", "Descending" ], "defaultValue": "Ascending" }, { "type": "number", "label": "Limit", "key": "limit", "defaultValue": 50 }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colors", "key": "palette", "defaultValue": "Palette 1", "options": [ "Custom", "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "color", "label": "C1", "key": "c1", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C2", "key": "c2", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C3", "key": "c3", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C4", "key": "c4", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "color", "label": "C5", "key": "c5", "dependsOn": { "setting": "palette", "value": "Custom" } }, { "type": "boolean", "label": "Data Labels", "key": "dataLabels", "defaultValue": false }, { "type": "boolean", "label": "Legend", "key": "legend", "defaultValue": true }, { "type": "boolean", "label": "Animate", "key": "animate", "defaultValue": false }, { "section": true, "name": "Pie Chart", "icon": "GraphPie", "dependsOn": { "setting": "chartType", "value": "pie" }, "settings": [ { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataSource", "required": true } ] }, { "section": true, "name": "Donut Chart", "icon": "GraphDonut", "dependsOn": { "setting": "chartType", "value": "donut" }, "settings": [ { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataSource", "required": true } ] }, { "section": true, "name": "Bar Chart", "icon": "GraphBarVertical", "dependsOn": { "setting": "chartType", "value": "bar" }, "settings": [ { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataSource", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataSource", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "boolean", "label": "Stacked", "key": "stacked", "defaultValue": false }, { "type": "boolean", "label": "Horizontal", "key": "horizontal", "defaultValue": false } ] }, { "section": true, "name": "Line Chart", "icon": "GraphTrend", "dependsOn": { "setting": "chartType", "value": "line" }, "settings": [ { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataSource", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataSource", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "select", "label": "Curve", "key": "curve", "options": [ "Smooth", "Straight", "Stepline" ], "defaultValue": "Smooth" } ] }, { "section": true, "name": "Area Chart", "icon": "GraphAreaStacked", "dependsOn": { "setting": "chartType", "value": "area" }, "settings": [ { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataSource", "required": true }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataSource", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" }, { "type": "select", "label": "Curve", "key": "curve", "options": [ "Smooth", "Straight", "Stepline" ], "defaultValue": "Smooth" }, { "type": "boolean", "label": "Stacked", "key": "stacked", "defaultValue": true }, { "type": "boolean", "label": "Gradient", "key": "gradient", "defaultValue": false } ] }, { "section": true, "name": "Candlestick Chart", "icon": "GraphBarVerticalStacked", "dependsOn": { "setting": "chartType", "value": "candlestick" }, "settings": [ { "type": "field", "label": "Date Col.", "key": "dateColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "Open Col.", "key": "openColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "Close Col.", "key": "closeColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "High Col.", "key": "highColumn", "dependsOn": "dataSource", "required": true }, { "type": "field", "label": "Low Col.", "key": "lowColumn", "dependsOn": "dataSource", "required": true }, { "type": "select", "label": "Format", "key": "yAxisUnits", "options": [ "Default", "Thousands", "Millions" ], "defaultValue": "Default" }, { "type": "text", "label": "Y Axis Label", "key": "yAxisLabel" }, { "type": "text", "label": "X Axis Label", "key": "xAxisLabel" } ] } ] }, "tableblock": { "block": true, "name": "Table block", "icon": "Table", "styles": [ "size" ], "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataSource", "label": "Data", "key": "dataSource", "required": true }, { "type": "searchfield", "label": "Search Columns", "key": "searchColumns", "placeholder": "Choose search columns", "info": "Only the first 5 search columns will be used" }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field/sortable", "label": "Sort Column", "key": "sortColumn" }, { "type": "select", "label": "Sort Order", "key": "sortOrder", "options": [ "Ascending", "Descending" ], "defaultValue": "Descending" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "spectrum--medium", "options": [ { "label": "Medium", "value": "spectrum--medium" }, { "label": "Large", "value": "spectrum--large" } ] }, { "type": "boolean", "label": "Paginate", "key": "paginate", "defaultValue": true }, { "section": true, "name": "Table", "settings": [ { "type": "number", "label": "Scroll Limit", "key": "rowCount", "defaultValue": 8 }, { "type": "columns", "label": "Table Columns", "key": "tableColumns", "dependsOn": "dataSource", "placeholder": "All columns", "nested": true }, { "type": "boolean", "label": "Quiet table variant", "key": "quiet" }, { "type": "boolean", "label": "Compact", "key": "compact" }, { "type": "boolean", "label": "Show auto columns", "key": "showAutoColumns" }, { "type": "boolean", "label": "Allow row selection", "key": "allowSelectRows", "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "event", "label": "On row click", "key": "onClick", "context": [{ "label": "Clicked row", "key": "row" }] } ] }, { "section": true, "name": "Title button", "settings": [ { "type": "boolean", "key": "showTitleButton", "label": "Show link button", "defaultValue": false }, { "type": "boolean", "label": "Open link in modal", "key": "titleButtonPeek" }, { "type": "text", "key": "titleButtonText", "label": "Button text" }, { "type": "url", "label": "Button link", "key": "titleButtonURL" } ] } ] }, "cardsblock": { "block": true, "name": "Cards block", "icon": "PersonalizationField", "styles": [ "size" ], "size": { "width": 600, "height": 400 }, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataSource", "label": "Data", "key": "dataSource", "required": true }, { "type": "searchfield", "label": "Search Columns", "key": "searchColumns", "placeholder": "Choose search columns", "info": "Only the first 5 search columns will be used" }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field/sortable", "label": "Sort Column", "key": "sortColumn" }, { "type": "select", "label": "Sort Order", "key": "sortOrder", "options": [ "Ascending", "Descending" ], "defaultValue": "Descending" }, { "type": "number", "label": "Limit", "key": "limit", "defaultValue": 8 }, { "type": "boolean", "label": "Paginate", "key": "paginate" }, { "section": true, "name": "Cards", "settings": [ { "type": "text", "key": "cardTitle", "label": "Title", "nested": true, "defaultValue": "Title" }, { "type": "text", "key": "cardSubtitle", "label": "Subtitle", "nested": true, "defaultValue": "Subtitle" }, { "type": "text", "key": "cardDescription", "label": "Description", "nested": true, "defaultValue": "Description" }, { "type": "text", "key": "cardImageURL", "label": "Image URL", "nested": true }, { "type": "boolean", "key": "linkCardTitle", "label": "Link card title" }, { "type": "boolean", "key": "cardPeek", "label": "Open link in modal" }, { "type": "url", "label": "Link screen", "key": "cardURL", "nested": true }, { "type": "boolean", "key": "cardHorizontal", "label": "Horizontal" }, { "type": "boolean", "label": "Use button for click action", "key": "showCardButton" }, { "type": "text", "key": "cardButtonText", "label": "Button text", "nested": true, "dependsOn": "showCardButton" }, { "type": "event", "label": "Click action", "key": "cardButtonOnClick", "nested": true } ] }, { "section": true, "name": "Title button", "settings": [ { "type": "boolean", "key": "showTitleButton", "label": "Show link button" }, { "type": "boolean", "label": "Open link in modal", "key": "titleButtonPeek" }, { "type": "text", "key": "titleButtonText", "label": "Button text" }, { "type": "url", "label": "Button link", "key": "titleButtonURL" } ] }, { "section": true, "name": "Advanced", "settings": [ { "type": "field", "label": "ID column for linking (appended to URL)", "key": "linkColumn", "placeholder": "Default" } ] } ], "context": { "type": "schema", "suffix": "repeater" } }, "repeaterblock": { "block": true, "name": "Repeater block", "icon": "ViewList", "illegalChildren": [ "section" ], "hasChildren": true, "showSettingsBar": true, "size": { "width": 400, "height": 100 }, "settings": [ { "type": "dataSource", "label": "Data", "key": "dataSource", "required": true }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field/sortable", "label": "Sort Column", "key": "sortColumn" }, { "type": "select", "label": "Sort Order", "key": "sortOrder", "options": [ "Ascending", "Descending" ], "defaultValue": "Descending" }, { "type": "number", "label": "Limit", "key": "limit", "defaultValue": 10 }, { "type": "boolean", "label": "Paginate", "key": "paginate" }, { "section": true, "name": "Layout settings", "settings": [ { "type": "text", "label": "Empty Text", "key": "noRowsMessage", "defaultValue": "No rows found" }, { "type": "select", "label": "Direction", "key": "direction", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Column", "value": "column", "barIcon": "ViewRow", "barTitle": "Column layout" }, { "label": "Row", "value": "row", "barIcon": "ViewColumn", "barTitle": "Row layout" } ], "defaultValue": "column" }, { "type": "select", "label": "Horiz. Align", "key": "hAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Left", "value": "left", "barIcon": "AlignLeft", "barTitle": "Align left" }, { "label": "Center", "value": "center", "barIcon": "AlignCenter", "barTitle": "Align center" }, { "label": "Right", "value": "right", "barIcon": "AlignRight", "barTitle": "Align right" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveLeftRight", "barTitle": "Align stretched horizontally" } ], "defaultValue": "stretch" }, { "type": "select", "label": "Vert. Align", "key": "vAlign", "showInBar": true, "barStyle": "buttons", "options": [ { "label": "Top", "value": "top", "barIcon": "AlignTop", "barTitle": "Align top" }, { "label": "Middle", "value": "middle", "barIcon": "AlignMiddle", "barTitle": "Align middle" }, { "label": "Bottom", "value": "bottom", "barIcon": "AlignBottom", "barTitle": "Align bottom" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveUpDown", "barTitle": "Align stretched vertically" } ], "defaultValue": "top" }, { "type": "select", "label": "Gap", "key": "gap", "showInBar": true, "barStyle": "picker", "options": [ { "label": "None", "value": "N" }, { "label": "Small", "value": "S" }, { "label": "Medium", "value": "M" }, { "label": "Large", "value": "L" } ], "defaultValue": "M" } ] } ], "context": [ { "type": "static", "suffix": "provider", "values": [ { "label": "Rows", "key": "rows", "type": "array" }, { "label": "Extra Info", "key": "info", "type": "string" }, { "label": "Rows Length", "key": "rowsLength", "type": "number" }, { "label": "Schema", "key": "schema", "type": "object" }, { "label": "Page Number", "key": "pageNumber", "type": "number" } ] }, { "type": "static", "suffix": "repeater", "values": [ { "label": "Row Index", "key": "index", "type": "number" } ] }, { "type": "schema", "suffix": "repeater" } ] }, "markdownviewer": { "name": "Markdown Viewer", "icon": "Preview", "styles": [ "size" ], "size": { "width": 400, "height": 100 }, "settings": [ { "type": "text", "label": "Markdown", "key": "value", "required": true } ] }, "formblock": { "name": "Form Block", "icon": "Form", "styles": [ "size" ], "block": true, "info": "Form blocks are only compatible with internal or SQL tables", "size": { "width": 400, "height": 400 }, "settings": [ { "type": "select", "label": "Type", "key": "actionType", "options": [ "Create", "Update", "View" ], "defaultValue": "Create" }, { "type": "table", "label": "Table", "key": "dataSource" }, { "type": "text", "label": "Row ID", "key": "rowId", "nested": true, "dependsOn": { "setting": "actionType", "value": "Create", "invert": true } }, { "type": "text", "label": "Title", "key": "title", "nested": true }, { "type": "select", "label": "Size", "key": "size", "options": [ { "label": "Medium", "value": "spectrum--medium" }, { "label": "Large", "value": "spectrum--large" } ], "defaultValue": "spectrum--medium" }, { "section": true, "name": "Fields", "settings": [ { "type": "multifield", "label": "Fields", "key": "fields" }, { "type": "select", "label": "Field labels", "key": "labelPosition", "defaultValue": "left", "options": [ { "label": "Left", "value": "left" }, { "label": "Above", "value": "above" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false, "dependsOn": { "setting": "actionType", "value": "View", "invert": true } } ] }, { "section": true, "name": "Buttons", "settings": [ { "type": "boolean", "label": "Show save button", "key": "showSaveButton", "defaultValue": true, "dependsOn": { "setting": "actionType", "value": "View", "invert": true } }, { "type": "boolean", "label": "Show delete button", "key": "showDeleteButton", "defaultValue": false, "dependsOn": { "setting": "actionType", "value": "Update" } }, { "type": "url", "label": "Navigate after button press", "key": "actionUrl", "placeholder": "Choose a screen", "dependsOn": { "setting": "actionType", "value": "View", "invert": true } } ] } ], "context": [ { "type": "form", "suffix": "form" }, { "type": "schema", "suffix": "repeater" } ] }, "sidepanel": { "name": "Side Panel", "icon": "AdDisplay", "hasChildren": true, "illegalChildren": [ "section" ], "showEmptyState": false, "static": true }, "rowexplorer": { "block": true, "name": "Row Explorer Block", "icon": "PersonalizationField", "size": { "width": 600, "height": 400 }, "settings": [ { "type": "table", "label": "Table", "key": "dataSource", "required": true }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "426px" }, { "section": true, "name": "Cards", "settings": [ { "type": "field", "label": "Search Field", "key": "cardSearchField", "nested": true }, { "type": "text", "key": "cardTitle", "label": "Title", "nested": true, "defaultValue": "Title" }, { "type": "text", "key": "cardSubtitle", "label": "Subtitle", "nested": true, "defaultValue": "Subtitle" }, { "type": "text", "key": "cardDescription", "label": "Description", "nested": true, "defaultValue": "Description" }, { "type": "text", "key": "cardImageURL", "label": "Image URL", "nested": true } ] }, { "section": true, "name": "Details", "settings": [ { "type": "text", "key": "detailTitle", "label": "Title" }, { "type": "multifield", "label": "Fields", "key": "detailFields", "nested": true } ] } ], "context": { "type": "schema", "suffix": "repeater" } } }