Please note that all changes including syntax and usage examples can be seen in changelog.txt which is part of your download.


Changelog and whole documentation is moving to another site.
Please update your bookmarks.

Bugfixes Work in Progress

New Features Work in Progress


Released July 29th, 2021

Detail View

  • NEW: hide labels programmatically
    dv.getFields(["field1", "field2", "..."]).hideLabels();
  • EXPERIMENTAL: lock <input/> (!) fields programmatically
    dv.getField("inputfield").lock(true) // true|false
    This function protects the field against overwriting and appends a button for unlocking the field.
    Limitation: This will only work in real <input/> fields, not on complex fields (like date-selectors or lookups).

Custom tabs

  • FIX: readonly (!) images will be moved into custom tabs correctly, now
  • NEW: add badge to children custom tab programmatically
    tab.addBadge(123); // number
    tab.addBadgeIf(condition, number); // condition: boolean, number: numeric

Children tabs

  • NEW: Re-Label children tab caption
    var tabs = dv.getChildrenTabs();
    var tab = tabs.get("tablename");
    var tab.label("New Tab Caption");
  • NEW: add buttons and links to child tab
  • NEW: remove default "open child in modal dialog" button in rows of a child tab
    dv.getChildrenTabs().get("tn", "cn").removeButtons();
  • NEW: change image size in children tab captions
  • EXPERIMENTAL: change order of children tabs programmatically
    dv.getChildrenTabs().sort( ["tablename1", "tablename2", "..."], true, true );
    (1) array of table names 
    (2) boolean: auto activate first tab 
    (3) boolean: auto hide tabs on load, then auto-show tabs after sorting
  • NEW: hide/show tabs programmatically
  • NEW: decrease padding (text-margin) in tab captions which so more tabs will fit into one row

Children links

  • NEW: hide toolbar containing links to child tables
  • NEW: remove horizontal line

Table View


  • NEW: change browser title (browser-tab caption)
    You can even pass a function for changing the title dynamically
    AppGiniHelper.common.setBrowserTitle(function(title) { return "new title"; });
  • NEW: Get logged in memberID on client side
    AppGiniHelper.getMemberID(function(memberID) { /* your function */ });
  • NEW: User translations (defined in language.php) on client side
    var text = AppGiniCommon.T["key"];
  • UPD: additional parameter for autoRedirect function
    By passing true the auto redirect function will also work if we have a referrer, for example when navigating between an unrestricted page and a restricted page, not only when opening up a new broser tab. For backward compatibility, the default value is false.

Login View

  • If we are in login page (see also AppGiniHelper.isLoginPage function) we can now remove some parts of the view:
    new AppGiniLoginView()

Helper functions


Released October 26, 2020

Detail View

Table View


  • NEW: Recommended way for getting a tv-handle
    This will replace the deprecated initialization var tv = new AppGiniTableView(); in the future
    • var tv = AppGiniHelper.TV;
  • NEW: Recommended way for getting a dv-handle
    This will replace the deprecated initialization var dv = new AppGiniDetailView(); in the future due to multiple initializations of AppGiniDetailView in different files
    • var dv = AppGiniHelper.DV;

Helper functions

Experimental features

