Form Designer

 

 

The Form designer is a visual tool for building Codeless Platform web applications. It utilizes drag & drop, wizards, helpers, property configuration windows, HTML and CSS editors and other helpful tools to create fully functional web forms without any coding.

Form designer automatically generates HTML but you can also write custom HTML when needed. With integrated HTML and CSS editors you are able to create an application form just the way you want it.

In addition to HTML that represents Detail view of your form, you have tools to create the following types of view:

 

• Grid view – a collection of rows represented as grid or hierarchy as tree grid.

• Gallery/Card view – a collection of HTML fragments known as cards

• Checker view – two-dimensional structure with checkboxes

 

Form designers will give you a real-time preview even before you save your form.

Every form built with Form designer is responsive by default as it’s using Bootstrap CSS.

 

Note that you don’t have to use Bootstrap, you can define your own HTML templates that can use for example Flexbox.

You can combine rows, tabs, accordions as you wish and build parent-child forms with any complexity.

Form designer supports reorderable tables, hierarchies, custom toolbars, paging, sorting, filtering and many other features to build beautiful, responsive professional forms in record time.

 

Workspace

 

 

Form designer consists of the main canvas shown below in the middle of the screen with two sidebars:

 

 

Form views

 

 

On the left side, Form views are listed. In Codeless Platform, each form can have more views (parts of the form) where the main view that shows as default is named “Main”. More views can be very useful in situations where we want to handle views dynamically i.e. in code we can decide which view will be shown on a certain place, when conditions are met.

In the following example we have two views “Main” and the “Popup” view.

 

If we click on “Popup”, the canvas will render the “Popup” view. In the following image the “Popup” view is selected.

You can delete this view by clicking on a small trash can icon or edit the properties of this view by clicking on the pencil icon.

 

 

When clicked on edit, a dialogue will show to edit name and description of this view:

If clicking on the box with + below the listed views, a new dialogue will open to add a new view. You can enter your name and description and decide if this view will use a custom layout or not. The custom layout means that you will write HTML instead of auto-generating it by the Platform.

 

Note: All views except “Main” can be deleted.

 

Related forms

 

On the right side we have the list of Related forms.

A related form is the child form that can be embedded in the parent view. Child form’s entity does not need to be defined as a relation in the Model (as an O2M relation), it could be any form.

If we click on the name of the related form, the Form designer will open that form. If we click on the box with + below the form names, the dialogue for creating a related form will show.

 

 

Adding related forms will be explained later in this document.

 

Heading

 

 

In the heading part of Form Designer we have general information of selected form and several command buttons:

 

 

 

On the top line there is general information about Meta form: name, description, entity, application, resource path and information if this form is startable.

 

Entity:

 

The name of Entity (JPA class) of this Meta form.

 

Application:

 

The name of the Application that this Meta form belong to.

 

Resource path:

 

If we want to use resources (images) of some other form, all links will point to a new location.

In Codeless Platform each Meta form has its own location for resources. For example let’s imagine that we have a form: Pet and that we have already used this form to create new pets. As Pet form has an image field, images will be stored on the disk location for form Pet. When we decide to create a new version of the Pet form and we name this form NewPet, the location for resources will be bound to the location of NewPet. It means that the new form will not “see” existing pet’s images. If we want to use existing images of the Pet form we can enter: “PetClinic/Pet'' as a Resources path in NewPet form. The first part is the application name followed by name of the form which resources we want to use.

 

Startable:

 

Startable if equal to “Yes” means that this form is intended to be started from the application menu. Usually, child forms like VetSpecialties will have Startable = “No” and “master” form like Vet (that have child VetSpecialties) will have Startable = “Yes”.

On the second there are:

 

Commander: With standard actions to Add, Update, Delete, Save or Cancel

 

On the right side of standard command buttons there are additional Actions:

 

Next to that, we have several commands:

 

	Grid view
	Gallery view
	Checker view
	Form configuration
	Preview
	Security
	Form synchronization

 

Next to that is a tool for translation:

 

 

The translation tool allows us to translate any label that is surrounded with brackets: { }

The text that can be translated on the form is form labels, enumeration text values, form header etc.

Form designer will automatically detect any text item that should be translated.

 

Creating New Form

 

When we open Form designer and click Add button the following dialogue will be shown:

 

 

All fields are previously explained or self-explanatory except the Configuration template.

Configuration template has currently two values:

 

Form

 

The standard application form has Detail view as default view and Default commander as commander.

 

Checker

 

Special form for Checker view that has Checker view as default view and CheckerCommander as commander.

