Version

Since 2019

Step by Step Example

Migrated from here

1 Prerequisites

1.1 AppGini Helper Javascript Library file

1. Download the purchased library file AppGiniHelper.min.js and

2. Copy it into the hooks directory of your generated application.

1.2 Database Model

• Table: patients

1.3 Generated Files

• If your tablename is patients there will be a file named hooks/patients.php:

1.4 Table view for Patients: patients_view.php

Make sure your application has been generated and you can see all patients in the table view.

1.5 Detail view for Patient: patients_view.php?SelectedID=2

Open one record to enter the detail-view mode.

---

2. Include script & apply common changes

Open hooks/header-extras.php in your code-editor.

2.1 Code

<!-- file: hooks/header-extras.php -->
<script  src="<?=PREPEND_PATH?>hooks/AppGiniHelper.min.js?v=<?=time()?>"></script>

<script>
AppGiniHelper.getCommon()
    .setIcon("plus", "text-danger")
    .setTitle("<b>CLINIC</b>Management");

AppGiniHelper.getCommon().getNavbar().fix();

</script>

2.2 Line-by-line explanation

1. This is just a comment
2. Includes the AppGiniHelper library.
   Check if the file AppGiniHelper.min.js exists in hooks directory or copy it there now
3. empty line
4. Javascript starts here and ends in line 11
5. Create a new object of class AppGiniCommon
   Please note: There is no semicolon ; at the end of this line. The command will continue with next line and will end in line 7. This pattern is called chaining.

6. On the object of class AppGiniCommon (which has been created in line 5) call the function setIcon() which will change the icon in the navigation bar.

7. On the object of class AppGiniCommon (see line 5) call the function setTitle() which will change the text in the navigation bar.
   Note: The command, starting in line 5, ends here.

8. empty line
9. On the Navbar-property of the AppGiniCommon-object call the function fix() which will inline the Admin-Area- and Logout-buttons and do some minor changes
   The ; marks the end of this command.
10. empty line
11. The script which has been started in line 4 ends here.

Now save the script, reload the page in your browser (without cache¹) and verify that the changes have been applied:

• Icon
• Title
• Buttons in Navigation Bar

¹ I recommend to clean your browser's cache whenever reloading a page because otherwise your browser may show the previous version of your script. Reloading a page with cleaning the cache is easier as it sounds. In most of the browsers hold [Shift] key while reloading. You can press [shift]+[F5] for example or [Ctrl]+[R] in some browsers. If you are not sure please read your browser's documentation.

---

3. Change detail-view

3.1 Javascript hooks file for Detail View

Now, in your hooks-directory create a file named TABLENAME-dv.js. Replace TABLENAME by your table's name, in this case the filename is hooks/patients-dv.js

hooks/patients-dv.js in your code editor:

Please read the comments

// file: hooks/patients-dv.js

// get an instance of AppGiniDetailView class
var  dv = AppGiniHelper. DV;

// hide the id-field
dv.getField("id").hide();

// create a (full sized) row (width = 12) and
// add a headline "Patient" ("#Patient"), then
// add fields "last_name", "first_name", then
// add a divider-line ("-"), then
// add fields "birth_date" and "age".
// beautify label-alignment (sizeLabels(2))
var  row_1 = new  AppGiniLayout([12])
.add(1, ["#Patient", "last_name", "first_name", "-", "birth_date", "age"])
.sizeLabels(2);

// create a row with two columns.
// column 1: width = 8/12
// column 2: width = 4/12
// and add headlines (starting with "#") and other fields into columns 1 and 2

var  row_2 = new  AppGiniLayout([8, 4])
.add(1, ["#Anamnesis", "tobacco_usage", "alcohol_intake", "history"])
.add(1, ["#History", "surgical_history", "obstetric_history", "genetic_diseases", "other_details"])
.add(2, ["#Details", "image", "gender", "sexual_orientation", "weight", "height", "glasses"]);

// you can hide more fields if you like

// I did this just to create compact screenshots for documentation purposes
var dv = AppGiniHelper.dv;
dv.getFields(["genetic_diseases", "other_details"]).hide();
dv.getFields(["state", "contact_person", "mobile", "comments"]).hide();
dv.getFields(["filed", "last_modified"]).hide();

// prepend/append icons/texts to the three inputs age, height and width
dv.getField("age").prepend("~").append(" years");
dv.getField("height").append("cm", "resize-vertical");
dv.getField("weight").prepend("in kg", "download-alt");

// create a variable "container" for easier handling of new action buttons
var  container = dv. ActionButtons();

// create a group named "Links"
var group = container.addGroup("Links");

// add some links
group.addLink("Download PDF", "my_custom_page.php", Variation. Primary, "file");
group.addLink("Notify Station", "patients_view.php", null, "send");
group.addLink("Settings", "patients_view.php", null, "cog");

// add two buttons for toggling the compact-mode with no text but icons "minus"/"plus"
group.addButton("Hide", function () { dv.compact(); }, null, "minus");
group.addButton("Show", function () { dv.compact(false); }, null, "plus");

• Save the file,
• reload your detail-view page (remember to reload and clean cache¹) and
• check the results

4. Troubleshooting

If the output does not show what you have expected, please follow the troubleshooting instructions:

Generated application

• Ensure you can open your application in the browser
• Ensure you can login to your application
• Check if you can load the table-view of your table
• Check if you can enter the detail-view of any record in your table
• Re-Generate your application if necessary

Database consistency

• Login as administrator and open Admin-area
• Check if all tables and fields have been generated and configured as modeled in your AppGini project by opening the “Rebuild fields” function

Integration of AppGini Helper

• Check that the file AppGiniHelper.min.js exists in hooks-directory.
• Check that you have included AppGiniHelper.min.js as a JavaScript source in hooks/header-extras.php.

Page-specific changes

• Check exact letter-casing of TABLENAME in TABLENAME-dv.js AND TABLENAME-tv.js

• Detail View

  • Check that the file named TABLENAME-dv.js exists in hooks-directory
• Table View
  • Check that the file named TABLENAME-dv.js exists in hooks-directory

Subsequent errors

Please note that javascript code is mostly no longer executed if errors have occurred before. If functions of our libraries do not work, please make sure that your own code works correctly before that and does not cause any errors. Always watch the console output in your browser's development tools!

See also

• Quickstart