| _id | applicationId | unpublishedPage | publishedPage | createdAt | deleted | policies | _class |
|---|---|---|---|---|---|---|---|
5f50e96df747d027c17427b3
|
5f50e96df747d027c17427b1
|
{
"name": "1. Display Chart Data",
"layouts": [
{
"_id": "5f50e96df747d027c17427b2",
"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": 11,
"textAlign": "CENTER",
"widgetId": "ka0sqegqwh",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"text": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 5,
"text": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Display Chart Data\"}}</h1>",
"textStyle": "LABEL"
},
{
"widgetName": "Text2",
"rightColumn": 12,
"textAlign": "CENTER",
"widgetId": "dpbv1ua5ng",
"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 how to display data in a chart",
"textStyle": "BODY"
},
{
"widgetName": "Chart1",
"rightColumn": 8,
"allowHorizontalScroll": false,
"widgetId": "n536wy81vu",
"topRow": 3,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": true,
"type": "CHART_WIDGET",
"dynamicBindings": {
"chartData": true
},
"parentId": "0",
"isLoading": false,
"chartData": "[{\"seriesName\":\"Users\",\"data\":\"{{getSignupCount.data.map((dateCount) => { \\nreturn {\\n x: moment(dateCount.sign_up_date).format(\\\"Do\\\"),\\n y: dateCount.count + \\\"\\\"\\n}\\n})}}\"}]",
"yAxisName": "Date",
"parentColumnSpace": 74,
"chartName": "User Sign up Trend",
"leftColumn": 0,
"xAxisName": "Users",
"chartType": "LINE_CHART"
},
{
"widgetName": "Text3",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "htqwsl576a",
"topRow": 3,
"bottomRow": 9,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The chart displays data returned by the <b>getSignupCount</b> Query. The data is bound to the chart property using <br/><b>{{ \"{{ getSignupCount.data }}\" }}</b><br/><br/>\n🌪️ The chart maps over the data returned by <b>getSignupCount</b> and transforms it to an Array of (x,y).<br/><br/>\n🧱 APIs, Queries and Widgets are all objects of the application exposed via Javascript inside <b>{{\"{{}}\"}}</b><br/><br/>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text4",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "zjvwf67adp",
"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": 9,
"text": "-------------------------------------------------------------------",
"textStyle": "LABEL",
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text5",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "rbhxchhlgc",
"topRow": 11,
"bottomRow": 13,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the chart properties & the <b>getSignupCount</b> Query.<br/><br/>📈 Update the chart type to a <b>column chart</b></p>",
"textStyle": "BODY",
"dynamicProperties": {
"isVisible": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427b4",
"name": "getSignupCount",
"pluginType": "DB",
"jsonPathKeys": [],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Text5",
"Text4",
"Text3",
"Text2",
"Text1",
"MainContainer",
"Chart1"
],
"deleted": false,
"policies": []
}
]
}
|
{
"name": "1. Display Chart Data",
"layouts": [
{
"_id": "5f50e96df747d027c17427b2",
"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": 11,
"textAlign": "CENTER",
"widgetId": "ka0sqegqwh",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"text": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 5,
"text": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Display Chart Data\"}}</h1>",
"textStyle": "LABEL"
},
{
"widgetName": "Text2",
"rightColumn": 12,
"textAlign": "CENTER",
"widgetId": "dpbv1ua5ng",
"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 how to display data in a chart",
"textStyle": "BODY"
},
{
"widgetName": "Chart1",
"rightColumn": 8,
"allowHorizontalScroll": false,
"widgetId": "n536wy81vu",
"topRow": 3,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": true,
"type": "CHART_WIDGET",
"dynamicBindings": {
"chartData": true
},
"parentId": "0",
"isLoading": false,
"chartData": "[{\"seriesName\":\"Users\",\"data\":\"{{getSignupCount.data.map((dateCount) => { \\nreturn {\\n x: moment(dateCount.sign_up_date).format(\\\"Do\\\"),\\n y: dateCount.count + \\\"\\\"\\n}\\n})}}\"}]",
"yAxisName": "Date",
"parentColumnSpace": 74,
"chartName": "User Sign up Trend",
"leftColumn": 0,
"xAxisName": "Users",
"chartType": "LINE_CHART"
},
{
"widgetName": "Text3",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "htqwsl576a",
"topRow": 3,
"bottomRow": 9,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The chart displays data returned by the <b>getSignupCount</b> Query. The data is bound to the chart property using <br/><b>{{ \"{{ getSignupCount.data }}\" }}</b><br/><br/>\n🌪️ The chart maps over the data returned by <b>getSignupCount</b> and transforms it to an Array of (x,y).<br/><br/>\n🧱 APIs, Queries and Widgets are all objects of the application exposed via Javascript inside <b>{{\"{{}}\"}}</b><br/><br/>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text4",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "zjvwf67adp",
"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": 9,
"text": "-------------------------------------------------------------------",
"textStyle": "LABEL",
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text5",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "rbhxchhlgc",
"topRow": 11,
"bottomRow": 13,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the chart properties & the <b>getSignupCount</b> Query.<br/><br/>📈 Update the chart type to a <b>column chart</b></p>",
"textStyle": "BODY",
"dynamicProperties": {
"isVisible": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427b4",
"name": "getSignupCount",
"pluginType": "DB",
"jsonPathKeys": [],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Text5",
"Text4",
"Text3",
"Text2",
"Text1",
"MainContainer",
"Chart1"
],
"deleted": false,
"policies": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427b6
|
5f50e96df747d027c17427b1
|
{
"name": "2. Filter Chart Data",
"layouts": [
{
"_id": "5f50e96df747d027c17427b5",
"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": "Chart1",
"rightColumn": 8,
"allowHorizontalScroll": false,
"widgetId": "ul3c5oquih",
"topRow": 4,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": true,
"type": "CHART_WIDGET",
"dynamicBindings": {
"chartData": true
},
"parentId": "0",
"isLoading": false,
"chartData": "[{\"seriesName\":\"Users\",\"data\":\"{{getFilteredSignupCount.data.map((dateCount) => { \\nreturn {\\n x: moment(dateCount.sign_up_date, \\\"DD/MM/YYYY\\\").format(\\\"Do- MMM\\\"),\\n y: dateCount.count + \\\"\\\"\\n}\\n})}}\"}]",
"yAxisName": "Users",
"parentColumnSpace": 74,
"chartName": "User Sign up Trend",
"leftColumn": 0,
"xAxisName": "Date",
"chartType": "AREA_CHART"
},
{
"widgetName": "Text1",
"rightColumn": 12,
"textAlign": "CENTER",
"widgetId": "esiyii2azf",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Filter Chart Data\"}}</h1>",
"textStyle": "LABEL"
},
{
"widgetName": "startDatePicker",
"defaultDate": "{{moment().subtract(2, \"months\").format(\"YYYY-MM-DD\")}}",
"rightColumn": 4,
"dateFormat": "YYYY-MM-DD",
"widgetId": "3tsl49w1s0",
"dynamicProperties": {
"defaultDate": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"datePickerType": "DATE_PICKER",
"label": "",
"type": "DATE_PICKER_WIDGET",
"dynamicBindings": {
"defaultDate": true,
"isValid": true,
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 2,
"dynamicTriggers": {
"onDateSelected": true
},
"isDisabled": false,
"onDateSelected": "{{getFilteredSignupCount.run()}}"
},
{
"widgetName": "endDatePicker",
"defaultDate": "{{moment().format(\"YYYY-MM-DD\")}}",
"rightColumn": 8,
"dateFormat": "YYYY-MM-DD",
"widgetId": "cocrv71gh5",
"dynamicProperties": {
"defaultDate": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"datePickerType": "DATE_PICKER",
"label": "",
"type": "DATE_PICKER_WIDGET",
"dynamicBindings": {
"defaultDate": true,
"isValid": true,
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 6,
"dynamicTriggers": {
"onDateSelected": true
},
"isDisabled": false,
"onDateSelected": "{{getFilteredSignupCount.run()}}"
},
{
"widgetName": "Text2",
"rightColumn": 2,
"textAlign": "RIGHT",
"widgetId": "r31px5tpl6",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "Start Date",
"textStyle": "LABEL"
},
{
"widgetName": "Text3",
"rightColumn": 6,
"textAlign": "RIGHT",
"widgetId": "21rsr77a84",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 5,
"text": "End Date",
"textStyle": "LABEL"
},
{
"widgetName": "Text4",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "digi7gghdg",
"topRow": 3,
"bottomRow": 8,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The chart displays data returned by the <b>getFilteredSignupCount</b> Query.<br/><br/>\n📅 The <b>getFilteredSignupCount</b> Query reads the values of the <b>startDatePicker</b> and <b>endDatePicker</b> to filter the query. The Date Pickers execute the query <b>onDateSelected</b>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text7",
"rightColumn": 13,
"textAlign": "CENTER",
"widgetId": "aiguj74viz",
"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 filter and change the data displayed in a chart",
"textStyle": "BODY",
"shouldScroll": false
},
{
"widgetName": "Text8",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "kyw545g7n4",
"topRow": 8,
"bottomRow": 9,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "---------------------------------------------------------------------",
"textStyle": "LABEL",
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text9",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "4i40lfqldh",
"topRow": 9,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true,
"isVisible": true
},
"shouldScroll": true,
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the <b>getFilteredSignupCount</b> Query.<br/><br/>\n📅 Update the <b>startDatePicker</b> to begin 6 months ago by default\n<br/><br/>📈 Update the x-axis to display the date range selected<br/>\n<b style=\"font-size:14px\">Ex. {{\"{{startDatePicker.selectedDate}} - {{endDatePicker.selectedDate}}\"}} </b></p>",
"textStyle": "BODY",
"dynamicProperties": {
"isVisible": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427b7",
"name": "getFilteredSignupCount",
"pluginType": "DB",
"jsonPathKeys": [
"startDatePicker.selectedDate",
"endDatePicker.selectedDate"
],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"endDatePicker",
"Text9",
"Text8",
"Text7",
"startDatePicker",
"Text4",
"Text3",
"Text2",
"Text1",
"MainContainer",
"Chart1"
],
"deleted": false,
"policies": []
}
]
}
|
{
"name": "2. Filter Chart Data",
"layouts": [
{
"_id": "5f50e96df747d027c17427b5",
"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": "Chart1",
"rightColumn": 8,
"allowHorizontalScroll": false,
"widgetId": "ul3c5oquih",
"topRow": 4,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": true,
"type": "CHART_WIDGET",
"dynamicBindings": {
"chartData": true
},
"parentId": "0",
"isLoading": false,
"chartData": "[{\"seriesName\":\"Users\",\"data\":\"{{getFilteredSignupCount.data.map((dateCount) => { \\nreturn {\\n x: moment(dateCount.sign_up_date, \\\"DD/MM/YYYY\\\").format(\\\"Do- MMM\\\"),\\n y: dateCount.count + \\\"\\\"\\n}\\n})}}\"}]",
"yAxisName": "Users",
"parentColumnSpace": 74,
"chartName": "User Sign up Trend",
"leftColumn": 0,
"xAxisName": "Date",
"chartType": "AREA_CHART"
},
{
"widgetName": "Text1",
"rightColumn": 12,
"textAlign": "CENTER",
"widgetId": "esiyii2azf",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Filter Chart Data\"}}</h1>",
"textStyle": "LABEL"
},
{
"widgetName": "startDatePicker",
"defaultDate": "{{moment().subtract(2, \"months\").format(\"YYYY-MM-DD\")}}",
"rightColumn": 4,
"dateFormat": "YYYY-MM-DD",
"widgetId": "3tsl49w1s0",
"dynamicProperties": {
"defaultDate": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"datePickerType": "DATE_PICKER",
"label": "",
"type": "DATE_PICKER_WIDGET",
"dynamicBindings": {
"defaultDate": true,
"isValid": true,
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 2,
"dynamicTriggers": {
"onDateSelected": true
},
"isDisabled": false,
"onDateSelected": "{{getFilteredSignupCount.run()}}"
},
{
"widgetName": "endDatePicker",
"defaultDate": "{{moment().format(\"YYYY-MM-DD\")}}",
"rightColumn": 8,
"dateFormat": "YYYY-MM-DD",
"widgetId": "cocrv71gh5",
"dynamicProperties": {
"defaultDate": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"datePickerType": "DATE_PICKER",
"label": "",
"type": "DATE_PICKER_WIDGET",
"dynamicBindings": {
"defaultDate": true,
"isValid": true,
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 6,
"dynamicTriggers": {
"onDateSelected": true
},
"isDisabled": false,
"onDateSelected": "{{getFilteredSignupCount.run()}}"
},
{
"widgetName": "Text2",
"rightColumn": 2,
"textAlign": "RIGHT",
"widgetId": "r31px5tpl6",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "Start Date",
"textStyle": "LABEL"
},
{
"widgetName": "Text3",
"rightColumn": 6,
"textAlign": "RIGHT",
"widgetId": "21rsr77a84",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 5,
"text": "End Date",
"textStyle": "LABEL"
},
{
"widgetName": "Text4",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "digi7gghdg",
"topRow": 3,
"bottomRow": 8,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The chart displays data returned by the <b>getFilteredSignupCount</b> Query.<br/><br/>\n📅 The <b>getFilteredSignupCount</b> Query reads the values of the <b>startDatePicker</b> and <b>endDatePicker</b> to filter the query. The Date Pickers execute the query <b>onDateSelected</b>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text7",
"rightColumn": 13,
"textAlign": "CENTER",
"widgetId": "aiguj74viz",
"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 filter and change the data displayed in a chart",
"textStyle": "BODY",
"shouldScroll": false
},
{
"widgetName": "Text8",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "kyw545g7n4",
"topRow": 8,
"bottomRow": 9,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"isVisible": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "---------------------------------------------------------------------",
"textStyle": "LABEL",
"dynamicProperties": {
"isVisible": true
}
},
{
"widgetName": "Text9",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "4i40lfqldh",
"topRow": 9,
"bottomRow": 14,
"parentRowSpace": 40,
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true,
"isVisible": true
},
"shouldScroll": true,
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the <b>getFilteredSignupCount</b> Query.<br/><br/>\n📅 Update the <b>startDatePicker</b> to begin 6 months ago by default\n<br/><br/>📈 Update the x-axis to display the date range selected<br/>\n<b style=\"font-size:14px\">Ex. {{\"{{startDatePicker.selectedDate}} - {{endDatePicker.selectedDate}}\"}} </b></p>",
"textStyle": "BODY",
"dynamicProperties": {
"isVisible": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427b7",
"name": "getFilteredSignupCount",
"pluginType": "DB",
"jsonPathKeys": [
"startDatePicker.selectedDate",
"endDatePicker.selectedDate"
],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"endDatePicker",
"Text9",
"Text8",
"Text7",
"startDatePicker",
"Text4",
"Text3",
"Text2",
"Text1",
"MainContainer",
"Chart1"
],
"deleted": false,
"policies": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427ba
|
5f50e96df747d027c17427b8
|
{
"name": "Users Page",
"layouts": [
{
"_id": "5f50e96df747d027c17427b9",
"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": 4,
"textAlign": "LEFT",
"widgetId": "5302vrcr7x",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "Users",
"textStyle": "HEADING"
},
{
"hiddenColumns": [
"createdAt",
"updatedAt",
"avatar",
"dob",
"gender",
"role",
"status",
"address"
],
"widgetName": "usersTable",
"rightColumn": 9,
"widgetId": "z0l09s5jaz",
"topRow": 1,
"bottomRow": 17,
"parentRowSpace": 40,
"onPageChange": "{{getUsers.run()}}",
"tableData": "{{getUsers.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true,
"defaultSearchText": true
},
"parentId": "0",
"serverSidePaginationEnabled": true,
"isLoading": false,
"onSearchTextChanged": "{{getUsers.run()}}",
"parentColumnSpace": 74,
"leftColumn": 0,
"dynamicTriggers": {
"onSearchTextChanged": true,
"onRowSelected": true,
"onPageChange": true
},
"onRowSelected": "{{getOrders.run()}}",
"columnActions": [],
"columnSizeMap": {
"address": 204,
"name": 268,
"id": 74,
"email": 311
},
"defaultSearchText": "{{appsmith.URL.queryParams.email}}"
},
{
"widgetName": "Modal1",
"rightColumn": 0,
"detachFromLayout": true,
"widgetId": "qcv5mxmdse",
"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": "9pgyrkail5",
"topRow": 0,
"bottomRow": 640,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": true,
"type": "CANVAS_WIDGET",
"parentId": "qcv5mxmdse",
"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('Modal1')}}",
"color": "#040627",
"iconName": "cross",
"widgetId": "3g9bl2sr58",
"topRow": 0,
"bottomRow": 1,
"isVisible": true,
"type": "ICON_WIDGET",
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 14,
"iconSize": 24
},
{
"widgetName": "Text2",
"rightColumn": 14,
"textAlign": "LEFT",
"widgetId": "lddwvwekdx",
"topRow": 0,
"bottomRow": 1,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 0,
"text": "<h3>🖋️ Edit {{usersTable.selectedRow.name}}'s Profile</h3>",
"textStyle": "LABEL"
},
{
"widgetName": "Button1",
"rightColumn": 12,
"isDefaultClickDisabled": true,
"widgetId": "0asi0ps632",
"buttonStyle": "SECONDARY_BUTTON",
"topRow": 13,
"bottomRow": 14,
"isVisible": true,
"type": "BUTTON_WIDGET",
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 9,
"text": "Cancel",
"isDisabled": false
},
{
"widgetName": "Button2",
"rightColumn": 16,
"onClick": "{{updateUser.run(() => getUsers.run(() => closeModal('Modal1')), () => showAlert('error'))}}",
"isDefaultClickDisabled": true,
"widgetId": "9aoww0u181",
"dynamicProperties": {
"onClick": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 13,
"bottomRow": 14,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {},
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 12,
"dynamicTriggers": {
"onClick": true
},
"text": "Save",
"isDisabled": false
},
{
"widgetName": "Text10",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "zxqqitzf07",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Name",
"textStyle": "LABEL"
},
{
"widgetName": "Text11",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "52whn6clnv",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Email",
"textStyle": "LABEL"
},
{
"widgetName": "Text12",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "qhmfxrxrp8",
"topRow": 5,
"bottomRow": 6,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Address",
"textStyle": "LABEL"
},
{
"widgetName": "addressInput",
"rightColumn": 13,
"widgetId": "5w60gql1bf",
"topRow": 5,
"bottomRow": 8,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.address}}"
},
{
"widgetName": "emailInput",
"rightColumn": 13,
"widgetId": "l97o8yvlrc",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.email}}"
},
{
"widgetName": "nameInput",
"rightColumn": 13,
"widgetId": "dorbm7hw83",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.name}}"
},
{
"widgetName": "Text20",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "gds83r70jn",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Phone No",
"textStyle": "LABEL"
},
{
"widgetName": "phoneInput",
"rightColumn": 13,
"widgetId": "lcmqk3xayr",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"regex": "^[0-9]{1,10}$",
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.phoneNo || \"\"}}"
}
],
"isDisabled": false
}
]
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container1",
"rightColumn": 16,
"widgetId": "5wiefwlh3m",
"containerStyle": "card",
"topRow": 1,
"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": [
"8c8ixb84rt",
"vxs1336eti",
"n1tn6qwmfu",
"75njm0wxgx",
"2wymlwykex",
"4x7s4ffqyc",
"m8jxuiwony",
"3mqfe3k3qf",
"lhds2qaxeg",
"p4p3or0jcd",
"uh5tweohvx"
],
"containerStyle": "none",
"canExtend": false
}
}
]
},
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"children": [
{
"widgetName": "Canvas2",
"rightColumn": 592,
"detachFromLayout": true,
"widgetId": "c2nnq6o54h",
"containerStyle": "none",
"topRow": 0,
"bottomRow": 400,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": false,
"type": "CANVAS_WIDGET",
"parentId": "5wiefwlh3m",
"minHeight": 400,
"isLoading": false,
"parentColumnSpace": 1,
"leftColumn": 0,
"children": [
{
"widgetName": "Button3",
"rightColumn": 16,
"onClick": "{{showModal('Modal1')}}",
"isDefaultClickDisabled": true,
"widgetId": "8c8ixb84rt",
"dynamicProperties": {
"isVisible": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id !== undefined}}",
"type": "BUTTON_WIDGET",
"dynamicBindings": {
"isVisible": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 13,
"dynamicTriggers": {
"onClick": true
},
"text": "Edit",
"isDisabled": false
},
{
"image": "{{usersTable.selectedRow.avatar}}",
"widgetName": "Image1",
"rightColumn": 7,
"widgetId": "vxs1336eti",
"topRow": 0,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "IMAGE_WIDGET",
"dynamicBindings": {
"image": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"imageShape": "RECTANGLE",
"leftColumn": 0,
"defaultImage": "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png"
},
{
"widgetName": "Text3",
"rightColumn": 13,
"textAlign": "LEFT",
"widgetId": "n1tn6qwmfu",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.name}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text4",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "75njm0wxgx",
"topRow": 1,
"bottomRow": 2,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.email}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text5",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "2wymlwykex",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.address}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text6",
"rightColumn": 11,
"textAlign": "LEFT",
"widgetId": "4x7s4ffqyc",
"dynamicProperties": {
"isVisible": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id !== undefined}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"isVisible": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 7,
"text": "<h3>{{ (usersTable.selectedRow.gender === \"Male\" ? \"♂️\" : \"♀️\") + usersTable.selectedRow.gender}}</h3>",
"textStyle": "LABEL"
},
{
"widgetName": "Text8",
"rightColumn": 7,
"textAlign": "CENTER",
"widgetId": "3mqfe3k3qf",
"dynamicProperties": {
"isVisible": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id === undefined}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"isVisible": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 0,
"text": "<h2>👈🏿 Select a user</h2>",
"textStyle": "LABEL"
},
{
"widgetName": "Text21",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "uvw0ma9kfr",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.phoneNo || \"\"}}",
"textStyle": "LABEL"
}
]
}
]
},
{
"hiddenColumns": [
"userId",
"orderDate"
],
"widgetName": "ordersTable",
"rightColumn": 8,
"columnOrder": [
"id",
"deliveryAddress",
"orderAmount",
"status"
],
"widgetId": "xr3qu1jpj8",
"topRow": 19,
"bottomRow": 32,
"parentRowSpace": 40,
"tableData": "{{getOrders.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"dynamicTriggers": {
"onRowSelected": true
},
"onRowSelected": "{{getOrderProducts.run()}}",
"columnSizeMap": {
"userId": 111
}
},
{
"widgetName": "Text13",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "euwmlckp34",
"topRow": 18,
"bottomRow": 19,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"text": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "{{usersTable.selectedRow ? usersTable.selectedRow.name + \"'s Orders\" : \"☝🏽 Select a user\"}}",
"textStyle": "HEADING"
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container2",
"rightColumn": 16,
"widgetId": "xlb8hua7ie",
"containerStyle": "card",
"topRow": 19,
"bottomRow": 32,
"parentRowSpace": 40,
"isVisible": true,
"type": "CONTAINER_WIDGET",
"parentId": "0",
"blueprint": {
"view": [
{
"position": {
"top": 0,
"left": 0
},
"type": "CANVAS_WIDGET",
"props": {
"detachFromLayout": true,
"children": [
"v8531ch9d8",
"0cz98i5vmt"
],
"containerStyle": "none",
"canExtend": false
}
}
]
},
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 8,
"children": [
{
"widgetName": "Canvas3",
"rightColumn": 592,
"detachFromLayout": true,
"widgetId": "gutl68s87o",
"containerStyle": "none",
"topRow": 0,
"bottomRow": 400,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": false,
"type": "CANVAS_WIDGET",
"parentId": "xlb8hua7ie",
"minHeight": 400,
"isLoading": false,
"parentColumnSpace": 1,
"leftColumn": 0,
"children": [
{
"widgetName": "Text15",
"rightColumn": 7,
"textAlign": "LEFT",
"widgetId": "0cz98i5vmt",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "{{\"Order# \" + ordersTable.selectedRow.id}}",
"textStyle": "HEADING"
},
{
"widgetName": "Text16",
"rightColumn": 11,
"textAlign": "LEFT",
"widgetId": "ec7hwwpigw",
"topRow": 1,
"bottomRow": 2,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "{{ordersTable.selectedRow.deliveryAddress}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text17",
"rightColumn": 8,
"textAlign": "LEFT",
"widgetId": "jgv0uu3x5g",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 4,
"text": "{{ordersTable.selectedRow.status}}",
"textStyle": "LABEL"
},
{
"widgetName": "Button6",
"rightColumn": 16,
"onClick": "{{showModal('Modal2')}}",
"isDefaultClickDisabled": true,
"widgetId": "am2dpsi2q3",
"dynamicProperties": {
"isDisabled": true
},
"buttonStyle": "DANGER_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {
"isDisabled": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 12,
"dynamicTriggers": {
"onClick": true
},
"text": "Refund",
"isDisabled": "{{ordersTable.selectedRow.id === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}"
},
{
"hiddenColumns": [
"mrp",
"imageUrl",
"description",
"isListed",
"availabilityDate",
"channel"
],
"widgetName": "Table1",
"rightColumn": 16,
"columnOrder": [
"productId",
"productName",
"listingPrice",
"category",
"mrp",
"imageUrl",
"description",
"isListed",
"availabilityDate",
"channel"
],
"widgetId": "db1kphrwnt",
"topRow": 5,
"bottomRow": 12,
"parentRowSpace": 40,
"tableData": "{{getOrderProducts.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0
},
{
"widgetName": "Text18",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "0dxro3kpwp",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "Products",
"textStyle": "HEADING"
},
{
"widgetName": "Text19",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "ek4t9o9djx",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 34.5,
"leftColumn": 0,
"text": "{{\"₹\" + ordersTable.selectedRow.orderAmount}}",
"textStyle": "LABEL"
},
{
"isVisible": true,
"text": "{{appsmith.user.email !== \"nikhil@appsmith.com\" ? \"Only Admins can initiate refunds\" : \"\"}}",
"textStyle": "HEADING",
"textAlign": "CENTER",
"widgetName": "Text24",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 2,
"rightColumn": 15,
"topRow": 3,
"bottomRow": 4,
"parentId": "gutl68s87o",
"widgetId": "1macn19a8h",
"dynamicBindings": {
"text": true,
"value": true
}
}
]
}
]
},
{
"isVisible": false,
"size": "MODAL_SMALL",
"canEscapeKeyClose": true,
"detachFromLayout": true,
"canOutsideClickClose": true,
"shouldScrollContents": true,
"widgetName": "Modal2",
"children": [
{
"isVisible": true,
"widgetName": "Canvas4",
"detachFromLayout": true,
"canExtend": true,
"isDisabled": false,
"shouldScrollContents": false,
"children": [
{
"isVisible": true,
"widgetName": "Icon2",
"iconName": "cross",
"iconSize": 24,
"color": "#040627",
"type": "ICON_WIDGET",
"isLoading": false,
"leftColumn": 14,
"rightColumn": 16,
"topRow": 0,
"bottomRow": 1,
"parentId": "bek8vtf45d",
"widgetId": "h2bzyryz3k",
"onClick": "{{closeModal('Modal2')}}"
},
{
"isVisible": true,
"text": "Refund Order #{{ordersTable.selectedRow.id}}",
"textStyle": "HEADING",
"textAlign": "LEFT",
"widgetName": "Text22",
"type": "TEXT_WIDGET",
"isLoading": false,
"leftColumn": 0,
"rightColumn": 10,
"topRow": 0,
"bottomRow": 1,
"parentId": "bek8vtf45d",
"widgetId": "3c2d1zfzu7",
"dynamicBindings": {
"value": true,
"text": true
}
},
{
"isVisible": true,
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON",
"widgetName": "Button7",
"isDisabled": false,
"isDefaultClickDisabled": true,
"type": "BUTTON_WIDGET",
"isLoading": false,
"leftColumn": 10,
"rightColumn": 13,
"topRow": 4,
"bottomRow": 5,
"parentId": "bek8vtf45d",
"widgetId": "w8hwwktvmg",
"dynamicTriggers": {
"onClick": true
},
"onClick": "{{closeModal('Modal2')}}"
},
{
"isVisible": true,
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON",
"widgetName": "Button8",
"isDisabled": false,
"isDefaultClickDisabled": true,
"type": "BUTTON_WIDGET",
"isLoading": false,
"leftColumn": 13,
"rightColumn": 16,
"topRow": 4,
"bottomRow": 5,
"parentId": "bek8vtf45d",
"widgetId": "54fh5v9z6f",
"onClick": "{{refundAPI.run(() => markOrderRefund.run(() => getOrders.run(() => closeModal('Modal2'))), () => {})}}",
"dynamicProperties": {
"onClick": true
},
"dynamicTriggers": {
"onClick": true
}
},
{
"isVisible": true,
"text": "Are you sure you want to refund this order?",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text23",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 26,
"parentRowSpace": 40,
"leftColumn": 1,
"rightColumn": 13,
"topRow": 2,
"bottomRow": 3,
"parentId": "bek8vtf45d",
"widgetId": "z2k233aijz",
"dynamicBindings": {
"value": true
}
}
],
"blueprint": {
"view": [
{
"type": "ICON_WIDGET",
"position": {
"left": 14,
"top": 0
},
"size": {
"rows": 1,
"cols": 2
},
"props": {
"iconName": "cross",
"iconSize": 24,
"color": "#040627"
}
},
{
"type": "TEXT_WIDGET",
"position": {
"left": 0,
"top": 0
},
"size": {
"rows": 1,
"cols": 10
},
"props": {
"text": "Modal Title",
"textStyle": "HEADING"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 10,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 13,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON"
}
}
],
"operations": [
{
"type": "MODIFY_PROPS"
}
]
},
"minHeight": 0,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 0,
"topRow": 0,
"bottomRow": 280,
"parentId": "apytb4wr2y",
"widgetId": "bek8vtf45d"
}
],
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"left": 0,
"top": 0
},
"props": {
"detachFromLayout": true,
"canExtend": true,
"isVisible": true,
"isDisabled": false,
"shouldScrollContents": false,
"children": [],
"blueprint": {
"view": [
{
"type": "ICON_WIDGET",
"position": {
"left": 14,
"top": 0
},
"size": {
"rows": 1,
"cols": 2
},
"props": {
"iconName": "cross",
"iconSize": 24,
"color": "#040627"
}
},
{
"type": "TEXT_WIDGET",
"position": {
"left": 0,
"top": 0
},
"size": {
"rows": 1,
"cols": 10
},
"props": {
"text": "Modal Title",
"textStyle": "HEADING"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 10,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 13,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON"
}
}
],
"operations": [
{
"type": "MODIFY_PROPS"
}
]
}
}
}
]
},
"type": "MODAL_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 0,
"topRow": 0,
"bottomRow": 0,
"parentId": "0",
"widgetId": "apytb4wr2y"
},
{
"isVisible": true,
"widgetName": "Chart1",
"chartType": "PIE_CHART",
"chartName": "Orders",
"allowHorizontalScroll": false,
"chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]",
"xAxisName": "Last Week",
"yAxisName": "Total Order Revenue $",
"type": "CHART_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 9,
"rightColumn": 16,
"topRow": 9,
"bottomRow": 17,
"parentId": "0",
"widgetId": "jr461ymixc",
"dynamicBindings": {
"chartData": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427be",
"name": "getUsers",
"pluginType": "DB",
"jsonPathKeys": [
"usersTable.searchText",
"(usersTable.pageNo - 1) * 10"
],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Button1",
"Text8",
"Text6",
"Text5",
"Text4",
"Text3",
"Text2",
"Container1",
"Icon2",
"Text1",
"Icon1",
"Container2",
"Chart1",
"usersTable",
"Text23",
"Text24",
"Text21",
"Text22",
"Text20",
"Table1",
"Image1",
"ordersTable",
"Text18",
"Text19",
"phoneInput",
"Text16",
"nameInput",
"Text17",
"emailInput",
"MainContainer",
"Text15",
"Text12",
"Canvas4",
"Text13",
"Text10",
"Text11",
"Modal1",
"Canvas1",
"Modal2",
"Canvas2",
"Canvas3",
"Button3",
"Button2",
"Button8",
"addressInput",
"Button7",
"Button6"
],
"deleted": false,
"policies": []
}
]
}
|
{
"name": "Users Page",
"layouts": [
{
"_id": "5f50e96df747d027c17427b9",
"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": 4,
"textAlign": "LEFT",
"widgetId": "5302vrcr7x",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "Users",
"textStyle": "HEADING"
},
{
"hiddenColumns": [
"createdAt",
"updatedAt",
"avatar",
"dob",
"gender",
"role",
"status",
"address"
],
"widgetName": "usersTable",
"rightColumn": 9,
"widgetId": "z0l09s5jaz",
"topRow": 1,
"bottomRow": 17,
"parentRowSpace": 40,
"onPageChange": "{{getUsers.run()}}",
"tableData": "{{getUsers.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true,
"defaultSearchText": true
},
"parentId": "0",
"serverSidePaginationEnabled": true,
"isLoading": false,
"onSearchTextChanged": "{{getUsers.run()}}",
"parentColumnSpace": 74,
"leftColumn": 0,
"dynamicTriggers": {
"onSearchTextChanged": true,
"onRowSelected": true,
"onPageChange": true
},
"onRowSelected": "{{getOrders.run()}}",
"columnActions": [],
"columnSizeMap": {
"address": 204,
"name": 268,
"id": 74,
"email": 311
},
"defaultSearchText": "{{appsmith.URL.queryParams.email}}"
},
{
"widgetName": "Modal1",
"rightColumn": 0,
"detachFromLayout": true,
"widgetId": "qcv5mxmdse",
"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": "9pgyrkail5",
"topRow": 0,
"bottomRow": 640,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": true,
"type": "CANVAS_WIDGET",
"parentId": "qcv5mxmdse",
"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('Modal1')}}",
"color": "#040627",
"iconName": "cross",
"widgetId": "3g9bl2sr58",
"topRow": 0,
"bottomRow": 1,
"isVisible": true,
"type": "ICON_WIDGET",
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 14,
"iconSize": 24
},
{
"widgetName": "Text2",
"rightColumn": 14,
"textAlign": "LEFT",
"widgetId": "lddwvwekdx",
"topRow": 0,
"bottomRow": 1,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 0,
"text": "<h3>🖋️ Edit {{usersTable.selectedRow.name}}'s Profile</h3>",
"textStyle": "LABEL"
},
{
"widgetName": "Button1",
"rightColumn": 12,
"isDefaultClickDisabled": true,
"widgetId": "0asi0ps632",
"buttonStyle": "SECONDARY_BUTTON",
"topRow": 13,
"bottomRow": 14,
"isVisible": true,
"type": "BUTTON_WIDGET",
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 9,
"text": "Cancel",
"isDisabled": false
},
{
"widgetName": "Button2",
"rightColumn": 16,
"onClick": "{{updateUser.run(() => getUsers.run(() => closeModal('Modal1')), () => showAlert('error'))}}",
"isDefaultClickDisabled": true,
"widgetId": "9aoww0u181",
"dynamicProperties": {
"onClick": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 13,
"bottomRow": 14,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {},
"parentId": "9pgyrkail5",
"isLoading": false,
"leftColumn": 12,
"dynamicTriggers": {
"onClick": true
},
"text": "Save",
"isDisabled": false
},
{
"widgetName": "Text10",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "zxqqitzf07",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Name",
"textStyle": "LABEL"
},
{
"widgetName": "Text11",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "52whn6clnv",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Email",
"textStyle": "LABEL"
},
{
"widgetName": "Text12",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "qhmfxrxrp8",
"topRow": 5,
"bottomRow": 6,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Address",
"textStyle": "LABEL"
},
{
"widgetName": "addressInput",
"rightColumn": 13,
"widgetId": "5w60gql1bf",
"topRow": 5,
"bottomRow": 8,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.address}}"
},
{
"widgetName": "emailInput",
"rightColumn": 13,
"widgetId": "l97o8yvlrc",
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.email}}"
},
{
"widgetName": "nameInput",
"rightColumn": 13,
"widgetId": "dorbm7hw83",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.name}}"
},
{
"widgetName": "Text20",
"rightColumn": 4,
"textAlign": "RIGHT",
"widgetId": "gds83r70jn",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"parentColumnSpace": 30.75,
"leftColumn": 0,
"text": "Phone No",
"textStyle": "LABEL"
},
{
"widgetName": "phoneInput",
"rightColumn": 13,
"widgetId": "lcmqk3xayr",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"label": "",
"type": "INPUT_WIDGET",
"dynamicBindings": {
"isValid": true,
"defaultText": true,
"value": true
},
"parentId": "9pgyrkail5",
"isLoading": false,
"regex": "^[0-9]{1,10}$",
"parentColumnSpace": 30.75,
"leftColumn": 4,
"inputType": "TEXT",
"defaultText": "{{usersTable.selectedRow.phoneNo || \"\"}}"
}
],
"isDisabled": false
}
]
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container1",
"rightColumn": 16,
"widgetId": "5wiefwlh3m",
"containerStyle": "card",
"topRow": 1,
"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": [
"8c8ixb84rt",
"vxs1336eti",
"n1tn6qwmfu",
"75njm0wxgx",
"2wymlwykex",
"4x7s4ffqyc",
"m8jxuiwony",
"3mqfe3k3qf",
"lhds2qaxeg",
"p4p3or0jcd",
"uh5tweohvx"
],
"containerStyle": "none",
"canExtend": false
}
}
]
},
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 9,
"children": [
{
"widgetName": "Canvas2",
"rightColumn": 592,
"detachFromLayout": true,
"widgetId": "c2nnq6o54h",
"containerStyle": "none",
"topRow": 0,
"bottomRow": 400,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": false,
"type": "CANVAS_WIDGET",
"parentId": "5wiefwlh3m",
"minHeight": 400,
"isLoading": false,
"parentColumnSpace": 1,
"leftColumn": 0,
"children": [
{
"widgetName": "Button3",
"rightColumn": 16,
"onClick": "{{showModal('Modal1')}}",
"isDefaultClickDisabled": true,
"widgetId": "8c8ixb84rt",
"dynamicProperties": {
"isVisible": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id !== undefined}}",
"type": "BUTTON_WIDGET",
"dynamicBindings": {
"isVisible": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 13,
"dynamicTriggers": {
"onClick": true
},
"text": "Edit",
"isDisabled": false
},
{
"image": "{{usersTable.selectedRow.avatar}}",
"widgetName": "Image1",
"rightColumn": 7,
"widgetId": "vxs1336eti",
"topRow": 0,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "IMAGE_WIDGET",
"dynamicBindings": {
"image": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"imageShape": "RECTANGLE",
"leftColumn": 0,
"defaultImage": "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png"
},
{
"widgetName": "Text3",
"rightColumn": 13,
"textAlign": "LEFT",
"widgetId": "n1tn6qwmfu",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.name}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text4",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "75njm0wxgx",
"topRow": 1,
"bottomRow": 2,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 20.625,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.email}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text5",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "2wymlwykex",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.address}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text6",
"rightColumn": 11,
"textAlign": "LEFT",
"widgetId": "4x7s4ffqyc",
"dynamicProperties": {
"isVisible": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id !== undefined}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"isVisible": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 7,
"text": "<h3>{{ (usersTable.selectedRow.gender === \"Male\" ? \"♂️\" : \"♀️\") + usersTable.selectedRow.gender}}</h3>",
"textStyle": "LABEL"
},
{
"widgetName": "Text8",
"rightColumn": 7,
"textAlign": "CENTER",
"widgetId": "3mqfe3k3qf",
"dynamicProperties": {
"isVisible": true
},
"topRow": 3,
"bottomRow": 4,
"parentRowSpace": 40,
"isVisible": "{{usersTable.selectedRow.id === undefined}}",
"type": "TEXT_WIDGET",
"dynamicBindings": {
"isVisible": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 25.25,
"leftColumn": 0,
"text": "<h2>👈🏿 Select a user</h2>",
"textStyle": "LABEL"
},
{
"widgetName": "Text21",
"rightColumn": 15,
"textAlign": "LEFT",
"widgetId": "uvw0ma9kfr",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "c2nnq6o54h",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 7,
"text": "{{usersTable.selectedRow.phoneNo || \"\"}}",
"textStyle": "LABEL"
}
]
}
]
},
{
"hiddenColumns": [
"userId",
"orderDate"
],
"widgetName": "ordersTable",
"rightColumn": 8,
"columnOrder": [
"id",
"deliveryAddress",
"orderAmount",
"status"
],
"widgetId": "xr3qu1jpj8",
"topRow": 19,
"bottomRow": 32,
"parentRowSpace": 40,
"tableData": "{{getOrders.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"dynamicTriggers": {
"onRowSelected": true
},
"onRowSelected": "{{getOrderProducts.run()}}",
"columnSizeMap": {
"userId": 111
}
},
{
"widgetName": "Text13",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "euwmlckp34",
"topRow": 18,
"bottomRow": 19,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true,
"text": true
},
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "{{usersTable.selectedRow ? usersTable.selectedRow.name + \"'s Orders\" : \"☝🏽 Select a user\"}}",
"textStyle": "HEADING"
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container2",
"rightColumn": 16,
"widgetId": "xlb8hua7ie",
"containerStyle": "card",
"topRow": 19,
"bottomRow": 32,
"parentRowSpace": 40,
"isVisible": true,
"type": "CONTAINER_WIDGET",
"parentId": "0",
"blueprint": {
"view": [
{
"position": {
"top": 0,
"left": 0
},
"type": "CANVAS_WIDGET",
"props": {
"detachFromLayout": true,
"children": [
"v8531ch9d8",
"0cz98i5vmt"
],
"containerStyle": "none",
"canExtend": false
}
}
]
},
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 8,
"children": [
{
"widgetName": "Canvas3",
"rightColumn": 592,
"detachFromLayout": true,
"widgetId": "gutl68s87o",
"containerStyle": "none",
"topRow": 0,
"bottomRow": 400,
"parentRowSpace": 1,
"isVisible": true,
"canExtend": false,
"type": "CANVAS_WIDGET",
"parentId": "xlb8hua7ie",
"minHeight": 400,
"isLoading": false,
"parentColumnSpace": 1,
"leftColumn": 0,
"children": [
{
"widgetName": "Text15",
"rightColumn": 7,
"textAlign": "LEFT",
"widgetId": "0cz98i5vmt",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "{{\"Order# \" + ordersTable.selectedRow.id}}",
"textStyle": "HEADING"
},
{
"widgetName": "Text16",
"rightColumn": 11,
"textAlign": "LEFT",
"widgetId": "ec7hwwpigw",
"topRow": 1,
"bottomRow": 2,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "{{ordersTable.selectedRow.deliveryAddress}}",
"textStyle": "LABEL"
},
{
"widgetName": "Text17",
"rightColumn": 8,
"textAlign": "LEFT",
"widgetId": "jgv0uu3x5g",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 4,
"text": "{{ordersTable.selectedRow.status}}",
"textStyle": "LABEL"
},
{
"widgetName": "Button6",
"rightColumn": 16,
"onClick": "{{showModal('Modal2')}}",
"isDefaultClickDisabled": true,
"widgetId": "am2dpsi2q3",
"dynamicProperties": {
"isDisabled": true
},
"buttonStyle": "DANGER_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {
"isDisabled": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 12,
"dynamicTriggers": {
"onClick": true
},
"text": "Refund",
"isDisabled": "{{ordersTable.selectedRow.id === undefined || ordersTable.selectedRow.status === \"REFUNDED\" || appsmith.user.email !== \"nikhil@appsmith.com\"}}"
},
{
"hiddenColumns": [
"mrp",
"imageUrl",
"description",
"isListed",
"availabilityDate",
"channel"
],
"widgetName": "Table1",
"rightColumn": 16,
"columnOrder": [
"productId",
"productName",
"listingPrice",
"category",
"mrp",
"imageUrl",
"description",
"isListed",
"availabilityDate",
"channel"
],
"widgetId": "db1kphrwnt",
"topRow": 5,
"bottomRow": 12,
"parentRowSpace": 40,
"tableData": "{{getOrderProducts.data}}",
"isVisible": true,
"label": "Data",
"searchKey": "",
"type": "TABLE_WIDGET",
"dynamicBindings": {
"tableData": true,
"selectedRow": true,
"filteredTableData": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0
},
{
"widgetName": "Text18",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "0dxro3kpwp",
"topRow": 4,
"bottomRow": 5,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 29.875,
"leftColumn": 0,
"text": "Products",
"textStyle": "HEADING"
},
{
"widgetName": "Text19",
"rightColumn": 4,
"textAlign": "LEFT",
"widgetId": "ek4t9o9djx",
"topRow": 2,
"bottomRow": 3,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"parentId": "gutl68s87o",
"isLoading": false,
"parentColumnSpace": 34.5,
"leftColumn": 0,
"text": "{{\"₹\" + ordersTable.selectedRow.orderAmount}}",
"textStyle": "LABEL"
},
{
"isVisible": true,
"text": "{{appsmith.user.email !== \"nikhil@appsmith.com\" ? \"Only Admins can initiate refunds\" : \"\"}}",
"textStyle": "HEADING",
"textAlign": "CENTER",
"widgetName": "Text24",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 2,
"rightColumn": 15,
"topRow": 3,
"bottomRow": 4,
"parentId": "gutl68s87o",
"widgetId": "1macn19a8h",
"dynamicBindings": {
"text": true,
"value": true
}
}
]
}
]
},
{
"isVisible": false,
"size": "MODAL_SMALL",
"canEscapeKeyClose": true,
"detachFromLayout": true,
"canOutsideClickClose": true,
"shouldScrollContents": true,
"widgetName": "Modal2",
"children": [
{
"isVisible": true,
"widgetName": "Canvas4",
"detachFromLayout": true,
"canExtend": true,
"isDisabled": false,
"shouldScrollContents": false,
"children": [
{
"isVisible": true,
"widgetName": "Icon2",
"iconName": "cross",
"iconSize": 24,
"color": "#040627",
"type": "ICON_WIDGET",
"isLoading": false,
"leftColumn": 14,
"rightColumn": 16,
"topRow": 0,
"bottomRow": 1,
"parentId": "bek8vtf45d",
"widgetId": "h2bzyryz3k",
"onClick": "{{closeModal('Modal2')}}"
},
{
"isVisible": true,
"text": "Refund Order #{{ordersTable.selectedRow.id}}",
"textStyle": "HEADING",
"textAlign": "LEFT",
"widgetName": "Text22",
"type": "TEXT_WIDGET",
"isLoading": false,
"leftColumn": 0,
"rightColumn": 10,
"topRow": 0,
"bottomRow": 1,
"parentId": "bek8vtf45d",
"widgetId": "3c2d1zfzu7",
"dynamicBindings": {
"value": true,
"text": true
}
},
{
"isVisible": true,
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON",
"widgetName": "Button7",
"isDisabled": false,
"isDefaultClickDisabled": true,
"type": "BUTTON_WIDGET",
"isLoading": false,
"leftColumn": 10,
"rightColumn": 13,
"topRow": 4,
"bottomRow": 5,
"parentId": "bek8vtf45d",
"widgetId": "w8hwwktvmg",
"dynamicTriggers": {
"onClick": true
},
"onClick": "{{closeModal('Modal2')}}"
},
{
"isVisible": true,
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON",
"widgetName": "Button8",
"isDisabled": false,
"isDefaultClickDisabled": true,
"type": "BUTTON_WIDGET",
"isLoading": false,
"leftColumn": 13,
"rightColumn": 16,
"topRow": 4,
"bottomRow": 5,
"parentId": "bek8vtf45d",
"widgetId": "54fh5v9z6f",
"onClick": "{{refundAPI.run(() => markOrderRefund.run(() => getOrders.run(() => closeModal('Modal2'))), () => {})}}",
"dynamicProperties": {
"onClick": true
},
"dynamicTriggers": {
"onClick": true
}
},
{
"isVisible": true,
"text": "Are you sure you want to refund this order?",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text23",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 26,
"parentRowSpace": 40,
"leftColumn": 1,
"rightColumn": 13,
"topRow": 2,
"bottomRow": 3,
"parentId": "bek8vtf45d",
"widgetId": "z2k233aijz",
"dynamicBindings": {
"value": true
}
}
],
"blueprint": {
"view": [
{
"type": "ICON_WIDGET",
"position": {
"left": 14,
"top": 0
},
"size": {
"rows": 1,
"cols": 2
},
"props": {
"iconName": "cross",
"iconSize": 24,
"color": "#040627"
}
},
{
"type": "TEXT_WIDGET",
"position": {
"left": 0,
"top": 0
},
"size": {
"rows": 1,
"cols": 10
},
"props": {
"text": "Modal Title",
"textStyle": "HEADING"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 10,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 13,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON"
}
}
],
"operations": [
{
"type": "MODIFY_PROPS"
}
]
},
"minHeight": 0,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 0,
"topRow": 0,
"bottomRow": 280,
"parentId": "apytb4wr2y",
"widgetId": "bek8vtf45d"
}
],
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"left": 0,
"top": 0
},
"props": {
"detachFromLayout": true,
"canExtend": true,
"isVisible": true,
"isDisabled": false,
"shouldScrollContents": false,
"children": [],
"blueprint": {
"view": [
{
"type": "ICON_WIDGET",
"position": {
"left": 14,
"top": 0
},
"size": {
"rows": 1,
"cols": 2
},
"props": {
"iconName": "cross",
"iconSize": 24,
"color": "#040627"
}
},
{
"type": "TEXT_WIDGET",
"position": {
"left": 0,
"top": 0
},
"size": {
"rows": 1,
"cols": 10
},
"props": {
"text": "Modal Title",
"textStyle": "HEADING"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 10,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Cancel",
"buttonStyle": "SECONDARY_BUTTON"
}
},
{
"type": "BUTTON_WIDGET",
"position": {
"left": 13,
"top": 4
},
"size": {
"rows": 1,
"cols": 3
},
"props": {
"text": "Confirm",
"buttonStyle": "PRIMARY_BUTTON"
}
}
],
"operations": [
{
"type": "MODIFY_PROPS"
}
]
}
}
}
]
},
"type": "MODAL_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 0,
"topRow": 0,
"bottomRow": 0,
"parentId": "0",
"widgetId": "apytb4wr2y"
},
{
"isVisible": true,
"widgetName": "Chart1",
"chartType": "PIE_CHART",
"chartName": "Orders",
"allowHorizontalScroll": false,
"chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]",
"xAxisName": "Last Week",
"yAxisName": "Total Order Revenue $",
"type": "CHART_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 9,
"rightColumn": 16,
"topRow": 9,
"bottomRow": 17,
"parentId": "0",
"widgetId": "jr461ymixc",
"dynamicBindings": {
"chartData": true
}
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427be",
"name": "getUsers",
"pluginType": "DB",
"jsonPathKeys": [
"usersTable.searchText",
"(usersTable.pageNo - 1) * 10"
],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Button1",
"Text8",
"Text6",
"Text5",
"Text4",
"Text3",
"Text2",
"Container1",
"Icon2",
"Text1",
"Icon1",
"Container2",
"Chart1",
"usersTable",
"Text23",
"Text24",
"Text21",
"Text22",
"Text20",
"Table1",
"Image1",
"ordersTable",
"Text18",
"Text19",
"phoneInput",
"Text16",
"nameInput",
"Text17",
"emailInput",
"MainContainer",
"Text15",
"Text12",
"Canvas4",
"Text13",
"Text10",
"Text11",
"Modal1",
"Canvas1",
"Modal2",
"Canvas2",
"Canvas3",
"Button3",
"Button2",
"Button8",
"addressInput",
"Button7",
"Button6"
],
"deleted": false,
"policies": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427c3
|
5f50e96df747d027c17427b8
|
{
"name": "Support Tickets",
"layouts": [
{
"_id": "5f50e96df747d027c17427c2",
"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": [
{
"isVisible": true,
"shouldScrollContents": false,
"widgetName": "Tabs1",
"tabs": "[{\"label\":\"Blank\",\"id\":\"tab1\"},{\"label\":\"Email\",\"id\":\"tab2\"}]",
"shouldShowTabs": false,
"defaultTab": "{{ticketsTable.selectedRow.id === undefined ? \"Blank\" : \"Email\"}}",
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"size": {
"rows": 6,
"cols": 16
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"6af2mwjii8"
],
"tabId": "tab1"
}
},
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"size": {
"rows": 6,
"cols": 16
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"bv27fj7bs5",
"6af2mwjii8"
],
"tabId": "tab2"
}
}
]
},
"type": "TABS_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 8,
"rightColumn": 16,
"topRow": 0,
"bottomRow": 20,
"parentId": "0",
"widgetId": "28qy9d4q6j",
"children": [
{
"isVisible": true,
"widgetName": "Canvas2",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"isVisible": true,
"text": "<h1>👈 Select a Support Ticket</h1>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text2",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 3,
"rightColumn": 14,
"topRow": 8,
"bottomRow": 9,
"parentId": "ugkkycsm7d",
"widgetId": "66o8bjkz30",
"dynamicBindings": {
"value": true
}
}
],
"tabId": "tab1",
"minHeight": 280,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 280,
"parentId": "28qy9d4q6j",
"widgetId": "ugkkycsm7d"
},
{
"isVisible": true,
"widgetName": "Canvas3",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"widgetName": "Text1",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "bv27fj7bs5",
"topRow": 2,
"bottomRow": 19,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"shouldScroll": true,
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "{{ticketsTable.selectedRow.description}}",
"textStyle": "LABEL"
},
{
"widgetName": "Button1",
"rightColumn": 16,
"onClick": "{{navigateTo('Users Page', { email: ticketsTable.selectedRow.email })}}",
"isDefaultClickDisabled": true,
"widgetId": "6af2mwjii8",
"dynamicProperties": {
"onClick": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {},
"parentId": "6rczwfuxqd",
"isLoading": false,
"parentColumnSpace": 34.5,
"leftColumn": 13,
"dynamicTriggers": {
"onClick": true
},
"text": "View User",
"isDisabled": false
},
{
"isVisible": true,
"text": "<h2>Support Email</h2>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text3",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 7,
"topRow": 0,
"bottomRow": 1,
"parentId": "bx74wpc2rn",
"widgetId": "t23uk8t09q",
"dynamicBindings": {
"value": true
}
}
],
"tabId": "tab2",
"minHeight": 280,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 280,
"parentId": "28qy9d4q6j",
"widgetId": "bx74wpc2rn"
}
],
"dynamicBindings": {
"selectedTab": true,
"defaultTab": true
}
},
{
"isVisible": true,
"backgroundColor": "#FFFFFF",
"widgetName": "Container1",
"containerStyle": "card",
"children": [
{
"isVisible": true,
"widgetName": "Canvas4",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"hiddenColumns": [
"description",
"actions"
],
"widgetName": "ticketsTable",
"rightColumn": 16,
"widgetId": "472a29heor",
"topRow": 1,
"bottomRow": 19,
"parentRowSpace": 40,
"tableData": "{{getTickets.data.map((ticket) => {\n\treturn {\n\t\tid: ticket.id,\n\t\temail: ticket.requester.email,\n\t\tsubject: ticket.subject,\n\t\tdescription: ticket.description\n\t}\n})}}",
"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,
"columnActions": [],
"columnSizeMap": {
"subject": 217,
"id": 115,
"email": 217
}
},
{
"isVisible": true,
"text": "<h2>Freskdesk Tickets</h2>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text4",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 10,
"topRow": 0,
"bottomRow": 1,
"parentId": "0",
"widgetId": "dqzd7flg31",
"dynamicBindings": {
"value": true
}
}
],
"minHeight": 400,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 400,
"parentId": "dkhget3ru7",
"widgetId": "pammdjlrth"
}
],
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"472a29heor",
"dqzd7flg31"
]
}
}
]
},
"type": "CONTAINER_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 8,
"topRow": 0,
"bottomRow": 20,
"parentId": "0",
"widgetId": "dkhget3ru7"
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427c4",
"name": "getTickets",
"pluginType": "API",
"jsonPathKeys": [],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Canvas4",
"Button1",
"Canvas2",
"ticketsTable",
"Canvas3",
"Text4",
"Text3",
"Text2",
"Container1",
"Text1",
"Tabs1",
"MainContainer"
],
"deleted": false,
"policies": []
}
]
}
|
{
"name": "Support Tickets",
"layouts": [
{
"_id": "5f50e96df747d027c17427c2",
"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": [
{
"isVisible": true,
"shouldScrollContents": false,
"widgetName": "Tabs1",
"tabs": "[{\"label\":\"Blank\",\"id\":\"tab1\"},{\"label\":\"Email\",\"id\":\"tab2\"}]",
"shouldShowTabs": false,
"defaultTab": "{{ticketsTable.selectedRow.id === undefined ? \"Blank\" : \"Email\"}}",
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"size": {
"rows": 6,
"cols": 16
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"6af2mwjii8"
],
"tabId": "tab1"
}
},
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"size": {
"rows": 6,
"cols": 16
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"bv27fj7bs5",
"6af2mwjii8"
],
"tabId": "tab2"
}
}
]
},
"type": "TABS_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 8,
"rightColumn": 16,
"topRow": 0,
"bottomRow": 20,
"parentId": "0",
"widgetId": "28qy9d4q6j",
"children": [
{
"isVisible": true,
"widgetName": "Canvas2",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"isVisible": true,
"text": "<h1>👈 Select a Support Ticket</h1>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text2",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 3,
"rightColumn": 14,
"topRow": 8,
"bottomRow": 9,
"parentId": "ugkkycsm7d",
"widgetId": "66o8bjkz30",
"dynamicBindings": {
"value": true
}
}
],
"tabId": "tab1",
"minHeight": 280,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 280,
"parentId": "28qy9d4q6j",
"widgetId": "ugkkycsm7d"
},
{
"isVisible": true,
"widgetName": "Canvas3",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"widgetName": "Text1",
"rightColumn": 16,
"textAlign": "LEFT",
"widgetId": "bv27fj7bs5",
"topRow": 2,
"bottomRow": 19,
"parentRowSpace": 40,
"isVisible": true,
"type": "TEXT_WIDGET",
"dynamicBindings": {
"text": true,
"value": true
},
"shouldScroll": true,
"parentId": "0",
"isLoading": false,
"parentColumnSpace": 74,
"leftColumn": 0,
"text": "{{ticketsTable.selectedRow.description}}",
"textStyle": "LABEL"
},
{
"widgetName": "Button1",
"rightColumn": 16,
"onClick": "{{navigateTo('Users Page', { email: ticketsTable.selectedRow.email })}}",
"isDefaultClickDisabled": true,
"widgetId": "6af2mwjii8",
"dynamicProperties": {
"onClick": true
},
"buttonStyle": "PRIMARY_BUTTON",
"topRow": 0,
"bottomRow": 1,
"parentRowSpace": 40,
"isVisible": true,
"type": "BUTTON_WIDGET",
"dynamicBindings": {},
"parentId": "6rczwfuxqd",
"isLoading": false,
"parentColumnSpace": 34.5,
"leftColumn": 13,
"dynamicTriggers": {
"onClick": true
},
"text": "View User",
"isDisabled": false
},
{
"isVisible": true,
"text": "<h2>Support Email</h2>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text3",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.5,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 7,
"topRow": 0,
"bottomRow": 1,
"parentId": "bx74wpc2rn",
"widgetId": "t23uk8t09q",
"dynamicBindings": {
"value": true
}
}
],
"tabId": "tab2",
"minHeight": 280,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 280,
"parentId": "28qy9d4q6j",
"widgetId": "bx74wpc2rn"
}
],
"dynamicBindings": {
"selectedTab": true,
"defaultTab": true
}
},
{
"isVisible": true,
"backgroundColor": "#FFFFFF",
"widgetName": "Container1",
"containerStyle": "card",
"children": [
{
"isVisible": true,
"widgetName": "Canvas4",
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
{
"hiddenColumns": [
"description",
"actions"
],
"widgetName": "ticketsTable",
"rightColumn": 16,
"widgetId": "472a29heor",
"topRow": 1,
"bottomRow": 19,
"parentRowSpace": 40,
"tableData": "{{getTickets.data.map((ticket) => {\n\treturn {\n\t\tid: ticket.id,\n\t\temail: ticket.requester.email,\n\t\tsubject: ticket.subject,\n\t\tdescription: ticket.description\n\t}\n})}}",
"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,
"columnActions": [],
"columnSizeMap": {
"subject": 217,
"id": 115,
"email": 217
}
},
{
"isVisible": true,
"text": "<h2>Freskdesk Tickets</h2>",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text4",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 10,
"topRow": 0,
"bottomRow": 1,
"parentId": "0",
"widgetId": "dqzd7flg31",
"dynamicBindings": {
"value": true
}
}
],
"minHeight": 400,
"type": "CANVAS_WIDGET",
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 592,
"topRow": 0,
"bottomRow": 400,
"parentId": "dkhget3ru7",
"widgetId": "pammdjlrth"
}
],
"blueprint": {
"view": [
{
"type": "CANVAS_WIDGET",
"position": {
"top": 0,
"left": 0
},
"props": {
"containerStyle": "none",
"canExtend": false,
"detachFromLayout": true,
"children": [
"472a29heor",
"dqzd7flg31"
]
}
}
]
},
"type": "CONTAINER_WIDGET",
"isLoading": false,
"parentColumnSpace": 74,
"parentRowSpace": 40,
"leftColumn": 0,
"rightColumn": 8,
"topRow": 0,
"bottomRow": 20,
"parentId": "0",
"widgetId": "dkhget3ru7"
}
]
},
"layoutOnLoadActions": [
[
{
"_id": "5f50e96df747d027c17427c4",
"name": "getTickets",
"pluginType": "API",
"jsonPathKeys": [],
"timeoutInMillisecond": 10000
}
]
],
"widgetNames": [
"Canvas4",
"Button1",
"Canvas2",
"ticketsTable",
"Canvas3",
"Text4",
"Text3",
"Text2",
"Container1",
"Text1",
"Tabs1",
"MainContainer"
],
"deleted": false,
"policies": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427c7
|
5f50e96df747d027c17427c5
|
{
"name": "1. Simple Form Submit",
"layouts": [
{
"_id": "5f50e96df747d027c17427c6",
"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": "<p style=\"font-size: 14px; background-color: #FFD4D4D4; border-radius:3px;margin-top:16px\">Update the submit button to show a success message!</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔄 Enable the reset form property to reset the form on success</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The form data is submitted to the mock database via the <b>createUser</b> Query. The <b>submitButton</b> executes the createUser Query onClick.<br/>\nThe query takes inputs from the form using<br/> <b>{{ \"{{ widgetName.property }}\" }}</b></p>",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Simple Form Submit\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🏷️ Mark the <span style=\"font-weight:bold\">nameInput</span> as a required field to disable the submit button if the name is empty</p>\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": "<p style=\"font-size: 16px; line-height: 1.5\">☎️ Add a phone number validation to the regex property field<br/>\n<span style=\"font-weight:bold\">Ex: ^\\d{10}$</span></p>",
"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": [],
"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": []
}
]
}
|
{
"name": "1. Simple Form Submit",
"layouts": [
{
"_id": "5f50e96df747d027c17427c6",
"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": "<p style=\"font-size: 14px; background-color: #FFD4D4D4; border-radius:3px;margin-top:16px\">Update the submit button to show a success message!</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔄 Enable the reset form property to reset the form on success</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The form data is submitted to the mock database via the <b>createUser</b> Query. The <b>submitButton</b> executes the createUser Query onClick.<br/>\nThe query takes inputs from the form using<br/> <b>{{ \"{{ widgetName.property }}\" }}</b></p>",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Simple Form Submit\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🏷️ Mark the <span style=\"font-weight:bold\">nameInput</span> as a required field to disable the submit button if the name is empty</p>\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": "<p style=\"font-size: 16px; line-height: 1.5\">☎️ Add a phone number validation to the regex property field<br/>\n<span style=\"font-weight:bold\">Ex: ^\\d{10}$</span></p>",
"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": [],
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427ca
|
5f50e96df747d027c17427c5
|
{
"name": "2. Confirm Form Submit",
"layouts": [
{
"_id": "5f50e96df747d027c17427c9",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The <b>createButton</b> is configured to open a Modal onClick.\n<br/>\nThe Modal requests for confirmation and the <b>confirmButton</b> is configred to execute the <b>createCampaign</b> Query. </p>",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Confirm Form Submit\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">\n🔍 Inspect the <b>createButton</b> properties.<br/><br/>\n🌂 Update the <span style=\"font-weight:bold\">confirmButton</span> in the modal to close once the campagin is created</p>",
"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": [],
"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": []
}
]
}
|
{
"name": "2. Confirm Form Submit",
"layouts": [
{
"_id": "5f50e96df747d027c17427c9",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The <b>createButton</b> is configured to open a Modal onClick.\n<br/>\nThe Modal requests for confirmation and the <b>confirmButton</b> is configred to execute the <b>createCampaign</b> Query. </p>",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Confirm Form Submit\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">\n🔍 Inspect the <b>createButton</b> properties.<br/><br/>\n🌂 Update the <span style=\"font-weight:bold\">confirmButton</span> in the modal to close once the campagin is created</p>",
"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": [],
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96df747d027c17427cd
|
5f50e96df747d027c17427c5
|
{
"name": "3. Pre-Fill Form",
"layouts": [
{
"_id": "5f50e96df747d027c17427cc",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Pre-Fill Form Fields\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties & the input widgets & the <b>fetchUserByUrlParam</b> Query.<br/><br/>\n🔄 Refresh the page with an email query param in the URL<br/>Trigger the navigate action from a button and pass a query param to the function. (Inspect <b>refreshButton</b>)</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 On Page Load, the <b>fetchUserByUrlParam</b> Query is run. The query reads the <b>email query param</b> in the URL to fetch the relevant user.<br/>\nThe default property of the form input widgets are bound to the response of the <b>fetchUserByUrlParam</b> Query</p>",
"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": [
[
{
"_id": "5f50e96df747d027c17427ce",
"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": []
}
]
}
|
{
"name": "3. Pre-Fill Form",
"layouts": [
{
"_id": "5f50e96df747d027c17427cc",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Pre-Fill Form Fields\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties & the input widgets & the <b>fetchUserByUrlParam</b> Query.<br/><br/>\n🔄 Refresh the page with an email query param in the URL<br/>Trigger the navigate action from a button and pass a query param to the function. (Inspect <b>refreshButton</b>)</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 On Page Load, the <b>fetchUserByUrlParam</b> Query is run. The query reads the <b>email query param</b> in the URL to fetch the relevant user.<br/>\nThe default property of the form input widgets are bound to the response of the <b>fetchUserByUrlParam</b> Query</p>",
"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": [
[
{
"_id": "5f50e96df747d027c17427ce",
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:37 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96ef747d027c17427d2
|
5f50e96ef747d027c17427d0
|
{
"name": "1. Displaying Data",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d1",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Displaying Data in a Table\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The table fetches data via the <b>getUsers</b> Query. The data is bound to the table property using<b>{{ \"{{ getUsers.data }}\" }}.</b><br/><br/>\n📄The <b>getUsers</b> Query takes the pageNo of the table to paginate the request using <br/><b>{{\"{{ usersTable.pageNo }}\"}}</b> in the query.\n<br/>The table has server side pagination enabled and executes the query on page change.\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🌩️ 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.<br/><br/>\n🌪️ The table maps over the data returned by <b>getUsersAPI</b>, changes the status field to lowercase and formats the date field.<br/><br/>\n🧱 APIs, Queries and Widgets are all objects of the application exposed via Javascript inside <b>{{\"{{}}\"}}</b>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties.<br/> <br/>🔠 Try updating the function in the table property and format the <b>status</b> field to begin with a capital letter!</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties & the <b>getUsers</b> Query.<br/><br/>🌟 Try navigating through the table's pages.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427d3",
"name": "getUsers",
"pluginType": "DB",
"jsonPathKeys": [
"(usersTable.pageNo - 1) * 5"
],
"timeoutInMillisecond": 10000
},
{
"_id": "5f50e96ef747d027c17427d4",
"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": []
}
]
}
|
{
"name": "1. Displaying Data",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d1",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Displaying Data in a Table\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The table fetches data via the <b>getUsers</b> Query. The data is bound to the table property using<b>{{ \"{{ getUsers.data }}\" }}.</b><br/><br/>\n📄The <b>getUsers</b> Query takes the pageNo of the table to paginate the request using <br/><b>{{\"{{ usersTable.pageNo }}\"}}</b> in the query.\n<br/>The table has server side pagination enabled and executes the query on page change.\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🌩️ 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.<br/><br/>\n🌪️ The table maps over the data returned by <b>getUsersAPI</b>, changes the status field to lowercase and formats the date field.<br/><br/>\n🧱 APIs, Queries and Widgets are all objects of the application exposed via Javascript inside <b>{{\"{{}}\"}}</b>\n</p>",
"textStyle": "BODY",
"shouldScroll": true,
"dynamicProperties": {
"isVisible": true
}
},
{
"isVisible": "{{appsmith.mode === \"EDIT\"}}",
"text": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties.<br/> <br/>🔠 Try updating the function in the table property and format the <b>status</b> field to begin with a capital letter!</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the table properties & the <b>getUsers</b> Query.<br/><br/>🌟 Try navigating through the table's pages.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427d3",
"name": "getUsers",
"pluginType": "DB",
"jsonPathKeys": [
"(usersTable.pageNo - 1) * 5"
],
"timeoutInMillisecond": 10000
},
{
"_id": "5f50e96ef747d027c17427d4",
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:38 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96ef747d027c17427d6
|
5f50e96ef747d027c17427d0
|
{
"name": "2. Searching & Filtering",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d5",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Searching & Filtering\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The <b>usersTable</b> displays data returned by the <b>getSearchedUsers</b> Query.<br/><br/>\n🔻 The <b>filterDropdown</b> contains options to filter the users by gender. The dropdown executes the <b>getSearchedUsers</b> Query onOptionSelected.<br/><br/>\n❓The <b>getSearchedUsers</b> Query has a where clause that reads it's values from the <b>filterDropdown</b> and <b>usersTable.searchText</b><br/><br/>\n✅ The <b>getSearchedUsers</b> Query uses conditional checks to modify the where clause when the ALL option is selected and no searchText is present\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the <b>filterDropdown</b> properties & the <b>getSearchedUsers</b> Query.<br/><br/>🔍 Try searching and filtering the table data.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427d7",
"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": []
}
]
}
|
{
"name": "2. Searching & Filtering",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d5",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Searching & Filtering\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">💡 The <b>usersTable</b> displays data returned by the <b>getSearchedUsers</b> Query.<br/><br/>\n🔻 The <b>filterDropdown</b> contains options to filter the users by gender. The dropdown executes the <b>getSearchedUsers</b> Query onOptionSelected.<br/><br/>\n❓The <b>getSearchedUsers</b> Query has a where clause that reads it's values from the <b>filterDropdown</b> and <b>usersTable.searchText</b><br/><br/>\n✅ The <b>getSearchedUsers</b> Query uses conditional checks to modify the where clause when the ALL option is selected and no searchText is present\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the <b>filterDropdown</b> properties & the <b>getSearchedUsers</b> Query.<br/><br/>🔍 Try searching and filtering the table data.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427d7",
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:38 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
|
5f50e96ef747d027c17427d9
|
5f50e96ef747d027c17427d0
|
{
"name": "3. Drilldown Table Data",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d8",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Drilldown Table Data\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔩 The non-essential table columns are hidden and the <b>detailsContainer</b> displays a drill down view of the entire row.<br/><br/>\n🖼️ The container is customised with widgets for each column in the table ex. Image widget for avatar.<br/><br/>\n🔘 The widgets are bound to the value of the <b>selectedRow</b> in the <b>usersTable</b> using <b>{{\"{{ usersTable.selectedRow.columnName }}\"}}</b>\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the widget properties in the <b>detailsContainer</b>.<br/><br/>☿️ Try displaying the users gender in the <b>detailsContainer</b>.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427da",
"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": []
}
]
}
|
{
"name": "3. Drilldown Table Data",
"layouts": [
{
"_id": "5f50e96ef747d027c17427d8",
"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": "<h1>{{appsmith.mode !== \"EDIT\" ? \"Edit this application to begin\" : \"Drilldown Table Data\"}}</h1>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔩 The non-essential table columns are hidden and the <b>detailsContainer</b> displays a drill down view of the entire row.<br/><br/>\n🖼️ The container is customised with widgets for each column in the table ex. Image widget for avatar.<br/><br/>\n🔘 The widgets are bound to the value of the <b>selectedRow</b> in the <b>usersTable</b> using <b>{{\"{{ usersTable.selectedRow.columnName }}\"}}</b>\n</p>",
"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": "<p style=\"font-size: 16px; line-height: 1.5\">🔍 Inspect the widget properties in the <b>detailsContainer</b>.<br/><br/>☿️ Try displaying the users gender in the <b>detailsContainer</b>.</p>",
"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": [
[
{
"_id": "5f50e96ef747d027c17427da",
"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": []
}
]
}
|
Thu Sep 03 2020 13:02:38 GMT+0000 (UTC)
|
false
|
com.appsmith.server.domains.NewPage
|
| Documents | 258 |
| Total doc size | 4.42 MB |
| Average doc size | 17.54 KB |
| Pre-allocated size | 1.46 MB |
| Indexes | 2 |
| Total index size | 72 KB |
| Padding factor | |
| Extents |