When we enter all mandatory fields and click Add, a new Form and Main view will be created. In the canvas area there will be a + sign that will be a starting point for designing our form.

As we are starting with the Main view that should contain containers and not fields, when we click + sign we will get the following wizard dialogue that will offer us to add several types of containers:

 

 

The row option will give us six predefined styles of columns and the possibility to enter columns manually.

The sum of numbers should be less than or equal to 12. You can read more about Bootstrap's 12 columns grid here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Tabs, Accordion and Responsive container have the following options:

 

Note: Responsive container is Tab container on bigger screens, and Accordion on smaller screens. It is fully responsive and the change is done dynamically as you can see if you resize your desktop browser window.

If we add Row with column template 4 + 8, our form canvas will look like the following:

 

 

 

 

 

Adding content

 

Notice how different areas of the form change the colour when we mouse over that area:

• This is the main view area (blue colour)

 

Note that this is a type of view that can contain only containers (Row, Tabs, Accordion etc.) and not fields. Each type of view has different configurations. For this particular view type we can add new containers, reorder or delete existing ones.

• This is a row area (light grey)

If we click on this area, we will see the name of the area, and the option to configure it or delete it:

 

Note that this is a container that can contain only panels (Columns, Tab sheets, Accordion panels etc.) and not fields. Each type of container has different configurations. For this particular container (row) we can add only new columns.

• This is column area with + sign (grey)
  
  

 

If we click on this area, as it has + sign new dialogue will show for adding fields, containers or related forms.

If we mouse over this area now, it will paint fields view (light blue colour)

 

If we click on this area, we will see the name of an area, and the option to configure it or delete it:

 

Note that this is a type of view that can contain only fields not containers or forms. Each type of view has different configurations. For this particular view type (column) we can add new fields, container or related form:

 

If we click configure button (cogs icon) on a view, we will see the following options:

 

We can delete rows that are currently on the view by clicking on the trash can, or we can add new containers by clicking on + sign. If we click on + we will see add container screen:

 

Now we can reorder our containers if we want:

 

 

  

 When we click update, our form will look like the following:

 

Now we can continue and click on any + sign and we will be presented with options to fields, containers or forms. Let's add form this time by clicking + inside the First tab sheet:

 

Our form will now look like the following:

 

If we now mouse over and click the area around child form (light blue) we will get an option to configure it or delete it:

 

If we click configure we will get a dialogue where we can configure our form:

 

 

 

 If we click on some field on the form, it will be selected and like with all other items we can configure the field or delete it:

When you click configure, you will get a Property Window that will show all properties of the selected field:

 Updating content

 

The Form can have three types of views:

1. Container view – View on which you can add only containers like Rows, Tabs, Accordions or Responsive tabs

2. Field view – View that accepts only fields

3. Form view – View where you can store related Form

 

Updating container view:

 

You can add, delete or reorder containers.

Updating fields view:

 

You can delete or remove fields. You can also edit the name (if it’s not the Entity field) and description.

Adding fields has three options:

 

 

 

 

Entity fields option is to add Entity (JPA) properties (fields and O2O/O2M relations):

Meta field option will allow adding any meta field that does not have to map to Entity field:

 

And Custom field will allow you to add a custom field:

 

 

Updating forms view:

 

You can change any property of the existing form or add any other instead.

 

 Updating containers

  

Row:

 

You can change the column template by clicking on one of the predefined templates or type formula directly on the Row template field. You can create more columns or less and drag and drop their positions.

 

Tab and Responsive:

 

You can rename tab sheets, add new or delete existing ones. You can also change an order by drag and drop.

 

Accordion:

 

You can rename accordion panels, add new or delete existing ones. You can also change an order by drag and drop.

 

Grid view

 

Grid view administrator is a tool for creating a collection of rows where each row is the form's entity instance.

Grid view administrator will be available when we click on the button “Grid view”:

 

Grid view has the following features:

• Add or remove columns by clicking on the button “Columns”

• Clear column widths by clicking on the button “Clear width”

• Setting columns reorderable, resizeable and hideable

• Setting grid header visible or not

• Setting frozen columns

• Add renderer for any column or delete an existing one

• Renderer HTML editor

• Loading the renderer template and creating a new template.

Grid view administrator gives you a live preview all the time.

 

Gallery view

 

Gallery view administrator is a tool for creating a collection of so-called cards where each card is the form's entity instance.

Gallery view administrator will be available when we click on the button “Gallery view”:

We can visually see if some form has gallery view or not by looking at the icon that represents the Gallery view command:

 

 

	Form does not have a gallery view
	Form does have gallery view

 

