{ "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 629, "snapColumns": 64, "detachFromLayout": true, "widgetId": "0", "topRow": 0, "bottomRow": 1850, "containerStyle": "none", "snapRows": 128, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": true, "version": 53, "minHeight": 1860, "parentColumnSpace": 1, "dynamicBindingPathList": [], "leftColumn": 0, "children": [ { "widgetName": "Modal1", "isCanvas": true, "displayName": "Modal", "iconSVG": "/static/media/icon.4975978e.svg", "topRow": 36, "bottomRow": 60, "parentRowSpace": 10, "type": "MODAL_WIDGET", "hideCard": false, "shouldScrollContents": true, "animateLoading": true, "parentColumnSpace": 22.375, "leftColumn": 19, "children": [ { "widgetName": "Canvas1", "rightColumn": 537, "detachFromLayout": true, "displayName": "Canvas", "widgetId": "hmlytxiqib", "topRow": 0, "bottomRow": 400, "parentRowSpace": 1, "isVisible": true, "type": "CANVAS_WIDGET", "canExtend": true, "version": 1, "hideCard": true, "parentId": "gpqlcp5eb9", "shouldScrollContents": false, "minHeight": 240, "renderMode": "CANVAS", "isLoading": false, "parentColumnSpace": 1, "leftColumn": 0, "children": [ { "widgetName": "Icon1", "rightColumn": 64, "onClick": "{{closeModal(Modal1.name)}}", "color": "#040627", "iconName": "cross", "displayName": "Icon", "iconSVG": "/static/media/icon.31d6cfe0.svg", "widgetId": "zmepy7lc3r", "topRow": 1, "bottomRow": 5, "isVisible": true, "type": "ICON_WIDGET", "version": 1, "hideCard": true, "parentId": "hmlytxiqib", "renderMode": "CANVAS", "isLoading": false, "leftColumn": 56, "iconSize": 24, "key": "iuyrb7k3se" }, { "widgetName": "Text1", "displayName": "Text", "iconSVG": "/static/media/icon.97c59b52.svg", "topRow": 1, "bottomRow": 5, "type": "TEXT_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 1, "shouldTruncate": false, "truncateButtonColor": "#FFC13D", "text": "Modal Title", "key": "peb0i069ic", "rightColumn": 41, "textAlign": "LEFT", "widgetId": "njfdmp6chc", "isVisible": true, "fontStyle": "BOLD", "textColor": "#231F20", "shouldScroll": false, "version": 1, "parentId": "hmlytxiqib", "renderMode": "CANVAS", "isLoading": false, "fontSize": "HEADING1" }, { "widgetName": "Button1", "onClick": "{{closeModal(Modal1.name)}}", "buttonColor": "#03B365", "displayName": "Button", "iconSVG": "/static/media/icon.cca02633.svg", "topRow": 34, "bottomRow": 38, "type": "BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 36, "text": "Close", "isDisabled": false, "key": "8ieezy6pr0", "rightColumn": 48, "isDefaultClickDisabled": true, "widgetId": "g4nkbpq5o2", "buttonStyle": "PRIMARY", "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "hmlytxiqib", "renderMode": "CANVAS", "isLoading": false, "buttonVariant": "SECONDARY", "placement": "CENTER" }, { "widgetName": "Button2", "buttonColor": "#03B365", "displayName": "Button", "iconSVG": "/static/media/icon.cca02633.svg", "topRow": 16, "bottomRow": 20, "type": "BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 48, "text": "Confirm", "isDisabled": false, "key": "8ieezy6pr0", "rightColumn": 60, "isDefaultClickDisabled": true, "widgetId": "9gac5c13qe", "buttonStyle": "PRIMARY_BUTTON", "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "hmlytxiqib", "renderMode": "CANVAS", "isLoading": false, "buttonVariant": "PRIMARY", "placement": "CENTER" }, { "widgetName": "Table1", "defaultPageSize": 0, "columnOrder": [ "step", "task", "status", "action" ], "isVisibleDownload": true, "displayName": "Table", "iconSVG": "/static/media/icon.db8a9cbd.svg", "topRow": 6, "bottomRow": 34, "isSortable": true, "parentRowSpace": 10, "type": "TABLE_WIDGET", "defaultSelectedRow": "0", "hideCard": false, "animateLoading": true, "parentColumnSpace": 6.9375, "dynamicBindingPathList": [ { "key": "primaryColumns.step.computedValue" }, { "key": "primaryColumns.task.computedValue" }, { "key": "primaryColumns.status.computedValue" }, { "key": "primaryColumns.action.computedValue" } ], "leftColumn": 7, "primaryColumns": { "step": { "index": 0, "width": 150, "id": "step", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "step", "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "task": { "index": 1, "width": 150, "id": "task", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "task", "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "status": { "index": 2, "width": 150, "id": "status", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "status", "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "action": { "index": 3, "width": 150, "id": "action", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "button", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDisabled": false, "isDerived": false, "label": "action", "onClick": "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}", "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" } }, "delimiter": ",", "key": "o1l7ntycyd", "derivedColumns": {}, "rightColumn": 41, "textSize": "PARAGRAPH", "widgetId": "amcaiq96zp", "isVisibleFilters": true, "tableData": [ { "step": "#1", "task": "Drop a table", "status": "✅", "action": "" }, { "step": "#2", "task": "Create a query fetch_users with the Mock DB", "status": "--", "action": "" }, { "step": "#3", "task": "Bind the query using => fetch_users.data", "status": "--", "action": "" } ], "isVisible": true, "label": "Data", "searchKey": "", "enableClientSideSearch": true, "version": 3, "totalRecordsCount": 0, "parentId": "hmlytxiqib", "renderMode": "CANVAS", "isLoading": false, "horizontalAlignment": "LEFT", "isVisibleSearch": true, "isVisiblePagination": true, "verticalAlignment": "CENTER", "columnSizeMap": { "task": 245, "step": 62, "status": 75 } } ], "isDisabled": false, "key": "7q00195olh" } ], "key": "y4h3pi0oe2", "height": 240, "rightColumn": 43, "detachFromLayout": true, "widgetId": "gpqlcp5eb9", "canOutsideClickClose": true, "canEscapeKeyClose": true, "version": 2, "parentId": "0", "renderMode": "CANVAS", "isLoading": false, "width": 456 }, { "widgetName": "Button3", "onClick": "{{showModal(Modal1.name)}}", "buttonColor": "#03B365", "displayName": "Button", "iconSVG": "/static/media/icon.cca02633.svg", "topRow": 75, "bottomRow": 79, "parentRowSpace": 10, "type": "BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "parentColumnSpace": 22.375, "dynamicTriggerPathList": [ { "key": "onClick" } ], "leftColumn": 16, "dynamicBindingPathList": [], "text": "Submit", "isDisabled": false, "key": "8ieezy6pr0", "rightColumn": 32, "isDefaultClickDisabled": true, "widgetId": "69ygydup95", "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "0", "renderMode": "CANVAS", "isLoading": false, "buttonVariant": "PRIMARY", "placement": "CENTER" }, { "boxShadow": "NONE", "widgetName": "Container1", "borderColor": "transparent", "isCanvas": true, "displayName": "Container", "iconSVG": "/static/media/icon.1977dca3.svg", "topRow": 14, "bottomRow": 54, "parentRowSpace": 10, "type": "CONTAINER_WIDGET", "hideCard": false, "shouldScrollContents": true, "animateLoading": true, "parentColumnSpace": 17.5625, "dynamicTriggerPathList": [], "leftColumn": 38, "dynamicBindingPathList": [], "children": [ { "widgetName": "Canvas2", "rightColumn": 421.5, "detachFromLayout": true, "displayName": "Canvas", "widgetId": "l277ovqxgj", "containerStyle": "none", "topRow": 0, "bottomRow": 700, "parentRowSpace": 1, "isVisible": true, "type": "CANVAS_WIDGET", "canExtend": false, "version": 1, "hideCard": true, "parentId": "98bc1f30j7", "minHeight": 400, "renderMode": "CANVAS", "isLoading": false, "parentColumnSpace": 1, "leftColumn": 0, "children": [ { "widgetName": "Table2", "defaultPageSize": 0, "columnOrder": [ "step", "task", "status", "action" ], "isVisibleDownload": true, "displayName": "Table", "iconSVG": "/static/media/icon.db8a9cbd.svg", "topRow": 4, "bottomRow": 68, "isSortable": true, "parentRowSpace": 10, "type": "TABLE_WIDGET", "defaultSelectedRow": "0", "hideCard": false, "animateLoading": true, "parentColumnSpace": 17.5625, "dynamicBindingPathList": [ { "key": "primaryColumns.step.computedValue" }, { "key": "primaryColumns.task.computedValue" }, { "key": "primaryColumns.status.computedValue" }, { "key": "primaryColumns.action.computedValue" } ], "leftColumn": 11, "primaryColumns": { "step": { "index": 0, "width": 150, "id": "step", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "step", "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.step))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "task": { "index": 1, "width": 150, "id": "task", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "task", "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.task))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "status": { "index": 2, "width": 150, "id": "status", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "text", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDerived": false, "label": "status", "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.status))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" }, "action": { "index": 3, "width": 150, "id": "action", "horizontalAlignment": "LEFT", "verticalAlignment": "CENTER", "columnType": "button", "textSize": "PARAGRAPH", "enableFilter": true, "enableSort": true, "isVisible": true, "isCellVisible": true, "isDisabled": false, "isDerived": false, "label": "action", "onClick": "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}", "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF" } }, "delimiter": ",", "key": "co25fvur9p", "derivedColumns": {}, "rightColumn": 45, "textSize": "PARAGRAPH", "widgetId": "mk1uhpxi36", "isVisibleFilters": true, "tableData": [ { "step": "#1", "task": "Drop a table", "status": "✅", "action": "" }, { "step": "#2", "task": "Create a query fetch_users with the Mock DB", "status": "--", "action": "" }, { "step": "#3", "task": "Bind the query using => fetch_users.data", "status": "--", "action": "" } ], "isVisible": true, "label": "Data", "searchKey": "", "enableClientSideSearch": true, "version": 3, "totalRecordsCount": 0, "parentId": "l277ovqxgj", "renderMode": "CANVAS", "isLoading": false, "horizontalAlignment": "LEFT", "isVisibleSearch": true, "isVisiblePagination": true, "verticalAlignment": "CENTER", "columnSizeMap": { "task": 245, "step": 62, "status": 75 } } ], "key": "3avcmqtfo4" } ], "borderWidth": "0", "key": "8xetlh4788", "backgroundColor": "#FFFFFF", "rightColumn": 62, "widgetId": "98bc1f30j7", "containerStyle": "card", "isVisible": true, "version": 1, "parentId": "0", "renderMode": "CANVAS", "isLoading": false, "borderRadius": "0" } ] } }