{ "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 4896, "snapColumns": 64, "detachFromLayout": true, "widgetId": "0", "topRow": 0, "bottomRow": 1060, "containerStyle": "none", "snapRows": 125, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": true, "version": 67, "minHeight": 1292, "dynamicTriggerPathList": [], "parentColumnSpace": 1, "dynamicBindingPathList": [], "leftColumn": 0, "children": [ { "isVisible": true, "borderColor": "#E0DEDE", "borderWidth": "1", "animateLoading": true, "widgetName": "Form1", "backgroundColor": "#FFFFFF", "children": [ { "isVisible": true, "widgetName": "Canvas1", "version": 1, "detachFromLayout": true, "type": "CANVAS_WIDGET", "hideCard": true, "isDeprecated": false, "displayName": "Canvas", "key": "lz0d5g90t3", "containerStyle": "none", "canExtend": false, "children": [ { "isVisible": true, "text": "Form", "fontSize": "1.25rem", "fontStyle": "BOLD", "textAlign": "LEFT", "textColor": "#231F20", "widgetName": "Text1", "shouldTruncate": false, "overflow": "NONE", "version": 1, "animateLoading": true, "searchTags": [ "typography", "paragraph", "label" ], "type": "TEXT_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Text", "key": "i5p29w8v0a", "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", "widgetId": "4c54s08v23", "renderMode": "CANVAS", "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "isLoading": false, "leftColumn": 1.5, "rightColumn": 25.5, "topRow": 1, "bottomRow": 5, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "truncateButtonColor" }, { "key": "fontFamily" }, { "key": "borderRadius" } ] }, { "isVisible": true, "animateLoading": true, "text": "Submit", "buttonVariant": "PRIMARY", "placement": "CENTER", "widgetName": "Button1", "isDisabled": false, "isDefaultClickDisabled": true, "disabledWhenInvalid": true, "resetFormOnClick": true, "recaptchaType": "V3", "version": 1, "searchTags": [ "click", "submit" ], "type": "BUTTON_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Button", "key": "j7tqbmn5hc", "iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg", "widgetId": "ig1u4ut3pd", "renderMode": "CANVAS", "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "leftColumn": 40, "rightColumn": 51, "topRow": 62, "bottomRow": 66, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "buttonColor" }, { "key": "borderRadius" } ] }, { "isVisible": true, "animateLoading": true, "text": "Reset", "buttonVariant": "SECONDARY", "placement": "CENTER", "widgetName": "Button2", "isDisabled": false, "isDefaultClickDisabled": true, "disabledWhenInvalid": false, "resetFormOnClick": true, "recaptchaType": "V3", "version": 1, "searchTags": [ "click", "submit" ], "type": "BUTTON_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Button", "key": "j7tqbmn5hc", "iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg", "widgetId": "2atavwomlu", "renderMode": "CANVAS", "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "leftColumn": 29, "rightColumn": 38, "topRow": 62, "bottomRow": 66, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "buttonColor" }, { "key": "borderRadius" } ] }, { "isVisible": true, "animateLoading": true, "defaultSelectedRowIndex": 0, "defaultSelectedRowIndices": [ 0 ], "label": "Data", "widgetName": "Table1", "searchKey": "", "textSize": "0.875rem", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "totalRecordsCount": 0, "defaultPageSize": 0, "dynamicPropertyPathList": [{"key": "tableData"}], "borderColor": "#E0DEDE", "borderWidth": "1", "dynamicBindingPathList": [ { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "boxShadow" }, { "key": "childStylesheet.button.buttonColor" }, { "key": "childStylesheet.button.borderRadius" }, { "key": "childStylesheet.menuButton.menuColor" }, { "key": "childStylesheet.menuButton.borderRadius" }, { "key": "childStylesheet.iconButton.buttonColor" }, { "key": "childStylesheet.iconButton.borderRadius" }, { "key": "childStylesheet.editActions.saveButtonColor" }, { "key": "childStylesheet.editActions.saveBorderRadius" }, { "key": "childStylesheet.editActions.discardButtonColor" }, { "key": "childStylesheet.editActions.discardBorderRadius" }, { "key": "tableData" }, { "key": "primaryColumns.id.computedValue" }, { "key": "primaryColumns.email.computedValue" }, { "key": "primaryColumns.userName.computedValue" }, { "key": "primaryColumns.productName.computedValue" }, { "key": "primaryColumns.orderAmount.computedValue" } ], "primaryColumns": { "id": { "allowCellWrapping": false, "index": 0, "width": 150, "originalId": "id", "id": "id", "alias": "id", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "number", "textSize": "0.875rem", "enableFilter": true, "enableSort": true, "isVisible": true, "isDisabled": false, "isCellEditable": false, "isEditable": false, "isCellVisible": true, "isDerived": false, "label": "id", "isSaveVisible": true, "isDiscardVisible": true, "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"id\"]))}}", "validation": {} }, "email": { "allowCellWrapping": false, "index": 1, "width": 150, "originalId": "email", "id": "email", "alias": "email", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "0.875rem", "enableFilter": true, "enableSort": true, "isVisible": true, "isDisabled": false, "isCellEditable": false, "isEditable": false, "isCellVisible": true, "isDerived": false, "label": "email", "isSaveVisible": true, "isDiscardVisible": true, "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"email\"]))}}", "validation": {} }, "userName": { "allowCellWrapping": false, "index": 2, "width": 150, "originalId": "userName", "id": "userName", "alias": "userName", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "0.875rem", "enableFilter": true, "enableSort": true, "isVisible": true, "isDisabled": false, "isCellEditable": false, "isEditable": false, "isCellVisible": true, "isDerived": false, "label": "userName", "isSaveVisible": true, "isDiscardVisible": true, "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"userName\"]))}}", "validation": {} }, "productName": { "allowCellWrapping": false, "index": 3, "width": 150, "originalId": "productName", "id": "productName", "alias": "productName", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "0.875rem", "enableFilter": true, "enableSort": true, "isVisible": true, "isDisabled": false, "isCellEditable": false, "isEditable": false, "isCellVisible": true, "isDerived": false, "label": "productName", "isSaveVisible": true, "isDiscardVisible": true, "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"productName\"]))}}", "validation": {} }, "orderAmount": { "allowCellWrapping": false, "index": 4, "width": 150, "originalId": "orderAmount", "id": "orderAmount", "alias": "orderAmount", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "number", "textSize": "0.875rem", "enableFilter": true, "enableSort": true, "isVisible": true, "isDisabled": false, "isCellEditable": false, "isEditable": false, "isCellVisible": true, "isDerived": false, "label": "orderAmount", "isSaveVisible": true, "isDiscardVisible": true, "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"orderAmount\"]))}}", "validation": {} } }, "tableData": "{{[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n }\n]}}", "columnWidthMap": { "task": 245, "step": 62, "status": 75 }, "columnOrder": [ "id", "email", "userName", "productName", "orderAmount" ], "enableClientSideSearch": true, "isVisibleSearch": true, "isVisibleFilters": true, "isVisibleDownload": true, "isVisiblePagination": true, "isSortable": true, "delimiter": ",", "version": 1, "inlineEditingSaveOption": "ROW_LEVEL", "type": "TABLE_WIDGET_V2", "hideCard": false, "isDeprecated": false, "displayName": "Table", "key": "0up8a0wm4i", "iconSVG": "/static/media/icon.db8a9cbd2acd22a31ea91cc37ea2a46c.svg", "widgetId": "ydkc7cm6w4", "renderMode": "CANVAS", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", "childStylesheet": { "button": { "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none" }, "menuButton": { "menuColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none" }, "iconButton": { "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none" }, "editActions": { "saveButtonColor": "{{appsmith.theme.colors.primaryColor}}", "saveBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "discardButtonColor": "{{appsmith.theme.colors.primaryColor}}", "discardBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" } }, "isLoading": false, "parentColumnSpace": 7.4755859375, "parentRowSpace": 10, "leftColumn": 4, "rightColumn": 55, "topRow": 6, "bottomRow": 34, "parentId": "muk1vy75ao", "dynamicTriggerPathList": [] }, { "isVisible": true, "label": "Label", "labelPosition": "Top", "labelAlignment": "left", "labelTextSize": "0.875rem", "labelWidth": 5, "widgetName": "Input1", "version": 2, "defaultText": "{{Table1.selectedRow.email}}\n", "iconAlign": "left", "autoFocus": false, "labelStyle": "", "resetOnSubmit": true, "isRequired": false, "isDisabled": false, "animateLoading": true, "inputType": "TEXT", "searchTags": [ "form", "text input", "number", "textarea" ], "type": "INPUT_WIDGET_V2", "hideCard": false, "isDeprecated": false, "displayName": "Input", "key": "pm3gwntdcm", "iconSVG": "/static/media/icon.9f505595da61a34f563dba82adeb06ec.svg", "widgetId": "bp031y8spl", "renderMode": "CANVAS", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "parentColumnSpace": 9.18896484375, "parentRowSpace": 10, "leftColumn": 6, "rightColumn": 26, "topRow": 38, "bottomRow": 45, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "defaultText" } ], "dynamicTriggerPathList": [] }, { "isVisible": true, "label": "Label", "labelPosition": "Top", "labelAlignment": "left", "labelTextSize": "0.875rem", "labelWidth": 5, "widgetName": "CurrencyInput1", "version": 1, "defaultText": "{{Table1.selectedRow.orderAmount}}", "iconAlign": "left", "autoFocus": false, "labelStyle": "", "resetOnSubmit": true, "isRequired": false, "isDisabled": false, "animateLoading": true, "allowCurrencyChange": false, "defaultCurrencyCode": "USD", "decimals": 0, "searchTags": [ "amount", "total" ], "type": "CURRENCY_INPUT_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Currency Input", "key": "x8yxtaq8v3", "iconSVG": "/static/media/icon.f312efcb48ce4dafb08c20291635b30b.svg", "widgetId": "s9twabojbt", "renderMode": "CANVAS", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "parentColumnSpace": 9.18896484375, "parentRowSpace": 10, "leftColumn": 6, "rightColumn": 26, "topRow": 50, "bottomRow": 57, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "defaultText" } ], "dynamicTriggerPathList": [] }, { "isVisible": true, "label": "Label", "labelPosition": "Top", "labelAlignment": "left", "labelTextSize": "0.875rem", "labelWidth": 5, "widgetName": "PhoneInput1", "version": 1, "defaultText": "{{Table1.selectedRow.id}}\n", "iconAlign": "left", "autoFocus": false, "labelStyle": "", "resetOnSubmit": true, "isRequired": false, "isDisabled": false, "animateLoading": true, "defaultDialCode": "+1", "allowDialCodeChange": false, "allowFormatting": true, "searchTags": [ "call" ], "type": "PHONE_INPUT_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Phone Input", "key": "kjhejqspa9", "iconSVG": "/static/media/icon.108789d7165de30306435ab3c24e6cad.svg", "widgetId": "pjvwkdpty6", "renderMode": "CANVAS", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "parentColumnSpace": 9.18896484375, "parentRowSpace": 10, "leftColumn": 33, "rightColumn": 53, "topRow": 39, "bottomRow": 45, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "defaultText" } ], "dynamicTriggerPathList": [] }, { "isVisible": true, "animateLoading": true, "labelText": "Label", "labelPosition": "Top", "labelAlignment": "left", "labelWidth": 5, "labelTextSize": "0.875rem", "options": "[\n {\n \"label\": \"Option 1\",\n \"value\": \"1\"\n },\n {\n \"label\": \"Option 2\",\n \"value\": \"2\"\n },\n {\n \"label\": \"Option 3\",\n \"value\": \"3\"\n },\n {\n \"label\": \"Option 4\",\n \"value\": \"4\"\n },\n {\n \"label\": \"Option 5\",\n \"value\": \"5\"\n }\n]", "widgetName": "MultiSelect1", "isFilterable": true, "serverSideFiltering": false, "defaultOptionValue": "{{ ((options, serverSideFiltering) => ( `[\n \n]`))(MultiSelect1.options, MultiSelect1.serverSideFiltering) }}", "version": 1, "isRequired": false, "isDisabled": false, "placeholderText": "Select option(s)", "searchTags": [ "dropdown", "tags" ], "type": "MULTI_SELECT_WIDGET_V2", "hideCard": false, "isDeprecated": false, "displayName": "MultiSelect", "key": "y1jg4jsxok", "iconSVG": "/static/media/icon.a3495809ae48291a64404f3bb04b0e69.svg", "widgetId": "0vdcx3nycj", "renderMode": "CANVAS", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "none", "isLoading": false, "parentColumnSpace": 9.18896484375, "parentRowSpace": 10, "leftColumn": 33, "rightColumn": 53, "topRow": 47, "bottomRow": 54, "parentId": "muk1vy75ao", "dynamicBindingPathList": [ { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "defaultOptionValue" } ], "dynamicTriggerPathList": [] } ], "minHeight": 400, "widgetId": "muk1vy75ao", "renderMode": "CANVAS", "boxShadow": "none", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "isLoading": false, "parentColumnSpace": 1, "parentRowSpace": 1, "leftColumn": 0, "rightColumn": 239.25, "topRow": 0, "bottomRow": 680, "parentId": "v6qsaaxfcm", "dynamicBindingPathList": [ { "key": "borderRadius" }, { "key": "accentColor" } ] } ], "searchTags": [ "group" ], "type": "FORM_WIDGET", "hideCard": false, "isDeprecated": false, "displayName": "Form", "key": "c1wmb3xdrf", "iconSVG": "/static/media/icon.ea3e08d130e59c56867ae40114c10eed.svg", "isCanvas": true, "widgetId": "v6qsaaxfcm", "renderMode": "CANVAS", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", "isLoading": false, "parentColumnSpace": 9.96875, "parentRowSpace": 10, "leftColumn": 3, "rightColumn": 64, "topRow": 27, "bottomRow": 98, "parentId": "0", "dynamicBindingPathList": [ { "key": "borderRadius" }, { "key": "boxShadow" } ] } ] } }