Gallery view has the following features:

• Setting the number of columns (1, 2, 3, 4, 6 or 12)

• HTML and CSS editor of the card.

• Loading HTML from a template or creating a new template.

• Setting actions for mapped buttons

The gallery view administrator gives you a live preview all the time.

When we click the “Load” button, the template chooser will show on the screen:

 

If we select for example “Pet simple gallery” our gallery will look like the following:

 

Let’s change a number of columns to 6 and hide the editor:

 

Let’s now edit HTML by adding one button like this:

 

The important thing to note here is location = “visits” that will allow us to replace the HTML button with our Button field. If we select the “Actions” tab:

if we click on + sign Gallery administrator will automatically recognise that we have the button “visits” and it will offer to add it as an action button:

 

After clicking +

 

Now we will add Event that will open form Visits:

 

 Customizing data in HTML template

 

 

{propertyName}

The mapping of property values is done with curly brackets. When you want to use relations, type . (dot)

Example for form with entity Employee:

 

{firstName}	employees first name
{jobPosition.name}	employees job position name

 

{IMAGE_PATH [:resourcePath]}

 

{IMAGE_PATH}	form resource path
{IMAGE_PATH:resourcePath}	custom resource path

 

Example for form with entity Pet:

 

<img src="{IMAGE_PATH}/{imageField}" />

<img src="{IMAGE_PATH:PetClinic/NewPet}/{imageField}" />

 

{TEXT:code}

TEXT:code translated (code) text.

 

Example for form with entity Pet:

<div>{TEXT:NAME}</div>

 

{FORMAT:format|propertyName}

format Date/Time/DateTime:

FULL,

LONG,

MEDIUM,

SHORT,

Pattern of DateTimeFormatter

 

format Decimal/Double:

FORMAT_NUMBER_DEFAULT,

FORMAT_NUMBER_INTEGER,

FORMAT_NUMBER_CURRENCY,

FORMAT_NUMBER_DECIMAL,

FORMAT_NUMBER_PERCENT,

FORMAT_NUMBER_SCIENTIFIC

 

Example for form with entity Pet:

<div>{FORMAT:SHORT|birthDate}</div>

 

Checker view

 

Checker view administrator is a tool for creating an associative table with checkboxes that will associate two entities.

Checker view administrator will be available when we click on the button “Checker view”:

We can visually see if some form has a checker view or not by looking at the icon that represents the Checker view command:

 

	Form does not have a checker view
	Form does have checker view

 

We will explain this type of view on a concrete example:

 

From the diagram above we can see that UserLoginSecurityRole is an associative class.

Checker view for UserLoginSecurityRole looks like this:

 

Row dimension is userLogin, and column dimension is securityRole. If we switch them it will look like this:

 

For a checker view it does not matter what is row or column, the end result is the same. Let's switch again like in the first example and fill in row renderer HTML.

 

The resulting form when started from the application menu:

 

Form configurations

 

Form configuration consists of several parts. You can access them by moving your mouse on top of the visual representation of a virtual form.

 

  General settings

 

 

Controller

 

In most cases the controller will be a “BaseController” wich is a standard controller that is used by all other forms that don't have their own custom controller.

Other standard controllers are listed below with their description:

 

If you want to use a custom controller you can select one of the existing or you can create a new one:

 

When you click + sign, a new dialog will open to configure a new controller:

 

When you save the form, a new source controller will be generated for you:

 

@Controller
public class MyNewController extends MyNewAbstractController {

}

 

Business class

 

Business class is a Java class that you can write for business logic that will hook into persistence actions and execute custom code in the same transaction with persistence action. It means that if anything fails in custom code, the transaction will be rolled back.

In order to use business class, we need to create a Java class that implements ICustomPersistentActions:

 

public class MyNewBusinessLogic implements ICustomPersistentActions {

