{ "container": { "name": "Container", "description": "This component contains things within itself", "icon": "Sandbox", "hasChildren": true, "styleable": true, "transitionable": true, "showSettingsBar": true, "settings": [ { "type": "select", "label": "Direction", "key": "direction", "showInBar": true, "options": [ { "label": "Column", "value": "column", "barIcon": "ViewRow" }, { "label": "Row", "value": "row", "barIcon": "ViewColumn" } ], "defaultValue": "column" }, { "type": "select", "label": "Horizontal", "key": "hAlign", "showInBar": true, "options": [ { "label": "Left", "value": "left", "barIcon": "AlignLeft" }, { "label": "Middle", "value": "middle", "barIcon": "AlignCenter" }, { "label": "Right", "value": "right", "barIcon": "AlignRight" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveLeftRight" } ], "defaultValue": "stretch" }, { "type": "select", "label": "Vertical", "key": "vAlign", "showInBar": "true", "options": [ { "label": "Top", "value": "top", "barIcon": "AlignTop" }, { "label": "Middle", "value": "middle", "barIcon": "AlignMiddle" }, { "label": "Bottom", "value": "bottom", "barIcon": "AlignBottom" }, { "label": "Stretch", "value": "stretch", "barIcon": "MoveUpDown" } ], "defaultValue": "top" }, { "type": "select", "label": "Size", "key": "size", "showInBar": true, "options": [ { "label": "Shrink", "value": "shrink", "barIcon": "Minimize" }, { "label": "Grow", "value": "grow", "barIcon": "Maximize" } ], "defaultValue": "shrink" } ] }, "screenslot": { "name": "Screenslot", "icon": "WebPage", "description": "Contains your app screens", "styleable": true }, "button": { "name": "Button", "description": "A basic html button that is ready for styling", "icon": "Button", "styleable": true, "settings": [ { "type": "text", "label": "Text", "key": "text" }, { "type": "boolean", "label": "Disabled", "key": "disabled" }, { "type": "event", "label": "On Click", "key": "onClick" } ] }, "repeater": { "name": "Repeater", "description": "A configurable data list that attaches to your backend tables.", "icon": "ViewList", "styleable": true, "hasChildren": true, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "text", "label": "Empty Text", "key": "noRowsMessage", "defaultValue": "No rows found." }, { "type": "filter", "label": "Filtering", "key": "filter" } ], "context": { "type": "schema" } }, "stackedlist": { "name": "Stacked List", "icon": "TaskList", "description": "A basic card component that can contain content and actions.", "styleable": true, "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": { "name": "Vertical Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewColumn", "styleable": true, "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", "styleable": true, "settings": [ { "type": "text", "label": "Text", "key": "text" } ] }, "heading": { "name": "Headline", "icon": "TextBold", "description": "A component for displaying heading text", "styleable": true, "settings": [ { "type": "text", "key": "text", "label": "Text" }, { "type": "select", "key": "type", "label": "Type", "options": ["h1", "h2", "h3", "h4", "h5", "h6"], "defaultValue": "h1" } ] }, "image": { "name": "Image", "description": "A basic component for displaying images", "icon": "Image", "styleable": true, "settings": [ { "type": "text", "label": "URL", "key": "url" } ] }, "backgroundimage": { "name": "Background Image", "description": "A background image", "icon": "Images", "styleable": true, "settings": [ { "type": "text", "label": "URL", "key": "url" }, { "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": "Bell", "styleable": true, "settings": [ { "type": "icon", "label": "Icon", "key": "icon" }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "md", "options": [ { "value": "ri-xxs", "label": "xxs" }, { "value": "ri-xs", "label": "xs" }, { "value": "ri-sm", "label": "sm" }, { "value": "ri-1x", "label": "md" }, { "value": "ri-lg", "label": "lg" }, { "value": "ri-xl", "label": "xl" }, { "value": "ri-2x", "label": "2x" }, { "value": "ri-3x", "label": "3x" }, { "value": "ri-4x", "label": "4x" }, { "value": "ri-5x", "label": "5x" }, { "value": "ri-6x", "label": "6x" }, { "value": "ri-7x", "label": "7x" }, { "value": "ri-8x", "label": "8x" }, { "value": "ri-9x", "label": "9x" }, { "value": "ri-10x", "label": "10x" } ] }, { "type": "color", "label": "Color", "key": "color", "defaultValue": "#000" }, { "type": "event", "label": "On Click", "key": "onClick" } ] }, "navigation": { "name": "Nav Bar", "description": "A component for handling the navigation within your app.", "icon": "BreadcrumbNavigation", "styleable": true, "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", "styleable": true, "settings": [ { "type": "text", "label": "Text", "key": "text" }, { "type": "text", "label": "URL", "key": "url", "placeholder": "/screen" }, { "type": "boolean", "label": "New Tab", "key": "openInNewTab" }, { "type": "boolean", "label": "External", "key": "external" } ] }, "cardhorizontal": { "name": "Horizontal Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewRow", "styleable": true, "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title", "placeholder": "Total Revenue" }, { "type": "text", "label": "Value", "key": "value", "placeholder": "$1,981,983" }, { "type": "text", "label": "Label", "key": "label", "placeholder": "Stripe" } ] }, "embed": { "name": "Embed", "icon": "Code", "description": "Embed content from 3rd party sources", "styleable": true, "settings": [ { "type": "text", "label": "Embed", "key": "embed" } ] }, "bar": { "name": "Bar Chart", "description": "Bar chart", "icon": "GraphBarVertical", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider" }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider" }, { "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": "Colours", "key": "palette", "defaultValue": "Palette 1", "options": [ "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "type": "boolean", "label": "Stacked", "key": "stacked", "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider" }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider" }, { "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": "Colours", "key": "palette", "defaultValue": "Palette 1", "options": [ "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider" }, { "type": "multifield", "label": "Data Cols.", "key": "valueColumns", "dependsOn": "dataProvider" }, { "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": "Colours", "key": "palette", "defaultValue": "Palette 1", "options": [ "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataProvider" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colours", "key": "palette", "defaultValue": "Palette 1", "options": [ "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Label Col.", "key": "labelColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "Data Col.", "key": "valueColumn", "dependsOn": "dataProvider" }, { "type": "text", "label": "Width", "key": "width" }, { "type": "text", "label": "Height", "key": "height", "defaultValue": "400" }, { "type": "select", "label": "Colours", "key": "palette", "defaultValue": "Palette 1", "options": [ "Palette 1", "Palette 2", "Palette 3", "Palette 4", "Palette 5", "Palette 6", "Palette 7", "Palette 8", "Palette 9", "Palette 10" ] }, { "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", "styleable": true, "settings": [ { "type": "text", "label": "Title", "key": "title" }, { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Date Col.", "key": "dateColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "Open Col.", "key": "openColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "Close Col.", "key": "closeColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "High Col.", "key": "highColumn", "dependsOn": "dataProvider" }, { "type": "field", "label": "Low Col.", "key": "lowColumn", "dependsOn": "dataProvider" }, { "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", "styleable": true, "hasChildren": true, "actions": [ "ValidateForm" ], "settings": [ { "type": "schema", "label": "Schema", "key": "dataSource" }, { "type": "select", "label": "Theme", "key": "theme", "defaultValue": "spectrum--light", "options": [ { "label": "Lightest", "value": "spectrum--lightest" }, { "label": "Light", "value": "spectrum--light" }, { "label": "Dark", "value": "spectrum--dark" }, { "label": "Darkest", "value": "spectrum--darkest" } ] }, { "type": "select", "label": "Size", "key": "size", "defaultValue": "spectrum--medium", "options": [ { "label": "Medium", "value": "spectrum--medium" }, { "label": "Large", "value": "spectrum--large" } ] }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ], "context": { "type": "form" } }, "fieldgroup": { "name": "Field Group", "icon": "Group", "styleable": true, "hasChildren": true, "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", "styleable": true, "settings": [ { "type": "field/string", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "numberfield": { "name": "Number Field", "icon": "123", "styleable": true, "settings": [ { "type": "field/number", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "passwordfield": { "name": "Password Field", "icon": "LockClosed", "styleable": true, "settings": [ { "type": "field/string", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "optionsfield": { "name": "Options Picker", "icon": "ViewList", "styleable": true, "settings": [ { "type": "field/options", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder", "placeholder": "Choose an option" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "booleanfield": { "name": "Checkbox", "icon": "Checkmark", "styleable": true, "settings": [ { "type": "field/boolean", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Text", "key": "text" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "longformfield": { "name": "Rich Text", "icon": "TextParagraph", "styleable": true, "settings": [ { "type": "field/longform", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder", "placeholder": "Type something..." }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "datetimefield": { "name": "Date Picker", "icon": "DateInput", "styleable": true, "settings": [ { "type": "field/datetime", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Show Time", "key": "enableTime", "defaultValue": true }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "attachmentfield": { "name": "Attachment", "icon": "Attach", "styleable": true, "settings": [ { "type": "field/attachment", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "relationshipfield": { "name": "Relationship Picker", "icon": "TaskList", "styleable": true, "settings": [ { "type": "field/link", "label": "Field", "key": "field" }, { "type": "text", "label": "Label", "key": "label" }, { "type": "text", "label": "Placeholder", "key": "placeholder" }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false } ] }, "dataprovider": { "name": "Data Provider", "info": "Pagination is only available for data stored in internal tables.", "icon": "Data", "styleable": false, "hasChildren": true, "settings": [ { "type": "dataSource", "label": "Data", "key": "dataSource" }, { "type": "filter", "label": "Filtering", "key": "filter" }, { "type": "field", "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 } ], "context": { "type": "static", "values": [ { "label": "Rows", "key": "rows" }, { "label": "Rows Length", "key": "rowsLength" }, { "label": "Schema", "key": "schema" }, { "label": "Page Number", "key": "pageNumber" } ] } }, "table": { "name": "Table", "icon": "Table", "styleable": true, "hasChildren": true, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "number", "label": "Row Count", "key": "rowCount", "defaultValue": 8 }, { "type": "select", "label": "Theme", "key": "theme", "defaultValue": "spectrum--light", "options": [ { "label": "Lightest", "value": "spectrum--lightest" }, { "label": "Light", "value": "spectrum--light" }, { "label": "Dark", "value": "spectrum--dark" }, { "label": "Darkest", "value": "spectrum--darkest" } ] }, { "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": "multifield", "label": "Columns", "key": "columns", "dependsOn": "dataProvider", "placeholder": "All columns" }, { "type": "boolean", "label": "Auto Cols.", "key": "showAutoColumns", "defaultValue": false } ], "context": { "type": "schema" } }, "daterangepicker": { "name": "Date Range", "icon": "Date", "styleable": true, "hasChildren": false, "info": "Your data provider will be automatically filtered to the given date range.", "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider" }, { "type": "field", "label": "Date field", "key": "field" }, { "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" } ] } }