Skip to content

Features

Note

We are working on the new documentation website, based on markdown files (md) and generated using awesome MkDocs generator tool

Upcoming Release

Not released, yet

2024/03

2023/05/13

  • New New feature childrentab.addPanel(VerticalPosition.Top)
  • New New feature childrentab.addPanel(VerticalPosition.Bottom)
  • NEW New feature DV.getChildrenTabs().waitForTab(...) executes a callback function after dynamically loaded childrentab exists.

2023/02/25

2023/02/22

  • NEW Added support for AppGiniHelper.DV.getField("textarea_field").toStatic()
  • NEW Added support for AppGiniHelper.DV.getField("date_field").toStatic()
  • NEW Added support for AppGiniHelper.DV.getField("richtext_field..").toStatic()

2023/02/14

2023/02/09

2023/02/08

2023/02/07

2023/02/01

2023/01/04

Release 2022/12

  • NEW Layout Fields in Columns
    This allows you to accurately arrange fields and their labels in columns
  • NEW Conditional Notifications in Detail View
    allows you to toggle visibility of custom notifications, for example alerts, depending on custom conditions

  • NEW Custom user settings Browser Settings, stored in Browser (localStorage) with autogenerated UI

  • NEW FIX for Detail-View-Problem with required fields on Cancel-click and Delete-click
    See here

  • NEW Detail View / Insert-Mode or Edit-Mode
    Detect Mode (insert/update)
  • NEW Detail View / Get the primary key (id) of current record
    Get Primary Key (ID)
  • NEW Table View / Styling cells
  • NEW Table View / AutoSize columns
  • NEW Table View / toLookupButton()
  • NEW Table View / toLookupButtonModal()
  • NEW Table View / copy cell value buttons
  • NEW Customization of Quicksearch

  • NEW tv.autoFitRowHeader() changes width of first column.
    Useful if you have added links or buttons using tv.addLink() or tv.addButton()

  • NEW Right-align numeric input / 3rd Parameter

  • dv.getField("value").toNumber("de",2, true);
  • dv.getField("value").toNumber("de",2, false);
  • NEW .insertXXX() functions now also work on multiple fields for example if you want to add multipe horizonal lines <hr/> above multiple fields
  • dv.getFields(["field1", "field2", "field2"]).insertAbove().hr();
  • In the past this was only possible for a single field using dv.getField("field1").insertAbove().hr();

  • This applies to insertAbove() , insertBefore() , insertAfter() , insertBelow()

  • NEW AppGiniHelper.LV.redirectRegistration("url");

  • NEW AppGiniHelper.LV.redirectRegistration("url", "target");

  • NEW (experimental) dv.autoCalcTabsHeight();

    • When using custom tabs, this function will automatically get the maximum height of all existing custom tabs and apply that height to all tabs. This may result in a better UI with less scolling when activating a different tab

  • NEW (experimental) tv.autoPanning()

    • Automatically scroll down long pages (visible) page by page

  • NEW dv.getActionButtons().getAdminButton().fix("icon", Variation); 

1
2
3
4
  var btn = dv.getActionButtons().getAdminButton();
  btn.fix("icon", Variation.primary);
  btn.hide();
  btn.show();

  • See origin https://forums.appgini.com/phpbb/viewtopic.php?p=17962#p17962

  • NEW auto-hiding AppGini's default submit button which sometimes appears at the top of the page
    could be obsolete now since latest AppGini version

RELEASE 2021-07

  • NEW dv.getField("inputfield").lock(true); // true|false

    • adds a lock-button next to field
    • applies to simple <input/> fields, only

  • NEW dv.getChildrenTabs().hideTabs();

  • NEW dv.getChildrenTabs().showTabs();

  • NEW dv.getChildrenTabs().compact(5);

    • decreases the padding inside children-tab-captions to get more space. Useful escpecially if you habe many children-tabs

  • NEW dv.getChildrenTabs().sort( ["tablename1", "tablename2", "..."], true, true );

    • parameters:
      1
