mrc logo mrc logo
  • m-Power m-Power
    What is m-Power?
    Overview Demos Build Process Case Studies Specs Pricing Trial
    m-Power Resources
    Overview How-To Videos Webinars & Podcasts White Papers Fact Sheets
  • Solutions Solutions
    What does m-Power build?
    Overview Database Front-Ends Reporting CRM Systems Business Intelligence Dashboards Inventory Management Mobile Apps ERP Enhancements Modernization Spreadsheets to the web MS Access to the web B2B/Web Portals Scheduling Embedded Analytics Web Forms Workflow Data Exploration Budgeting & Forecasting APIs and Web Services Db2 Web Query Alternative
    Solutions by Industry
    Overview Manufacturing Government Foodservice Software Vendors Logistics & Supply Chain Software Consultants Healthcare
  • Services Services
    Development Services Training Mentoring
  • About About
    Overview Partners Press Releases Careers Events Contact Blog
  • Support Support
    Support Home FAQ Documentation Customer Portal Enhancements Updates Roadmap Techblog
Try m-Power

m-Power Manual

Browse:

  • Home
  • Bootstrap Templates
  • Form Layout
Back to Manual

Form Designer

Click here to view the current version of this documentation.

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: November 27, 2023

Search


Browse By Category

Build Process (13)
Starting with m-Power (8)
Retrievals (10)
Reports (15)
Summaries (4)
Maintainers (17)
Graphs (8)
m-Power Data Explorer (4)
General (24)
Calculations (5)
Utilities (9)
m-Power Administration (23)
Security (11)
Freemarker (6)
m-Painter (29)
Form Validation (5)
External Objects & UDFs (12)
Deprecated Documentation (23)
Bootstrap Templates (7)

Popular Tags

Reports Bootstrap Templates Calculations Summaries Form Validation Popular Retrieval Build Process DB2 Maintainers Compiling m-Painter Video Java Freemarker Tomcat Performance Maintainer Dropdowns Production Admin Graphs mrc-Productivity Series App Properties Application Properties Prompt Screens Report Record Selections Graph Properties Advanced External Objects RPG Getting Started Dates Graphing Administration Email Retrievals Excel SQL Parameters Security Data Dictionary Bar Graphs Database

See all tags »

michaels, ross & cole, ltd. (mrc)

Privacy Policy Cookie Policy Cookie Settings Notice at Collection Do Not Sell or Share My Personal Information

mrc (US)

2001 Midwest Road
Suite 310
Oak Brook, IL 60523
630-916-0662

mrc (UK)

Mortlake Business Centre
20 Mortlake High Street
London, SW14 8JN
+44-20-335-59566


© 2024 mrc. All rights reserved.