Cheat Sheet

Global Changes


Navigation Bar

Change Icon

// file: hooks/header-extras.php
new AppGiniCommon().setIcon("plus");

Change App-Title (navbar)

// file: hooks/header-extras.php
new AppGiniCommon().setTitle("<b>CLINIC</b>Management");

Replace Icon by custom picture (navbar)

since 2019/10

var url="https://www.bizzworxx.de/agh32.png";

new AppGiniCommon()
.setTitle("<b>CLINIC</b>Management")
.setImage(url);

Change Icon and Title (navbar)

// file: hooks/header-extras.php
new AppGiniCommon()
    .setIcon("plus", "text-danger")
    .setTitle("<b>CLINIC</b>Management");

Remove icon (navbar)

// file: hooks/header-extras.php
new AppGiniCommon().unsetIcon();

Invert Navbar

new AppGiniCommon().navbar.invert();

Modify Buttons (navbar)

new AppGiniCommon().navbar.fix();


Page Changes

Detail View

Get id of current record

since 2019/10 (Just a tiny helper function)

// caution: will return null when adding a new record
var id = new AppGiniDetailView().getSelectedId();

alert(id);
var dv = new AppGiniDetailView();
// ...
var id = dv.getSelectedId();
// ...

Change Title (detail view form)

since 2019/10

var dv = new AppGiniDetailView();
dv.setTitle("New Title");

since 2019/10

var dv = new AppGiniDetailView();	dv.setTitleHtml("<small>Patient:</small> <b>DOE, John</b>");

Compact layout

new AppGiniDetailView().compact();

Default Layout

Compact Layout

Hide single field

// file: hooks/patients-dv.js
new AppGiniField("id").hide();

Hide multiple fields

// file: hooks/patients-dv.js
new AppGiniFields(["id", "last_name", "first_name"]).hide();

Change label

new AppGiniField("image").label("Picture");

Before: Label = “Image”

After: Label = “Picture”

Hide label

// file: hooks/events-dv.js
new AppGiniField("name_patient")
  .hideLabel();

Before

After

Multi-Column Layout

new AppGiniLayout( [ column_1_width, column_2_width ] )
    .add( column_index, ["fieldname_1", "fieldname_2"])
    .add( column_index, ["fieldname_3", "fieldname_4"])
    ;

Example

new AppGiniLayout([8, 4])
    .add(1, ["last_name", "first_name"])
    .add(2, ["image", "gender"])
    ;

Multi-Column Layout with headlines and dividers

new AppGiniLayout([8, 4])
 	.add(1, ["#Patient", "last_name", "first_name"])
 	.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", "birth_date", "age"])
 	.add(2, ["-", "#Contact", "state", "contact_person", "mobile", "comments"])
 	;

Expandable/Collapsible Panels

since 2019/10

var dv = new AppGiniDetailView();
dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]);

// file: patients-dv.js
var dv = new AppGiniDetailView();
var container = dv.ActionButtons();
var group = container.addGroup("Additional Links");
group.addLink("Link 1", "my_custom_page.php");

Action Buttons: Button

// file: patients-dv.js
var dv = new AppGiniDetailView();
var container = dv.ActionButtons();
group = container.addGroup("Additional Buttons");
group.addButton("Click me!", function () {
	alert("Clicked!")
});

Action Buttons: Groups with title, icon and css-classname

var dv = new AppGiniDetailView();
var actionbuttons = dv.actionbuttons;

// group without title
var group1 = actionbuttons.addGroup();
no title
// group with title
var group2 = actionbuttons.addGroup("R/W");
group wih title

since 2019/10

// group with title and icon
var group3 = actionbuttons.addGroup("title", "cog");
group with icon and title

since 2019/10

// group with title, icon and css-classname
var group4 = actionbuttons.addGroup("title", "cog", "highlight");
group with icon and title + extra styling
var dv = new AppGiniDetailView();
var container = dv.ActionButtons();
group = container.addGroup("Variations");
group.addLink("Primary", $href , Variation.Primary);
group.addLink("Info", $href, Variation.Info);
group.addLink("Success", $href, Variation.Success);
group.addLink("Warning", $href, Variation.Warning);
group.addLink("Danger", $href, Variation.Danger);
Action Buttons in different variations

Add-ons before/after input fields

new AppGiniField("weight")
  .prepend("in kg", "download-alt");

new AppGiniField("height")
  .append("cm", "resize-vertical");
new AppGiniField("weight")
  .prependIcon("download-alt")
  .append("kg");

new AppGiniField("height")
  .prependIcon("resize-vertical")
  .append("cm");

Append Unit

new AppGiniField("weight").unit("kg");
new AppGiniField("height").unit("cm");


Add placeholder

new AppGiniField("tiny_uint").placeholder("0...255");


Please also note the AppGini Helper menu at the top of each page


Social media & sharing icons powered by UltimatelySocial