When you customize any screen, you will be taken to the Design Mode for that screen. This article will outline the layout for Design Mode.
NOTE: If the screen is live and published, the screen will be in Read-only mode at first. For more information, see our article on Screen Versions.
Main menu
There are several options available to you in the main menu section.
Preview: The toggle button will allow you to preview changes you make to your screen without having to save it first. However, the preview is just for show — no data will populate and you won’t be able to use any of the buttons or other functionality.
Preview size: This lets you specify how you’d like to preview your screen - do you want to see how it would look on a tablet? How about a smartphone? Or a full-sized PC monitor? This is only available in preview mode.
Undo and Redo: This button lets you undo things you’ve done to your screen (adding, removing, moving controls and sections around, actions and more) and also revert an undo (redo).
Close: This will close the Design Mode of your screen, so make sure you’ve saved your changes before you click this. A prompt will come up asking you if you want to save changes assuming there are changes to save.
Save: This will save the changes you’ve made to the design of your screen. When you make changes to your design, this button will become blue in color to indicate there are unsaved changes or remain grey if there are no changes to be saved.
Canvas
The main area of the Design Mode is called the Canvas, and much like its artistic counterpart, it’s where you will design and build your screen.
The big space located directly below the main menu, the Canvas, is where you drag and drop the Controls (including containers, objects, and fields) that will make up the form and functionality of your screen.
In the above image, there are two containers (SectionNav and SectionMain) and there is one object (Text object with a caption of "Back").
We’ll talk more about Controls in a minute, but for now, think of the Canvas as the great blank page where Method lets you build the design and customize the screen that works for you.
Properties
The Properties panel, located on the right, is made up of three tabs:
Insert Controls: List all the containers, objects, and fields you can drag into the canvas.
Edit Control: When a control is selected, this pane will show the properties of the control to configure.
Screen Properties: The properties for the screen where you can change the screen name, the default control focus, actions and events for the screen, and versioning.
Pin: Minimize and maximize the properties panel.
In the following articles, we will look at each of these property tabs in detail.