{"id":2634,"date":"2019-04-24T13:33:11","date_gmt":"2019-04-24T20:33:11","guid":{"rendered":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/easily-add-and-move-fields-and-controls-on-a-form-using-drag-drop-and-cut-paste\/"},"modified":"2025-06-11T08:04:24","modified_gmt":"2025-06-11T15:04:24","slug":"easily-add-and-move-fields-and-controls-on-a-form-using-drag-drop-and-cut-paste","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/easily-add-and-move-fields-and-controls-on-a-form-using-drag-drop-and-cut-paste\/","title":{"rendered":"Easily add and move fields and controls on a form using drag-drop and cut-paste"},"content":{"rendered":"

Makers can now easily add and move fields and controls, to the\u00a0exact location they want, directly on the form preview, and instantly see how the form will appear to end-users<\/strong>. Two new features added to the new form designer<\/a>:\u00a0drag-drop and cut-paste are making this possible<\/strong>.\u00a0Combined with the live WYSIWYG preview of the form, these new features provide\u00a0a big productivity boost when authoring forms<\/strong>.<\/p>\n

The classic form designer<\/strong> includes drag-drop support, but it often runs into issues impacting productivity<\/strong>. The drop targets<\/strong> are also thin lines making them hard to see as well as to drop elements quickly in place<\/strong>. The classic form designer also allows moving fields and controls using arrow keys but that translates to multiple clicks<\/strong> and suffers from inconsistent behavior across browsers<\/strong>.<\/p>\n

Our new WYSIWYG form designer<\/a><\/strong> includes\u00a0lots of productivity enhancing features and\u00a0addresses many problems faced by makers in the classic form designer. With the added support for\u00a0drag-drop and cut-paste, adding and moving fields and controls is quick, easy and intuitive<\/strong>. To add fields and controls<\/strong>, makers can drag<\/strong> them from the panes on the left and drop<\/strong> them on the form preview in the desired location<\/strong>. To move fields and controls<\/strong> already on the form, makers can drag-drop or cut-paste<\/strong> them from one location to another, while preserving updated property settings<\/strong>. The drop targets are also much bigger and clearly highlighted<\/strong> helping speed up the form authoring process.<\/p>\n

Makers can drag a field from the pane and drop it on the form preview in the exact location<\/strong> that they want. Drop targets appear before and after fields already on the form.<\/p>\n

\"Adding<\/p>\n

Makers can also drop fields in a section<\/strong> (empty white-space in the section). In this case the entire section will be highlighted, and the field will be added in the default location as determined by the section.<\/p>\n

\"Adding<\/p>\n

Makers can drag a section control from the pane and drop it on the form preview in the exact location<\/strong> that they want. Drop targets appear before and after sections already on the form.<\/p>\n

\"Adding<\/p>\n

Makers can also drop sections in a tab<\/strong> (empty white-space in the tab). In this case the entire tab will be highlighted, and the section will be added in the default location as determined by the tab.<\/p>\n

\"Adding<\/p>\n

Makers can drag a tab control from the pane and drop it on the form preview in the exact location<\/strong> that they want. Drop targets appear in the tab header area before and after tabs already on the form.<\/p>\n

\"Adding<\/p>\n

Makers can also drop tab controls on the left or right edge of the current tab<\/strong>. This will add the new tab before or after the current tab.<\/p>\n

\"Adding
\nHovering over a tab header when dragging a field or section changes the currently selected tab<\/strong>, allowing makers to add the field or section to a tab other than the one currently selected.<\/p>\n

\"Switching<\/p>\n

Makers can also move fields, sections and tabs that are already on the form using drag and drop<\/strong>.<\/p>\n

To move a field, click anywhere on the field and initiate the drag action<\/strong>.<\/p>\n

\"Moving<\/p>\n

To move a section, makers can click on the section label or empty white-space within the section and initiate the drag action<\/strong>.<\/p>\n

\"Moving<\/p>\n

To move a tab, makers can click on the tab header and initiate the drag action<\/strong>.<\/p>\n

\"Moving
\nMakers can also use cut-paste to move fields, sections and tabs<\/strong>.<\/p>\n