Get started

3.2 Page-specific changes

Changes to certain pages must be programmed in page-specific javascript files in hooks directory. You can make changes to the table view (tv) or to the detail view (dv).

Table View

  • if your table is called xyz ...
    • ... the source code for table-view changes must be stored in
      hooks/xyz-tv.js

Detail View

  • if your table is called xyz ...
    • ... the source code for detail-view changes must be stored in
      hooks/xyz-dv.js

3.2.1 Apply "compact" mode to detail view

  1. Create an empty file TABLENAME-dv.js in your hooks-folder
    Replace TABLENAME by the exact name of your table.
    If your table is patients, the filename has to be patients-dv.js.
    Pay attention to the uppercase and lowercase letters.
  2. Insert the following code
  3. Save the file and
  4. Reload the detail view in the browser
var dv = AppGiniHelper.DV;
dv.compact();

The deafult detail view has been modified at certain areas, for example the size of then buttons has been reduced:

3.2.2 Add a button to detail view

  1. Add the following code to the end of the file
  2. Save the file and
  3. Reload the detail view in the browser
var actionbuttons = dv.actionbuttons;
var group = actionbuttons.addGroup("Additional Buttons");
group.addButton("Click me!", function () { alert("Clicked!"); });

File: hooks/TABLENAME-dv.js

There should be an additional button at the right hand side of your detail view form. Click the button, a message box will open up.

Do you like it?