refactor: Improve Form Builder UX #22968

shariquerik · 2023-10-30T08:52:32Z

Added a dialog to create a new doctype
feat: Added on_tab_change event to control tab change logic from doctype's js file
Removed unused elements when the "Form" tab is active.
Changed form builder layout and moved the Sidebar on the right also removed the double scroll
Remove drag to add fields and only keep properties on the right sidebar
Add a better way to add fields on the form
The field types dropdown is getting clipped (Handled using Teleport)
Fix failing UI test

Screen.Recording.2023-10-31.at.2.25.55.AM.mov

Also remove double scrollbar

codecov · 2023-10-30T09:15:54Z

Codecov Report

Merging #22968 (aa0e72d) into develop (d92f74f) will decrease coverage by 0.23%.
Report is 42 commits behind head on develop.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #22968      +/-   ##
===========================================
- Coverage    62.19%   61.97%   -0.23%     
===========================================
  Files          770      770              
  Lines        73806    74725     +919     
  Branches      6364     6364              
===========================================
+ Hits         45904    46308     +404     
- Misses       24279    24794     +515     
  Partials      3623     3623

Flag	Coverage Δ
server	`70.75% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

also reduced tab header height

also created AddFieldButton component

surajshetty3416

Nice improvements 👍🏼

Few things to fix

Focus on label on creating new field
Merge "Details" + "Settings" tabs to "Settings"
Add keyboard shortcut for adding (ctrl+shift+n) & selecting fields(arrow keys)
Avoid magical delete (add a field in tab 2 and press enter)
Delete/Backspace to delete tab/section/column/field if selected

bosue · 2023-10-31T12:22:56Z

Nice, what a huge improvement!

The message “This site is in developer mode…” should probably appear in all tabs while disappearing if dismissed once.

In the Quick Entry form, the “Custom” checkbox could probably use a description, particularly in contrast to the “Custom” Module. But this could be a followup as well.

…field when it in on focus

ankush · 2023-10-31T16:31:00Z

Looking neat 👌

Few observations. Some unrelated to this change, just being pedantic because most used page for developers 😁

Bug: Backspace while editing some field property is deleting the field from form. IMO delete is better keybind for this and also shouldn't propagate if it's sent to some other input control.
Quick entry is really nice addition! It should have few more fields (because they are kinda necessary on first save):
- Is virtual (this can't be done after first save, very annoying to update boilerplate)
- Is tree - for discoverability

DocField needs one round of cleanup (again)
- Length should be integer type (or at least displayed as such). This isn't that important so can be moved in some later section.
- bold can be removed or moved to much later section. Kinda useless.
- options description can be dynamic based on type.

IMO creation of sections and columns is still kind of hard to understand for newbies 😅 maybe do some blind test with users who haven't used it yet. 😬 (or check posthog session recordings, if any.)

ankush · 2023-10-31T16:33:56Z

In the Quick Entry form, the “Custom” checkbox could probably use a description

Custom ? -> Custom DocType

… properties or label

shariquerik · 2023-10-31T18:45:29Z

Bug: Backspace while editing some field property is deleting the field from form. IMO delete is better keybind for this and also shouldn't propagate if it's sent to some other input control.

I knew about this and I was working on it. Now fixed👍🏻

DocField needs one round of cleanup (again)

Yeah, let's not do this in this PR. I will probably ask Ritvik to work on the Properties part. It needs sections and other cleanups.

IMO creation of sections and columns is still kind of hard to understand for newbies 😅 maybe do some blind test with users who haven't used it yet. 😬 (or check posthog session recordings, if any.)

If you see, sections/columns/fields have a + button in the action area and all do the same thing add a section/column/field.
Yes, for sections and columns, we have to click on it and then the action button appears showing it always also doesn't make sense and will look weird.
I think people will learn by using it 🙃. Or maybe we can get some feedback from Timeless.

(or check posthog session recordings, if any.)

let me know how and from where to access this. Will take a look

shariquerik · 2023-10-31T19:12:45Z

Custom ? -> Custom DocType

It is consistent with others, and it is also self-explanatory I don't think the description is needed 🤨

bosue · 2023-10-31T20:52:20Z

Custom ? -> Custom DocType

It is consistent with others, and it is also self-explanatory I don't think the description is needed 🤨

Consistent with… others? Mhm…

And what happens to make Custom DocTypes special?💁🏻‍♂️

No, really. For a seasoned Frappe developer this may be obvious, but for newcomers it isn't. Not even for newcomers in developer mode.

Especially given how lacking documentation still is, questions like:

Aren't all DocTypes created by myself "Custom DocTypes"?
Are DocTypes created via the UI "Custom DocTypes"?
Are DocTypes in the "Custom" module "Custom DocTypes"?

aren't stupid questions. Neither is mine... 🤷🏻‍♂️

Let's defer it to a followup though. This shouldn't distract from the huge improvements of your undertaking.

bosue · 2023-10-31T22:45:12Z

There‘s no longer the traditional field list below the form builder, so the scrolling limitations on touchscreens will be even more consequential than it used to be: it‘s simply no longer possible to configure fields below the viewport via the UI.

RPReplay_Final1698791403.mov

The form shouldn‘t be limited to an arbitrary viewport. All other Frappe pages work okay on touchscreens, so should this one…

shariquerik · 2023-11-01T08:10:36Z

Consistent with… others?

Other settings label e.g Is Submittable, Is Tree. Yeah, I agree they have descriptions.

No, really. For a seasoned Frappe developer this may be obvious, but for newcomers it isn't. Not even for newcomers in developer mode.

I agree, I think we can use the documentation link feature to redirect to the docs

Screen.Recording.2023-11-01.at.1.36.30.PM.mov

shariquerik · 2023-11-01T08:12:19Z

There‘s no longer the traditional field list below the form builder, so the scrolling limitations on touchscreens will be even more consequential than it used to be: it‘s simply no longer possible to configure fields below the viewport via the UI.

The form shouldn‘t be limited to an arbitrary viewport. All other Frappe pages work okay on touchscreens, so should this one…

I will try to figure out a solution for touchscreens

I am trying to remove the double scroll which is kind of annoying while working on form builder.

Edit: Fixed. To move fields long press (200ms) and drag

… affected

szufisher · 2023-11-01T09:14:53Z

please do not hide fields table, because it is handy to create many fields via excel copy paste via fields table!

if you need to add multiple fields by copy paste from excel

shariquerik added 8 commits October 30, 2023 12:23

fix: Create doctype through a dialog

65f62bb

chore: made form tab as a first tab in doctype form

8b5dfff

chore: hide fields table

3407a99

feat: added on_tab_change event on form to run logic on tab change

0e0f38b

fix: if Form tab is active hide comments & form message

8ca4501

fix: changed form builder layout - sidebar is on right

2a04a89

Also remove double scrollbar

fix: sidebar resizer

5971e96

fix: open new doctype dailog on /new-doctype-1

2799700

shariquerik requested a review from a team as a code owner October 30, 2023 08:52

shariquerik requested review from surajshetty3416 and removed request for a team October 30, 2023 08:52

shariquerik marked this pull request as draft October 30, 2023 08:53

shariquerik added 7 commits October 30, 2023 15:24

fix: removed FieldTypes from sidebar

0c8e6aa

refactor: remove/add tab

afc3bab

fix: absolute remove tab button

ac39377

also reduced tab header height

fix: minor fix

244b2cb

chore: cleanup

a28c8e9

fix: add new field using + button on field

bdbb11f

fix: add new field btn in empty column

5f8887d

also created AddFieldButton component

shariquerik marked this pull request as ready for review October 30, 2023 19:08

shariquerik added 6 commits October 31, 2023 01:39

fix: teleport dropdown outside to handle clipping

6a62631

chore: hide tab actions in preview mode

8956bbd

chore: hide fields table in customize form

441e115

chore: add a boilerplate section on creating new doctype

787515b

chore: Only show add section button if there is no tabs

c31161a

fix: delete passed tab not current tab

55a5716

surajshetty3416 changed the title ~~refactor: Form Builder UI in DocType form~~ refactor: Improve Form Builder UX Oct 31, 2023

surajshetty3416 requested changes Oct 31, 2023

View reviewed changes

fix: minor fixes

0e397d6

shariquerik added 4 commits October 31, 2023 12:33

chore: spacing

c45306e

chore: do not focus on label if form builder is loaded

58bf248

chore: added bg color to form-container

747cd8c

chore: show add tab button always

456cdae

shariquerik added 4 commits October 31, 2023 20:28

feat: created autocomplete component to control options with up/down key

d95b3b6

feat: ctrl+shift+n to add new field & delete/backspace to delete the …

ca2152d

…field when it in on focus

fix: click on + button to add field and press enter tab will be deleted

4955a90

fix: delete/backspace to delete tab/section/column if selected

afdfc5c

fix: do not delete tab/section/colum/field if pressing delete to edit…

2117403

… properties or label

fix: added is_tree & virtual doctype checkbox in new doctype dialog

2522d6b

shariquerik closed this Nov 1, 2023

shariquerik reopened this Nov 1, 2023

fix: added delay in draggable for touch devices scrolling will not be…

0cf6eac

… affected

shariquerik added 2 commits November 1, 2023 16:49

chore: keep fields table in settings tab at last

0bfe196

if you need to add multiple fields by copy paste from excel

test: fixed failing form builder UI test

a32f34a

shariquerik added the backport version-15-hotfix Backport the PR to v15 label Nov 1, 2023

fix: was not able to remove unselected tab

aa0e72d

shariquerik merged commit 45236a9 into frappe:develop Nov 1, 2023
21 of 25 checks passed

mergify bot mentioned this pull request Nov 1, 2023

refactor: Improve Form Builder UX (backport #22968) #23058

Merged

github-actions bot locked as resolved and limited conversation to collaborators Nov 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Improve Form Builder UX #22968

refactor: Improve Form Builder UX #22968

shariquerik commented Oct 30, 2023 •

edited by mayanknahata007

codecov bot commented Oct 30, 2023 •

edited

surajshetty3416 left a comment •

edited by shariquerik

bosue commented Oct 31, 2023

ankush commented Oct 31, 2023 •

edited by shariquerik

ankush commented Oct 31, 2023 •

edited

shariquerik commented Oct 31, 2023 •

edited

shariquerik commented Oct 31, 2023 •

edited

bosue commented Oct 31, 2023 •

edited

bosue commented Oct 31, 2023

shariquerik commented Nov 1, 2023

shariquerik commented Nov 1, 2023 •

edited

szufisher commented Nov 1, 2023

refactor: Improve Form Builder UX #22968

refactor: Improve Form Builder UX #22968

Conversation

shariquerik commented Oct 30, 2023 • edited by mayanknahata007

codecov bot commented Oct 30, 2023 • edited

Codecov Report

surajshetty3416 left a comment • edited by shariquerik

Choose a reason for hiding this comment

bosue commented Oct 31, 2023

ankush commented Oct 31, 2023 • edited by shariquerik

ankush commented Oct 31, 2023 • edited

shariquerik commented Oct 31, 2023 • edited

shariquerik commented Oct 31, 2023 • edited

bosue commented Oct 31, 2023 • edited

bosue commented Oct 31, 2023

shariquerik commented Nov 1, 2023

shariquerik commented Nov 1, 2023 • edited

szufisher commented Nov 1, 2023

shariquerik commented Oct 30, 2023 •

edited by mayanknahata007

codecov bot commented Oct 30, 2023 •

edited

surajshetty3416 left a comment •

edited by shariquerik

ankush commented Oct 31, 2023 •

edited by shariquerik

ankush commented Oct 31, 2023 •

edited

shariquerik commented Oct 31, 2023 •

edited

shariquerik commented Oct 31, 2023 •

edited

bosue commented Oct 31, 2023 •

edited

shariquerik commented Nov 1, 2023 •

edited