Thew View of any Form Model is where the visible magic actually happens. It is the place where the visual components of a form are placed, styled, configured, setup, linked to Controller Actions and more.
The View Tab consists of two basic areas:
- The View Editor: the container of anything that the end user will be able to see and act on
- The Toolbox: the list of all available components that you can use and setup to be available in your Form
This section will shed a bit of light on the available components that can be used in any Form Model. For extensive information, please read the UI → Controls Section.
|Controls Group||Description||More Info||-|
|Container||These components contain containers for other components. For example, a Layout is nothing but a responsive div. A Modal is a floating window that may contain components of even whole pages.||Click here|
|Input||The Input section contains all those components that can be used to alter the Data of your form (i.e. Textboxes, TextAreas, Date and Time Pickers etc.||Click here|
|Form||Contains form components such as Labels, Buttons, Images, Icons and more||Click here|
|Data||The Data section contains those components that can hold and present data that are much more complex than a simple
|Other||Anything that does not hold Data but is really helpful to allow you to reach a tailor-made View is stored in the Other tab. Whenever you need to style your View with some lines or spaces or need more powerful containers that can centralize your Views or extend zAppDev's capabilities to the maximum, you can select and use some of these components||Click here|
|Templates||The Templates are pre-defined forms that you can just drag, drop, bind to your Data and then use without the need to design anything from scratch||-|
To use any of the Components available in the Toolbox, simple drag one and drop it onto the View Editor. The View Editor will help you with the positioning of your component by showing you colored borders so that:
- A Green box shows you where the component will be enclosed (which will be its parent, or container if you will)
- A Blue line (vertical or horizontal) shows where will the component be positioned in comparison to another component (above, below, left or right)
For example, as seen in the following image, a Button will be added inside (green box) a Layout Cell, just at the right side (blue vertical line) of the TextBox
In the next example, a Progress Bar is being added inside a Fieldset Container, just above a Layout.
There are three different type of Form Models you can create:
|Master||A Master Page can help you create a consistent look and feel for your pages (either all, or a group of them). Think of it as a Template for your Normal Pages||At least one Master Page must be present in your Application|
|Normal||A Normal Page is the Page displaying your actual content. It can use the Controller Actions and Model Properties or its Master Page, while providing data, operations and controls to the User regarding more specific tasks||A Normal Page must have a Master Page assigned to it|
|Partial||A Partial Page is simply a container of Form Operations (components, actions, logic, datasets) that can be embedded in any other type of Page. Think of it as a "centralized", reusable container providing all the functionality a Normal Page can provide, but working only inside other Pages||A Partial Page cannot have any Master Pages assigned to it|
To define the Type of your created Form Model:
- Select the Form component by
- either clicking on the largest, farthest space of the View Editor
- or selecting the "Form" breadcrumb of the View Editor navigation panel
After selecting the Form container, you will be able to preview your Form's Properties under the Properties Tab at the right-hand side of the Editor
You can use the Type DropDown to change the Type of your opened Form Model.
In the case of a Normal Page, you can select the Master Page that this Page should use as its Template
In the Properties Grid, you will see two options:
- Create a JS file for this form...
- Add existing...
JS Script for Form¶
On Form Loaded ( as soon as your Form is loaded. For more info, see this )
formExtend(). For more info, see this )
JS Scripts from Resources¶