Customization can help you tailor Method to the unique way you get your work done. Create your own apps using our drag-and-drop tools.
While Method employs a talented and dedicated team of Business Solutions Specialists who can help you customize your Method apps, our articles are designed to help you learn how to do it on your own.
đ Note: Customization should be done on a desktop screen. Customization should not be done on mobile.
Builder UI Basics
When you first a customize a new screen, your page will look like the below image.
1 | Exit | the Builder. |
2 | Version status |
|
3 | Screen dropdown | Navigate to a different Screen in the app. See Screen Management below. |
4 | Viewport preview | See Responsive Behaviour below. |
5 | Visibility toggle | Toggle between revealing hidden components or keeping them hidden. |
6 | Add UI Elements | Toggle the Component Palette. |
7 | Screen Management | See Screen Management below. |
When building screens, you will drag components onto the Canvas. When you select a compont, you can edit its properties in the Properties Panel.
Screen Management
The dropdown at the top, and the screens icon on the left allows you to jump between screens to edit them.
Clicking the Advanced Settings icon (
), will take you to the Screens page for the app, where you can manage screens and their versions.
Component Palette
The Component Palette allows you add components to the Canvas.
For more information on components, please see "Components: Overview".
Responsive Behavior
Screens are built to be inherently responsive: when you resize the screen, the screen will automatically format its layout to properly display.
At the top of the screen is the toggle for the viewport:
Desktop - 1200 px / 12-column grid
Tablet - 768 px / 8-column grid
Mobile - 375 px / 4-column grid
Any drag/resize/visibility change you make for each state of the toggle will be saved for that state. i.e. If you switch to the mobile view and resize the button, the desktop view will retain the original size.
Layout & Sizing Rules
There are some rules when it comes to the layout of components on the screen.
Containers cannot contain other containers: Single-level nesting only.
Components have minimum and default sizes:
For example: Text input component defaults to 3 columns by 4 rows. The minimum it can be is 2 columns x 4 rows.
Screen properties panel
The screen itself has its own properties and can be accessed in the Properties Panel by clicking on a blank section of the canvas.
Table: the table the screen is bound to. Usually referred to as the Base table.
Configuration
Default control focus: which component receives focus when the screen loads.
App ribbon: Enable an App Ribbon for the screen.
None | 1/3 | 2/3.
Styles:
Background color: White | Fog.
Events:
Focus - screen gains focus
Active Record Change - The screen active record changes. e.g. From its default of
-1to anything else.
Screen functions: named sets of actions that belong to the screen rather than to a component. Run them from any event on the screen with the Call routine action. See "Screen functions".
Version note: Internal notes a customizer can use to indicate changes to the screen. Saved on every auto-save.
Save, publish, and versioning
Auto-save: There is no manual Save button. Every change (drag, resize, property edit, action change) schedules a save 500 ms later.
Publishing and Versioning: Accessible via the Screen Management tool by clicking the Advanced Settings button.
Read-only states: Published and Archived screens cannot be edited; the editor blocks changes and shows a Read-only warning if you try.