2
3
4
        1. array of table names
  2. boolean: auto activate first tab
  3. boolean: auto hide tabs on load, then auto-show tabs after sorting
   * TODO: Validate and Test this function

  • NEW dv.getChildrenTabs().append( ["tablename98", "tablename99", "..."], true);

  • NEW dv.getChildrenTabs().get("tn", "cn").removeButtons();

    • removes the default "open modal" button

  • UPD common.autoRedirect(true);

    • By passing true the auto redirect function will also work if we have a referrer, for example when navigating between aan unrestricted page and a restricted page, not only when opening up a new broser tab.
    • For backward compatibility, the default value is "false".

  • NEW dv.getChildrenLinks().hide();

  • NEW dv.getChildrenLinks().removeHR();

  • NEW get dv action buttons and modify them:

    • dv.getActionButtons().getSaveButton() ...
    • dv.getActionButtons().getDeleteButton() ...
    • dv.getActionButtons().getBackButton() ...
    • dv.getActionButtons().getInsertButton() ...
    • ... .hide();
    • ... .show();

  • NEW dv.getFields(["field1", "field2", "..."]).hideLabels();

  • UPD better dropdown button style fix
  • NEW tab.addButton
  • NEW tab.addButtonOpen
  • NEW tab.addButtonOpenModal
  • NEW tab.addLink
  • NEW tab.addLinkModal
  • NEW tab.addBadge(123); // number
  • NEW tab.addBadgeIf(condition, number); // condition: boolean, number: numeric

  • NEW (experimental) Modification of children tabs (bottom area of DV) var tabs = dv.getChildrenTabs(); var tab = tabs.get("tablename"); var tab.label("New Tab Caption");

  • NEW TV.getCells("fieldname"); Example TV.getCells("name").addClass("danger");

  • NEW TV.addButton callback function now receives two parameters: 1st: pk / primary key of that row 2nd: data / all values of that row

  • NEW TV.addButton new 5th parameter onBeforeRender for very flexible customization

    Example: AppGiniHelper.TV.addButton( function (id, data) { } , "shopping-cart" , "Kaufoptionen" , Variation.default , function (id, data) { // your code here data.text = "text"; // custom text for this row data.icon = "cog"; // custom icon for this row data.variation = Variation.primary; // custom variation for this row data.skip = false; // when skip=true the button will NOT be rendered } )

  • NEW common.fix() now fixes and moves the new "Import CSV" button to the right

TODO JSE

  • NEW common.navbar.expand(); removed the gap between last button and right margin in navbar caused by a min-width style
  • NEW get and use translated labels from language.php (server) in javascript (client) var text = AppGiniCommon.T["key"]; Example: in language.php (serverside) there is a translation: 'save changes' => 'Save changes', you can use this translation in javascript (clientside) for example for custom buttons var text = AppGiniCommon.T['save changes']; Tip: You can make it even shorter const T = AppGiniCommon.T; var text = T['save changes'];

RELEASE 2020-10-26-1

  • NEW AppGiniHelperHideVersionInformation
  • NEW (Experimental) email fields
  • NEW (unsupported, experimental) AppGiniHelper. TV.linkParent("fk_col_name", "master_table")
  • NEW (unsupported, experimental) AppGiniHelper. TV.linkSelf()

  • NEW (experimental) replace default checkboxes in table view by custom characters AppGiniHelper.Defaults.tv_replaceCheckboxes = true; Find your own characters for example here: https://www.amp-what.com/unicode/search/check

  • NEW AppGiniHelper.currentUserName

  • NEW AppGiniHelper.currentTableName
  • NEW AppGiniHelper. DV
  • NEW AppGiniHelper. TV

  • NEW (Alpha) On submit/leaving a deail view: loading-effect see also: https://forums.appgini.com/phpbb/viewtopic.php?f=13&t=3476 AppGiniHelper.Defaults.onLeave = "blur"; AppGiniHelper.Defaults.onLeave = "hide"; AppGiniHelper.Defaults.onLeave = ""; // any other value

  • NEW var tv = AppGiniTableView.getInstance();

  • NEW var dv = AppGiniDetailView.getInstance(); avoid duplicate initilization of AppGiniDetailView or AppGiniTableView If, for example, someone initializes new AppGiniDetailView() in header-extras.php AND tries to inizialize another new AppGiniDetailView() in TABLENAME-dv.js, there will be an exception. Correct usage: in header-extras: var dv = new AppGiniDetailView(); later on in TABLENAME-dv.js: var dv = AppGiniDetailView.getInstance(); Tip: If you are not sure, replace all new AppGiniDetailView() by AppGiniDetailView.getInstance() This is the same for AppGiniTableView.getInstance();

  • NEW add one or more footer-panels below dv form var f1 = dv.addFooter(); f1.append("Hello bold world");

  • NEW In children-tabs (below dv form) replace buttons: instead of opening up a modal edit dialog, open up the details in the same page Syntax: replaceButtons("icon", "size", "target") dv.getChildrenTabs() .replaceButtons("cog", "btn-block") .setMaxWidth(32); SetMaxWidth will size the first column for better UI Examples: dv.getChildrenTabs().replaceButtons("cog", "btn-block btn-primary", "_blank");

  • NEW (Experimental) Move children links below the detail view form var dv = new AppGiniDetailView(); dv.getChildrenLinks().moveToBottom()

  • NEW (Experimental) panel left of table view and panel right of table view for custom links or buttons var tv = new AppGiniTableView(); var left = tv.getLeftPanel("Left Panel"); var right = tv.getRightPanel("Right Panel with formatted Header"); // configure widths of left panel, table (center) and right panel tv.setPanelWidths(0, 12, 0, BootstrapSize.xs); tv.setPanelWidths(0, 12, 12, BootstrapSize.sm); tv.setPanelWidths(0, 9, 3, BootstrapSize.md); tv.setPanelWidths(0, 7, 3, BootstrapSize.lg); right.addLink("Karte", "partners_map.php", "map-marker"); // add links to tv-panel // panel.addLink("text", "href", "icon") left.addLink("Kunden", "partners_view.php?tp=Kunde", "filter"); // add a button executing javascript left.addButton("My custom button", function () { }, "cog"); // add a text-only item to panel left.addDivider("Filter");

  • NEW (Experimental) Listen to checkbox-check in table view Note: does NOT support check all/uncheck all, yet var tv = new AppGiniTableView(); tv.onSelectionChanged(function (selection) { console.log(selection); });

  • NEW (Experimental) AppGiniHelper. Defaults.childrenTabsAutoExpand = true | false; true: (default) on load of detail view children tabs (at the bottom of dv page) will expand automaticaly

  • NEW (Experimental) AppGiniHelper. Defaults.childrenTabsAutoBadges = true | false; true: (default) after load of detail view the number of records will be shown in tabs

  • NEW (unsupported, experimental) Preparations for new AppGiniHelper-Inline-Editor (TV) (requires additional serverside product)

  • NEW (unsuported, experimental) Preparations for new AppGiniHelper-LIVE functions (requires additional serverside product)

    AppGiniCommon().live() AppGiniTableView().live() AppGiniDetailView().live()

  • NEW AppGiniUrl.get("tablename"); // tablename_view.php

  • NEW AppGiniUrl.get("tablename", 123); // tablename_view.php? SelectedID=123
  • NEW new AppGiniTableView().setTitle("text");
  • NEW new AppGiniTableView().setTitleHtml("html text");
  • NEW new AppGiniTableView().addTitle(" of " + variable);
  • NEW new AppGiniTableView().addTitleHtml(" of " + variable + "");

  • NEW (Experimental) AppGiniHelper. Defaults.fixFieldMargins = true | false; true: vertical gaps between fields will be removed as good as possible after load false: no change

  • NEW align field labels above field

    • dv.getField("fieldname").wrap();

    • Alternatives:

      1
2
        * `dv.getField("fieldname").wrap(true);`
  * `dv.getField("fieldname").unwrap(false);`
      • NEW align field labels left of field
        • dv.getField("fieldname").unwrap();

    • Alternatives:

      1
2
        * `dv.getField("fieldname").unwrap(true);`
  * `dv.getField("fieldname").wrap(false);`
      • NEW hide/show tabs with all fields
1
2
3
4
5
6
       var tab = db.addTab(name, caption, icon);
       tab.hide();
       // tab.show();
       // you can also pass a condition
       // tab.show(true);
       // tab.show(false);
  • NEW fadeOut/fadeIn tabs with all fields
1
2
3
4
5
6
       var tab = db.addTab(name, caption, icon);
       tab.fadeIn();
       tab.fadeOut();
       // you can also pass a condition
       tab.fade(true);
       tab.fade(false);

  • NEW (Experimental) new AppGiniField("fieldname").size(2);

  • NEW (Experimental) new AppGiniFields(["field1", "field2", "..."]).toNumber("de-DE", 2);

  • NEW (Experimental) new AppGiniField("fieldname").toNumber("de-DE", 2); or dv.getField("fieldname").toNumber("de-DE", 2);

  • NEW Removes all links from table view cells. This may be useful in combination with addButtonOpen()

1
2
3
       var tv = new AppGiniTableView();
       tv.removeLinks();
       tv.addButtonOpen();

RELEASE 2020-04-30-08

  • NEW new AppGiniField("fieldname").insertBefore().div("inner", "classes");

  • NEW new AppGiniField("fieldname").insertBefore().span("inner", "classes");

    • Same for:
      1
2
3
4
5
6
        * .insertAbove()
  * .insertBelow()
  * .insertBefore()
  * .insertAfter()
  * .insertPrepend()
  * .insertAppend()
      • NEW var tabs = dv.getTabs();

      • NEW dv.getTabs().setPosition(TabPosition. Top);

        • Position:

        • TabPosition.Top | TabPosition.top | "top"

        • TabPosition.Bottom | TabPosition.bottom | "bottom"
        • NEW Shortcut function for quickly getting field handles
          • var id_field = new AppGiniDetailView().getField(fieldname);

  • NEW new AppGiniDetailView().getChildrenLinks().removeIcons();

  • NEW new AppGiniDetailView().getChildrenLinks().replaceIcons();

  • NEW (Experimental) new AppGiniDetailView().autoCompleteOff();

  • NEW change login form: new AppGiniLoginView().fix();

1
2
3
       new AppGiniLoginView().setIcons("a", "b");
       new AppGiniLoginView().center();
       new AppGiniLoginView().setVariation(Variation.primary);
  • NEW fade in / fade out field
1
2
3
       new AppGiniField("fieldname").fade(true | false);
       new AppGiniField("fieldname").fadeIn();
       new AppGiniField("fieldname").fadeOut();

  • NEW fade in / fade out multiple fields

    • new AppGiniFields(["fieldname1", "fieldname2"]).fade(true);

    • new AppGiniFields(["fieldname1", "fieldname2"]).fade(false);

  • NEW (unsupported, requires more testing and feedback) .addShortcut() function on AppGiniDetailView and AppGiniTableView allows to define keyvboard shortcuts for focusing inputs

    • Syntax : new AppGiniTableView().addShortcut("fieldname", keycode, CTRL)

    • Example: new AppGiniTableView().addShortcut("appginihelper-navbar-search-input", 70, true); // CTRL+F sets focus on jQuery ("#appginihelper-navbar-search-input")

  • NEW optimize screen-usage by widening table view: new AppGiniTableView().compact();

  • NEW .ready callback now also available for AppGiniTableView: new AppGiniTableView().ready(function(){ ...your code here... });

  • NEW new tv.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

1
2
3
4
5
6
7
8
       var field = new AppGiniField("partner_id").dropdown()
           .getAddButton()
           .appendIcon("user")
           .appendText(" New partner");
       var field = new AppGiniField("partner_id").dropdown()
           .getViewButton()
           .appendIcon("cog")
           .appendText(" View/Edit");

  • NEW change icon of lookup buttons (view parent / add new parent) new AppGiniField("partner_id").dropdown().fix("pencil", "plus");

    • parameters
      1
2
3
        1. glyphicon name for view button
  2 - glyphicon name for add button
  3 - (optional) remove variant from add (boolean true|false)

  • NEW (unsupported) onChange-Handler for lookup now additionally sends the fieldname to the callback

1
2
3
4
5
6
7
8
       new AppGiniField("lookup_fieldname").onChange(test);

       function test(value) {
           console.log(value);
           // value.id     =  ID_OF_SELECTED_ITEM
           // value.text   =  TEXT_OF_SELECTED_ITEM
           // value.source =  "lookup_fieldname" 
       }

  • NEW change design of buttons next to lookup dropdowns...

    • for a single dropdpwn: new AppGiniField(fieldname).dropdown().fix();

    • for all dropdowns of a dv: new AppGiniDetailView().fixDropdowns();

    • for a group of dropdpwn fields: new AppGiniFields(["fieldname1", "fieldname2"]).fixDropdowns();

  • NEW design fix for image fields: TABLENAME-dv.js / new AppGiniField("fieldname").fix();

    • applies to image fields only

  • 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 with the following command:

1
       new AppGiniCommon().autoRedirect();

1
   * This new behaviour is very helpful for passing links via email and for QRCode integration

  • NEW (Experimental / BETA) TableView: Merge identical cells (in column)

    • tv.merge(["field1", "field2"]);

    • or tv.merge("field");

    • Attention: cannot be combined with group-function because group adds additional rows which cannot be merged

  • NEW (BETA) Tableview: Group rows. TODO: test

    • new tv.group("product_id", false, false);

    • Parameters

      1
2
3
        * fields: string | string[]
  * accordion: boolean = true
  * autoHide: boolean = true
      • NEW addLayout(...).add(..., [ "#Headline" ])
        • will add a class "appginihelper-layout-header" now for further css customization

  • NEW Automatically select text in quicksearch field for easy overwriting.

    • This is extremely helpful for barcode-scanning for example
    • Syntax: Globally enable it for all tables in hooks/header-extras.php with: new AppGiniTableViewQuicksearch().autoselect(Autoselect.all);

    Enable it for a single table in hooks/TABLENAME-tv.js on document ready with: new AppGiniTableView().quicksearch().autoselect(Autoselect.all);

    • Others: 
      1
2
3
        * .autoselect(Autoselect.start)
  * .autoselect(Autoselect.end)
  * .autoselect(Autoselect.range, start, len) // start: 1-based index, len = length of selection, for example Searchstring = "+49 431 / 12345-67". .autoselect(Autoselect.range, 17, 2) will select the _type "67"
      • NEW (UNSUPPORTED) AutoComplete off for quicksearch
        • This may not work in all browsers.

  • 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);

    • parameter
      1
2
        * true = also on homepage
  * false (default) = not on homepage
      • 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:

    • dv.getTitle();

    • After (!) you have used dv.setTitle("...") once, you can use .getTitle() to get the text-value (without html-formatting)

  • NEW get name of current table in table view

    • AppGiniTableView().getTableName();

  • NEW get name of current table in detail view:

    • AppGiniDetailView().getTableName();

  • NEW fix some UI for image fields:

    • new AppGiniField("imagefield").fix();

    • May be obsolete now

  • NEW layout rows now expandable with title:

    • dv.addLayout([widths], "title", true|false, true|false, Variation.default);

    • parameter 3: expandable true|false

    • parameter 4: expand by default = true

  • NEW new AppGiniCommon().setHeight(48);

  • NEW new AppGiniCommon().setColor(bg, fc);

  • NEW (UNSUPPORTED) common.navbar.toLeft();

    • Use it, if it meets your requirements.
    • There will be no support for this function

  • NEW (UNSUPPORTED) common.navbar.removeProfile();

  • NEW toDatepicker for 2-AppGiniFields as date-range-selector

  • NEW collapsible panels: doubleclick closes other open panels
  • NEW toDropdown(["a", "b", "c"])
  • NEW toMembersDropdown()
  • NEW toGroupsDropdown()
  • NEW .showTypes() for debugging purposes
  • UPD inline() function now also working for smaller display sizes
  • NEW collapsible panels: new parameter expand by default
  • NEW collapsible panels
  • NEW dv.setTitle(text, classes)
  • NEW dv.setVariation(Variation.default)
  • NEW icons for ActionButton-groups
  • NEW css-class for ActionButton-groups
  • NEW var id = DV.getSelectedId();
  • NEW ActionButtons: move from top-right into tabs
  • NEW placeholders
  • NEW AppGiniFields([f1, f2, ...]).inline(label, [w1, w2, ...]) functions
  • NEW showBadges
  • NEW appendIcon/prependIcon append/prepend icons to input controls and static controls
  • NEW append/prepend icons and/or text to input controls and static controls

  • NEW dv.childrenTabs.showBadges(); // attention: requires regexp

    • obsolete since AG 22.11

  • NEW AppGiniField: .toText() turns <input/>'s type to "text"

  • NEW AppGiniField: .toPassword() turns <input/>'s type to "password".

    • ATTENTION
      1
2
3
        * THIS IS NOT SECURE
  * PASSWORD CAN STILL BE UNCOVERED
  * ONLY USE IT IN A SECURE ENVIRONMENT

      • NEW onChange event for many datatypes

        • missing

        • timestamp

        • image
        • upload
        • google map

        • youtube video

          • only event without data

        • tiny blob

        • blob
        • medium_blob long_blob

  • NEW badges in tabs

  • NEW compact mode
  • NEW width of tabs
  • NEW button sizing
  • NEW actionbutton container sizing
  • NEW multi-column-layout / resizeLabels();
  • NEW multi-column-layout / wrapLabels();