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


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?