PromucFlow_constructor/app/client/cypress/fixtures/jsonFormDynamicHeightDsl.json
Abhinav Jha 4361db4269
feat: Automatic height updates for widgets based on contents (Auto Height) (#18341)
* added multi select back

* (WIP): Complete the dynamc height update logic

* (WIP): Dynamic height logic

* (WIP): Container computation logic, Next steps: Prevent reflow when resize is disabled. Fix logic of widgets randomly changing positions (Debug)

* Fix logic in container computations

* Integrate for PoC

* fixed the no initial load dynamic height updates

* Stop vertical resize and reflow when dynamic height is enabled for a widget

* added another container in text widget

* enabled dynamic height for container widgets

* removed dynamic height feature from list widget

* Fixed Button and Input components height increase

* added an experiment to overflow the content if maxHEight is less

* removed the ref of Textwidget by mistake, added it back

* fixed text widget height overflow problem with a little hack

* added long labels with text

* fixed the table scroll issue

* overflow fixed for json form widget

* added extra 8px height for Switch, Rating and Checkbox Height

* (WIP): Resolve issues

* (WIP): Fix widget padding issue

* added overflow container for Radio and Switch group widgets

* (WIP): Have modals work with dynamic height

* added the overlay and the handles

* added dragging behavior to the dots

* fixed the overlapping with the selection tool

* (WIP): Fix issues reported

* now we can update the property pane values back from overlay handles

* now we can update the property pane values back from overlay handles

* (WIP): Fix table widget

* Fix package.json

* Remove unit tests temporarily

* Fix unit test

* (WIP): Fix modal resize. Fix cursors. Fix border issue on non-resizable widgets

* fetch component heights using the requestAnimationFrame callback

* behavioural changes

* (WIP): Fix issues on the platform

* Update main container size appropriately

* more behavioural changes

* overlay now only be visible when hovering over the dots

* grid showing and widget reselecting

* added onfocus and onblur events to property pane listeners

* added onfocus and onblur events to property pane listeners

* added a range slider for min and max

* added demarcations for slider values

* (WIP): Fix platform workflows for dynamic height

* Fix issues with widgets

* Fix removed import

* - Add missing cypress files

* set the limits

* limit increase on change

* Fix z-index of min max limit indicators. Fix unused-vars warnings

* Fix Table Widget and Text Widget issues

* Fix: all the bugs in the bug master list for DH (#16268)

* changed the zindex for the signifiers

* showing signifiers only when the widget is selected

* made changes suggested by Momcilo

* activate the dots when the fields are active

* created a new centered dot handle

* removed overlays on focus and made the border more like deisgn

* handles on top of other widgets

* hide the overlay when multiple widgets are selected

* added a white border

* added a white border

* bug #15509 resolved

* changed the minDynamicHeightLimit to 2 instead of 4 to fix the Bug #15527

* removed the height auto fix from BaseInputComponent to fix the Bug #15388

* removed the condition to not ccalculate dynamic height when the row difference is less than 2 to fix the bug 15353

* made fixes for the bug #16307

* made fixes for the bug #16308

* made fixes for bug 16310

* made fixes for the bug #16402

* removed some log statements

* made fixes for the bug #16407

* fixed label problem found in the issue #16543

* made fixes for the issue #16547

* made fixes for the bug #16492

* redeploy

* (WIP): Fix to make this branch functional

* imported LabelWithTooltip back from design system

* signifier is now centered

* filled the signifier with primary color

* overlay hidden while dragging

* made the signifier dashed border also draggable

* Fix issue #16590 (#16798)

* set the limits to 4 rows

* replaced the static 40 value

* added signifiers for modal widget

* added signifiers for modal widget

* tried solving the scroll issue for widgets when there are limits

* solved the height problem using ResizeObserver

* (WIP): Fix maxDynamicHeight issue with container widgets:

* made the changes as per the review

* fixed the issue for input widget when label gets out of border

* hide text widget overflow options if auto height is enabled

* (WIP): In view mode, invisible widgets now donot take space (#16920)

* (WIP): In view mode, invisible widgets now donot take space

* (WIP): Enable the feature where invisible widgets in view mode don't take space to all widgets irrespective of the dynamic height feature

* Remove Replay conditional

* removed the scroll container for container type widgets

* removed the scroll container for container type widgets

* updated the hook to set overflow none for text widget

* fixed the should dynamic height logic to respect the min height limit

* Modal widget adheres to dynamic height (#16995)

* Modal widget adheres to dynamic height

* WIP: POC: fix dynamic height issues  (#16996)

Fix height less than 4 issue. Fix JSONForm adherence to min and max height

* POC: Dynamic height undo redo issue (#17085)

* Revert debouce timeout

* (WIP): Fix issue with undo-redo in dynamic height

* fix: Dynamic height issue fixes (#17153)

* Dynamic height issue fixes
==

- Fix issue where nested widgets did not ensure parent dynamic height updates
- Fix issue where Modal widget updates came in subsequent renders
- Fix issue where JSONForm collapses
- Fix performance issue for independent updates

* Use functions to get min and max dynamic height

* Fix issue where variable might have been undefined

* added the dynamic container into the deploy mode as well

* added overflow-x hidden when overflow-y is active in the dynamic height container

* fix: Dynamic height Issue fixes (#17204)

Fix preview mode invisible widgets. Fix Tabs widget dynamic height.

* removed a console.log statement

* removed the slider control file

* imported the LabelWithTooltip from the repo rather than ds

* word-break CSS rules added for Switch and Checkbox widget when Dynamic Height is enabled

* abstracted the check for dynamic height with limits enabled as isDynamicHeightWithLimitsEnabledForWidget

* abstracted the static value of 10 in dynamic height overlay to GridDefaults

* abstracted min and max dynamic height limits to getters

* fix: replaced all the refs for simpler widgets (#17353)

* replaced all the refs for simpler widgets

* removed the updateDynamicHeight from componentDidUpdate in BaseWidget

* added back lifecycle methods back to BaseWidget

* removed the contentRef from SwitchGroup and Table

* updating the height from the auto height with limits as well

* some hacks to make the limits work

* working solution

* used setTimeout to send an update to updateDynamicHeight from overlay update

* removed a log

* added requestanimationframe in settimeout

Co-authored-by: Ankur Singhal <ankursinghal@Ankurs-MacBook-Pro-2.local>
Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* Fix issues caused during merge

* Remove unneeded derived property

* removed more unnecessary code which should have been removed after removing the ref dependency

* fixed the maxDynamicHeight issue

* Fix issue where property configs were not being sent

* fix: Auto Height Feature - add selectors for tests (#17687)

Add selectors for auto height cypress tests

* fix: removed height auto default theme (#17415)

removed height auto css rule from the default theme

Co-authored-by: Ankur Singhal <ankursinghal@Ankurs-MacBook-Pro-2.local>

* fix: Auto Height Feature - Resolve issues and restructure code (#17686)

* Fix issues in dynamic height. Restructure code and reduce abstraction leaks

* Fix typescript issues

* Update based on review comments. Comment migrations, as a cyclic import is causing the jest tests to fail.

* Remove unused imports

* Decrease code nesting

* added the base styles for the overlay like position and z-index in its styled component css

* used the isDynamicHeightEnabled prop to set the height of SwitchGroup and RadioGroup widgets from 32px to 100% in case of inline mode

* fix: Auto Height - Resolve issues (#17737)

* Fix Tabs Widget showTabs toggle based auto height. Revert removal of BaseWidget code. Remove box-intersect and use a bruteforce algorithm. Add base logic for having containers collapse due to hidden child widgets

* Hide scroll contents and overflow property pane controls when dynamic height is enabled

* Removed the class property expectedHeight from BaseWidget as it is not useful in the overlay logic after some changes

* fixed the left alignment issue of label in the rich text editor by adding some styles applied only when the dynamic height is enabled

* fixed the input field stretching issue in case of Dynamic height by adding some CSS styles when isDynamicHeight is true

* Fix failing modal widget cypress tests

* Fix issue with scrollContents and Tabs Widget defaulTab

* added a little bit padding of 4px to the right of scroll container of dynamic height with limit

* Add test locators for resize handles

* removed the dynamic height logic from the table widget

* fix: Auto-Height invisible widgets (#17849)

* Fix issue where invisible widgets were still taking space

* Make sure to collapse only if dynamic height is enabled

* Fix issues with reflow (not the invisible widgets)

* Fix container min height issues

* Fix reflow with original bottom and top values. Testing needed

* Fix invisible widgets

* fix: enabled dynamic height for stat box widget (#17971)

enabled dynamic height for stat box widget

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: added a min height to rich text editor so that it does not collapse (#17970)

added a min height to rich text editor so that it does not collapse

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* Fix issue with resizing auto height widget

* Add helper text to educate users regarding the scroll disconnect in WYSIWYG

* fix: Auto Height Fixes (#18111)

AUTO HEIGHT FIXES

- Fix JSONForm height discrepancy
- Fix issue where widgets moved below the other
- Fix droptarget height after parent container resize

* fix: sliced up the DynamicHeightOverlay component a little bit (#18100)

* sliced up the DynamicHeightOverlay component a little bit

* more refactoring

* more refactoring

* used release event emitter and refactored more

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: rich text editor center alignment issue (#18142)

* removed the center alignment from rich text editor

* dummy commit

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: old DSL container collapse (#18160)

* Fix issue where old containers from old DSLs used to collapse when auto height was enabled

* Fix issue where old containers don't allow new widgets to be added when auto height is enabled, this is because the shouldScrollContents is undefined

* fix: input widgets issue (#18172)

fixed the auto height not working issue

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: preview deploy mode (#18174)

fixed the preview and deploy mode

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: auto height limits label intersection with handle dot (#18186)

fixed the position of the limits label to the right so that it will not intersect with the handle dot

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: auto height limits rich text editor min height (#18187)

decrease the min height of the RTE so that it does not have the boundary issue with the max limit when auto height with limits is enabled

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: grammatical error in the help text (#18188)

changed react to reacts in the helpText of the dynamic height property in the proeprty pane

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: auto height tabs double scroll (#18210)

solved the issue by disabling the scroll for the child canvas widget in the tabs widget

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: auto height limits resizing (#18213)

* fixed the auto height limits resizing issue

* made the auto height overlay independent of isResizing and used its own property to show the grid

* some more refactoring

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* dummy commit

* fix: old apps container issue (#18255)

filtered out the widgets which are detached from layout

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: fixing auto height in childless containers. (#18263)

fixing auto height in childless containers.

* task: Dynamic height reflow fixes in Branch (#18244)

dynamic height reflow fixes

* fix: compact label issue and min and max limits numeric input (#18282)

fixed compact label issue and turned min and max limits to numeric input

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: LabelWithTooltip help icon fix

* fix: NaN and min limit for min and max (#18284)

* fixed compact label issue and turned min and max limits to numeric input

* fixed NaN and set min to be 4

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: validation issues for min max (#18286)

* fixed compact label issue and turned min and max limits to numeric input

* fixed NaN and set min to be 4

* validations start working min max

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* added a full stop to container scroll helper text

* validations start working min max

* dummy commit

* feat: stop resizing auto height widgets vertically because of Drag n Drop Reflow (#18267)

* reflow fixes

* stop resizing auto height widgets vertically because of Drag n Drop Reflow

* feat: Analytics for Dynamic height (#18279)

* Fix canvas min height issue and invisible widgets issue and remove logs and fix issue where widgets overlapped when coming back from preview mode to edit mode

* Fix issue with containers not respecting auto height and decreasing height

* Fix issue with modal widget not hugging contents, and container widgets never become visible after going invisible

* Fix issue where existing containers don't have correct min height for child canvas

* fix: canvasLevelsReducers test (#18301)

fixed the canvasLevelsReducers test

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: removed auto height min max config from widget features (#18316)

removed auto height min max config from widget features

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: Fixing Modal Height updates (#18317)

Fixing Modal Height updates

* fix: text widget background auto height (#18319)

added background color of Text widget back to the auto height container

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* test: cypress tests for auto height (#17676)

* Added tests for dynamic height

* updated tests for another usecase

* moved locators into commonfile

* updated common method

* added tests for some more widgets

* Added tests for jsonForm / Form widget

* Updated the test

* updated test for multiple text widgets

* updated test with few more usecases

* updated the dsl

* updated tests for text change

* updated tests based on new changes

* updated cypress test fixes

* fix: auto height container merge poc wrt release (#18334)

updated the poc wrt PR already merged in the release regarding the auto height container

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: renamed auto height overlay components and added some tests (#18333)

* renamed auto height overlay components and added some tests

* replaced the 10 value with GridDefaults

* avoiding event to reach drop target

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* updated tests

* Merge all code into one branch

* Fix failing AutoHeightcontainer test

* fix: Fix reflow computations which were causing widget overlap (#18300)

* Fix reflow computations which were causing widget overlap

* Fix issues with parent container height and overlapping widgets

* Remove console logs

* Revert comment

* Fix issues related to reflow of containers

* feat: Making getEffectedBoxes a Recursive function in autoHeight Reflow (#18336)

Making getEffectedBoxes a Recursive function in autoHeight Reflow

* Return null for invisible widgets from withWidgetProps

* Remove duplicate import

Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>

* Remove missed console log

* fix: Label position gets deselected on selecting already selected option (#18298)

* fix: Label position gets deselected on selecting the already selected value

* Added migration for Currency & Phone input widgets

* simplify migration function using a utility

* combine conditions

* Increments LATEST_PAGE_VERSION

* Update DynamicHeight_Visibility_spec.js

updated a check wrt auto height

* Handling Modals for canvas size calculations

* fix: migrate label position test failing issue (#18365)

fixed migrate label postition test failing issue

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* removed the two unwanted imports from DSLMigrations to fix client build

* fix: Auto height zero and limits issue (#18366)

fixed the auto height zero and limits issue

Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>

* fix: Auto height regression issues (#18367)

* Fix auto height regression issues #18367

* feat: auto height migrations (#18368)

Add auto height migrations

* Increase file caching size

* Use manual array for list of auto height enabled widgets

* Fix cypress test dsl versions

* Revert changes to shouldUpdateHeightDynamically

* Update test results based on code changes

* Marginally increase the workbox file size cache

* review comment incorporated for test spec

* Update container auto height property on drop

* added small wait for validation

Co-authored-by: Ankur Singhal <ankur@appsmith.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: Abhinav Jha <zatanna@Abhinavs-iMac.lan>
Co-authored-by: Ankur Singhal <ankursinghal@Ankurs-MacBook-Pro-2.local>
Co-authored-by: Ankur Singhal <ankurrsinghal@gmail.com>
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Co-authored-by: Albin <albin@appsmith.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com>
Co-authored-by: Apple <nandan@thinkify.io>
2022-11-23 15:18:23 +05:30

776 lines
39 KiB
JSON

{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 4896,
"snapColumns": 64,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 1292,
"containerStyle": "none",
"snapRows": 125,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"version": 65,
"minHeight": 1292,
"dynamicTriggerPathList": [],
"parentColumnSpace": 1,
"dynamicBindingPathList": [],
"leftColumn": 0,
"children": [
{
"boxShadow": "none",
"widgetName": "Modal1",
"isCanvas": true,
"displayName": "Modal",
"iconSVG": "/static/media/icon.4975978e9a961fb0bfb4e38de7ecc7c5.svg",
"searchTags": [
"dialog",
"popup",
"notification"
],
"topRow": 0,
"bottomRow": 0,
"parentRowSpace": 1,
"type": "MODAL_WIDGET",
"hideCard": false,
"shouldScrollContents": true,
"animateLoading": true,
"parentColumnSpace": 1,
"dynamicTriggerPathList": [],
"leftColumn": 0,
"dynamicBindingPathList": [
{
"key": "borderRadius"
}
],
"children": [
{
"boxShadow": "none",
"widgetName": "Canvas2",
"displayName": "Canvas",
"topRow": 0,
"bottomRow": 240,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"hideCard": true,
"shouldScrollContents": false,
"minHeight": 240,
"parentColumnSpace": 1,
"leftColumn": 0,
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "accentColor"
}
],
"children": [
{
"boxShadow": "none",
"widgetName": "IconButton1",
"onClick": "{{closeModal('Modal1')}}",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"displayName": "Icon Button",
"iconSVG": "/static/media/icon.1a0c634ac75f9fa6b6ae7a8df882a3ba.svg",
"searchTags": [
"click",
"submit"
],
"topRow": 0,
"bottomRow": 4,
"type": "ICON_BUTTON_WIDGET",
"hideCard": false,
"animateLoading": true,
"leftColumn": 58,
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"iconSize": 24,
"isDisabled": false,
"key": "oipik9z0jf",
"isDeprecated": false,
"rightColumn": 64,
"iconName": "cross",
"widgetId": "h84z4pqq7d",
"isVisible": true,
"version": 1,
"parentId": "b8h15fewxw",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"buttonVariant": "TERTIARY"
},
{
"widgetName": "Text2",
"displayName": "Text",
"iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg",
"searchTags": [
"typography",
"paragraph",
"label"
],
"topRow": 1,
"bottomRow": 5,
"type": "TEXT_WIDGET",
"hideCard": false,
"animateLoading": true,
"overflow": "NONE",
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
"leftColumn": 1,
"dynamicBindingPathList": [
{
"key": "truncateButtonColor"
},
{
"key": "fontFamily"
},
{
"key": "borderRadius"
}
],
"shouldTruncate": false,
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
"text": "Modal Title",
"key": "qjy37lgbc3",
"isDeprecated": false,
"rightColumn": 41,
"dynamicHeight": "FIXED",
"textAlign": "LEFT",
"widgetId": "j98rl5e7a1",
"isVisible": true,
"fontStyle": "BOLD",
"textColor": "#231F20",
"version": 1,
"parentId": "b8h15fewxw",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"maxDynamicHeight": 9000,
"fontSize": "1.5rem",
"minDynamicHeight": 4
},
{
"resetFormOnClick": false,
"boxShadow": "none",
"widgetName": "Button1",
"onClick": "{{closeModal('Modal1')}}",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"displayName": "Button",
"iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg",
"searchTags": [
"click",
"submit"
],
"topRow": 18,
"bottomRow": 22,
"type": "BUTTON_WIDGET",
"hideCard": false,
"animateLoading": true,
"leftColumn": 31,
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"text": "Close",
"isDisabled": false,
"key": "8fy9at549y",
"isDeprecated": false,
"rightColumn": 47,
"isDefaultClickDisabled": true,
"widgetId": "w3gw0z0hul",
"buttonStyle": "PRIMARY",
"isVisible": true,
"recaptchaType": "V3",
"version": 1,
"parentId": "b8h15fewxw",
"renderMode": "CANVAS",
"isLoading": false,
"disabledWhenInvalid": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"buttonVariant": "SECONDARY",
"placement": "CENTER"
},
{
"resetFormOnClick": false,
"boxShadow": "none",
"widgetName": "Button2",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"displayName": "Button",
"iconSVG": "/static/media/icon.cca026338f1c8eb6df8ba03d084c2fca.svg",
"searchTags": [
"click",
"submit"
],
"topRow": 18,
"bottomRow": 22,
"type": "BUTTON_WIDGET",
"hideCard": false,
"animateLoading": true,
"leftColumn": 47,
"dynamicBindingPathList": [
{
"key": "buttonColor"
},
{
"key": "borderRadius"
}
],
"text": "Confirm",
"isDisabled": false,
"key": "8fy9at549y",
"isDeprecated": false,
"rightColumn": 63,
"isDefaultClickDisabled": true,
"widgetId": "dcky71d9uv",
"buttonStyle": "PRIMARY_BUTTON",
"isVisible": true,
"recaptchaType": "V3",
"version": 1,
"parentId": "b8h15fewxw",
"renderMode": "CANVAS",
"isLoading": false,
"disabledWhenInvalid": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"buttonVariant": "PRIMARY",
"placement": "CENTER"
}
],
"isDisabled": false,
"key": "74zfu9g19a",
"isDeprecated": false,
"rightColumn": 0,
"detachFromLayout": true,
"widgetId": "b8h15fewxw",
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"isVisible": true,
"version": 1,
"parentId": "d0r5dcpeqm",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}"
}
],
"key": "1y0e1crldi",
"height": 240,
"isDeprecated": false,
"rightColumn": 0,
"detachFromLayout": true,
"dynamicHeight": "FIXED",
"widgetId": "d0r5dcpeqm",
"canOutsideClickClose": true,
"canEscapeKeyClose": true,
"version": 2,
"parentId": "0",
"renderMode": "CANVAS",
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"maxDynamicHeight": 0,
"width": 456,
"minDynamicHeight": 4
},
{
"isVisible": true,
"minDynamicHeight": 4,
"maxDynamicHeight": 9000,
"dynamicHeight": "FIXED",
"animateLoading": true,
"backgroundColor": "#fff",
"disabledWhenInvalid": true,
"fixedFooter": true,
"schema": {
"__root_schema__": {
"children": {
"name": {
"children": {},
"dataType": "string",
"defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.name))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"fieldType": "Text Input",
"sourceData": "John",
"isCustomField": false,
"accessor": "name",
"identifier": "name",
"position": 0,
"originalIdentifier": "name",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Name"
},
"date_of_birth": {
"children": {},
"dataType": "string",
"defaultValue": "{{((sourceData, formData, fieldState) => (moment(sourceData.date_of_birth, \"DD/MM/YYYY\").format(\"YYYY-MM-DDTHH:mm:ss.sssZ\")))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"fieldType": "Datepicker",
"sourceData": "20/02/1990",
"isCustomField": false,
"accessor": "date_of_birth",
"identifier": "date_of_birth",
"position": 1,
"originalIdentifier": "date_of_birth",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"closeOnSelection": false,
"convertToISO": false,
"dateFormat": "DD/MM/YYYY",
"isDisabled": false,
"isRequired": false,
"isVisible": true,
"label": "Date Of Birth",
"maxDate": "2121-12-31T18:29:00.000Z",
"minDate": "1920-12-31T18:30:00.000Z",
"shortcuts": false,
"timePrecision": "minute",
"labelTextSize": "0.875rem"
},
"employee_id": {
"children": {},
"dataType": "number",
"defaultValue": "{{((sourceData, formData, fieldState) => (sourceData.employee_id))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"fieldType": "Number Input",
"sourceData": 1001,
"isCustomField": false,
"accessor": "employee_id",
"identifier": "employee_id",
"position": 2,
"originalIdentifier": "employee_id",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Employee Id"
},
"customField1": {
"children": {},
"dataType": "string",
"fieldType": "Text Input",
"sourceData": "",
"isCustomField": true,
"accessor": "customField1",
"identifier": "customField1",
"position": 3,
"originalIdentifier": "customField1",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Custom Field 1"
},
"customField2": {
"children": {},
"dataType": "string",
"fieldType": "Text Input",
"sourceData": "",
"isCustomField": true,
"accessor": "customField2",
"identifier": "customField2",
"position": 4,
"originalIdentifier": "customField2",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Custom Field 2"
},
"customField3": {
"children": {},
"dataType": "string",
"fieldType": "Text Input",
"sourceData": "",
"isCustomField": true,
"accessor": "customField3",
"identifier": "customField3",
"position": 5,
"originalIdentifier": "customField3",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Custom Field 3"
},
"customField4": {
"children": {},
"dataType": "string",
"fieldType": "Text Input",
"sourceData": "",
"isCustomField": true,
"accessor": "customField4",
"identifier": "customField4",
"position": 6,
"originalIdentifier": "customField4",
"accentColor": "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"iconAlign": "left",
"isDisabled": false,
"isRequired": false,
"isSpellCheck": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": "Custom Field 4"
}
},
"dataType": "object",
"defaultValue": "{{((sourceData, formData, fieldState) => (sourceData))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"fieldType": "Object",
"sourceData": {
"name": "John",
"date_of_birth": "20/02/1990",
"employee_id": 1001
},
"isCustomField": false,
"accessor": "__root_schema__",
"identifier": "__root_schema__",
"position": -1,
"originalIdentifier": "__root_schema__",
"borderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"boxShadow": "none",
"cellBorderRadius": "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
"cellBoxShadow": "none",
"isDisabled": false,
"isRequired": false,
"isVisible": true,
"labelTextSize": "0.875rem",
"label": ""
}
},
"scrollContents": true,
"showReset": true,
"title": "Form",
"version": 1,
"borderWidth": "1",
"borderColor": "#E0DEDE",
"widgetName": "JSONForm1",
"autoGenerateForm": true,
"fieldLimitExceeded": false,
"sourceData": {
"name": "John",
"date_of_birth": "20/02/1990",
"employee_id": 1001
},
"submitButtonLabel": "Submit",
"resetButtonLabel": "Reset",
"type": "JSON_FORM_WIDGET",
"hideCard": false,
"isDeprecated": false,
"displayName": "JSON Form",
"key": "wrvbzxoh9c",
"iconSVG": "/static/media/icon.5b428de12db9ad6a591955ead07f86e9.svg",
"widgetId": "s10ovhzkte",
"renderMode": "CANVAS",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"submitButtonStyles": {
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"buttonVariant": "PRIMARY"
},
"resetButtonStyles": {
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"buttonVariant": "SECONDARY"
},
"childStylesheet": {
"ARRAY": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"cellBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"cellBoxShadow": "none"
},
"OBJECT": {
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"cellBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"cellBoxShadow": "none"
},
"CHECKBOX": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}"
},
"CURRENCY_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"DATEPICKER": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"EMAIL_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"MULTISELECT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"MULTILINE_TEXT_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"NUMBER_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"PASSWORD_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"PHONE_NUMBER_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"RADIO_GROUP": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"boxShadow": "none"
},
"SELECT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
},
"SWITCH": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"boxShadow": "none"
},
"TEXT_INPUT": {
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none"
}
},
"isLoading": false,
"parentColumnSpace": 9.96875,
"parentRowSpace": 10,
"leftColumn": 15,
"rightColumn": 40,
"topRow": 28,
"bottomRow": 78,
"parentId": "0",
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "boxShadow"
},
{
"key": "submitButtonStyles.buttonColor"
},
{
"key": "submitButtonStyles.borderRadius"
},
{
"key": "resetButtonStyles.buttonColor"
},
{
"key": "resetButtonStyles.borderRadius"
},
{
"key": "childStylesheet.ARRAY.accentColor"
},
{
"key": "childStylesheet.ARRAY.borderRadius"
},
{
"key": "childStylesheet.ARRAY.cellBorderRadius"
},
{
"key": "childStylesheet.OBJECT.borderRadius"
},
{
"key": "childStylesheet.OBJECT.cellBorderRadius"
},
{
"key": "childStylesheet.CHECKBOX.accentColor"
},
{
"key": "childStylesheet.CHECKBOX.borderRadius"
},
{
"key": "childStylesheet.CURRENCY_INPUT.accentColor"
},
{
"key": "childStylesheet.CURRENCY_INPUT.borderRadius"
},
{
"key": "childStylesheet.DATEPICKER.accentColor"
},
{
"key": "childStylesheet.DATEPICKER.borderRadius"
},
{
"key": "childStylesheet.EMAIL_INPUT.accentColor"
},
{
"key": "childStylesheet.EMAIL_INPUT.borderRadius"
},
{
"key": "childStylesheet.MULTISELECT.accentColor"
},
{
"key": "childStylesheet.MULTISELECT.borderRadius"
},
{
"key": "childStylesheet.MULTILINE_TEXT_INPUT.accentColor"
},
{
"key": "childStylesheet.MULTILINE_TEXT_INPUT.borderRadius"
},
{
"key": "childStylesheet.NUMBER_INPUT.accentColor"
},
{
"key": "childStylesheet.NUMBER_INPUT.borderRadius"
},
{
"key": "childStylesheet.PASSWORD_INPUT.accentColor"
},
{
"key": "childStylesheet.PASSWORD_INPUT.borderRadius"
},
{
"key": "childStylesheet.PHONE_NUMBER_INPUT.accentColor"
},
{
"key": "childStylesheet.PHONE_NUMBER_INPUT.borderRadius"
},
{
"key": "childStylesheet.RADIO_GROUP.accentColor"
},
{
"key": "childStylesheet.SELECT.accentColor"
},
{
"key": "childStylesheet.SELECT.borderRadius"
},
{
"key": "childStylesheet.SWITCH.accentColor"
},
{
"key": "childStylesheet.TEXT_INPUT.accentColor"
},
{
"key": "childStylesheet.TEXT_INPUT.borderRadius"
},
{
"key": "schema.__root_schema__.children.name.defaultValue"
},
{
"key": "schema.__root_schema__.children.name.accentColor"
},
{
"key": "schema.__root_schema__.children.name.borderRadius"
},
{
"key": "schema.__root_schema__.children.date_of_birth.defaultValue"
},
{
"key": "schema.__root_schema__.children.date_of_birth.accentColor"
},
{
"key": "schema.__root_schema__.children.date_of_birth.borderRadius"
},
{
"key": "schema.__root_schema__.children.employee_id.defaultValue"
},
{
"key": "schema.__root_schema__.children.employee_id.accentColor"
},
{
"key": "schema.__root_schema__.children.employee_id.borderRadius"
},
{
"key": "schema.__root_schema__.defaultValue"
},
{
"key": "schema.__root_schema__.borderRadius"
},
{
"key": "schema.__root_schema__.cellBorderRadius"
},
{
"key": "schema.__root_schema__.children.customField1.accentColor"
},
{
"key": "schema.__root_schema__.children.customField1.borderRadius"
},
{
"key": "schema.__root_schema__.children.customField2.accentColor"
},
{
"key": "schema.__root_schema__.children.customField2.borderRadius"
},
{
"key": "schema.__root_schema__.children.customField3.accentColor"
},
{
"key": "schema.__root_schema__.children.customField3.borderRadius"
},
{
"key": "schema.__root_schema__.children.customField4.accentColor"
},
{
"key": "schema.__root_schema__.children.customField4.borderRadius"
}
],
"dynamicPropertyPathList": [
{
"key": "schema.__root_schema__.children.date_of_birth.defaultValue"
}
],
"dynamicTriggerPathList": []
}
]
}
}