Displays List DataGrid

Display List provides features for users to view and access multiple displays, supporting the organization of different displays and thus simplifying interface management.

Users can add, rename,  arrange, and remove displays, categorize them, and use features like sorting and filtering for efficient selection. 

Creating New Displays

You can create a display in two sections of the software: Displays/List and Displays/Draw. These interfaces enable the creation and management of new displays.

To create a display on List:

1. Navigate to Displays/List.
2. Click the button at the top to open the 'New Display' popup window.
3. Define the Name and Description of the display.
4. Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
5. Define the Panel Type for the display. This configuration item has two options: Canvas and Dashboard.
   The Canvas option allows for manual positioning and sizing of elements.
   The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments.
6. Optionally, choose a Template for the display. If you do not select a template, a blank page will be created by default.
7. Finally, press the OK button to finish the display creation and close the popup window.

To create a display on Draw:

1. Navigate to Displays/Draw.
2. Click the  button at the top to open the 'New Display' popup window.
3. Follow the same procedure as for Displays/List.

The Drawing the User Interface section of the Users covers the information about the drawing tools and CodeBehind editing. 

Displays List Key Fields

Engine

The Engine field will specify if the displays is intend for WPF, HTML5 or Portable. 

When selecting WPF or HTML5, the Drawing and CodeBehind, will compile to that specific platform only. This Field Column is editable. 

The Portable option allows the automatic conversion between WPF and HTML5 technologies. The user does not need to create two different kinds of screens for Windows and Web clients. Use the Portable option for the rendering engine to create the displays, and will automatically create them in both HTML5 and WPF.  It enables running on the web browser all the displays you created for Windows/WPF.

DisplayMode

The DIsplayMode is a ReadOnly column, in oder to modify it, you go to Draw, and change that in Properties Sidebar, under Displays Settings. 

Pages, Popups, and Dialogs are different display modes. They share some similarities, but each has a specific particular or behavior. They are commonly used in application development to build intuitive and dynamic user interfaces.

Page

A Page is a display that always remains open or opens, replacing the previous display, constituting an independent unit of information or functionality within an application. In summary, it is a screen that allows users to perform a specific action, in which access to the page is given from a navigation menu or through other links within the application.

Popup

A Popup is a window that overlays the main application window. It is triggered by an action, like clicking a button or link, or can appear automatically under certain conditions. Its purpose is to provide information or functionality without leaving the current page. It operates independently, with its border, but does not obstruct interaction with the underlying page.

There are two types of popups: modal and non-modal. A modal popup demands interaction before the User can return to the main application, pausing other activities. In contrast, a non-modal popup allows the User to continue interacting with the main application while the popup is open. These popups contain forms, menus, or other components designed to provide access to functions or information for only a short time.

Dialog

A Dialog is a small window that opens on top of all other displays and stays open, blocking the use of other displays until the User closes it. The dialog window appears on top of the main application window and requires user input before dismissal. Typically, it prompts users for confirmation or additional information before proceeding with an action. Dialogs can be modal, meaning the User cannot interact with the main application window until the dialog is closed.

On Resize options

The dropdown menu options specify the settings for resizing an image or element to fit a designated display area.

StretchFill

This option stretches the image to fill the display area, potentially altering its aspect ratio. Distortion can occur if the display area's proportions differ from the image's original aspect ratio.

StretchUniform

This option will scale the image to fit the display area while maintaining its aspect ratio. If the aspect ratios don't match, the image will be scaled until it touches the edges of the container from within, potentially leaving some space in the display area.

Responsive

This option allows the image or element to adjust its size in response to the size of the display area. It's less clear without specific context, but typically, 'responsive' means that the element will scale sensibly to different screen sizes, often maintaining its aspect ratio without distortion.

NoAction

This option displays the image in its original size, regardless of the display area's size, which might lead to cropping or overflow if the image is larger than the display area.

Display List Columns

The Properties References present a reference that describes and explains the properties for Lists on Displays Module. The table lists all properties available for the configuration item. However, not all properties described in the documentation are displayed in the data grids by default. Right-click column headers to see which property columns are currently displaying. The displayed properties appear with a check mark.

The data grids allow users to manage and organize information by showing or hiding properties in tables within configuration interfaces. Users can view and select properties via column headers, enable multiple selections, add or remove columns, or reset grid settings. These features are available in all configuration interfaces using a table for data management. To turn on or off showing a property on the data grid, right-click column headers to select properties or use the reset button to return to default settings. Check out Working with DataGrids for detailed info.

In this section: