Toolbox Tabs

The toolbox tabs are on the right-hand side of the screen designer which includes Elements tab, Properties tab, Layers Tab and the Tabs.

Elements Tab

It houses all of the available screen elements that you can add to your screen. You can drag any of the screen elements from the toolbox into the main canvas to add one to your screen. Since there are many options available, you can use the search bar at the top of the toolbox to find exactly what you’re looking for. Just start typing and the screen elements in the toolbox will automatically start filtering to match.

When you drag in a new element to the screen, the designer will automatically switch to the Properties Tab to start editing your new element. You can override this behavior by enabling the “Pin Tab” option near the bottom of the Toolbox, or by holding the “Control” key on the keyboard while dragging in new elements.

Design Canvas

This is the main central area where you can drag and drop screen elements to design your screen. Here you will see a visual representation of your screen as you’re building it. You can click on different elements of your screen to select them, which will allow you to change its properties in the next panel. Once a screen element is selected, it will be highlighted with a black border around it and a colored tag will appear at the top-left of the element, displaying its system name as well as an arrow up icon that can be clicked to select the screen element’s direct parent. Clicking and dragging on this tag allows you to move the screen element to another part of the screen, whether that be reordering things or putting it inside of another container.

Most screen elements are also resizable, so you’ll see resize handles on each of the corners and edges when selecting a screen element. You can click and drag on these handles to resize screen elements.

Some screen elements appear differently in the screen designer than they do when rendered on a finished screen, some examples being the Container and the Form. These screen elements need to be visible in the designer to be able to be clicked on to edit their properties, as well as to see where they are and how they affect the screen’s layout. You can use the “Toggle Preview” option in the “View” menu (or by using the keyboard shortcut Alt + 3) to toggle these extra borders in the screen designer, so that you can get a better visual indication of how a screen will look once it is deployed.

Menu Bar

The menu bar is where you can find some of the administrator-type functions of the screen designer. In the “File” menu, you can open a new screen or save your current one, as well as import a screen from a file. The “Edit” menu provides some common useful productivity tools, such as undo and copy/paste. The “View” menu has various options to display your screen in different formats to aid in designing your layout. The “Designer” menu provides options for testing your screen on the fly as you are designing it. The “Help” menu has quick links to documentation if you get stuck.

Properties Tab

The properties tab is on the right-hand side of the screen designer. It provides inputs for all of the various properties you can tweak for the screen element that you currently have selected in the design canvas. Any property you change will immediately be reflected in the design canvas as you go. Different screen elements will have different groups of properties available, with some of the same properties being available across multiple different screen elements. You can learn more about what each property does in the “Screen Elements” section.

1. Elements Tab
   
2. Menubar
   
3. Design Canvas
   
4. Properties Tab
   
5. Layers Tab
   

Screen Version Indicators

When working on an older version of a screen within the Screen Designer, users will notice a visual indicator positioned near the menu bar at the top left corner. Clicking this indicator allows the user to transition smoothly to the most recent version of the screen, ensuring access to the latest updates and features.

A similar approach is applied when working on a screen outside the Screen Designer. If there's a newer version available, an indicator will be shown in the bottom left corner of the footer. The display of screen version and deployed date is consistent across environments but varies slightly in detail. In the Build/QA environment, this information is always visible, keeping users informed about the screen's version and deployment status. In the Production environment, enabling field-level help will reveal this information, offering users helpful context and guidance directly on the screen.