Highlight: Styled buttons and additional buttons in children tab of detail view

Preparation: almost none

For modifying those buttons there is nothing to prepare, just get a variable for handling those buttons per tab:

Long version

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.DV;

// we need to wait for lazy loading children tabs
dv.ready(function () {
  // get a variable for all children tabs
  var tabs = dv.getChildrenTabs();

  // get specific tab
  // var myTab = tabs.get("YOUR_CHILD_TABLENAME");

  // example
  var tab_notes = tabs.get("notes");

});

Short version (using chaining)

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.DV;

dv.ready(function () {
  var tab = dv.getChildrenTabs().get("notes");
  // ...
});

Even shorter version

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.DV;

dv.ready(function () {
  var tab = dv.getChildrenTab("notes");
  // ...
});

Modal Button

Just a simple javascript call will replace the original link by a button doing the same: open the record in modal dialog.

// ...
tab.addButtonOpenModal();

Icon is configurable.

// ...
tab.addButtonOpenModal("pencil");

Additional button text

// ...
tab.addButtonOpenModal("pencil", "Edit");

Link Button

if you, like me, do not want to load the data set modally, but on the same page, then there are commands for this

If you use addButtonOpen instead of addButtonOpenModal, this will create a button with identical style opening the record in the same page, not in modal dialog.

// ...
tab.addButtonOpen();
// ...
tab.addButtonOpen("pencil");
// ...
tab.addButtonOpen("pencil", "Edit");

By the way: You can even combine both. First button will open the record in modal dialog, second button in same page. So, users can decide.

// ...
tab.addButtonOpenModal("new-window");
tab.addButtonOpen("pencil");

Extra buttons

After I finished the basic function, I was able to extend it further, so that I can now add additional buttons if necessary. The solution is similar to the table view buttons.

Link to any other website

In the same tab ("_self")

tab.addLink("https://appgini.bizzworxx.de", "link", "www");

In a new tab ("_blank")

tab.addLink("https://appgini.bizzworxx.de", "link", "www", "_blank");

In a specific tab (named tab)

tab.addLink("https://appgini.bizzworxx.de", "link", "www", "nameOfTab");

Last option may be interesting for opening up records in a different tab but always the same tab.

Link to any other website in modal dialog

tab.addLinkModal("https://appgini.bizzworxx.de", "link", "www", "My homepage");

Button executing any Javascript code

Instead of passing a url (as string) you can pass a callable function as first parameter. On button click that function will be called.

tab.addButton(function (data) {
  // your custom code here
  console.log(data);
}, "flash", "See console output");

The function will receive a variable containing data about the record clicked. That variable conains information about the child-row (tn and pk) and also about the current detail view record (parent.tn and parent.pk). Getting this information you can do whatever you want in javascript, even call remote webservice and pass over data.

Do you like it?