Screen Controls

Screen Controls offer a diverse range of UI elements used to build your application's screens. These controls encompass buttons, input fields, drop-down menus, lists, images, multimedia, and more, providing an extensive array of options to create engaging and dynamic user interfaces.

The ComUnity Development Toolkit allows seamless customisation of the behaviour and appearance of these controls, enabling developers to match them precisely to the unique requirements of their applications. When you add a screen control to a screen and correctly configure and save its properties, the Toolkit's underlying engine parses your screen control definition and renders it as a specific user interface (UI) component on the client side.

Supported UI components include lists, images, forms, text, and other interactive elements, allowing for a versatile and tailor-made user experience.

By leveraging the capabilities of Screen Controls, developers can create interactive and user-friendly interfaces that elevate the usability and appeal of their applications. This level of flexibility and functionality empowers development teams to deliver exceptional user experiences and align their applications with specific design objectives.

Supported Screen Controls

Type	Screen Control	Action
Form	Button	Performs a database operation on the Page entity (i.e. GET, POST, etc.)
	Auto Inputs	Adds all the entity properties to the Page
	Form Buttons	Adds multiple Action buttons to a Page (i.e. Edit, Delete, etc.)
	Input	Adds a single input control (i.e. text box, drop-down, etc.)
	Reference Input	A specialised drop-down control that allows more control on how the values are retrieved from the database (i.e. a database query can be used to retrieve the values for the drop-down)
Content	Block Template	A specialised list that sets up auto-refreshing (long polling) of the list values.
	Paragraph	Adds text to a page in the Markdown format.
	Image	Adds an image to a page.
Layout	List	Adds a placeholder
List Types	List	Shows items as a standard list.
	Grid	Shows items as a grid
	Map	Map Shows items as a markers in a map view (each item must have a Latitude and Longitude value)
	Tab	Shows the items as tabs at the top of the Form
	Pie	Shows items as a pie chart (requires item value to be a JSON document)
	Bar	Shows items as a bar chart (requires item value to be a JSON document) Main Menu
List Items	Entity	Adds multiple list items created from the records contained in a database entity
	Single	Adds a single list item that can be templated with data values from the Page’s context
	Static	Adds a single list item

Adding Screen Controls to a Screen

The process of adding Screen Controls into your project involves adding them to selected Screens or even to other selected Screen Controls. Some Screen Controls even allow you to embed additional Screen Controls within them, as is the case with Lists.

To seamlessly integrate Screen Controls, follow these simple steps:

1. Select the Screen or relevant Screen Control: Begin by choosing the Screen where you intend to add the Screen Control, or select an existing Screen Control that will host the new addition. This selection serves as the foundation for the placement.

2. Choose the Screen Control: Access the Screen Control panel and select the desired Screen Control for your project. Depending on your choice, this can be a direct addition or an embedded Screen Control within another.

3. Drag and Drop Placement: With your Screen Control selected, use the drag and drop functionality. Hover the control over the chosen area on the screen. As you do so, visual cues like dashed green lines will help identify suitable positions.

4. Visual Confirmation: When you hover over a valid placement, a green solid line will appear, indicating that the Screen Control can be dropped in that spot. If satisfied with the placement, release the control to add it to your screen.

5. Customise and Position: Once added, the Screen Control will find its place within your page or within the designated Screen Control. You can easily reposition it as needed for optimal layout. Additionally, take advantage of customisation options to tailor the appearance and behaviour to your requirements.

Add a Screen Control to a Screen

After successfully adding the Screen Controls, the screen will load, allowing you to visualise the integration within the layout. To further refine the behaviour and appearance of these added controls, you can delve into their properties configuration.

To configure the properties of a Screen Control, simply follow these steps:

1. Select the Control: After the screen loads, you can click on the specific Screen Control that you wish to configure. This selection triggers the display of its properties.

