Detail View

Fade-in fields / Fade-out fields

Available since April 2020. Usecase Please note: In the screenrecording shown above we are using the fade-functions and also the new onChange-handler for dropdowns, which is BETA. Next month there will be another step-by-step example for the shown usecase in our blog section. Code Single fields // file:hooks/TABLENAME-dv.js new AppGiniField("fieldname").fadeOut(); // file:hooks/TABLENAME-dv.js new AppGiniField("fieldname").fadeIn(); //...

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. Syntax // file: hooks/TABLENAME-dv.js // syntax: // new AppGiniFields( fieldname[] ).inline( label,...

Read more ...

Tabs

New since 2020/04: setPosition function for tabs. By default, the tabs will be inserted above remaining fields. Now you can decide if you want to display tabs above or below remainig fields. See chapter "SetPosition" at the bottom of this page. Create custom tabs and move fields inside: Syntax // file: hooks/TABLENAME-dv.js // get an...

Read more ...

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 ...

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 ...

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 ...

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. See also Fade in fields / Fade out fields

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 ...

Placeholders

Placeholders Placeholders, those gray helptexts inside input fields, can give additional help. // file: TABLENAME-dv.js new AppGiniField("tiny_uint") .placeholder("0...255");

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 ...

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 ...

Beautify lookups (dropdowns)

Available since in April 2020. AttentionThere is a display bug with lookups in tabs which will be fixed in version July 2020 See also: modify default buttonscustom buttons for lookups Default dropdown style This is how dropdowns/lookups look by default. As you can see there is a gap between the buttons and the style of...

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 ...

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); Parameters and default valuesfor compact-method on: boolean = truebadges: boolean = truemovelinks: boolean = truealign: ButtonAlign = ButtonAlign.CenterButtonAlign.Left ButtonAlign.Center ButtonAlign .Right Comparison More Images Extra space for form fields Extra space for tabs Extra...

Read more ...

Modify default lookup buttons (dropdown buttons)

Available since April 2020. AttentionThere is a display bug with lookups in tabs which will be fixed in version July 2020 See also: Beautify default lookup buttonsAdd custom buttons Default dropdown style Modified dropdown style The next screenshot shows a modifed icon + text "Edit" for the view-button and an additional "user"-icon + text "New...

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 ...

Additional buttons for lookups (dropdowns)

Available since April 2020. See also: Beautify default lookup buttonsModify icon and text of default lookup buttons Default lookup By default and depending on settings and permissions AppGini renders two buttons next to lookup fields. With these you can open up the parent record or open up a form for creating a new record in...

Read more ...