The following features have been included in the library for testing purposes but are not supported. If they work for you, feel free to use them "as it".

  • NEW: navbar moved to the left hand side. This mimics a Sidebar (but isn't)
    • common.navbar.toLeft();
  • NEW: wrap label/field in detail view
    • dv.getField("fieldname").wrap(); // single field
    • dv.getFields(["fieldname1", "fieldname2"]).wrap(); // multiple fields (array)
    • dv.getFields("fieldname1,fieldname2").wrap(); // multiple fields (comma separated fieldlist)
    • Result
    • Notes:
      • There is a left-padding when wrapping readonly fields (static)
      • There may be conflicts with other functions changing the width of fields, for example with .inline function
  • NEW: Autofocus on page load. 
    Caution this one may not work in every browser and with every AppGini version
    • dv.getField("fieldname").autofocus();
  • NEW: Autoselect text in input fields on focus
    • dv.getField("fieldname").autoselect();
  • NEW: fix various number formats in input fields
    • dv.getField("fieldname").toNumber("de-DE", 2);
    • new AppGiniFields(["field1", "field2", "..."]).toNumber("de-DE", 2);
  • NEW Listen to checkbox-check in table view
    Note: does NOT support check all/uncheck all, yet
    • var tv = AppGiniHelper.TV;
      tv.onSelectionChanged(function (selection) { console.log(selection);  });


  • fix: modified .toLeft() function for optimized table view rendering
  • new: Invert navbar in User's Area
  • new: Remove all links from table view cells
    This may be useful in combination with addButtonOpen()
  • fix: adding file upload fields to tab if record is readonly
  • new: Insert div's and insert span's next to fields
    Same for: .insertAbove() | .insertBelow() | .insertBefore() | .insertAfter() | .insertPrepend() | .insertAppend()
  • new: var tabs = dv.getTabs(); shortcut function
  • new: dv.getTabs().setPosition(TabPosition.Top);
    position: TabPosition.Top | | "top"
    TabPosition.Bottom | TabPosition.bottom | "bottom"
  • new: (experimental) var id_field = new AppGiniDetailView().getField(fieldname);
    shortcut function for quickly getting field handles
  • new: new AppGiniDetailView().getChildrenLinks().removeIcons();
  • new: new AppGiniDetailView().getChildrenLinks().replaceIcons();
  • new: (experimental / BETA) new AppGiniDetailView().autoCompleteOff();
  • new: change login form
  • new: fade in / fade out fields
  • new: (unsupported, requires more testing and feedback) add keyboard shortcut function on allows to define keyboard shortcuts for focusing inputs
  • new: optimize screen-usage by widening table view
  • new: ready-callback now also available for AppGiniTableView:
  • new: new AppGiniTableView().addOpenButton() function as a shortcut for new AppGiniTableView().addButton
    This will add a button in the first column of table view which opens the record in detail view.
  • new: add icons to default lookup buttons
  • new: change icon of lookup buttons (view parent / add new parent)
  • new: (unsupported) onChange-Handler for lookup now additionally sends the fieldname to the callback
  • new: change design of buttons next to lookup dropdowns
  • new: design fix for image fields
  • fix: small change in .inline() function when number of widths if different to number of fields
  • new: (BETA) When following a link (eg from email) and you are not logged in, AppGini will redirect you to login page after 2 seconds. After logging in you will be redirected to index-page, not to the entry-page. This behaviour can be changed now
  • new: (BETA) TableView: Merge identical cells (in column)
  • new: (BETA) Tableview: Group rows
  • new: addLayout(…).add(…, [ "#Headline" ])
  • new: Automatically select text in quicksearch field for easy overwriting.
  • new: (UNSUPPORTED) AutoComplete off for quicksearch This may not work in all browsers.
  • fix: auto-showing formerly collapsed layout rows after being moved into tab
  • new: new AppGiniCommon().fix().navbar();
  • new: new AppGiniCommon().fix().dropdowns();


  • new (unsupported): turn top navbar to the left hand side (sidebar):
    new AppGiniCommon().navbar.fix().toLeft( {true|false} );
    true = also on homepage
    false = not on homepage (default)
  • new: Tabs in detail view:
    new AppGiniDetailView().addTab("tab-name", "Title", "icon")
    .add(["field1", "field2", "field3"]);
  • new: shortcut for (collapsible) layout-rows with variations:
    new AppGiniDevailView().addLayout(widths[], title, canCollapse, isCollapsed, variation);
  • new: Link-Buttons in table view:
    new AppGiniTableView().addLink("http://…", "icon", "text", Variation.default, "Confirmation prompt - Are you sure?");
  • new: Buttons in table view:
    new AppGiniTableVire().addButton(callback, "icon", "text", Variation.default);
  • new: get custom title of detail view.
    After (!) you have used new AppGiniDetailView().setTitle("…") once,
    you can use .getTitle() to get the text-value (without html-formatting)
    var title = new AppGiniDetailView().getTitle();
  • fix: .addGroup() name parameter / special characters will be replaced by "-"
  • new: get name of current table in table view
    var name = AppGiniTableView().getTableName();
  • new: get name of current table in detail view
    var name = AppGiniDetailView().getTableName();
  • new: fix some ui for image fields since 5.8
    new AppGiniField("imagefield").fix();
  • new: layout rows are expandable now with title:
    new AppGiniDetailView().addLayout([widths], "title", true|false, true|false, Variation.default)


  • new: tiny helper: get table name of field
    var table = new AppGiniField("first_name").getTable();
  • new: insert HTML elements above/below or before/after fields
    new AppGiniField("birth_date").insertAbove().alert("Attention", Variation.warning);
  • new: expandable/collapsible panels in detail view
    new AppGiniDetailView()
    .addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]);
  • new: replace navbar-icon by custom picture:
    new AppGiniCommon().setImage("");
  • new: Icons for ActionBarGroups
    .addGroup("title", "icon");
  • new: CSS-style for ActionBarGroups
    .addGroup("title", "icon", "css-classname");
  • new: Title of detail view form:
    .setTitle("New Title");
  • new: Title of detail view form:
    .setTitleHtml("<b>New Title</b>");
  • new: tiny helper: get the id of the current record
    var id = new AppGiniDetailView().getSelectedId();


  • new: inline fields
  • new: move link-buttons from top-right into the tabs (part of compact() function)
  • new: count number of records and show badges in tabs (part of compact() function)
  • new: placeholders: new AppGiniField(“tiny_uint”).placeholder(“0…255”);
  • new: AppGiniField(“…”).prepend(“text”, “iconname”);
  • new: AppGiniField(“…”).prependIcon(“name”);
  • new: AppGiniField(“…”).prepend(“text”);
  • new: AppGiniField(“…”).append(“text”, “iconname”);
  • new: AppGiniField(“…”).appendIcon(“name”);
  • new: AppGiniField(“…”).append(“text”);
  • fix: floating action buttons
  • new: dv / expand() method to widen children tabs
  • new: dv / compact() method to shrink buttons down and expand space for data
  • new: dv / hideText of action buttons
  • new: dv / change size of action buttons
  • new: dv / change width of action button container
  • fix: move radio buttons
  • fix: adjust width of richtext (html) areas
  • new resizeLabels()
  • new: wrapLabels()
  • dv: links below action buttons
  • dv: buttons (executing javascript functions) below action buttons
  • dv: variations for links and buttons
  • navbar: invert navbar
  • navbar: align and fix Admin-area
  • navbar: align and fix Logout-button


  • dv: hide field
  • dv: hide fields
  • dv: change label
  • dv: hide label
  • dv: multi-column-layout
  • dv: headers for multi-column-layout
  • dv: dividers for multi-column-layout
  • dv: append add-on for inputs
  • dv: change or remove navbar icon (brand)
  • dv: change navbar title (brand)
  • initial release

Do you like it?