Modify default lookup buttons (dropdown buttons)

Available since April 2020.

Attention
There is a display bug with lookups in tabs which will be fixed in version July 2020

See also:

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 partner" for the add-button of a dropdown.

(1) Change default icon

See here: Beautify default lookup buttons

new AppGiniField("partner_id").dropdown().fix("pencil", "plus")

(2) Add additional icon and text

var field = new AppGiniField("partner_id");
var dropdown = field.dropdown();
dropdown.fix("pencil", "plus");
dropdown.getAddButton().appendIcon("user").appendText(" New partner");
dropdown.getViewButton().appendText(" Edit");

Alternative version of the same code above using "chaining" technique:

var field = new AppGiniField("partner_id")
      .dropdown() // returns the dropdown-handler for this field
        .fix("pencil", "plus")
        .getAddButton() // returns the add-button handler
          .appendIcon("user")
          .appendText(" New partner")
          .getParent() // returns the dropdown handler
        .getViewButton() // returns the view-button handler
          .appendText(" Edit")
          .getParent() // returns the dropdown-handler
      .getParent(); // returns the field-handler

Prevent errors due to disabled links or due to missing privileges

If the currently logged in user does not have enough privileges

...or...

...if you disable the "view" button (in AppGini) ...

... one or both buttons (Add / View parent) will not be available on the detail view page and therefore will not be accessible by any javascript code.

Applying any changes to a non-existing element will cause javascript errors like the following, which can be seen in console tab of your browser's developer tools.

Javascript errors may stop execution of the rest of the code.

You can avoid such errors by checking existence of the button(n) before applying changes:

var btnView = dropdown.getViewButton();
if (btnView !== null) btnView.appendText("Edit");

See also

Was this helpful?