Skip to content

Inline Fields

Allows us to place several fields in a line next to the label.

Code

1
2
3
4
// file: hooks/TABLENAME-dv.js
// syntax:
var dv = AppGiniHelper.dv;
dv.getFields(["field1", "field2"]).inline( label, width[] );

Examples

Example 1: Automatic sizing of column widths

1
2
3
4
5
// file: hooks/TABLENAME-dv.js
// simple example
// automatic sizing
var dv = AppGiniHelper.dv;
dv.getFields(["last_name", "first_name"]).inline("Name");

Example 2: Defining column widths explicitly

1
2
3
4
// file: hooks/TABLENAME-dv.js
// example with explicit sizing
var dv = AppGiniHelper.dv;
dv.getFields(["last_name", "first_name"]).inline("Name", [6, 6]);

Variant with better readability for beginners

1
2
3
4
5
6
7
// file: hooks/TABLENAME-dv.js
// long example
var fieldnames = ["last_name", "first_name"];
var widths = [6, 6];
var label = "Name";
var dv = AppGiniHelper.dv;
dv.getFields(fieldnames).inline(label, widths);

Sizing (column widths)

Automatic sizing

The inline()-function tries to calculate the width of both fields as good as possible. In this case we have two fields and both will be sized to 50%.

In the next example there are 5 fields. Because of the 12-column grid-system we cannot just calculate the width as 5 / 12. So the algorithm decides for different sizes:

Custom sizes

If you wish different sizes, you can just pass an array of integers and give the widths you need. As we are using Bootstrap’s 12-column grid system, you can mix widths from 1 to 12. Let’s see some more examples:

2 fields / custom widths [8, 4] (67% / 33%)

1
2
var dv = AppGiniHelper.dv;
dv.getFields(["last_name", "first_name"]).inline("Name", [8, 4]);

2 fields / custom width [3, 9] (25% / 75%)

1
2
3
// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.dv;
dv.getFields(["last_name", "first_name"]).inline("Name", [3, 9]);

More fields

You can even add more fields. The new inline() function will group them together and give them a label. As mentioned before you can mix column widths from 1-12.

Attention

The number of fields has to be the same as the number of widths. Watch the console output for warnings.

Tipps

Due to the default styling of lookup controls in AppGini there may be issues with vertical-alignment as shown here:

You can remove the top-padding using JQuery... 

1
$j(".form-control-static").css("padding", 0);

...or css

1
.form-control-static { padding: 0; }

You may have a look at the following article for additional tipps and information: Optimize layout of detail views by using tabs and inlining

See also