{ "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 4896, "snapColumns": 64, "detachFromLayout": true, "widgetId": "0", "topRow": 0, "bottomRow": 1290, "containerStyle": "none", "snapRows": 125, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": true, "version": 57, "minHeight": 1292, "parentColumnSpace": 1, "dynamicBindingPathList": [], "leftColumn": 0, "children": [ { "widgetName": "Modal1", "isCanvas": true, "displayName": "Modal", "iconSVG": "/static/media/icon.4975978e.svg", "topRow": 26, "bottomRow": 50, "parentRowSpace": 10, "type": "MODAL_WIDGET", "hideCard": false, "shouldScrollContents": true, "animateLoading": true, "parentColumnSpace": 20.796875, "leftColumn": 19, "children": [ { "widgetName": "Canvas1", "rightColumn": 499.125, "detachFromLayout": true, "displayName": "Canvas", "widgetId": "elonff8ppg", "topRow": 0, "bottomRow": 840, "parentRowSpace": 1, "isVisible": true, "type": "CANVAS_WIDGET", "canExtend": true, "version": 1, "hideCard": true, "parentId": "wvl7cnbcsx", "shouldScrollContents": false, "minHeight": 846, "renderMode": "CANVAS", "isLoading": false, "parentColumnSpace": 1, "leftColumn": 0, "children": [ { "boxShadow": "NONE", "widgetName": "IconButton1", "onClick": "{{closeModal('Modal1')}}", "buttonColor": "#2E3D49", "displayName": "Icon button", "iconSVG": "/static/media/icon.1a0c634a.svg", "topRow": 1, "bottomRow": 5, "type": "ICON_BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 56, "iconSize": 24, "isDisabled": false, "key": "bfqu52408k", "rightColumn": 64, "iconName": "cross", "widgetId": "tojyty4uqs", "isVisible": true, "version": 1, "parentId": "elonff8ppg", "renderMode": "CANVAS", "isLoading": false, "borderRadius": "SHARP", "buttonVariant": "TERTIARY" }, { "widgetName": "Text2", "displayName": "Text", "iconSVG": "/static/media/icon.97c59b52.svg", "topRow": 1, "bottomRow": 5, "type": "TEXT_WIDGET", "hideCard": false, "animateLoading": true, "overflow": "NONE", "leftColumn": 1, "shouldTruncate": false, "truncateButtonColor": "#FFC13D", "text": "Modal Title", "key": "kl9cwzi6b1", "rightColumn": 41, "textAlign": "LEFT", "widgetId": "7qjeufltuc", "isVisible": true, "fontStyle": "BOLD", "textColor": "#231F20", "version": 1, "parentId": "elonff8ppg", "renderMode": "CANVAS", "isLoading": false, "fontSize": "HEADING1" }, { "widgetName": "Button1", "onClick": "{{closeModal('Modal1')}}", "buttonColor": "#03B365", "displayName": "Button", "iconSVG": "/static/media/icon.cca02633.svg", "topRow": 74, "bottomRow": 78, "type": "BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 37, "text": "Close", "isDisabled": false, "key": "r8bpa6wnda", "rightColumn": 49, "isDefaultClickDisabled": true, "widgetId": "gmj9emgskp", "buttonStyle": "PRIMARY", "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "elonff8ppg", "renderMode": "CANVAS", "isLoading": false, "buttonVariant": "SECONDARY", "placement": "CENTER" }, { "widgetName": "Button2", "buttonColor": "#03B365", "displayName": "Button", "iconSVG": "/static/media/icon.cca02633.svg", "topRow": 74, "bottomRow": 78, "type": "BUTTON_WIDGET", "hideCard": false, "animateLoading": true, "leftColumn": 49, "text": "Confirm", "isDisabled": false, "key": "r8bpa6wnda", "rightColumn": 61, "isDefaultClickDisabled": true, "widgetId": "wg5svs8aa5", "buttonStyle": "PRIMARY_BUTTON", "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "elonff8ppg", "renderMode": "CANVAS", "isLoading": false, "buttonVariant": "PRIMARY", "placement": "CENTER" }, { "schema": { "__root_schema__": { "children": { "step": { "children": {}, "dataType": "string", "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.step))(JSONForm2.sourceData, JSONForm2.formData, JSONForm2.fieldState)}}", "fieldType": "Text Input", "sourceData": "#1", "isCustomField": false, "accessor": "step", "identifier": "step", "position": 0, "originalIdentifier": "step", "iconAlign": "left", "isDisabled": false, "isRequired": false, "isSpellCheck": false, "isVisible": true, "label": "Step" }, "task": { "children": {}, "dataType": "string", "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.task))(JSONForm2.sourceData, JSONForm2.formData, JSONForm2.fieldState)}}", "fieldType": "Text Input", "sourceData": "Drop a table", "isCustomField": false, "accessor": "task", "identifier": "task", "position": 1, "originalIdentifier": "task", "iconAlign": "left", "isDisabled": false, "isRequired": false, "isSpellCheck": false, "isVisible": true, "label": "Task" }, "status": { "children": {}, "dataType": "string", "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.status))(JSONForm2.sourceData, JSONForm2.formData, JSONForm2.fieldState)}}", "fieldType": "Text Input", "sourceData": "Done", "isCustomField": false, "accessor": "status", "identifier": "status", "position": 2, "originalIdentifier": "status", "iconAlign": "left", "isDisabled": false, "isRequired": false, "isSpellCheck": false, "isVisible": true, "label": "Status" }, "action": { "children": {}, "dataType": "string", "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.action))(JSONForm2.sourceData, JSONForm2.formData, JSONForm2.fieldState)}}", "fieldType": "Text Input", "sourceData": "", "isCustomField": false, "accessor": "action", "identifier": "action", "position": 3, "originalIdentifier": "action", "iconAlign": "left", "isDisabled": false, "isRequired": false, "isSpellCheck": false, "isVisible": true, "label": "Action" } }, "dataType": "object", "defaultValue": "{{((sourceData, formData, fieldState) => (sourceData))(JSONForm2.sourceData, JSONForm2.formData, JSONForm2.fieldState)}}", "fieldType": "Object", "sourceData": { "step": "#1", "task": "Drop a table", "status": "Done", "action": "" }, "isCustomField": false, "accessor": "__root_schema__", "identifier": "__root_schema__", "position": -1, "originalIdentifier": "__root_schema__", "isDisabled": false, "isRequired": false, "isVisible": true, "label": "" } }, "widgetName": "JSONForm2", "submitButtonStyles": { "buttonColor": "#03B365", "buttonVariant": "PRIMARY" }, "dynamicPropertyPathList": [ { "key": "schema.__root_schema__.children.date_of_birth.defaultValue" }, { "key": "schema.__root_schema__.children.dob.defaultValue" }, { "key": "schema.__root_schema__.children.migrant.defaultValue" } ], "displayName": "JSON Form", "iconSVG": "/static/media/icon.5b428de1.svg", "topRow": 5, "bottomRow": 67, "fieldLimitExceeded": false, "parentRowSpace": 10, "title": "Form", "type": "JSON_FORM_WIDGET", "hideCard": false, "animateLoading": true, "parentColumnSpace": 18.15625, "dynamicTriggerPathList": [], "leftColumn": 8, "dynamicBindingPathList": [ { "key": "schema.__root_schema__.defaultValue" }, { "key": "sourceData" }, { "key": "schema.__root_schema__.children.step.defaultValue" }, { "key": "schema.__root_schema__.children.task.defaultValue" }, { "key": "schema.__root_schema__.children.status.defaultValue" }, { "key": "schema.__root_schema__.children.action.defaultValue" } ], "sourceData": "{{Table1.triggeredRow}}", "showReset": true, "resetButtonLabel": "Reset", "key": "jwjed2l17v", "backgroundColor": "#fff", "rightColumn": 55, "autoGenerateForm": true, "widgetId": "gp2nvh2jvq", "resetButtonStyles": { "buttonColor": "#03B365", "buttonVariant": "SECONDARY" }, "isVisible": true, "version": 1, "parentId": "elonff8ppg", "renderMode": "CANVAS", "isLoading": false, "scrollContents": true, "fixedFooter": true, "submitButtonLabel": "Submit", "disabledWhenInvalid": true } ], "isDisabled": false, "key": "f3byh826p4" } ], "key": "al77tl94xm", "height": 846, "rightColumn": 43, "detachFromLayout": true, "widgetId": "wvl7cnbcsx", "canOutsideClickClose": true, "canEscapeKeyClose": true, "version": 2, "parentId": "0", "renderMode": "CANVAS", "isLoading": false, "width": 956 }, { "widgetName": "Table1", "defaultPageSize": 0, "columnOrder": ["step", "task", "status", "action"], "isVisibleDownload": true, "displayName": "Table", "iconSVG": "/static/media/icon.db8a9cbd.svg", "topRow": 15, "bottomRow": 43, "isSortable": true, "parentRowSpace": 10, "type": "TABLE_WIDGET", "defaultSelectedRow": "0", "hideCard": false, "animateLoading": true, "parentColumnSpace": 20.796875, "dynamicTriggerPathList": [ { "key": "primaryColumns.action.onClick" } ], "dynamicBindingPathList": [ { "key": "primaryColumns.step.computedValue" }, { "key": "primaryColumns.task.computedValue" }, { "key": "primaryColumns.status.computedValue" }, { "key": "primaryColumns.action.computedValue" }, { "key": "primaryColumns.action.buttonLabel" } ], "leftColumn": 13, "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": "{{showModal('Modal1')}}", "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", "buttonColor": "#03B365", "menuColor": "#03B365", "labelColor": "#FFFFFF", "buttonLabel": "{{Table1.sanitizedTableData.map((currentRow) => ( 'Action'))}}" } }, "delimiter": ",", "key": "soxontyqmf", "derivedColumns": {}, "rightColumn": 47, "textSize": "PARAGRAPH", "widgetId": "9gv3lc013m", "isVisibleFilters": true, "tableData": "[\n {\n \"step\": \"#1\",\n \"task\": \"Drop a table\",\n \"status\": \"Done\",\n \"action\": \"\"\n },\n {\n \"step\": \"#2\",\n \"task\": \"Create a query fetch_users with the Mock DB\",\n \"status\": \"Pending\",\n \"action\": \"\"\n },\n {\n \"step\": \"#3\",\n \"task\": \"Bind the query using => fetch_users.data\",\n \"status\": \"New\",\n \"action\": \"\"\n }\n]", "isVisible": true, "label": "Data", "searchKey": "", "enableClientSideSearch": true, "version": 3, "totalRecordsCount": 0, "parentId": "0", "renderMode": "CANVAS", "isLoading": false, "horizontalAlignment": "LEFT", "isVisibleSearch": true, "isVisiblePagination": true, "verticalAlignment": "CENTER", "columnSizeMap": { "task": 245, "step": 62, "status": 75 } } ] } }