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.
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.
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.
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.
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.
Note: You may change the text of the Panel Title once you apply the layout and are back in m-Painter proper.
New templates default the form vertically where the label is above the input.
Changing the orientation to horizontal will move the form label to the left of the input.
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.
- 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.