2. Access the Properties Panel: Once the control is selected, its relevant properties will appear within the Properties panel. This panel is designed to provide you with a comprehensive overview of the available settings.

3. Configuration Process: Proceed to configure the properties according to your project's requirements. You can fine-tune various aspects, such as appearance, behaviour, and interaction functionalities.

By customising these properties, you ensure that each Screen Control aligns precisely with your desired user experience. To apply these customisations, you should click Save button positioned at the bottom of the Properties Panel. The Properties panel offers a user-friendly interface to facilitate this customisation, allowing you to create a tailored and cohesive interface for your project.

Removing a Screen Control

When the need arises to remove a Screen Control from your layout, the process is straightforward and seamless.

Follow these steps to achieve the removal:

1. Select the Control Begin by selecting the Screen Control that you wish to remove from your layout. Click on it to prepare for the removal action.

2. Drag to Remove Once the control is selected, initiate the removal process by dragging it towards the Screen Controls panel. As you do so, keep an eye out for the appearance of a trash can icon within the Screen Controls panel itself.

3. Delete with a Drop As you approach the Screen Controls panel with the control, the trash can icon becomes prominent, signifying the deletion capability. Once the control is positioned above the trash can icon, you can confidently release the control to drop it. This action will prompt the immediate removal of the selected Screen Control.

By following these steps, you can efficiently remove unwanted Screen Controls from your layout, ensuring that your interface remains precisely tailored to your project's evolving needs.

Drag & Drop to Delete Screen Controls

Standard Screen Controls

Standard screen controls are those that are available in both navigation and form pages. They are the most basic and commonly used screen controls, and include the following:

• Image: This control allows you to display an image on a screen.

• Paragraph: This control allows you to display text on a screen.

• List: This control allows you to display a list of items on a screen and to creating more complex screen layouts and interactions.

In this section, we will discuss these standard screen controls in detail. We will cover their properties, how to use them, how they can be customised to match the specific needs of your application. and some best practices for using them effectively.

Image

Incorporating images into your screen design is a key aspect of creating visually engaging interfaces. When adding an image to a screen, you initially place a system-generated placeholder image, as depicted below. However, through the configuration of your image digest, this placeholder can be effortlessly replaced with your desired image.

Properties of an Image

• Name This property displays the system-generated name of the image.

• Image Digest Allows you to seamlessly drop or upload an image from your local computer or preferred source.

• Digest Preview Offers a convenient preview feature, allowing you to visualise the added image before finalising its placement.

By leveraging these properties, you can effortlessly introduce and customise images within your screen, enhancing the visual appeal and engagement of your user interface.

Paragraph

Markdown can be used to add text content to screens.

Properties of a Paragraph

• Name This property displays the system-generated name of the paragraph.

• Content This feature presents a text editor designed specifically for adding content using Markdown formatting. A subset of Markdown it supported when adding text content to screens. The table below gives an overview of the supported elements:

Element	Support
Heading Level 1	#
Heading Level 2	##
Heading Level 3	###
Heading Level 4	####
Heading Level 5	#####
Heading Level 6	######
Paragraph	Blank line to separate one or more lines of text.
Line Breaks	End a line with two or more spaces plus newline
Bold	**bold**
Italic	_italic_
Bullet List	- List Item 1 - List Item 2
Link	[link](https://example.com)
Image	

List

Lists can play a variety of roles in an application's architecture, depending on their position in the hierarchy and how they are configured. They can be used to display data, navigate between pages, or even create complex layouts. To fully understand the function Lists, refer to the Building Screens/Overview section. For practical implementations and detailed insights, explore the following sections:

• Dynamic List Rendering in a Navigation Page

• Page Link

• Implementing Sub-Screens Using Lists

• Static Lists

• Rendering Data from Entity Associations in Form Pages

Properties of a Paragraph

The Properties and Screen controls of a List depend on the screen type of the page in which it is contained, for more details view Navigation/Lists or Form/Lists sections.