{ "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 4896, "snapColumns": 64, "detachFromLayout": true, "widgetId": "0", "topRow": 0, "bottomRow": 460, "containerStyle": "none", "snapRows": 124, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": true, "version": 86, "minHeight": 1292, "dynamicTriggerPathList": [], "parentColumnSpace": 1, "dynamicBindingPathList": [], "leftColumn": 0, "children": [ { "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", "requiresFlatWidgetChildren": true, "isCanvas": true, "iconSVG": "/static/media/icon.5c9511142b3624c7491c5442e8ccd0ef.svg", "topRow": 6, "pageSize": 1, "type": "LIST_WIDGET_V2", "itemSpacing": 8, "animateLoading": true, "dynamicBindingPathList": [ { "key": "currentItemsView" }, { "key": "selectedItemView" }, { "key": "triggeredItemView" }, { "key": "primaryKeys" }, { "key": "accentColor" }, { "key": "borderRadius" }, { "key": "boxShadow" } ], "leftColumn": 6, "enhancements": true, "children": [ { "mobileBottomRow": 400, "widgetName": "Canvas1", "displayName": "Canvas", "topRow": 0, "bottomRow": 310, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": false, "hideCard": true, "dropDisabled": true, "openParentPropertyPane": true, "minHeight": 400, "mobileRightColumn": 129.375, "noPad": true, "parentColumnSpace": 1, "leftColumn": 0, "dynamicBindingPathList": [], "children": [ { "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", "mobileBottomRow": 12, "widgetName": "Container1", "borderColor": "#E0DEDE", "disallowCopy": true, "isCanvas": true, "displayName": "Container", "iconSVG": "/static/media/icon.daebf68875b6c8e909e9e8ac8bee0c02.svg", "searchTags": [ "div", "parent", "group" ], "topRow": 0, "bottomRow": 25, "dragDisabled": true, "type": "CONTAINER_WIDGET", "hideCard": false, "shouldScrollContents": false, "isDeletable": false, "mobileRightColumn": 64, "animateLoading": true, "leftColumn": 0, "dynamicBindingPathList": [ { "key": "borderRadius" }, { "key": "boxShadow" } ], "children": [ { "widgetName": "Canvas2", "displayName": "Canvas", "topRow": 0, "bottomRow": 250, "parentRowSpace": 1, "type": "CANVAS_WIDGET", "canExtend": false, "hideCard": true, "useAutoLayout": false, "parentColumnSpace": 1, "leftColumn": 0, "dynamicBindingPathList": [], "children": [ { "boxShadow": "none", "mobileBottomRow": 8, "widgetName": "Image1", "displayName": "Image", "iconSVG": "/static/media/icon.69b0f0dd810281fbd6e34fc2c3f39344.svg", "topRow": 0, "bottomRow": 8, "type": "IMAGE_WIDGET", "hideCard": false, "mobileRightColumn": 16, "animateLoading": true, "dynamicTriggerPathList": [], "imageShape": "RECTANGLE", "dynamicBindingPathList": [ { "key": "image" }, { "key": "borderRadius" } ], "leftColumn": 0, "defaultImage": "http://host.docker.internal:4200/clouddefaultImage.png", "key": "25ukodbr6c", "image": "{{currentItem.img}}", "isDeprecated": false, "rightColumn": 16, "objectFit": "cover", "widgetId": "em3jvrn5am", "isVisible": true, "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Media" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 0, "maxZoomLevel": 1, "enableDownload": false, "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 0, "enableRotation": false }, { "boxShadow": "none", "mobileBottomRow": 4, "widgetName": "Text1", "displayName": "Text", "iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg", "searchTags": [ "typography", "paragraph", "label" ], "topRow": 0, "bottomRow": 4, "type": "TEXT_WIDGET", "hideCard": false, "mobileRightColumn": 28, "animateLoading": true, "overflow": "NONE", "dynamicTriggerPathList": [], "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", "dynamicBindingPathList": [ { "key": "text" }, { "key": "truncateButtonColor" }, { "key": "fontFamily" }, { "key": "borderRadius" }, { "key": "text" } ], "leftColumn": 16, "shouldTruncate": false, "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", "text": "{{currentItem.name}}", "key": "9jmg2z05f9", "isDeprecated": false, "rightColumn": 28, "textAlign": "LEFT", "dynamicHeight": "FIXED", "widgetId": "3j2sl88xb8", "minWidth": 450, "isVisible": true, "fontStyle": "BOLD", "textColor": "#231F20", "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Suggested", "Content" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 0, "responsiveBehavior": "fill", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 16, "maxDynamicHeight": 9000, "fontSize": "1rem", "textStyle": "HEADING", "minDynamicHeight": 4 }, { "boxShadow": "none", "mobileBottomRow": 8, "widgetName": "Text2", "displayName": "Text", "iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg", "searchTags": [ "typography", "paragraph", "label" ], "topRow": 4, "bottomRow": 8, "type": "TEXT_WIDGET", "hideCard": false, "mobileRightColumn": 24, "animateLoading": true, "overflow": "NONE", "dynamicTriggerPathList": [], "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", "dynamicBindingPathList": [ { "key": "text" }, { "key": "truncateButtonColor" }, { "key": "fontFamily" }, { "key": "borderRadius" }, { "key": "text" } ], "leftColumn": 16, "shouldTruncate": false, "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", "text": "{{currentItem.id}}", "key": "9jmg2z05f9", "isDeprecated": false, "rightColumn": 24, "textAlign": "LEFT", "dynamicHeight": "FIXED", "widgetId": "jva2x1emu9", "minWidth": 450, "isVisible": true, "fontStyle": "BOLD", "textColor": "#231F20", "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Suggested", "Content" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 4, "responsiveBehavior": "fill", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 16, "maxDynamicHeight": 9000, "fontSize": "1rem", "textStyle": "BODY", "minDynamicHeight": 4 }, { "boxShadow": "none", "mobileBottomRow": 13, "widgetName": "ButtonGroup1", "isCanvas": false, "displayName": "Button Group", "iconSVG": "/static/media/icon.bb8db4853027d74a78963c3375841e4b.svg", "searchTags": [ "click", "submit" ], "topRow": 9, "bottomRow": 13, "parentRowSpace": 10, "groupButtons": { "groupButton1": { "label": "Favorite", "iconName": "heart", "id": "groupButton1", "widgetId": "", "buttonType": "SIMPLE", "placement": "CENTER", "isVisible": true, "isDisabled": false, "index": 0, "menuItems": {}, "buttonColor": "{{appsmith.theme.colors.primaryColor}}" }, "groupButton2": { "label": "Add", "iconName": "add", "id": "groupButton2", "buttonType": "SIMPLE", "placement": "CENTER", "widgetId": "", "isVisible": true, "isDisabled": false, "index": 1, "menuItems": {}, "buttonColor": "{{appsmith.theme.colors.primaryColor}}" }, "groupButton3": { "label": "More", "iconName": "more", "id": "groupButton3", "buttonType": "MENU", "placement": "CENTER", "widgetId": "", "isVisible": true, "isDisabled": false, "index": 2, "menuItems": { "menuItem1": { "label": "First Option", "backgroundColor": "#FFFFFF", "id": "menuItem1", "widgetId": "", "onClick": "", "isVisible": true, "isDisabled": false, "index": 0 }, "menuItem2": { "label": "Second Option", "backgroundColor": "#FFFFFF", "id": "menuItem2", "widgetId": "", "onClick": "", "isVisible": true, "isDisabled": false, "index": 1 }, "menuItem3": { "label": "Delete", "iconName": "trash", "iconColor": "#FFFFFF", "iconAlign": "right", "textColor": "#FFFFFF", "backgroundColor": "#DD4B34", "id": "menuItem3", "widgetId": "", "onClick": "", "isVisible": true, "isDisabled": false, "index": 2 } }, "buttonColor": "{{appsmith.theme.colors.primaryColor}}" } }, "type": "BUTTON_GROUP_WIDGET", "hideCard": false, "mobileRightColumn": 54, "animateLoading": true, "parentColumnSpace": 4.4140625, "leftColumn": 29, "dynamicBindingPathList": [ { "key": "borderRadius" }, { "key": "groupButtons.groupButton1.buttonColor" }, { "key": "groupButtons.groupButton2.buttonColor" }, { "key": "groupButtons.groupButton3.buttonColor" } ], "key": "7r7px2hmgm", "orientation": "horizontal", "isDeprecated": false, "rightColumn": 62, "dynamicHeight": "FIXED", "widgetId": "zu0qwe3wls", "minWidth": 450, "isVisible": true, "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Buttons" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 9, "responsiveBehavior": "fill", "childStylesheet": { "button": { "buttonColor": "{{appsmith.theme.colors.primaryColor}}" } }, "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 30, "buttonVariant": "PRIMARY" }, { "boxShadow": "none", "mobileBottomRow": 20, "widgetName": "IconButton1", "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "displayName": "Icon button", "iconSVG": "/static/media/icon.b08054586989b185a0801e9a34f8ad49.svg", "searchTags": [ "click", "submit" ], "topRow": 15, "bottomRow": 19, "parentRowSpace": 10, "type": "ICON_BUTTON_WIDGET", "hideCard": false, "mobileRightColumn": 32, "animateLoading": true, "parentColumnSpace": 4.4140625, "leftColumn": 44, "dynamicBindingPathList": [ { "key": "buttonColor" }, { "key": "borderRadius" } ], "isDisabled": false, "key": "qs1re01jva", "isDeprecated": false, "rightColumn": 48, "iconName": "plus", "dynamicHeight": "FIXED", "widgetId": "mugp61q9le", "minWidth": 50, "isVisible": true, "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Buttons" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 16, "responsiveBehavior": "hug", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 28, "buttonVariant": "PRIMARY" }, { "resetFormOnClick": false, "boxShadow": "none", "mobileBottomRow": 6, "widgetName": "Button1", "buttonColor": "{{appsmith.theme.colors.primaryColor}}", "displayName": "Button", "iconSVG": "/static/media/icon.05d209fafeb13a8569e3b4e97069d9ee.svg", "searchTags": [ "click", "submit" ], "topRow": 2, "bottomRow": 6, "parentRowSpace": 10, "type": "BUTTON_WIDGET", "hideCard": false, "mobileRightColumn": 54, "animateLoading": true, "parentColumnSpace": 8.06591796875, "leftColumn": 38, "dynamicBindingPathList": [ { "key": "buttonColor" }, { "key": "borderRadius" } ], "text": "Submit", "isDisabled": false, "key": "rolryyfj5e", "isDeprecated": false, "rightColumn": 54, "isDefaultClickDisabled": true, "dynamicHeight": "FIXED", "widgetId": "8nrnhbbekm", "minWidth": 120, "isVisible": true, "recaptchaType": "V3", "version": 1, "parentId": "5gw7cd9vgs", "tags": [ "Buttons" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 2, "responsiveBehavior": "hug", "disabledWhenInvalid": false, "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 38, "buttonVariant": "PRIMARY", "placement": "CENTER" } ], "key": "hzwclegot4", "isDeprecated": false, "detachFromLayout": true, "widgetId": "5gw7cd9vgs", "containerStyle": "none", "minWidth": 450, "isVisible": true, "version": 1, "parentId": "k2be0wkm71", "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 0, "responsiveBehavior": "fill", "mobileLeftColumn": 0, "flexLayers": [] } ], "borderWidth": "1", "positioning": "fixed", "flexVerticalAlignment": "start", "key": "80p0p01sv9", "backgroundColor": "white", "isDeprecated": false, "rightColumn": 64, "dynamicHeight": "FIXED", "widgetId": "k2be0wkm71", "containerStyle": "card", "minWidth": 450, "isVisible": true, "version": 1, "isListItemContainer": true, "parentId": "mmnmpsy0uj", "tags": [ "Layout" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 0, "responsiveBehavior": "fill", "noContainerOffset": true, "disabledWidgetFeatures": [ "dynamicHeight" ], "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 0, "maxDynamicHeight": 9000, "minDynamicHeight": 10 } ], "key": "hzwclegot4", "isDeprecated": false, "rightColumn": 129.375, "detachFromLayout": true, "widgetId": "mmnmpsy0uj", "containerStyle": "none", "minWidth": 450, "isVisible": true, "version": 1, "parentId": "rf79rl326i", "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 0, "responsiveBehavior": "fill", "mobileLeftColumn": 0, "flexLayers": [] } ], "itemBackgroundColor": "#FFFFFF", "accentColor": "{{appsmith.theme.colors.primaryColor}}", "isVisible": true, "tags": [ "Suggested", "Display" ], "hasMetaWidgets": true, "isLoading": false, "mainCanvasId": "mmnmpsy0uj", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "additionalStaticProps": [ "level", "levelData", "prefixMetaWidgetId", "metaWidgetId" ], "mobileBottomRow": 46, "currentItemsView": "{{[]}}", "triggeredItemView": "{{{}}}", "widgetName": "List1", "listData": [ { "id": "001", "name": "Blue", "img": "http://host.docker.internal:4200/clouddefaultImage.png" }, { "id": "002", "name": "Green", "img": "http://host.docker.internal:4200/clouddefaultImage.png" }, { "id": "003", "name": "Red", "img": "http://host.docker.internal:4200/clouddefaultImage.png" } ], "displayName": "List", "bottomRow": 37, "parentRowSpace": 10, "hideCard": false, "templateBottomRow": 16, "mobileRightColumn": 41, "mainContainerId": "k2be0wkm71", "primaryKeys": "{{List1.listData.map((currentItem, currentIndex) => currentItem[\"id\"] )}}", "parentColumnSpace": 5.390625, "dynamicTriggerPathList": [], "gridType": "vertical", "key": "idsqgrps32", "backgroundColor": "transparent", "isDeprecated": false, "rightColumn": 60, "widgetId": "rf79rl326i", "minWidth": 450, "parentId": "0", "renderMode": "CANVAS", "mobileTopRow": 6, "responsiveBehavior": "fill", "mobileLeftColumn": 17, "selectedItemView": "{{{}}}" }, { "mobileBottomRow": 46, "widgetName": "Text3", "displayName": "Text", "iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg", "searchTags": [ "typography", "paragraph", "label" ], "topRow": 42, "bottomRow": 46, "parentRowSpace": 10, "type": "TEXT_WIDGET", "hideCard": false, "mobileRightColumn": 28, "animateLoading": true, "overflow": "NONE", "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", "parentColumnSpace": 5.75, "dynamicTriggerPathList": [], "leftColumn": 7, "dynamicBindingPathList": [ { "key": "truncateButtonColor" }, { "key": "fontFamily" }, { "key": "borderRadius" }, { "key": "text" } ], "shouldTruncate": false, "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", "text": "{{Audio1.autoPlay}}", "key": "9jmg2z05f9", "isDeprecated": false, "rightColumn": 28, "textAlign": "LEFT", "dynamicHeight": "AUTO_HEIGHT", "widgetId": "he7knga5hk", "minWidth": 450, "isVisible": true, "fontStyle": "BOLD", "textColor": "#231F20", "version": 1, "parentId": "0", "tags": [ "Suggested", "Content" ], "renderMode": "CANVAS", "isLoading": false, "mobileTopRow": 42, "responsiveBehavior": "fill", "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", "mobileLeftColumn": 12, "maxDynamicHeight": 9000, "fontSize": "1rem", "minDynamicHeight": 4 } ] } }