Detail View

Important notice

From version 2020/10 on we recommend using the following syntax for getting a detail view handle:

Recommended

// get handle to AppGini Detail View
// recommended syntax since version 2020/10
var dv = AppGiniHelper.DV;
// your code here

You can use AppGiniHelper.DV multiple times in different files, as this is a singleton now.

Deprecated

// get handle to AppGini Detail View
// deprecated since version 2020/10
var dv = new AppGiniDetailView();
// your code here

The previous syntax lead to some cross effects when customers initialized a detail view instance more than once for example in multiple files (once in header-extras.php AND again in TABLENAME-dv.js). The deprecated syntax will still work, so you don't have to update your scripts. But we recommend using the new syntax instead.

Detail View Features

Activate custom tab

Conditionally activate a certain custom tab by code

Read more ...

Activate child tab

Activate one of the existing child tabs (bottom of the dv page) in Detail View

Read more ...

Hide columns in child-tab

Hide columns of children-tab tables by code in Detail View

Read more ...

Fade in/fade out custom tabs

The fade-functions allow fading out or fading in custom tabs in Detail View

Read more ...

Hide / Show custom tabs

Conditionally hide or show custom tabs in Detail View

Read more ...

Size input fields

Adjust the width of input fields for example for (short) numbers

Read more ...

Set Title (Detail View)

Change the title (header) of a Detail View

Read more ...

Action Buttons

Add additional Action Buttons at the right hand side of Detail View

Read more ...

Collapsible Panels

Group fields in panels which can be expanded/collapsed and auto-save their state

Read more ...

Multi-Column Layout

Split Detail View into columns and customize fields and field order per column

Read more ...

(Custom) Tabs

Create custom tabs with text and icon and move fields inside the tabl panels

Read more ...

Units / Append or Prepend

Prepend or append text and/or icon to input fields

Read more ...

Compact Layout

The compact()-method combines several actions for optimizing usage of the available screen-size

Read more ...

Inline Fields

Move fields into a single row in Detail View

Read more ...

Hide Fields

Hide fields in Detail View by code

Read more ...

Fade-in fields / Fade-out fields

Conditionally fade in or fade out fields by code

Read more ...

Placeholders

Add hints or help text to input fields

Read more ...

Insert Elements

Insert elements before or after fields in Detail View by code

Read more ...

Labels

Hide or change field labels in Detail View

Read more ...

Date Picker

Attempt to replace the standard date picker

Read more ...

Date Range Picker

Attempt to combine two datepickers into a date-rangepicker

Read more ...

Beautify lookups (dropdowns)

An attempt to fix gaps and height of buttons next to lookup fields and change icon and/or text

Read more ...

Modify default lookup buttons (dropdown buttons)

Change icon, text or style of buttons next to lookup fields in Detail View

Read more ...

Additional buttons for lookups (dropdowns)

Add buttons underneath lookup fields in Detail View

Read more ...