Configure Screen Objects
To configure Objects on a Screen, you need to activate Design mode.
While in Design mode you can:
- Select an Object and access its additional properties from the contextual right panel. This option is common to all Screen Objects.
It is also possible to select multiple Objects and then apply a common property (for example, you can select two or more buttons and define their background color at once).The formatting and graphic customization properties are located in the contextual right panel.
If multiple Screen Objects are selected in the Screen design area, the contextual right panel will show options common to those Objects. - Edit an existing Layout of an Object. To do so, select the Object and click the "Configure layout" button () located in the Top Menu of the Capsules workspace. (only for Objects that are defined by a Layout).
- Click the "Configure me" button (only for Objects that are defined by a Layout)
Options common to all Screen Objects
Each Objects has its own specific settings and configuration options. However, all Objects share the following set of common features and properties, located in the contextual right panel of the Screen design page in Design mode:
- Comments. The configuration of a custom tooltip and an annotation field specific to that Object. Those information will be visible in Play mode
- Font. Font configuration: text font family, font size and color
- Colors. The Object's elements color or background image configuration
- Border. The Object's border style configuration
- Position and size. The configuration of the Object's position on the Screen, its size and a rotation angle
- Graphic effect. The Object's transparency configuration. In Play mode, the Object will appear opaque until you hover over it.
Move an Object
Screen Objects can be moved or resized by clicking on an Object and moving or resizing its borders.
To move an Object, select it so its shape is outlined with a light blue trait. Next hover your mouse pointer over the dotted line, click and drag the object in the desired position.
Do not hover the mouse pointer over the handles of the bounding box, as those handles are used to resize the Object.
This action can be performed simultaneously on multiple Screen Objects: learn ho to select multiple Objects.
Resize an Object
To resize the area of an Object, select it so its current area is outlined with a light blue trait. Next hover your mouse pointer over the resize handles (the little blue squares along the binding box), click and drag to enlarge or reduce the area of the Object at will.
Some Objects will automatically resize to match their area, while others won't (for example, the Data View). In the latter case, scrolling bars will appear.
Copy and Paste Objects
Copying and pasting Objects allows you to save time, for example, when you need to create Screens that use the same Objects but display different data, or when you want to preserve graphic customizations throughout your Screens.
To copy an Object, select it and click "Copy object" in the Top Menu of the Capsules workspace. A notification message will inform you that the Object has been copied to the clipboard.
To paste an Object, click "Paste object" in the Top Menu of the Capsules workspace. You can paste the Object in the same Screen or in other Screens, even if they're not in the same Capsule.
These actions can be performed simultaneously on multiple Screen Objects: learn how to select multiple Objects.
Copy and Paste Objects formats
Copying and pasting Objects formats is a fast and easy way to apply custom properties and graphic styles to other Objects in the same Screen or in other Screens.
To copy an Object format, select it and click "Copy format" in the Top Menu of the Capsules workspace. A notification message will inform you that the format has been copied to the clipboard.
To paste an Object format, click "Paste format" in the Top Menu of the Capsules workspace. You can paste the Object format in the same Screen or in other Screens, even if they're not in the same Capsule.
This action will paste only properties and formats common to all target Screen Objects.
The "Paste format" action can be performed simultaneously on multiple Screen Objects: learn how to select multiple Objects.
Align and order Objects
if you have several Objects on a Screen, it may be difficult and time consuming to get them perfectly aligned.
Board offers several alignment presets that allow you to easily arrange and position Objects.
To align Objects, select them and choose one of the six alignment options from the Top Menu of the Capsules workspace.
In addition to aligning Objects, Board gives you the ability to arrange stacked Objects in a specific order. The ordering is important when two or more Objects overlap because it will determine which Objects are in the front or the back.
To order Objects, select them and choose "Bring to front" or "Send to back" from the Top Menu of the Capsules workspace.
You can review the Objects order from the "Screen Objects in the active Screen" sub-page in the left panel of the Capsules workspace.
The align and order actions can be performed simultaneously on multiple Screen Objects: learn how to select multiple Objects in the next paragraph.
Multiple selection
You can select multiple Objects to configure them at once. You can do so in three ways:
- Hold the Ctrl key down while clicking the desired Objects
- Click and drag a rectangle around the Objects you want to select
- From the tabbed menu in the left panel, access the "Screen Objects in the active Screen" sub-page. Next, hold the Ctrl key down while clicking the desired Objects.
The name of the selected Objects will turn blue and a blue vertical line will appear to their left.