Detail View

Action Buttons

Please note that, for technical reasons, the AppGini built-in option "Keep action buttons visible when scrolling down" will not be available when using additional links or buttons. Grouping buttons Additional Action Buttons will be placed at the right hand side below the default Action Buttons (Save, ..., Cancel, Copy). For technical reasons all additional action buttons have to...

Read more ...

Collapsible Panels

Group fields in panels The Javascript code for grouping fields is quite simple. // file: hooks/patients-dv.js  var dv = new AppGiniDetailView(); dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]); dv.addGroup("grp_more", "More", ["genetic_diseases", "other_details"]); Shorter code variant // file: hooks/patients-dv.js  new AppGiniDetailView() .addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]) .addGroup("grp_more", "More", ["genetic_diseases", "other_details"]); The status (expanded/collpased) will be stored automatically if...

Read more ...

Compact Layout

The compact()-method combines several actions to make the most of the available workspace Code // file: hooks/patients-dv.js new AppGiniDetailView().compact(true, false, true); Comparison More Images Extra space for form fields Extra space for tabs Extra space at the top ...by moving the children-buttons into the tabs' toolbars.

Read more ...

Date Picker

DefaultModifiedPrerequisitesSyntaxExample Default Date Picker By default, date pickers will be rendered as a combination of three select boxes + one button: Single Field Date Picker If you want a single field date picker instead, you can turn any datetime field into a dropdown datepicker now. Attention This will work on datetime fields only, not on...

Read more ...

Date Range Picker

ModifiedPrerequisitesSyntaxExample 2 Linked Date Pickers = 1 DateRange Picker If you want a single field date picker instead, you can turn any datetime field into a dropdown datepicker now. Attention Please read the documentation for DatePicker first. You will need two fields for this. It will work on datetime fields only, not on date fields....

Read more ...

Hide Fields

Hide single field // file: hooks/patients-dv.js new AppGiniField("id").hide(); Pass the fieldname as string. Hide multiple fields // file: hooks/patients-dv.js new AppGiniFields(["id", "last_name", "first_name"]).hide(); Pass an array of fieldnames.

Read more ...

Inline Fields

It has been requested many times: inline fields. Sometimes it makes sense to move related fields into a single line, for example for name-fields (like fist-name + last-name) or for address-fields (like postal code + city). Please note that the original labels have become placeholders automatically. Examples // syntax: // new AppGiniFields( fieldname[] ).inline( label, width[] ); //...

Read more ...

Insert Elements

Since 2019/10 You can now insert certain elements like headlines, paragraphs or alerts before or after any field or above or below the row. Example new AppGiniField("birth_date") .insertAbove() .h1("Heading 1", "page-header") Position before/after or above/below There are four diffent places: .insertAbove() inserts the new element above the row,.insertBelow() below the row .insertBefore() inserts the new...

Read more ...

Labels

Hide Label // file: hooks/patients-dv.js new AppGiniField("name_patient").hideLabel(); Change Label // file: hooks/patients-dv.js new AppGiniField("image").label("Picture");

Read more ...

Multi-Column Layout

Syntax new AppGiniLayout( [ column_1_width, column_2_width, ... ] ) .add( column_index_1, ["fieldname_1", "fieldname_2", ...]) .add( column_index_2, ["fieldname_3", "fieldname_4", ...]); Argument column_index starts at 1. Example new AppGiniLayout([8, 4]) .add(1, ["last_name", "first_name"]) .add(2, ["image", "gender"]); Creates a new row with two columns. Column #1 will have a width of 8 (which means 8/12 ~= 67%), and column #2 will have a...

Read more ...

Placeholders

Placeholders Placeholders, those gray helptexts inside input fields, can give additional help. new AppGiniField("tiny_uint") .placeholder("0...255");

Read more ...

Set Title (Detail View)

Plain text title // file: hooks/patients-dv.js var dv = new AppGiniDetailView(); dv.setTitle("My Custom Title"); Html formatted title // file: hooks/patients-dv.js // create your custom title var title = "<b>PAN-TAO</b>, <u>Petra-Christine</u> Catharina"; var dv = new AppGiniDetailView(); dv.setTitleHtml(title); Tipps TippYou can change the title dynamically at runtime, for example whenever a field changes, update the title.

Read more ...

Tabs

Create custom tabs and move fields inside: Syntax // file: hooks/TABLENAME-dv.js // get an instance of AppGiniDetailView var dv = new AppGiniDetailView(); // create tab var tab = dv.addTab( "name", "title", "icon" ); // add single field: tab.add( "field1" ); // add multiple fields (array of fieldnames): tab.add( ["field1", "field2", "field3"] ); // add a...

Read more ...

Units / Append or Prepend

Add-ons Prepend (Glyph-) icon and/or text before and/or after any input* field. * This does not work for fieldtypes like textarea, date, radiobutton etc., only for input. // file: hooks/patients-dv.js new AppGiniField("weight") .prependIcon("download-alt") .append("kg"); new AppGiniField("height") .prependIcon("resize-vertical") .append("cm"); // file: hooks/patients-dv.js new AppGiniField("weight") .prepend("in kg", "download-alt");  new AppGiniField("height") .append("cm","resize-vertical"); Units (alias for append) This is only...

Read more ...