There are two types of EJB DATA boxes: EJB DATA TABLE and EJB DATA FLOW.

EJB DATA TABLE allows a structured and high controlled design of the form.

EJB DATA FLOW contents and controls adapt to the size of the screen, that will be displayed sequentially. Recommended for use on mobile platforms.

On the EJB DATA boxes, those columns selected in main SQL statement (or returned by XSQL) can be represented using several UI controls.

A control element (sometimes called a control or widget) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application.

Each widget facilitates a specific type of user-computer interaction, and appears as a visible part of the application's GUI as defined by the theme and rendered by the rendering engine. The theme makes all widgets adhere to a unified aesthetic design and creates a sense of overall cohesion. Some widgets support interaction with the user, for example labels, buttons, and check boxes. Others act as containers that group the widgets added to them, for example windows, panels, and tabs.

As JDBC can not determine the table from resultset metadata, columns must be correctly mapped to it's table (or virtual table if it's an aggregate) by using wic_jrep_colout.

# 1 EJB DATA TABLE

The Table Layout Fields component is the way to view and modify database information, where the fields are placed in a table layout.

This component allows to define the custom layouts, implementing the styles and the colspan and rowspan properties for each cell of the table.

## 1.1 Layout

Main form area is organized as a table with rows and columns. The number of rows and columns is automatically determined from it's content.

When you define the main form layout, you are placing data column related components at a desired position. Positions should not overlap but system allows Z order layout to generate multiple tabs on a specific position.

You can see an example below about how an EJB Table layout is. You can find that table on a Data Base form.

## 1.2 Form sample

As it can be seen on the next image, EJB Table is composed by different columns that will be described following this picture.

# 2 EJB DATA FLOW

The Flow Fields component is the easiest way to view and modify database information. This component consists in a list of fields which will be displayed sequentially.

Depending on the component layout configuration, fields could be:

• Displayed vertically (Sample 1)
• Horizontally (Sample 2)
• Multiple columns (Sample 3)

In addition, when adding fields to the list, the field can be set as editable or not editable. According to data type, the column attributes and user privileges which the field displays could also be represented in several formats.

# 3 Labels

Labels refer to a type of widget which represents a short text used to describe another column.

Ref. Type Description UI
1 Label A label refers to a table column as defined in object output mappings
2 Empty label An empty label can be used to fill a layout hole with null
3 Event label An event label can be used to create a style cell of a label which its content is determined on the jsp through an event caption.

# 4 Field Input

Inputs refers to UI components that renders column values allowing input. Inputs can be of several types according nature of data (integer, float, date, time, ...)

Ref. Type Description UI
1 Char This field allows to introduce letters or numbers on the form where required value is shown. value can be from 1 to 128 characters. The generated field can be a writing or reading mode.
2 Smallint It accepts numeric values with an implied scale of zero.
3 Varchar This field allows to introduce letters, numbers or special characters on the form where required value is shown. value can be from 1 to 128 characters.
4 Decimal It accepts numeric values. You may define a precision and a scale in the data type declaration.
6 Input This type of field allows to choose an image from the site image gallery.
7 Integer It renders a "number" input field. This is a text field which is good at handling data that's in an integer form. The input number field looks like a text box, excepting that - if the user's browser supports HTML5 - it will have some extra front-end functionality.
8 Datetime The Field Input Datetime specifies a date and time input field, with no time zone.
9 Lvarchar This field allows to introduce letters, numbers or special characters on the form where required value is shown. value can be from 1 to 2048 characters.
11 Binary The binary input shows a link used in order to open a file. It is located on the text box of a form with the intention of introducing a new file or modifying the existing one.

Furthermore, with the attribute of a column you can set advanced types of field inputs. These are some examples:

Ref. Type Description UI
5 Multiple This field allows to see the value of a column as a series of independents values. The generated field can be a writing or reading mode.
• Adding a value on a list is done through Enter button.
• Deleting last value of the list is done by Backspace button.
• In order to delete an specific value of the list, is needed to select it and click on Delete button.
• It can be also replaced by an existent value by pressing on it and writing the new value. It can be confirmed by Enter button.
• If new value is already on the list, it won't be doubled.
• Intern value of the field, is related with separeted list by pipe character ( | ). For example "Value1|Value2|Value3".
10 Password It creates a text box of password type (when some values are introduced, it can't be seen its content). It's a writing or reading mode.

# 5 Field No Entry

You can use Field no Entry in order to display the value of a field. It is a read-only field but it is only emitted with hide out input. That means that field section will be on the form.

Ref. Type Description UI
1 No Entry It is used in order to visualize the field value. It is a read-only field but you can introduce a hide out input. That means that the field value will be on the form.
2 IMGSRC This type is used for only display columns, not input columns. They show an image which is not located on the table as the value of the column has the path to a local server image or a URL to an external image.
3 Gauge Progress Bar It creates a cell with a progress bar. It is a read-only field.
4 Label Element used in order to value the field related with another. It is used in order to show descriptions of other fields located on the form that vary dynamically when the master field is modified. It is a read-only field. For this type of column, on its definition is needed to inform the label field.
5 Image It is used in order to show an image stored in a field of the table. The image is shown and it is also introduced a text box on the form in order to insert a new file or modify the existing one. It is a read-write field.
6 Binary This type of field is used for blob field and it shows a link in order to open a file. It is placed on the text box of a form in order to introduce a new file or modify the existing one.It is a read-write field.

# 6 String

Strings refers to UI component that renders column values without allowing input, and may apply data conversion.

Ref. Type Description UI
1 Value It is used to represent a field value. It is a read-only field.
If there are links defined on the form, the links will establish by the browser.
2 Converted This type converts the field value according to the "include" associated with the column. It is a writing and reading mode field.
If there isn't an "include" associated with the column, the original field value will be shown.
Like in the previous type, if there are links defined on the form, the links will establish by the browser.
Also, if the field is in HTML format, it shows the result with necessary encoding in order to be represented by the browser.
3 Tooltip It creates a cell with a loupe icon. If you pass the mouse above it, the field value will be shown. It is only a reading value.