< Back
You are here:
Print

4.1.01 Elements

Posted
Last Updated On
Byadmin

A form contains a list of elements. It is important to understand what an element is, and how you can use them.

Form with elements.

In the above form there are different elements.

  • 1 and 4: checkbox element
  • 2: dropdown element with a label
  • 3: text element with a label
  • 5: text element without label

For each element you can define if there is a label, on which line it must be shown, in which column and how much columns the width has to be.

Elements can be hidden, so they won’t appear on the form, but the data they contain can be used. It is also possible to use hidden elements to put new data in. This will be explained later in the documentation.

In a responsive design elements can be re-arranged when you scale the size of the window. BOA will take care of that. You need to take this into account when you setup your screens. Since we are working with Bootstrap, a screen-block is always devided in 12 columns. If you have two element on one row, it is not a good idea to use a width of 5 and 7. The total is 12, but when you resize, they will both be changed to 6. It is always the best to use values as: 1,2,3,4,6,8,9,10 or 12.

Styles:

You can use styles for each element. This way you can change the look of each element. With styles you define the appearance of the element as color, font, size.

  • color:blue;
  • font-family:verdana;
  • font-size:160%;
  • text-align:center;

Sample: style: {color: “blue”, font-size: “160%”, text-transform: “uppercase”}

Pipe:

With the pipe tag, you can define uppercase, lowercase and titlecase. This is an easy replacement of the pattern. With pipe you can define if the input must be in uppercase, lowercase or each word starting with uppercase.

There is a difference for the uppercase in the style and the pipe. With pipe the text is really converted to uppercase, with the style it is shown as uppercase, but not converted.

Table of Contents