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 ¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 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. Ihis 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// 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
new AppGiniFields(["genetic_diseases", "other_details"]).hide(); 
new AppGiniFields(["state", "contact_person", "mobile", "comments"]).hide(); 
new AppGiniFields(["filed", "last_modified"]).hide(); 

// prepend/append icons/texts to the three inputs age, height and width
new AppGiniField("age").prepend("~").append(" years"); 
new AppGiniField("height").append("cm", "resize-vertical"); 
new AppGiniField("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: Troubleshooting