Controls represent predefined HTML structures that can be added to a Page. They are highly customisable, accessible, and reusable. They range from a Panel Control, which represents a <div>
HTML element, to a Table Control that can display multiple columns of data arranged into navigable Table Pages.
![](https://downloads.verj.io/verjio/resourceHub/media/images/tutorials/basics/verjioBasics/controlBasics/formEditor.png)
Controls reside in a Palette and are positioned on a Page by dragging them to either the Page’s Outline or WYSIWYG View in the Form Editor. Any number of Controls can be added to a Page and the same type of Control can be added multiple times.
Container, Landmark Container, and the Bootstrap Controls accept child Controls and position them on the page according to their Layout type Property. These layouts cover the most common patterns for positioning child Controls, including an option to let the browser position them. Custom layouts can also be created to further refine the structure of a Page.
Controls have a different set of properties depending on their type, and can be configured in the Properties View. There are several properties common to all Controls, including the hidden property, which prevents the Control from being written out to the browser, and the Class property that adds classes to the Control’s HTML class attribute. Properties are also dynamically configurable through the JavaScript API controls
interface. For example, to hide a Panel Control named loginPanel in a beforePage event script, you could use the following code:
![](https://downloads.verj.io/verjio/resourceHub/media/images/tutorials/basics/verjioBasics/controlBasics/hideControlScript.png)
Some Controls can generate server-side Events, such as a Button Control’s On Click Event which is triggered when a user clicks the button in their browser. Controls have an Events section in their Properties View to which scripts can be added. When the Event is triggered the added scripts are executed in order on the Server.
![](https://downloads.verj.io/verjio/resourceHub/media/images/tutorials/basics/verjioBasics/controlBasics/controlEventsProperties.png)
Right-clicking on the Control in the WYSIWYG and Outline Views and selecting
Events also opens its server-side events dialog.
![](https://downloads.verj.io/verjio/resourceHub/media/images/tutorials/basics/verjioBasics/controlBasics/controlEventsDialog.png)
Client-side events can be added to Controls in the HTML Element Properties dialog, opened by clicking its property button in the Properties View, or by selecting
HTML Element Properties in the Control's context menu.
![](https://downloads.verj.io/verjio/resourceHub/media/images/tutorials/basics/verjioBasics/controlBasics/htmlELementPropertiesDialog.png)
Here HTML and jQuery event handers can be associated with the Control and are executed by the browser when triggered.