    @Override
    public DataTransferMap fetch(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

    @Override
    public DataTransferMap add(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

    @Override
    public DataTransferMap update(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

    @Override
    public DataTransferMap delete(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

    @Override
    public DataTransferMap save(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

    @Override
    public DataTransferMap commit(DataTransferMap doc) throws DataTransferException {
        return doc;
    }

}

 

After that we need to register for this class in the “Business class” form. You can find this form in System application, on path Configuration > Business class

 

Now we can select our business class in General settings:

 

 

View type

Initial view type when you open form from an application menu: Detail, Grid, Gallery or Checker.

 

Master filter

Filter that we write as HQL condition of base statement that executes on fetch operation.

For example if we write the following for form Pet:

petType.name = 'horse' or petType.name = 'dog'

then we will be able to see only horses or dogs.

Note that end users can not clear this filter, it will be always applied on each fetch operation.

 

Additional properties

 

Codeless Platform will always fetch only the minimum data that you need to operate with. It means that you will get all the properties you can see, but sometimes you need something else that you are not able to see on the form. In such cases, you can fill “Additional properties” and the platform will fetch those properties as well. Properties should be separated with ‘;’ and if you want to fetch all properties of some relation you can write relationName.(*)

For example if we write:

name;description;type.(*)

then fetch will in addition return: name and description of base entity and all properties of relation: type.

 

Parameters

Custom parameters that will be available to the controller of the form. You can access this parameter in method onConstructed():

 

String parameters = getMetaForm().getFormConfiguration().getParameters();

 

Form caption configuration

 

 

Check “Has header ?” if you want the header of the form to be displayed. Available styles are SIMPLE and TAG. SIMPLE style is only a text that will be displayed, and style TAG will look like this:

 

From the image above: User Lazar is selected, and one of his roles: ADMIN.

We can click on any blue text or an image of the user.

If we click on “User” that means we would like to see the list of users and header navigation will change to:

 

 

 If we click on the image, it means we would like to see the details of the user, going back to the level “User” from level “Roles”. Header navigation will change to:

 

 

< will select the previous user and > will select next user.

If we click on the button Roles on the following:

 

then header navigation will become:

 

We will see the list of security roles for Lazar. If we go to detailed view of the ADMIN role, our header navigation will become:

 

In our dialogue, we can set text for detail, grid or gallery view caption text. If this text is surrounded with { } we can translate code that is between brackets by clicking on the button Translate.

 

In this example SOME_TEXT is code that can be translated.

When we click Translate, the platform will know that this code needs translation:

 

If we enter the text “Some text” and save the changes, our dialogue will look like this:

 

 

 

Search configuration

 

 

Search configuration will allow you to make your form searchable or not. We can also define details like if it’s allowed to add new filters, remove existing ones and define the list of filters that will show on form startup.

 

Fetch configuration

 

In fetch configuration we can set the form pageable or not. To define if we want to show or hide navigation (“one by one” if there is no paging).

We can also define if we want to have commands to switch to detail, grid or gallery view. “Fetch ?” when selected means form will auto-fetch data on startup or not.

 

 

Commands configuration

 

In commands configuration we can decide if we want to have a commander or not. We can choose the type of commander from the list. If the value for the commander is left empty, the default one will be used.

We can also add custom commands (buttons and popup buttons).

Let’s see an example:

In Meta Form designer we have several commands like previously explained so let's see again how this looks like:

Custom commands from the above image are ‘Grid view’, ‘Gallery view’ etc.

 

Let’s open form: MetaForm and see how this command buttons are defined:

For each button you can set an icon, text, tooltip etc and the most important property Event:

 

When you click the button GRID, in controller code, the following method will be automatically called:

 

@Override
protected void onEventGRID(EventData event) {

}

 

Note that this can work only if you define a custom controller. When you save the form, your class will tell you that you have to implement this method.

 

 

Sort configuration

 

In Sort configuration you can set the default sort field and sort direction.

 

Hierarchy configuration

 

You can make your hierarchy (TreeGrid will show instead of Grid). The only thing you need to fill in is the name of the hierarchy parent property name. You can check Hierarchy “auto expand ?” option if you want all nodes to be expanded when you start a form.

Note that your controller must support hierarchy, you can choose a standard “HierarchyController” or make your own that extends it.

 

Editing configuration

In this configuration you can set your form to be reorderable (by rows) where you set the name of the property that will save the index of reordering.

Note that your controller must support reordering, you can choose a standard “ReordableController” or make your own that extends it.

 

Field connections

 

If you defined a custom controller and want to access fields you can do that by clicking on the main toolbar icon:

 

Popup will show you all fields on the form, you can check ones that you would like to access in your controller:

 

When you save your form, you will be able to access form fields in the custom controller’s method onConstructed() the following way:

 

@Controller
public class MyNewController extends MyNewAbstractController {

    @Override
    public void onConstructed() {
        super.onConstructed();
    
        IStringField field = thisForm.MainView.nameField;
        field.setVisible(false);
    }
}

 

When you start typing thisForm and type “.“ your IDE will automatically show view names like this:

 

When selecting MainView and press “.“ you will have the list of view’s fields:

 

thisForm is a structure defined in MyNewAbstractController that is auto-generated.