Get started

For your own safety, please only use scripts downloaded from the authorized fastspring.com-platform, from AppGini-download-area or which you have received directly from bizzworxx.de. We only provide support to authorized customers who purchase and use official software versions. Always make backup copies of your files as often as necessary to be able to access a working, previous version if necessary.

We are not liable for any damage caused by pirated or modified software and we reserve the right to ban and take legal action against those involved in software piracy.


Welcome

Thanks for purchasing our AppGini Helper library. You will learn how to integrate the library into your AppGini project and do the first changes.

tl;dr

Experienced developers can take the fast lane.


Step 1: Copy file into hooks-directory

Copy the purchased and downloaded script file into the hooks-directory of your website.

hooks/AppGiniHelper.min.js

Step 2: Include script

Open hooks/header-extras.php in your editor and Include the script with the following line of code:

<script src="hooks/AppGiniHelper.min.js"></script>

Step 3: Start coding

3.1 Global changes

Global changes, like changing the title in the navigation bar, can be coded in hooks/header-extras.php.

  1. Create a <script></script> section in hooks/header-extras.php
  2. Between <script> and </script> place the following code:
    new AppGiniCommon()
    .setIcon("plus")
    .setTitle("CLINICManagement");

The file hooks/header-extras.php should look like this now:

  1. Save header-extras.php
  2. Reload your application in the browser

<script src="hooks/AppGiniHelper.min.js"></script>
<script>
  new AppGiniCommon()
    .setIcon("plus", "text-danger")
    .setTitle("<b>CLINIC</b>Management");
</script>

You should see a different icon and title in the navigation bar at the top of the page now.

Change the title by passing a different string into the .setTitle() function, for example .setTitle("MY<b>APP</b>")

Change the color-variation by replacing text-danger with text-primary.

Change the icon by replacing plus with cog or any other Glyphicon.

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 = new AppGiniDetailView();
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.

3.2.3 Add a button to table view

Since version 2019/11 you will be able to add buttons executing custom code to every row in table view.

  1. Create an empty file TABLENAME-tv.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-tv.js.
    Pay attention to the uppercase and lowercase letters.
  2. Insert the following code
  3. Save the file and
  4. Reload the table view in the browser
jQuery(function () {
  let tv = new AppGiniTableView();
  let tablename = tv.getTableName();
  let href = tablename + "_view.php?SelectedID=%ID%";
  tv.addLink(href, "search", "Open");
});

File: hooks/TABLENAME-tv.js

You will see the new button next to the default checkbox. On click the related detail view opens up.

Please note that we are using the placeholder %ID% in our link which will be replaced by the record’s primary key at runtime.

4. Next steps

5. Troubleshooting

If this is not working as expected, check the Troubleshooting guide: