diff --git a/app/server/appsmith-server/src/main/resources/examples-organization.json b/app/server/appsmith-server/src/main/resources/examples-organization.json index f3966a72bb..a437d9f2dc 100644 --- a/app/server/appsmith-server/src/main/resources/examples-organization.json +++ b/app/server/appsmith-server/src/main/resources/examples-organization.json @@ -2081,7 +2081,7 @@ "topRow": 0, "bottomRow": 1, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow !== undefined}}", + "isVisible": "{{usersTable.selectedRow.id !== undefined}}", "type": "BUTTON_WIDGET", "dynamicBindings": { "isVisible": true @@ -2190,7 +2190,7 @@ "topRow": 3, "bottomRow": 4, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow !== undefined}}", + "isVisible": "{{usersTable.selectedRow.id !== undefined}}", "type": "TEXT_WIDGET", "dynamicBindings": { "text": true, @@ -2215,7 +2215,7 @@ "topRow": 3, "bottomRow": 4, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow === undefined}}", + "isVisible": "{{usersTable.selectedRow.id === undefined}}", "type": "TEXT_WIDGET", "dynamicBindings": { "isVisible": true, @@ -2456,7 +2456,7 @@ "onClick": true }, "text": "Refund", - "isDisabled": "{{ordersTable.selectedRow === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}" + "isDisabled": "{{ordersTable.selectedRow.id === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}" }, { "hiddenColumns": [ @@ -3508,7 +3508,7 @@ "topRow": 0, "bottomRow": 1, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow !== undefined}}", + "isVisible": "{{usersTable.selectedRow.id !== undefined}}", "type": "BUTTON_WIDGET", "dynamicBindings": { "isVisible": true @@ -3617,7 +3617,7 @@ "topRow": 3, "bottomRow": 4, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow !== undefined}}", + "isVisible": "{{usersTable.selectedRow.id !== undefined}}", "type": "TEXT_WIDGET", "dynamicBindings": { "text": true, @@ -3642,7 +3642,7 @@ "topRow": 3, "bottomRow": 4, "parentRowSpace": 40, - "isVisible": "{{usersTable.selectedRow === undefined}}", + "isVisible": "{{usersTable.selectedRow.id === undefined}}", "type": "TEXT_WIDGET", "dynamicBindings": { "isVisible": true, @@ -3883,7 +3883,7 @@ "onClick": true }, "text": "Refund", - "isDisabled": "{{ordersTable.selectedRow === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}" + "isDisabled": "{{ordersTable.selectedRow.id === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}" }, { "hiddenColumns": [ @@ -4484,7 +4484,7 @@ "widgetName": "Tabs1", "tabs": "[{\"label\":\"Blank\",\"id\":\"tab1\"},{\"label\":\"Email\",\"id\":\"tab2\"}]", "shouldShowTabs": false, - "defaultTab": "{{ticketsTable.selectedRow === undefined ? \"Blank\" : \"Email\"}}", + "defaultTab": "{{ticketsTable.selectedRow.id === undefined ? \"Blank\" : \"Email\"}}", "blueprint": { "view": [ { @@ -4820,7 +4820,7 @@ "widgetName": "Tabs1", "tabs": "[{\"label\":\"Blank\",\"id\":\"tab1\"},{\"label\":\"Email\",\"id\":\"tab2\"}]", "shouldShowTabs": false, - "defaultTab": "{{ticketsTable.selectedRow === undefined ? \"Blank\" : \"Email\"}}", + "defaultTab": "{{ticketsTable.selectedRow.id === undefined ? \"Blank\" : \"Email\"}}", "blueprint": { "view": [ { @@ -5174,6 +5174,8446 @@ "deleted": false, "policies": [], "_class": "com.appsmith.server.domains.Application" + }, + { + "name": "Form Tutorial", + "isPublic": true, + "$pages": [ + { + "name": "1. Simple Form Submit", + "$isDefault": true, + "$actions": [ + { + "name": "createUser", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "INSERT INTO users\n (name, gender, email, status, dob)\nVALUES\n ('{{nameInput.text}}', '{{genderDropdown.selectedOptionValue}}', '{{emailInput.text}}', '{{statusRadio.selectedOptionValue}}', '{{dobPicker.selectedDate}}');" + }, + "pluginType": "DB", + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "statusRadio.selectedOptionValue", + "genderDropdown.selectedOptionValue", + "dobPicker.selectedDate", + "nameInput.text", + "emailInput.text" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "d6jgloegyf", + "topRow": 3, + "bottomRow": 21, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "x8vgckp3l4", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "d6jgloegyf", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "1jodo5u68l", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ‘¤ User Form", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": true, + "widgetName": "submitButton", + "rightColumn": 16, + "onClick": "{{createUser.run(() => (), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "plp3uead51", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 15, + "bottomRow": 16, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Submit" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "bnecis4z7c", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 15, + "bottomRow": 16, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 8, + "text": "Reset" + }, + { + "widgetName": "nameInput", + "rightColumn": 15, + "widgetId": "mdhr691bli", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text2", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "aas854mqz9", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "bftcscfabf", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 15, + "widgetId": "471lkifudv", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "regex": "^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "genderDropdown", + "rightColumn": 15, + "widgetId": "6je3zqg8ig", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "defaultOptionValue": "MALE", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"Male\",\n \"value\": \"MALE\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"FEMALE\"\n }\n]" + }, + { + "widgetName": "Text4", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "gb5skka46v", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "Text5", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "e12l99p935", + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Status", + "textStyle": "LABEL" + }, + { + "widgetName": "statusRadio", + "rightColumn": 15, + "widgetId": "g5fbk7ctmy", + "topRow": 10, + "bottomRow": 12, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "RADIO_GROUP_WIDGET", + "dynamicBindings": { + "isValid": true, + "selectedOption": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "defaultOptionValue": "Single", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": [ + { + "id": "1", + "label": "Married", + "value": "Married" + }, + { + "id": "2", + "label": "Single", + "value": "Single" + } + ] + }, + { + "widgetName": "Text6", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "ya2vfipsj5", + "topRow": 12, + "bottomRow": 13, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Date of Birth", + "textStyle": "LABEL" + }, + { + "widgetName": "dobPicker", + "defaultDate": "11/08/2020 20:57", + "rightColumn": 15, + "dateFormat": "DD/MM/YYYY HH:mm", + "widgetId": "4n4tkytxvn", + "topRow": 13, + "bottomRow": 14, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text9", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "xcifbddadn", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Phone Number", + "textStyle": "LABEL" + }, + { + "widgetName": "phoneInput", + "rightColumn": 15, + "widgetId": "8t9ztl5mdf", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "regex": "", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text14", + "rightColumn": 16, + "textAlign": "CENTER", + "widgetId": "dirlhhqbj7", + "topRow": 16, + "bottomRow": 17, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 0, + "text": "

Update the submit button to show a success message!

", + "textStyle": "BODY" + } + ] + } + ] + }, + { + "widgetName": "Text7", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "am329sctya", + "topRow": 15, + "bottomRow": 17, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ”„ Enable the reset form property to reset the form on success

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text10", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "nygy0euyhh", + "topRow": 3, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” The form data is submitted to the mock database via the createUser Query. The submitButton executes the createUser Query onClick.
\nThe query takes inputs from the form using
{{ \"{{ widgetName.property }}\" }}

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text11", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "rd5jjx61jm", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Simple Form Submit\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text12", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "pfvz5vt5eg", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "This page demonstrates a simple form submission with data validation", + "textStyle": "BODY" + }, + { + "widgetName": "Text8", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "r0xi0nyrq5", + "topRow": 11, + "bottomRow": 13, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ·ļø Mark the nameInput as a required field to disable the submit button if the name is empty

\n", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text13", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "8a1wds22qy", + "topRow": 13, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

ā˜Žļø Add a phone number validation to the regex property field
\nEx: ^\\d{10}$

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text15", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "nnt0vyrdnp", + "topRow": 10, + "bottomRow": 11, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "d6jgloegyf", + "topRow": 3, + "bottomRow": 21, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "x8vgckp3l4", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "d6jgloegyf", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "1jodo5u68l", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ‘¤ User Form", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": true, + "widgetName": "submitButton", + "rightColumn": 16, + "onClick": "{{createUser.run(() => (), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "plp3uead51", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 15, + "bottomRow": 16, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Submit" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "bnecis4z7c", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 15, + "bottomRow": 16, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 8, + "text": "Reset" + }, + { + "widgetName": "nameInput", + "rightColumn": 15, + "widgetId": "mdhr691bli", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text2", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "aas854mqz9", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "bftcscfabf", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 15, + "widgetId": "471lkifudv", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "regex": "^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "genderDropdown", + "rightColumn": 15, + "widgetId": "6je3zqg8ig", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "defaultOptionValue": "MALE", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"Male\",\n \"value\": \"MALE\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"FEMALE\"\n }\n]" + }, + { + "widgetName": "Text4", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "gb5skka46v", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "Text5", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "e12l99p935", + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Status", + "textStyle": "LABEL" + }, + { + "widgetName": "statusRadio", + "rightColumn": 15, + "widgetId": "g5fbk7ctmy", + "topRow": 10, + "bottomRow": 12, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "RADIO_GROUP_WIDGET", + "dynamicBindings": { + "isValid": true, + "selectedOption": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "defaultOptionValue": "Single", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": [ + { + "id": "1", + "label": "Married", + "value": "Married" + }, + { + "id": "2", + "label": "Single", + "value": "Single" + } + ] + }, + { + "widgetName": "Text6", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "ya2vfipsj5", + "topRow": 12, + "bottomRow": 13, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Date of Birth", + "textStyle": "LABEL" + }, + { + "widgetName": "dobPicker", + "defaultDate": "11/08/2020 20:57", + "rightColumn": 15, + "dateFormat": "DD/MM/YYYY HH:mm", + "widgetId": "4n4tkytxvn", + "topRow": 13, + "bottomRow": 14, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text9", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "xcifbddadn", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Phone Number", + "textStyle": "LABEL" + }, + { + "widgetName": "phoneInput", + "rightColumn": 15, + "widgetId": "8t9ztl5mdf", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "regex": "", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text14", + "rightColumn": 16, + "textAlign": "CENTER", + "widgetId": "dirlhhqbj7", + "topRow": 16, + "bottomRow": 17, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "x8vgckp3l4", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 0, + "text": "

Update the submit button to show a success message!

", + "textStyle": "BODY" + } + ] + } + ] + }, + { + "widgetName": "Text7", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "am329sctya", + "topRow": 15, + "bottomRow": 17, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ”„ Enable the reset form property to reset the form on success

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text10", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "nygy0euyhh", + "topRow": 3, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” The form data is submitted to the mock database via the createUser Query. The submitButton executes the createUser Query onClick.
\nThe query takes inputs from the form using
{{ \"{{ widgetName.property }}\" }}

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text11", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "rd5jjx61jm", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Simple Form Submit\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text12", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "pfvz5vt5eg", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "This page demonstrates a simple form submission with data validation", + "textStyle": "BODY" + }, + { + "widgetName": "Text8", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "r0xi0nyrq5", + "topRow": 11, + "bottomRow": 13, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ·ļø Mark the nameInput as a required field to disable the submit button if the name is empty

\n", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text13", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "8a1wds22qy", + "topRow": 13, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

ā˜Žļø Add a phone number validation to the regex property field
\nEx: ^\\d{10}$

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text15", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "nnt0vyrdnp", + "topRow": 10, + "bottomRow": 11, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ ], + "publishedLayoutOnLoadActions": [ ], + "widgetNames": [ + "Form1", + "Text9", + "Text8", + "Text7", + "Text6", + "Text5", + "Text4", + "statusRadio", + "Text3", + "Text2", + "Text1", + "genderDropdown", + "dobPicker", + "submitButton", + "FormButton2", + "phoneInput", + "nameInput", + "emailInput", + "Text14", + "MainContainer", + "Text15", + "Text12", + "Text13", + "Text10", + "Text11", + "Canvas1" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + }, + { + "name": "2. Confirm Form Submit", + "$isDefault": false, + "$actions": [ + { + "name": "createCampaign", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "INSERT INTO campaigns\n (\"campaignName\", \"campaignIdea\", \"scheduleDate\", \"campaignPlatforms\", status)\nVALUES\n ('{{nameInput.text}}', '{{ideaInput.text}}', '{{scheduleDatePicker.selectedDate}}', '{{socialSelect.selectedOptionValueArr}}', 'CREATED');\n" + }, + "pluginType": "DB", + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "scheduleDatePicker.selectedDate", + "ideaInput.text", + "socialSelect.selectedOptionValueArr", + "nameInput.text" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "r32mmh4z9v", + "topRow": 3, + "bottomRow": 18, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "pqa1d7o4vt", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "r32mmh4z9v", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "9a5etz3rhh", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ Create Campaign", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": false, + "widgetName": "createButton", + "rightColumn": 16, + "onClick": "{{showModal('confirmModal')}}", + "isDefaultClickDisabled": true, + "widgetId": "jmyi3irm3h", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": { + + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 11, + "dynamicTriggers": { + "onClick": true + }, + "text": "Create" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 11, + "isDefaultClickDisabled": true, + "widgetId": "xessbkdnlr", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 7, + "text": "Reset" + }, + { + "isRequired": false, + "widgetName": "nameInput", + "rightColumn": 14, + "widgetId": "yz30dwq3fm", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text2", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "kg51rup1va", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Campaign Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "0nzx3s4u7s", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Scheduled Date", + "textStyle": "LABEL" + }, + { + "widgetName": "scheduleDatePicker", + "defaultDate": "11/08/2020 20:57", + "rightColumn": 10, + "dateFormat": "DD/MM/YYYY HH:mm", + "widgetId": "i64ipc23zm", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text4", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "ioedtykcph", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Campaign Idea", + "textStyle": "LABEL" + }, + { + "widgetName": "ideaInput", + "rightColumn": 14, + "widgetId": "35eplf0gtb", + "topRow": 7, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text5", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "fkria8uyix", + "topRow": 10, + "bottomRow": 11, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Social Platforms", + "textStyle": "LABEL" + }, + { + "widgetName": "socialSelect", + "rightColumn": 14, + "widgetId": "z25krk0v3a", + "topRow": 11, + "bottomRow": 12, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "defaultOptionValue": "FB", + "selectionType": "MULTI_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"FB\",\n \"value\": \"FB\"\n },\n {\n \"label\": \"Twitter\",\n \"value\": \"Twitter\"\n },\n {\n \"label\": \"Instagra\",\n \"value\": \"Instagra\"\n }\n]" + } + ] + } + ] + }, + { + "widgetName": "confirmModal", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "p6433683et", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": false, + "canOutsideClickClose": true, + "type": "MODAL_WIDGET", + "canEscapeKeyClose": true, + "parentId": "0", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "isVisible": true, + "isDisabled": false, + "canExtend": true + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 1, + "size": "MODAL_SMALL", + "leftColumn": 0, + "children": [ + { + "widgetName": "Canvas2", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "uj1kd0nk9j", + "topRow": 0, + "bottomRow": 280, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": true, + "type": "CANVAS_WIDGET", + "parentId": "p6433683et", + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 16, + "onClick": "{{closeModal('confirmModal')}}", + "color": "#040627", + "iconName": "cross", + "widgetId": "2wrstdve0e", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "ICON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 14, + "iconSize": 24 + }, + { + "widgetName": "Text6", + "rightColumn": 14, + "textAlign": "LEFT", + "widgetId": "lagfhwigea", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 0, + "text": "Create {{nameInput.text || \"Campaign\"}}", + "textStyle": "HEADING" + }, + { + "widgetName": "Button1", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "ibrcaegmxe", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 9, + "text": "Cancel", + "isDisabled": false + }, + { + "widgetName": "confirmButton", + "rightColumn": 16, + "onClick": "{{createCampaign.run(() => (), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "yipy4c10gz", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Confirm", + "isDisabled": false + }, + { + "widgetName": "Text7", + "rightColumn": 14, + "textAlign": "LEFT", + "widgetId": "ahoelaxsvr", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "uj1kd0nk9j", + "isLoading": false, + "parentColumnSpace": 26, + "leftColumn": 1, + "text": "A campaign cannot be edited once created. Are you sure you want to proceed?", + "textStyle": "LABEL" + } + ], + "isDisabled": false + } + ] + }, + { + "widgetName": "Text8", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "rcbzqvhbi7", + "topRow": 4, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” The createButton is configured to open a Modal onClick.\n
\nThe Modal requests for confirmation and the confirmButton is configred to execute the createCampaign Query.

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text10", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "hx6f6moaql", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Confirm Form Submit\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text11", + "rightColumn": 13, + "textAlign": "CENTER", + "widgetId": "uy1cu7aoak", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "This page demonstrates how to confirm form submissions which lead to important or dangerous actions", + "textStyle": "BODY" + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 8, + "rightColumn": 15, + "topRow": 8, + "bottomRow": 9, + "parentId": "0", + "widgetId": "2rjgd88z1l", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

\nšŸ” Inspect the createButton properties.

\nšŸŒ‚ Update the confirmButton in the modal to close once the campagin is created

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text13", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 8, + "rightColumn": 15, + "topRow": 9, + "bottomRow": 12, + "parentId": "0", + "widgetId": "fmnqge8a4x", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "r32mmh4z9v", + "topRow": 3, + "bottomRow": 18, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "pqa1d7o4vt", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "r32mmh4z9v", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "9a5etz3rhh", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ Create Campaign", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": false, + "widgetName": "createButton", + "rightColumn": 16, + "onClick": "{{showModal('confirmModal')}}", + "isDefaultClickDisabled": true, + "widgetId": "jmyi3irm3h", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": { + + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 11, + "dynamicTriggers": { + "onClick": true + }, + "text": "Create" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 11, + "isDefaultClickDisabled": true, + "widgetId": "xessbkdnlr", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 7, + "text": "Reset" + }, + { + "isRequired": false, + "widgetName": "nameInput", + "rightColumn": 14, + "widgetId": "yz30dwq3fm", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text2", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "kg51rup1va", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Campaign Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "0nzx3s4u7s", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Scheduled Date", + "textStyle": "LABEL" + }, + { + "widgetName": "scheduleDatePicker", + "defaultDate": "11/08/2020 20:57", + "rightColumn": 10, + "dateFormat": "DD/MM/YYYY HH:mm", + "widgetId": "i64ipc23zm", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text4", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "ioedtykcph", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Campaign Idea", + "textStyle": "LABEL" + }, + { + "widgetName": "ideaInput", + "rightColumn": 14, + "widgetId": "35eplf0gtb", + "topRow": 7, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Text5", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "fkria8uyix", + "topRow": 10, + "bottomRow": 11, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Social Platforms", + "textStyle": "LABEL" + }, + { + "widgetName": "socialSelect", + "rightColumn": 14, + "widgetId": "z25krk0v3a", + "topRow": 11, + "bottomRow": 12, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "pqa1d7o4vt", + "isLoading": false, + "defaultOptionValue": "FB", + "selectionType": "MULTI_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"FB\",\n \"value\": \"FB\"\n },\n {\n \"label\": \"Twitter\",\n \"value\": \"Twitter\"\n },\n {\n \"label\": \"Instagra\",\n \"value\": \"Instagra\"\n }\n]" + } + ] + } + ] + }, + { + "widgetName": "confirmModal", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "p6433683et", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": false, + "canOutsideClickClose": true, + "type": "MODAL_WIDGET", + "canEscapeKeyClose": true, + "parentId": "0", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "isVisible": true, + "isDisabled": false, + "canExtend": true + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 1, + "size": "MODAL_SMALL", + "leftColumn": 0, + "children": [ + { + "widgetName": "Canvas2", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "uj1kd0nk9j", + "topRow": 0, + "bottomRow": 280, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": true, + "type": "CANVAS_WIDGET", + "parentId": "p6433683et", + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 16, + "onClick": "{{closeModal('confirmModal')}}", + "color": "#040627", + "iconName": "cross", + "widgetId": "2wrstdve0e", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "ICON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 14, + "iconSize": 24 + }, + { + "widgetName": "Text6", + "rightColumn": 14, + "textAlign": "LEFT", + "widgetId": "lagfhwigea", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 0, + "text": "Create {{nameInput.text || \"Campaign\"}}", + "textStyle": "HEADING" + }, + { + "widgetName": "Button1", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "ibrcaegmxe", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 9, + "text": "Cancel", + "isDisabled": false + }, + { + "widgetName": "confirmButton", + "rightColumn": 16, + "onClick": "{{createCampaign.run(() => (), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "yipy4c10gz", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "uj1kd0nk9j", + "isLoading": false, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Confirm", + "isDisabled": false + }, + { + "widgetName": "Text7", + "rightColumn": 14, + "textAlign": "LEFT", + "widgetId": "ahoelaxsvr", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "uj1kd0nk9j", + "isLoading": false, + "parentColumnSpace": 26, + "leftColumn": 1, + "text": "A campaign cannot be edited once created. Are you sure you want to proceed?", + "textStyle": "LABEL" + } + ], + "isDisabled": false + } + ] + }, + { + "widgetName": "Text8", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "rcbzqvhbi7", + "topRow": 4, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” The createButton is configured to open a Modal onClick.\n
\nThe Modal requests for confirmation and the confirmButton is configred to execute the createCampaign Query.

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text10", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "hx6f6moaql", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Confirm Form Submit\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text11", + "rightColumn": 13, + "textAlign": "CENTER", + "widgetId": "uy1cu7aoak", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "This page demonstrates how to confirm form submissions which lead to important or dangerous actions", + "textStyle": "BODY" + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 8, + "rightColumn": 15, + "topRow": 8, + "bottomRow": 9, + "parentId": "0", + "widgetId": "2rjgd88z1l", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

\nšŸ” Inspect the createButton properties.

\nšŸŒ‚ Update the confirmButton in the modal to close once the campagin is created

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text13", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 8, + "rightColumn": 15, + "topRow": 9, + "bottomRow": 12, + "parentId": "0", + "widgetId": "fmnqge8a4x", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ ], + "publishedLayoutOnLoadActions": [ ], + "widgetNames": [ + "Form1", + "Button1", + "Text8", + "Text7", + "Text6", + "Text5", + "Text4", + "Text3", + "ideaInput", + "Text2", + "Text1", + "Icon1", + "confirmButton", + "socialSelect", + "confirmModal", + "scheduleDatePicker", + "createButton", + "FormButton2", + "nameInput", + "MainContainer", + "Text12", + "Text13", + "Text10", + "Text11", + "Canvas1", + "Canvas2" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + }, + { + "name": "3. Pre-Fill Form", + "$isDefault": false, + "$actions": [ + { + "name": "fetchUserByUrlParam", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "SELECT * FROM users where email = '{{appsmith.URL.queryParams.email}}' ORDER BY id LIMIT 1;\n" + }, + "pluginType": "DB", + "executeOnLoad": true, + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "appsmith.URL.queryParams.email" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + }, + { + "name": "updateUser", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "UPDATE users\n SET name = '{{nameInput.text}}',\n email = '{{emailInput.text}}',\n gender = '{{genderDropdown.selectedOptionValue}}',\n dob = '{{dobPicker.selectedDate}}'\n WHERE id = {{fetchUserByUrlParam.data[0].id}};\n" + }, + "pluginType": "DB", + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "genderDropdown.selectedOptionValue", + "dobPicker.selectedDate", + "nameInput.text", + "emailInput.text", + "fetchUserByUrlParam.data[0].id" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "yihxuqc4pa", + "topRow": 3, + "bottomRow": 16, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "epboelq954", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "yihxuqc4pa", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "9o1dx1zkxp", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ‘¤ Update User", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": true, + "widgetName": "updateButton", + "rightColumn": 16, + "onClick": "{{updateUser.run(() => fetchUserByUrlParam.run(), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "mio7jzmj49", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": { + + }, + "parentId": "epboelq954", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 10, + "dynamicTriggers": { + "onClick": true + }, + "text": "Update User" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 10, + "isDefaultClickDisabled": true, + "widgetId": "8mwfe4o99s", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "epboelq954", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 6, + "text": "Reset" + }, + { + "widgetName": "nameInput", + "rightColumn": 14, + "widgetId": "75v9zd6qfq", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT", + "defaultText": "{{fetchUserByUrlParam.data[0].name}}" + }, + { + "widgetName": "Text2", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "8xxyi61bnt", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "vrkg24ziqv", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 14, + "widgetId": "cte0iuvg43", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT", + "defaultText": "{{fetchUserByUrlParam.data[0].email}}" + }, + { + "widgetName": "gender", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "3jsdwjjq4j", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "genderDropdown", + "rightColumn": 14, + "widgetId": "wdt4750qtk", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true, + "defaultOptionValue": true + }, + "parentId": "epboelq954", + "isLoading": false, + "defaultOptionValue": "{{fetchUserByUrlParam.data[0].gender}}", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"Male\",\n \"value\": \"Male\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"Female\"\n }\n]" + }, + { + "widgetName": "dobPicker", + "defaultDate": "{{fetchUserByUrlParam.data ? fetchUserByUrlParam.data[0].dob : null}}", + "rightColumn": 14, + "dateFormat": "YYYY-MM-DD", + "widgetId": "ob7ukijkj6", + "dynamicProperties": { + "defaultDate": true + }, + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "dynamicBindings": { + "defaultDate": true, + "isValid": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text6", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "qa9rt17hgi", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Date of Birth", + "textStyle": "LABEL" + } + ] + } + ] + }, + { + "widgetName": "Text7", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "82um6ujlvj", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Pre-Fill Form Fields\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text9", + "rightColumn": 13, + "textAlign": "CENTER", + "widgetId": "weebfy1s7o", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "This page demonstrates how forms can be pre-filled with data passed from another page through a url param", + "textStyle": "BODY" + }, + { + "widgetName": "Text11", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "ns7umsaj20", + "topRow": 10, + "bottomRow": 14, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ” Inspect the table properties & the input widgets & the fetchUserByUrlParam Query.

\nšŸ”„ Refresh the page with an email query param in the URL
Trigger the navigate action from a button and pass a query param to the function. (Inspect refreshButton)

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "refreshButton", + "rightColumn": 15, + "onClick": "{{navigateTo(appsmith.URL.fullPath + '?email=james@freshdesk.com' )}}", + "isDefaultClickDisabled": true, + "widgetId": "bs657p5ziv", + "dynamicProperties": { + "onClick": true, + "isVisible": true + }, + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 14, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "BUTTON_WIDGET", + "dynamicBindings": { + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 13, + "dynamicTriggers": { + "onClick": true + }, + "text": "Refresh Page", + "isDisabled": false + }, + { + "widgetName": "Text15", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "663vfouck2", + "topRow": 3, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” On Page Load, the fetchUserByUrlParam Query is run. The query reads the email query param in the URL to fetch the relevant user.
\nThe default property of the form input widgets are bound to the response of the fetchUserByUrlParam Query

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text16", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "ejpusse9wy", + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "white", + "rightColumn": 7, + "widgetId": "yihxuqc4pa", + "topRow": 3, + "bottomRow": 16, + "parentRowSpace": 40, + "isVisible": true, + "type": "FORM_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 518, + "detachFromLayout": true, + "widgetId": "epboelq954", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 520, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "yihxuqc4pa", + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Form", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 520, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "9o1dx1zkxp", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "leftColumn": 0, + "text": "šŸ‘¤ Update User", + "textStyle": "HEADING" + }, + { + "resetFormOnClick": true, + "widgetName": "updateButton", + "rightColumn": 16, + "onClick": "{{updateUser.run(() => fetchUserByUrlParam.run(), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "mio7jzmj49", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": { + + }, + "parentId": "epboelq954", + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 10, + "dynamicTriggers": { + "onClick": true + }, + "text": "Update User" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 10, + "isDefaultClickDisabled": true, + "widgetId": "8mwfe4o99s", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "parentId": "epboelq954", + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 6, + "text": "Reset" + }, + { + "widgetName": "nameInput", + "rightColumn": 14, + "widgetId": "75v9zd6qfq", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT", + "defaultText": "{{fetchUserByUrlParam.data[0].name}}" + }, + { + "widgetName": "Text2", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "8xxyi61bnt", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "Text3", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "vrkg24ziqv", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 14, + "widgetId": "cte0iuvg43", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "inputType": "TEXT", + "defaultText": "{{fetchUserByUrlParam.data[0].email}}" + }, + { + "widgetName": "gender", + "rightColumn": 5, + "textAlign": "LEFT", + "widgetId": "3jsdwjjq4j", + "topRow": 6, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "genderDropdown", + "rightColumn": 14, + "widgetId": "wdt4750qtk", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true, + "defaultOptionValue": true + }, + "parentId": "epboelq954", + "isLoading": false, + "defaultOptionValue": "{{fetchUserByUrlParam.data[0].gender}}", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 25.25, + "leftColumn": 1, + "options": "[\n {\n \"label\": \"Male\",\n \"value\": \"Male\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"Female\"\n }\n]" + }, + { + "widgetName": "dobPicker", + "defaultDate": "{{fetchUserByUrlParam.data ? fetchUserByUrlParam.data[0].dob : null}}", + "rightColumn": 14, + "dateFormat": "YYYY-MM-DD", + "widgetId": "ob7ukijkj6", + "dynamicProperties": { + "defaultDate": true + }, + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "dynamicBindings": { + "defaultDate": true, + "isValid": true, + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "isDisabled": false + }, + { + "widgetName": "Text6", + "rightColumn": 6, + "textAlign": "LEFT", + "widgetId": "qa9rt17hgi", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "epboelq954", + "isLoading": false, + "parentColumnSpace": 25.25, + "leftColumn": 1, + "text": "Date of Birth", + "textStyle": "LABEL" + } + ] + } + ] + }, + { + "widgetName": "Text7", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "82um6ujlvj", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Pre-Fill Form Fields\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text9", + "rightColumn": 13, + "textAlign": "CENTER", + "widgetId": "weebfy1s7o", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "This page demonstrates how forms can be pre-filled with data passed from another page through a url param", + "textStyle": "BODY" + }, + { + "widgetName": "Text11", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "ns7umsaj20", + "topRow": 10, + "bottomRow": 14, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ” Inspect the table properties & the input widgets & the fetchUserByUrlParam Query.

\nšŸ”„ Refresh the page with an email query param in the URL
Trigger the navigate action from a button and pass a query param to the function. (Inspect refreshButton)

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "refreshButton", + "rightColumn": 15, + "onClick": "{{navigateTo(appsmith.URL.fullPath + '?email=james@freshdesk.com' )}}", + "isDefaultClickDisabled": true, + "widgetId": "bs657p5ziv", + "dynamicProperties": { + "onClick": true, + "isVisible": true + }, + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 14, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "BUTTON_WIDGET", + "dynamicBindings": { + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 13, + "dynamicTriggers": { + "onClick": true + }, + "text": "Refresh Page", + "isDisabled": false + }, + { + "widgetName": "Text15", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "663vfouck2", + "topRow": 3, + "bottomRow": 7, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "

šŸ’” On Page Load, the fetchUserByUrlParam Query is run. The query reads the email query param in the URL to fetch the relevant user.
\nThe default property of the form input widgets are bound to the response of the fetchUserByUrlParam Query

", + "textStyle": "BODY", + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text16", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "ejpusse9wy", + "topRow": 9, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 8, + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ + [ + { + "name": "fetchUserByUrlParam", + "pluginType": "DB", + "jsonPathKeys": [ + "appsmith.URL.queryParams.email" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "publishedLayoutOnLoadActions": [ + [ + { + "name": "fetchUserByUrlParam", + "pluginType": "DB", + "jsonPathKeys": [ + "appsmith.URL.queryParams.email" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "widgetNames": [ + "Form1", + "Text9", + "gender", + "Text7", + "Text6", + "FormButton2", + "Text3", + "Text2", + "Text1", + "Text16", + "nameInput", + "emailInput", + "MainContainer", + "Text15", + "Text11", + "Canvas1", + "refreshButton", + "genderDropdown", + "updateButton", + "dobPicker" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Application" + }, + { + "name": "Table Tutorial", + "organizationId": "5f2a944780ca1f6faaed4e38", + "isPublic": true, + "$pages": [ + { + "name": "1. Displaying Data", + "$isDefault": true, + "$actions": [ + { + "name": "getUsers", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "SELECT * FROM users ORDER BY id LIMIT 5 offset {{(usersTable.pageNo - 1) * 5}};\n" + }, + "pluginType": "DB", + "executeOnLoad": true, + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + }, + { + "name": "getUsersAPI", + "datasource": { + "$isEmbedded": true, + "name": "DEFAULT_REST_DATASOURCE", + "$pluginPackageName": "restapi-plugin", + "datasourceConfiguration": { + "url": "https://mock-api.appsmith.com" + }, + "invalids": [ ], + "deleted": false, + "policies": [ ] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "URL", + "path": "/users", + "headers": [ + { + "key": "", + "value": "" + }, + { + "key": "", + "value": "" + } + ], + "queryParameters": [ + { + "key": "page", + "value": "1" + }, + { + "key": "", + "value": "" + } + ], + "httpMethod": "GET", + "next": "{{getUsersAPI.data.next}}", + "prev": "{{getUsersAPI.data.previous}}" + }, + "pluginType": "API", + "dynamicBindingPathList": [ + { + "key": "prev" + }, + { + "key": "next" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "getUsersAPI.data.previous", + "getUsersAPI.data.next" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1360, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "3nz99ffgvf", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Displaying Data in a Table\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "zw1l4lqlxq", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "text": "This page demonstrates how Tables can display data from APIs & DB Queries, paginated the data & transform it to suit the widget", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "avatar", + "gender" + ], + "widgetName": "usersTable", + "rightColumn": 10, + "widgetId": "sf07g7owd4", + "topRow": 4, + "bottomRow": 14, + "parentRowSpace": 40, + "onPageChange": "{{getUsers.run()}}", + "tableData": "{{getUsers.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "address": 284, + "gender": 99, + "name": 130, + "id": 70, + "email": 175 + } + }, + { + "widgetName": "Text3", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "wihhcbu9c4", + "topRow": 4, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 11, + "text": "

šŸ’” The table fetches data via the getUsers Query. The data is bound to the table property using{{ \"{{ getUsers.data }}\" }}.

\nšŸ“„The getUsers Query takes the pageNo of the table to paginate the request using
{{\"{{ usersTable.pageNo }}\"}} in the query.\n
The table has server side pagination enabled and executes the query on page change.\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text5", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "2ea3qtzuug", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING" + }, + { + "hiddenColumns": [ + "avatar", + "updatedAt", + "gender", + "address" + ], + "widgetName": "usersTableFormatted", + "rightColumn": 10, + "widgetId": "6fxa6ls1xm", + "topRow": 16, + "bottomRow": 32, + "parentRowSpace": 40, + "onPageChange": "{{getUsersAPI.run()}}", + "tableData": "{{getUsersAPI.data.users.map((user) => { \n return {\n\t\t...user,\n\t\tstatus: user.status.toLowerCase(),\n\t\tcreatedAt: moment(user.createdAt).format(\"Do MMM YYYY\")\n\t}\n})}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "id": 84, + "email": 204 + }, + "serverSidePaginationEnabled": true + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "y6lqi4r1xl", + "topRow": 15, + "bottomRow": 16, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ˜ Formatted Users", + "textStyle": "HEADING" + }, + { + "widgetName": "Text9", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "hd75cgspiv", + "topRow": 16, + "bottomRow": 24, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 11, + "text": "

šŸŒ©ļø Often data returned by an API is not in the format the table requires. To convert the data to the correct format, we use Javascript and transform the data in the table data property.

\nšŸŒŖļø The table maps over the data returned by getUsersAPI, changes the status field to lowercase and formats the date field.

\nšŸ§± APIs, Queries and Widgets are all objects of the application exposed via Javascript inside {{\"{{}}\"}}\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties.

šŸ”  Try updating the function in the table property and format the status field to begin with a capital letter!

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 26, + "bottomRow": 30, + "parentId": "0", + "widgetId": "ow78o27gb5", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text13", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 10, + "bottomRow": 11, + "parentId": "0", + "widgetId": "hmh7iay9le", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties & the getUsers Query.

šŸŒŸ Try navigating through the table's pages.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text14", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 11, + "bottomRow": 15, + "parentId": "0", + "widgetId": "xff54m33y3", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text15", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 25, + "bottomRow": 26, + "parentId": "0", + "widgetId": "mlmkyirm8n", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1360, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "3nz99ffgvf", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 3, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Displaying Data in a Table\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "zw1l4lqlxq", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "text": "This page demonstrates how Tables can display data from APIs & DB Queries, paginated the data & transform it to suit the widget", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "avatar", + "gender" + ], + "widgetName": "usersTable", + "rightColumn": 10, + "widgetId": "sf07g7owd4", + "topRow": 4, + "bottomRow": 14, + "parentRowSpace": 40, + "onPageChange": "{{getUsers.run()}}", + "tableData": "{{getUsers.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "address": 284, + "gender": 99, + "name": 130, + "id": 70, + "email": 175 + } + }, + { + "widgetName": "Text3", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "wihhcbu9c4", + "topRow": 4, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 11, + "text": "

šŸ’” The table fetches data via the getUsers Query. The data is bound to the table property using{{ \"{{ getUsers.data }}\" }}.

\nšŸ“„The getUsers Query takes the pageNo of the table to paginate the request using
{{\"{{ usersTable.pageNo }}\"}} in the query.\n
The table has server side pagination enabled and executes the query on page change.\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "widgetName": "Text5", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "2ea3qtzuug", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING" + }, + { + "hiddenColumns": [ + "avatar", + "updatedAt", + "gender", + "address" + ], + "widgetName": "usersTableFormatted", + "rightColumn": 10, + "widgetId": "6fxa6ls1xm", + "topRow": 16, + "bottomRow": 32, + "parentRowSpace": 40, + "onPageChange": "{{getUsersAPI.run()}}", + "tableData": "{{getUsersAPI.data.users.map((user) => { \n return {\n\t\t...user,\n\t\tstatus: user.status.toLowerCase(),\n\t\tcreatedAt: moment(user.createdAt).format(\"Do MMM YYYY\")\n\t}\n})}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "id": 84, + "email": 204 + }, + "serverSidePaginationEnabled": true + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "y6lqi4r1xl", + "topRow": 15, + "bottomRow": 16, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ˜ Formatted Users", + "textStyle": "HEADING" + }, + { + "widgetName": "Text9", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "hd75cgspiv", + "topRow": 16, + "bottomRow": 24, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 11, + "text": "

šŸŒ©ļø Often data returned by an API is not in the format the table requires. To convert the data to the correct format, we use Javascript and transform the data in the table data property.

\nšŸŒŖļø The table maps over the data returned by getUsersAPI, changes the status field to lowercase and formats the date field.

\nšŸ§± APIs, Queries and Widgets are all objects of the application exposed via Javascript inside {{\"{{}}\"}}\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties.

šŸ”  Try updating the function in the table property and format the status field to begin with a capital letter!

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 26, + "bottomRow": 30, + "parentId": "0", + "widgetId": "ow78o27gb5", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text13", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 10, + "bottomRow": 11, + "parentId": "0", + "widgetId": "hmh7iay9le", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties & the getUsers Query.

šŸŒŸ Try navigating through the table's pages.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text14", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 11, + "bottomRow": 15, + "parentId": "0", + "widgetId": "xff54m33y3", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text15", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 25, + "bottomRow": 26, + "parentId": "0", + "widgetId": "mlmkyirm8n", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ + [ + { + "name": "getUsers", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "timeoutInMillisecond": 10000 + }, + { + "name": "getUsersAPI", + "pluginType": "API", + "jsonPathKeys": [ + "getUsersAPI.data.previous", + "getUsersAPI.data.next" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "publishedLayoutOnLoadActions": [ + [ + { + "name": "getUsers", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "timeoutInMillisecond": 10000 + }, + { + "name": "getUsersAPI", + "pluginType": "API", + "jsonPathKeys": [ + "getUsersAPI.data.previous", + "getUsersAPI.data.next" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "widgetNames": [ + "Text9", + "Text8", + "Text5", + "Text3", + "Text2", + "Text1", + "Text14", + "MainContainer", + "Text15", + "usersTable", + "Text12", + "Text13", + "usersTableFormatted" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + }, + { + "name": "2. Searching & Filtering", + "$isDefault": false, + "$actions": [ + { + "name": "getSearchedUsers", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "SELECT * FROM users where gender {{filterDropdown.selectedOptionValue === \"ALL\" ? \"IN ('Male','Female')\" : \n\"= '\" + filterDropdown.selectedOptionValue + \"'\"}} AND name ilike '%{{usersTable.searchText || \"\"}}%' ORDER BY id LIMIT 10 offset {{ (usersTable.pageNo - 1) * 10 }};\n" + }, + "pluginType": "DB", + "executeOnLoad": true, + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "usersTable.searchText || \"\"", + "(usersTable.pageNo - 1) * 10", + "filterDropdown.selectedOptionValue === \"ALL\" ? \"IN ('Male','Female')\" : \n\"= '\" + filterDropdown.selectedOptionValue + \"'\"" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "kmgssafdwq", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Searching & Filtering\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "lisxd7rkzy", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "text": "This page demonstrates how to perform server side searching and filtering of datra. (Client side is enabled by default)", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar" + ], + "widgetName": "usersTable", + "rightColumn": 10, + "widgetId": "owqebe2drj", + "topRow": 4, + "bottomRow": 20, + "parentRowSpace": 40, + "tableData": "{{getSearchedUsers.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "columnSizeMap": { + "id": 78, + "address": 213 + }, + "serverSidePaginationEnabled": true, + "dynamicTriggers": { + "onPageChange": true, + "onSearchTextChanged": true + }, + "onPageChange": "{{getSearchedUsers.run()}}", + "onSearchTextChanged": "{{getSearchedUsers.run()}}" + }, + { + "widgetName": "filterDropdown", + "rightColumn": 10, + "widgetId": "9bicbhtluy", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "0", + "isLoading": false, + "defaultOptionValue": "ALL", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 74, + "leftColumn": 8, + "options": "[\n {\n \"label\": \"All\",\n \"value\": \"ALL\"\n },{\n \"label\": \"Male\",\n \"value\": \"Male\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"Female\"\n }\n]", + "dynamicTriggers": { + "onOptionChange": true + }, + "onOptionChange": "{{getSearchedUsers.run()}}" + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ’” The usersTable displays data returned by the getSearchedUsers Query.

\nšŸ”» The filterDropdown contains options to filter the users by gender. The dropdown executes the getSearchedUsers Query onOptionSelected.

\nā“The getSearchedUsers Query has a where clause that reads it's values from the filterDropdown and usersTable.searchText

\nāœ… The getSearchedUsers Query uses conditional checks to modify the where clause when the ALL option is selected and no searchText is present\n

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text3", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 4, + "bottomRow": 14, + "parentId": "0", + "widgetId": "tosmuzh0kw", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": true, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING", + "textAlign": "LEFT", + "widgetName": "Text8", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 4, + "topRow": 3, + "bottomRow": 4, + "parentId": "0", + "widgetId": "fz0zdf4tii", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text9", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 14, + "bottomRow": 15, + "parentId": "0", + "widgetId": "c9la1jtf17", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the filterDropdown properties & the getSearchedUsers Query.

šŸ” Try searching and filtering the table data.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text10", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 15, + "bottomRow": 18, + "parentId": "0", + "widgetId": "lpfksj1cri", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "kmgssafdwq", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Searching & Filtering\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "lisxd7rkzy", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 1, + "text": "This page demonstrates how to perform server side searching and filtering of datra. (Client side is enabled by default)", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar" + ], + "widgetName": "usersTable", + "rightColumn": 10, + "widgetId": "owqebe2drj", + "topRow": 4, + "bottomRow": 20, + "parentRowSpace": 40, + "tableData": "{{getSearchedUsers.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "columnSizeMap": { + "id": 78, + "address": 213 + }, + "serverSidePaginationEnabled": true, + "dynamicTriggers": { + "onPageChange": true, + "onSearchTextChanged": true + }, + "onPageChange": "{{getSearchedUsers.run()}}", + "onSearchTextChanged": "{{getSearchedUsers.run()}}" + }, + { + "widgetName": "filterDropdown", + "rightColumn": 10, + "widgetId": "9bicbhtluy", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "0", + "isLoading": false, + "defaultOptionValue": "ALL", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 74, + "leftColumn": 8, + "options": "[\n {\n \"label\": \"All\",\n \"value\": \"ALL\"\n },{\n \"label\": \"Male\",\n \"value\": \"Male\"\n },\n {\n \"label\": \"Female\",\n \"value\": \"Female\"\n }\n]", + "dynamicTriggers": { + "onOptionChange": true + }, + "onOptionChange": "{{getSearchedUsers.run()}}" + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ’” The usersTable displays data returned by the getSearchedUsers Query.

\nšŸ”» The filterDropdown contains options to filter the users by gender. The dropdown executes the getSearchedUsers Query onOptionSelected.

\nā“The getSearchedUsers Query has a where clause that reads it's values from the filterDropdown and usersTable.searchText

\nāœ… The getSearchedUsers Query uses conditional checks to modify the where clause when the ALL option is selected and no searchText is present\n

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text3", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 4, + "bottomRow": 14, + "parentId": "0", + "widgetId": "tosmuzh0kw", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": true, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING", + "textAlign": "LEFT", + "widgetName": "Text8", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 4, + "topRow": 3, + "bottomRow": 4, + "parentId": "0", + "widgetId": "fz0zdf4tii", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "-------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text9", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 14, + "bottomRow": 15, + "parentId": "0", + "widgetId": "c9la1jtf17", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the filterDropdown properties & the getSearchedUsers Query.

šŸ” Try searching and filtering the table data.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text10", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 11, + "rightColumn": 16, + "topRow": 15, + "bottomRow": 18, + "parentId": "0", + "widgetId": "lpfksj1cri", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ + [ + { + "name": "getSearchedUsers", + "pluginType": "DB", + "jsonPathKeys": [ + "usersTable.searchText || \"\"", + "(usersTable.pageNo - 1) * 10", + "filterDropdown.selectedOptionValue === \"ALL\" ? \"IN ('Male','Female')\" : \n\"= '\" + filterDropdown.selectedOptionValue + \"'\"" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "publishedLayoutOnLoadActions": [ + [ + { + "name": "getSearchedUsers", + "pluginType": "DB", + "jsonPathKeys": [ + "usersTable.searchText || \"\"", + "(usersTable.pageNo - 1) * 10", + "filterDropdown.selectedOptionValue === \"ALL\" ? \"IN ('Male','Female')\" : \n\"= '\" + filterDropdown.selectedOptionValue + \"'\"" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "widgetNames": [ + "usersTable", + "filterDropdown", + "Text10", + "Text9", + "Text8", + "Text3", + "Text2", + "Text1", + "MainContainer" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + }, + { + "name": "3. Drilldown Table Data", + "$isDefault": false, + "$actions": [ + { + "name": "getUsersDrilldown", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "SELECT * FROM users ORDER BY id LIMIT 10 offset {{ (usersTable.pageNo - 1) * 10 }};\n" + }, + "pluginType": "DB", + "executeOnLoad": true, + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 10" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "2jwect0lhg", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Drilldown Table Data\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "5iytdt4zb8", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 2, + "text": "This page demonstrates how to efficiently display the important columns in a table and to display the row details as a drilldown", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar", + "address", + "role", + "gender", + "dob", + "phoneNo" + ], + "widgetName": "usersTable", + "rightColumn": 8, + "widgetId": "2mameo5ws0", + "topRow": 4, + "bottomRow": 20, + "parentRowSpace": 40, + "onPageChange": "{{getUsersDrilldown.run()}}", + "tableData": "{{getUsersDrilldown.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "id": 72, + "phoneNo": 164, + "email": 362, + "name": 203 + } + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "detailsContainer", + "rightColumn": 16, + "widgetId": "ctgmvtblim", + "containerStyle": "card", + "topRow": 4, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "detachFromLayout": true, + "children": [ + "8f1tu5q2pt", + "u4p8iqclkx", + "img7hphdti", + "oas3cb2urw", + "lhhijlpqge", + "qbwww7njtr" + ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 592, + "detachFromLayout": true, + "widgetId": "cl6vqx5vsw", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 400, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "ctgmvtblim", + "minHeight": 400, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "image": "{{usersTable.selectedRow.avatar}}", + "widgetName": "avatarImage", + "rightColumn": 4, + "widgetId": "8f1tu5q2pt", + "topRow": 0, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "IMAGE_WIDGET", + "dynamicBindings": { + "image": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "imageShape": "RECTANGLE", + "leftColumn": 0, + "defaultImage": "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png" + }, + { + "widgetName": "emailText", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "u4p8iqclkx", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.email}}", + "textStyle": "LABEL" + }, + { + "widgetName": "nameText", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "img7hphdti", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.name}}", + "textStyle": "LABEL" + }, + { + "widgetName": "addressText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "oas3cb2urw", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "shouldScroll": false, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.address}}", + "textStyle": "LABEL" + }, + { + "widgetName": "roleText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "lhhijlpqge", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 12, + "text": "{{usersTable.selectedRow.role}}", + "textStyle": "LABEL" + }, + { + "widgetName": "dobText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "1x38sheka8", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 12, + "text": "{{moment(usersTable.selectedRow.dob).format(\"Do MMM YYYY\")}}", + "textStyle": "LABEL", + "dynamicBindings": { + "text": true, + "value": true + } + } + ] + } + ] + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "rf2yjbzd20", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING" + }, + { + "widgetName": "Text9", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "azglzewlcp", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "text": "{{usersTable.selectedRow ? \"šŸ™Ž User Details\" : \"šŸ‘ˆ Select a user in the table\"}}", + "textStyle": "HEADING" + }, + { + "widgetName": "Text10", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "fwvqp8bxqk", + "topRow": 10, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "text": "

šŸ”© The non-essential table columns are hidden and the detailsContainer displays a drill down view of the entire row.

\nšŸ–¼ļø The container is customised with widgets for each column in the table ex. Image widget for avatar.

\nšŸ”˜ The widgets are bound to the value of the selectedRow in the usersTable using {{\"{{ usersTable.selectedRow.columnName }}\"}}\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text11", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 15, + "bottomRow": 16, + "parentId": "0", + "widgetId": "wc3bxw54hq", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the widget properties in the detailsContainer.

ā˜æļø Try displaying the users gender in the detailsContainer.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 16, + "bottomRow": 19, + "parentId": "0", + "widgetId": "7fuhyiakvc", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "2jwect0lhg", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Drilldown Table Data\"}}

", + "textStyle": "LABEL" + }, + { + "widgetName": "Text2", + "rightColumn": 14, + "textAlign": "CENTER", + "widgetId": "5iytdt4zb8", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 2, + "text": "This page demonstrates how to efficiently display the important columns in a table and to display the row details as a drilldown", + "textStyle": "BODY" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar", + "address", + "role", + "gender", + "dob", + "phoneNo" + ], + "widgetName": "usersTable", + "rightColumn": 8, + "widgetId": "2mameo5ws0", + "topRow": 4, + "bottomRow": 20, + "parentRowSpace": 40, + "onPageChange": "{{getUsersDrilldown.run()}}", + "tableData": "{{getUsersDrilldown.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnSizeMap": { + "id": 72, + "phoneNo": 164, + "email": 362, + "name": 203 + } + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "detailsContainer", + "rightColumn": 16, + "widgetId": "ctgmvtblim", + "containerStyle": "card", + "topRow": 4, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "parentId": "0", + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "detachFromLayout": true, + "children": [ + "8f1tu5q2pt", + "u4p8iqclkx", + "img7hphdti", + "oas3cb2urw", + "lhhijlpqge", + "qbwww7njtr" + ], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 592, + "detachFromLayout": true, + "widgetId": "cl6vqx5vsw", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 400, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "ctgmvtblim", + "minHeight": 400, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "image": "{{usersTable.selectedRow.avatar}}", + "widgetName": "avatarImage", + "rightColumn": 4, + "widgetId": "8f1tu5q2pt", + "topRow": 0, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "IMAGE_WIDGET", + "dynamicBindings": { + "image": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "imageShape": "RECTANGLE", + "leftColumn": 0, + "defaultImage": "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png" + }, + { + "widgetName": "emailText", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "u4p8iqclkx", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.email}}", + "textStyle": "LABEL" + }, + { + "widgetName": "nameText", + "rightColumn": 12, + "textAlign": "LEFT", + "widgetId": "img7hphdti", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 34.5, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.name}}", + "textStyle": "LABEL" + }, + { + "widgetName": "addressText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "oas3cb2urw", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "shouldScroll": false, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 5, + "text": "{{usersTable.selectedRow.address}}", + "textStyle": "LABEL" + }, + { + "widgetName": "roleText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "lhhijlpqge", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 12, + "text": "{{usersTable.selectedRow.role}}", + "textStyle": "LABEL" + }, + { + "widgetName": "dobText", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "1x38sheka8", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "parentId": "cl6vqx5vsw", + "isLoading": false, + "parentColumnSpace": 29.875, + "leftColumn": 12, + "text": "{{moment(usersTable.selectedRow.dob).format(\"Do MMM YYYY\")}}", + "textStyle": "LABEL", + "dynamicBindings": { + "text": true, + "value": true + } + } + ] + } + ] + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "LEFT", + "widgetId": "rf2yjbzd20", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING" + }, + { + "widgetName": "Text9", + "rightColumn": 15, + "textAlign": "LEFT", + "widgetId": "azglzewlcp", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "shouldScroll": false, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "text": "{{usersTable.selectedRow ? \"šŸ™Ž User Details\" : \"šŸ‘ˆ Select a user in the table\"}}", + "textStyle": "HEADING" + }, + { + "widgetName": "Text10", + "rightColumn": 16, + "textAlign": "LEFT", + "widgetId": "fwvqp8bxqk", + "topRow": 10, + "bottomRow": 15, + "parentRowSpace": 40, + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 9, + "text": "

šŸ”© The non-essential table columns are hidden and the detailsContainer displays a drill down view of the entire row.

\nšŸ–¼ļø The container is customised with widgets for each column in the table ex. Image widget for avatar.

\nšŸ”˜ The widgets are bound to the value of the selectedRow in the usersTable using {{\"{{ usersTable.selectedRow.columnName }}\"}}\n

", + "textStyle": "BODY", + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "---------------------------------------------------------------------", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text11", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 15, + "bottomRow": 16, + "parentId": "0", + "widgetId": "wc3bxw54hq", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the widget properties in the detailsContainer.

ā˜æļø Try displaying the users gender in the detailsContainer.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text12", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 16, + "bottomRow": 19, + "parentId": "0", + "widgetId": "7fuhyiakvc", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ + [ + { + "name": "getUsersDrilldown", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 10" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "publishedLayoutOnLoadActions": [ + [ + { + "name": "getUsersDrilldown", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 10" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "widgetNames": [ + "dobText", + "Text9", + "Text8", + "detailsContainer", + "addressText", + "Text2", + "Text1", + "emailText", + "nameText", + "MainContainer", + "usersTable", + "Text12", + "Text10", + "Text11", + "Canvas1", + "avatarImage", + "roleText" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + }, + { + "name": "4. Editing Table Data", + "$isDefault": false, + "$actions": [ + { + "name": "getUsersToEdit", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "SELECT * FROM users ORDER BY id LIMIT 5 offset {{(usersTable.pageNo - 1) * 5}};\n" + }, + "pluginType": "DB", + "executeOnLoad": true, + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + }, + { + "name": "updateUser", + "datasource": { + "$isEmbedded": false, + "name": "Mock Database", + "$pluginPackageName": "postgres-plugin", + "datasourceConfiguration": { + "connection": { + "mode": "READ_WRITE" + }, + "endpoints": [ + { + "host": "fake-api.cvuydmurdlas.us-east-1.rds.amazonaws.com", + "port": 5432 + } + ], + "authentication": { + "username": "fakeapi", + "password": "LimitedAccess123#", + "databaseName": "fakeapi" + }, + "sshProxyEnabled": false + }, + "invalids": [ ], + "deleted": false, + "policies": [] + }, + "actionConfiguration": { + "timeoutInMillisecond": 10000, + "paginationType": "NONE", + "body": "update users set \nname = '{{nameInput.text}}',\nemail = '{{emailInput.text}}',\ngender = '{{genderRadio.selectedOptionValue}}',\nrole = '{{roleDropdown.selectedOptionValue}}',\ndob = '{{dobPicker.selectedDate}}',\naddress = '{{addressInput.text}}'\nwhere id = '{{usersTable.selectedRow.id}}'" + }, + "pluginType": "DB", + "dynamicBindingPathList": [ + { + "key": "body" + } + ], + "isValid": true, + "invalids": [ ], + "jsonPathKeys": [ + "genderRadio.selectedOptionValue", + "roleDropdown.selectedOptionValue", + "dobPicker.selectedDate", + "addressInput.text", + "nameInput.text", + "usersTable.selectedRow.id", + "emailInput.text" + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Action" + } + ], + "layouts": [ + { + "viewMode": false, + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "6mfm6rqhpo", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Editing Table Data\"}}

", + "textStyle": "LABEL" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar", + "phoneNo" + ], + "widgetName": "usersTable", + "rightColumn": 16, + "widgetId": "9u4ssyjwvu", + "topRow": 3, + "bottomRow": 13, + "parentRowSpace": 40, + "onPageChange": "{{getUsersToEdit.run()}}", + "tableData": "{{getUsersToEdit.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnActions": [ + { + "actionPayloads": [ ], + "label": "Edit", + "id": "6apm73t6ss", + "dynamicTrigger": "{{showModal('edit_user_modal')}}" + } + ], + "columnSizeMap": { + "address": 218, + "role": 96, + "id": 75, + "email": 185 + } + }, + { + "widgetName": "edit_user_modal", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "xrk5ogzbyl", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": false, + "canOutsideClickClose": true, + "type": "MODAL_WIDGET", + "canEscapeKeyClose": true, + "dynamicBindings": { + + }, + "parentId": "0", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "isVisible": true, + "isDisabled": false, + "canExtend": true + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 1, + "size": "MODAL_LARGE", + "leftColumn": 0, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "e3ez3d0tal", + "topRow": 0, + "bottomRow": 640, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": true, + "type": "CANVAS_WIDGET", + "parentId": "xrk5ogzbyl", + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 16, + "onClick": "{{closeModal('edit_user_modal')}}", + "color": "#040627", + "iconName": "cross", + "widgetId": "ei1yvwhoo6", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "ICON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 15, + "iconSize": 24 + }, + { + "widgetName": "Text2", + "rightColumn": 10, + "textAlign": "LEFT", + "widgetId": "n8954upfed", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 0, + "text": "Edit {{usersTable.selectedRow ? usersTable.selectedRow.name : \"User\"}} Profile", + "textStyle": "HEADING" + }, + { + "widgetName": "Button1", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "rezsknprd6", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 9, + "text": "Cancel", + "isDisabled": false + }, + { + "widgetName": "Button2", + "rightColumn": 16, + "onClick": "{{updateUser.run(() =>\n getUsersToEdit.run(() => closeModal('edit_user_modal')), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "odxfvsu7yu", + "dynamicProperties": { + "onClick": true + }, + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Update", + "isDisabled": false, + "dynamicBindings": { + + } + }, + { + "widgetName": "Text3", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "rtizqvkf8i", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "nameInput", + "rightColumn": 12, + "widgetId": "lddk038cph", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.name}}" + }, + { + "widgetName": "Text4", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "69nnj7hrek", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 12, + "widgetId": "t3ym9irla8", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.email}}" + }, + { + "widgetName": "Text5", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "61gx996lf8", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Role", + "textStyle": "LABEL" + }, + { + "widgetName": "roleDropdown", + "rightColumn": 12, + "widgetId": "h8m5l0xnhq", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "defaultOptionValue": true, + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "defaultOptionValue": "{{usersTable.selectedRow.role}}", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 30.75, + "leftColumn": 4, + "options": "[\n {\n \"label\": \"Admin\",\n \"value\": \"Admin\"\n },\n {\n \"label\": \"Editor\",\n \"value\": \"Editor\"\n },\n\t{\n \"label\": \"Viewer\",\n \"value\": \"Viewer\"\n }\n]" + }, + { + "widgetName": "Text6", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "4cvt7ueu8x", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "Text7", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "r8u4ive9g2", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Address", + "textStyle": "LABEL" + }, + { + "widgetName": "addressInput", + "rightColumn": 12, + "widgetId": "fa42qbxle6", + "topRow": 8, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.address}}" + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "ix9cdf6ffu", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Date of Birth", + "textStyle": "LABEL" + }, + { + "widgetName": "dobPicker", + "defaultDate": "{{usersTable.selectedRow.dob}}", + "rightColumn": 12, + "dateFormat": "YYYY-MM-DD", + "widgetId": "sc1fdb61r5", + "dynamicProperties": { + "defaultDate": true + }, + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "dynamicBindings": { + "defaultDate": true, + "isValid": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "isDisabled": false + }, + { + "isVisible": true, + "text": "

Add a radio buttin for gender and bind it to the update query

", + "textStyle": "BODY", + "textAlign": "CENTER", + "widgetName": "Text18", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 30.75, + "parentRowSpace": 40, + "leftColumn": 1, + "rightColumn": 16, + "topRow": 12, + "bottomRow": 13, + "parentId": "e3ez3d0tal", + "widgetId": "akbigj7yki", + "dynamicBindings": { + "value": true + } + } + ], + "isDisabled": false + } + ] + }, + { + "isVisible": true, + "text": "This page demonstrates how to edit data displayed in a table", + "textStyle": "BODY", + "textAlign": "CENTER", + "widgetName": "Text9", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 4, + "rightColumn": 12, + "topRow": 1, + "bottomRow": 2, + "parentId": "0", + "widgetId": "762rdibr8m", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ–‹ļø The table has an 'Edit' row action which opens a modal.

\nšŸ”Œ The modal contains input widgets with default values bound to the {{\"{{ usersTable.selectedRow }}\"}}.

\nšŸ”˜ The updateButton in the modal executes the\nupdateUser Query, executes the getUsersToEdit Query onSuccess and then closes the modal.

\nāœšŸ» This workflow which needs more than 2 steps is configured by converting the onClick field to JS.

\n

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text10", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 8, + "topRow": 14, + "bottomRow": 21, + "parentId": "0", + "widgetId": "m7i35s4wii", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": true, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING", + "textAlign": "LEFT", + "widgetName": "Text17", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 4, + "topRow": 2, + "bottomRow": 3, + "parentId": "0", + "widgetId": "i53n9ij8oe", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties & the modal (Click Edit).

šŸŒŸ Add a gender field to the modal & connect it to the updateUser Query.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text19", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 14, + "bottomRow": 17, + "parentId": "0", + "widgetId": "3ln6v3fwe7", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "publishedDsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1280, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": { + + }, + "version": 5, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 12, + "textAlign": "CENTER", + "widgetId": "6mfm6rqhpo", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true, + "text": true + }, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 4, + "text": "

{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Editing Table Data\"}}

", + "textStyle": "LABEL" + }, + { + "hiddenColumns": [ + "createdAt", + "updatedAt", + "status", + "avatar", + "phoneNo" + ], + "widgetName": "usersTable", + "rightColumn": 16, + "widgetId": "9u4ssyjwvu", + "topRow": 3, + "bottomRow": 13, + "parentRowSpace": 40, + "onPageChange": "{{getUsersToEdit.run()}}", + "tableData": "{{getUsersToEdit.data}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true, + "filteredTableData": true + }, + "parentId": "0", + "serverSidePaginationEnabled": true, + "isLoading": false, + "parentColumnSpace": 74, + "leftColumn": 0, + "dynamicTriggers": { + "onPageChange": true + }, + "columnActions": [ + { + "actionPayloads": [ ], + "label": "Edit", + "id": "6apm73t6ss", + "dynamicTrigger": "{{showModal('edit_user_modal')}}" + } + ], + "columnSizeMap": { + "address": 218, + "role": 96, + "id": 75, + "email": 185 + } + }, + { + "widgetName": "edit_user_modal", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "xrk5ogzbyl", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": false, + "canOutsideClickClose": true, + "type": "MODAL_WIDGET", + "canEscapeKeyClose": true, + "dynamicBindings": { + + }, + "parentId": "0", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "detachFromLayout": true, + "children": [ ], + "isVisible": true, + "isDisabled": false, + "canExtend": true + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 1, + "size": "MODAL_LARGE", + "leftColumn": 0, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "e3ez3d0tal", + "topRow": 0, + "bottomRow": 640, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": true, + "type": "CANVAS_WIDGET", + "parentId": "xrk5ogzbyl", + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 2 + }, + "position": { + "top": 0, + "left": 14 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 10 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 16, + "onClick": "{{closeModal('edit_user_modal')}}", + "color": "#040627", + "iconName": "cross", + "widgetId": "ei1yvwhoo6", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "ICON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 15, + "iconSize": 24 + }, + { + "widgetName": "Text2", + "rightColumn": 10, + "textAlign": "LEFT", + "widgetId": "n8954upfed", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "text": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 0, + "text": "Edit {{usersTable.selectedRow ? usersTable.selectedRow.name : \"User\"}} Profile", + "textStyle": "HEADING" + }, + { + "widgetName": "Button1", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "rezsknprd6", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 9, + "text": "Cancel", + "isDisabled": false + }, + { + "widgetName": "Button2", + "rightColumn": 16, + "onClick": "{{updateUser.run(() =>\n getUsersToEdit.run(() => closeModal('edit_user_modal')), () => {})}}", + "isDefaultClickDisabled": true, + "widgetId": "odxfvsu7yu", + "dynamicProperties": { + "onClick": true + }, + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 13, + "bottomRow": 14, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "e3ez3d0tal", + "isLoading": false, + "leftColumn": 12, + "dynamicTriggers": { + "onClick": true + }, + "text": "Update", + "isDisabled": false, + "dynamicBindings": { + + } + }, + { + "widgetName": "Text3", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "rtizqvkf8i", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Name", + "textStyle": "LABEL" + }, + { + "widgetName": "nameInput", + "rightColumn": 12, + "widgetId": "lddk038cph", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.name}}" + }, + { + "widgetName": "Text4", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "69nnj7hrek", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Email", + "textStyle": "LABEL" + }, + { + "widgetName": "emailInput", + "rightColumn": 12, + "widgetId": "t3ym9irla8", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.email}}" + }, + { + "widgetName": "Text5", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "61gx996lf8", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Role", + "textStyle": "LABEL" + }, + { + "widgetName": "roleDropdown", + "rightColumn": 12, + "widgetId": "h8m5l0xnhq", + "topRow": 4, + "bottomRow": 5, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "defaultOptionValue": true, + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "value": true, + "selectedIndex": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "defaultOptionValue": "{{usersTable.selectedRow.role}}", + "selectionType": "SINGLE_SELECT", + "parentColumnSpace": 30.75, + "leftColumn": 4, + "options": "[\n {\n \"label\": \"Admin\",\n \"value\": \"Admin\"\n },\n {\n \"label\": \"Editor\",\n \"value\": \"Editor\"\n },\n\t{\n \"label\": \"Viewer\",\n \"value\": \"Viewer\"\n }\n]" + }, + { + "widgetName": "Text6", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "4cvt7ueu8x", + "topRow": 5, + "bottomRow": 6, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Gender", + "textStyle": "LABEL" + }, + { + "widgetName": "Text7", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "r8u4ive9g2", + "topRow": 8, + "bottomRow": 9, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Address", + "textStyle": "LABEL" + }, + { + "widgetName": "addressInput", + "rightColumn": 12, + "widgetId": "fa42qbxle6", + "topRow": 8, + "bottomRow": 10, + "parentRowSpace": 40, + "isVisible": true, + "label": "", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true, + "defaultText": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "inputType": "TEXT", + "defaultText": "{{usersTable.selectedRow.address}}" + }, + { + "widgetName": "Text8", + "rightColumn": 4, + "textAlign": "RIGHT", + "widgetId": "ix9cdf6ffu", + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": { + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 0, + "text": "Date of Birth", + "textStyle": "LABEL" + }, + { + "widgetName": "dobPicker", + "defaultDate": "{{usersTable.selectedRow.dob}}", + "rightColumn": 12, + "dateFormat": "YYYY-MM-DD", + "widgetId": "sc1fdb61r5", + "dynamicProperties": { + "defaultDate": true + }, + "topRow": 7, + "bottomRow": 8, + "parentRowSpace": 40, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "", + "type": "DATE_PICKER_WIDGET", + "dynamicBindings": { + "defaultDate": true, + "isValid": true, + "value": true + }, + "parentId": "e3ez3d0tal", + "isLoading": false, + "parentColumnSpace": 30.75, + "leftColumn": 4, + "isDisabled": false + }, + { + "isVisible": true, + "text": "

Add a radio buttin for gender and bind it to the update query

", + "textStyle": "BODY", + "textAlign": "CENTER", + "widgetName": "Text18", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 30.75, + "parentRowSpace": 40, + "leftColumn": 1, + "rightColumn": 16, + "topRow": 12, + "bottomRow": 13, + "parentId": "e3ez3d0tal", + "widgetId": "akbigj7yki", + "dynamicBindings": { + "value": true + } + } + ], + "isDisabled": false + } + ] + }, + { + "isVisible": true, + "text": "This page demonstrates how to edit data displayed in a table", + "textStyle": "BODY", + "textAlign": "CENTER", + "widgetName": "Text9", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 4, + "rightColumn": 12, + "topRow": 1, + "bottomRow": 2, + "parentId": "0", + "widgetId": "762rdibr8m", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ–‹ļø The table has an 'Edit' row action which opens a modal.

\nšŸ”Œ The modal contains input widgets with default values bound to the {{\"{{ usersTable.selectedRow }}\"}}.

\nšŸ”˜ The updateButton in the modal executes the\nupdateUser Query, executes the getUsersToEdit Query onSuccess and then closes the modal.

\nāœšŸ» This workflow which needs more than 2 steps is configured by converting the onClick field to JS.

\n

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text10", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 8, + "topRow": 14, + "bottomRow": 21, + "parentId": "0", + "widgetId": "m7i35s4wii", + "dynamicBindings": { + "value": true, + "text": true, + "isVisible": true + }, + "dynamicProperties": { + "isVisible": true + } + }, + { + "isVisible": true, + "text": "šŸ‘¤ Users", + "textStyle": "HEADING", + "textAlign": "LEFT", + "widgetName": "Text17", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 0, + "rightColumn": 4, + "topRow": 2, + "bottomRow": 3, + "parentId": "0", + "widgetId": "i53n9ij8oe", + "dynamicBindings": { + "value": true + } + }, + { + "isVisible": "{{appsmith.mode === \"EDIT\"}}", + "text": "

šŸ” Inspect the table properties & the modal (Click Edit).

šŸŒŸ Add a gender field to the modal & connect it to the updateUser Query.

", + "textStyle": "BODY", + "textAlign": "LEFT", + "widgetName": "Text19", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 74, + "parentRowSpace": 40, + "leftColumn": 9, + "rightColumn": 16, + "topRow": 14, + "bottomRow": 17, + "parentId": "0", + "widgetId": "3ln6v3fwe7", + "dynamicBindings": { + "value": true, + "isVisible": true + }, + "shouldScroll": true, + "dynamicProperties": { + "isVisible": true + } + } + ] + }, + "layoutOnLoadActions": [ + [ + { + "name": "getUsersToEdit", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "publishedLayoutOnLoadActions": [ + [ + { + "name": "getUsersToEdit", + "pluginType": "DB", + "jsonPathKeys": [ + "(usersTable.pageNo - 1) * 5" + ], + "timeoutInMillisecond": 10000 + } + ] + ], + "widgetNames": [ + "Text9", + "edit_user_modal", + "Button1", + "Text8", + "Text7", + "Text6", + "Text5", + "Text4", + "Text3", + "Text2", + "Text1", + "Icon1", + "usersTable", + "dobPicker", + "Text18", + "Text19", + "nameInput", + "Text17", + "emailInput", + "MainContainer", + "Text10", + "Canvas1", + "Button2", + "roleDropdown", + "addressInput" + ], + "deleted": false, + "policies": [ ] + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Page" + } + ], + "deleted": false, + "policies": [], + "_class": "com.appsmith.server.domains.Application" } ] }