Form Designer

m-Power templates do a lot to make beautiful web applications right "out of the box". To compliment this, many developers take these aesthetics further by restructuring the page to maximize screen sizes real estate as well as page flow efficiency. However, restructuring the page layout typically requires going into the HTML source code. Often times this is a daunting task for the average m-Power developer. The Form Layout Designer removes the necessity to code in order to restructure your single record pages. A few key features of the Form Designer is the ability to reorder your fields by drag-and-drop, creating multiple columns to place fields, utilizing bootstrap card panels, and to change the orientation of the field's label placement.

Note: The Form Designer is only supported in Bootstrap themed dictionaries.

Enabling the Form Designer

Clicking the 'Layout' button from the ribbon menu allows the developer to enter the Form Designer by selecting 'Form Layout'. Once inside the Form Designer, only Form Layout functions can be used. The m-Painter ribbon menu is disabled until you click the 'Apply Layout' or 'Exit Layout Mode' buttons to leave the Form Designer.

Note: You must save m-Painter after applying your new layout.

Form Designer

Form Row Layout

Clicking the 'Clear Layout' button on the right-side action menu will give the developer a clean canvas to work with. Using the Fields drill down on the left-side control menu, simply drag and drop the fields to the desired row.

Form Designer23 class=

Insert new rows above or below the currently selected row as needed by clicking the green plus icon on the top or bottom border line.

Form Designer2

Split rows into equal columns using the 'Split' button to the right of the row. Delete a split column by clicking the 'Delete' button to the right of the row. If there are no split columns and only the row is present, clicking the 'Delete' button will delete that row.

Form Designer4

Panel Layout

Panel Layout1

Panel Layout2

With the Form Layout screen, developers have the ability to organize their input fields into card panels. Click the 'Insert Layout Panel' on the right-side action menu.
Panel Layout3

To insert another panel to the side of the existing, click the 'Split' button on the 'Panel Title' row.
Panel Layout4

To insert a card panel above/below the existing panel, click the green plus icon on the top/bottom border of the 'Panel Title' row.
Panel Layout5

Note: You may change the text of the Panel Title once you apply the layout and are back in m-Painter proper.

Orientation

New templates default the form vertically where the label is above the input.

orientation1

Changing the orientation to horizontal will move the form label to the left of the input.

orientation2

Form Settings

Using a bootstrap template gives us access to the innate bootstrap responsive logic. With the 'Form Setting's section, you are able to control with width of the form over different device screens. Further information about bootstrap responsiveness can be found here.

form-settings

Other Notes

  • You must save m-Painter after applying your new layout in order to see the change at runtime.
  • The Form Layout screen allows you to design the layout of your form. Any other HTML changes need to be performed in the main m-Painter screen.

Created: May 16, 2018 | Modified: May 29, 2018