Create subtitles

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
pasbonte
Veteran Member
Posts: 162
Joined: 2013-02-06 09:49

Create subtitles

Post by pasbonte » 2022-12-28 12:06

Hi, I don't understand how to create subtitles (I may be using the wrong vocabulary), I want to separate #ELEVE #PARENTS and #VOEUX....

Code: Select all

// 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, ["#ELEVE & FAMILLE","NOM_ELEVE", "PRENOM_ELEVE","CLASSE_ELEVE","-","LOGIN_PRONOTE", "NOM_PRENOM_RESP", "EMAIL_RESP", "QUALITE_RESP", "TEL_RESP1","ADRESSE_RESP", "VILLE_RESP"])
    .add(1, ["#GESTION VOEUX","VOEU1_PRO1", "VOEU1_PRO2", "VOEU1_PRO3", "VOEU1_PRO4"])
		.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, ["#GESTION VOEUX","-", "VOEU1_PRO1", "VOEU1_PRO2", "VOEU1_PRO3", "VOEU1_PRO4"])
    .add(1, ["#History", "surgical_history", "obstetric_history", "genetic_diseases", "other_details"])
    .add(2, ["#Details", "image", "gender", "sexual_orientation", "weight", "height", "glasses"]);



Capture.PNG
Capture.PNG (188.8 KiB) Viewed 2123 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Create subtitles

Post by jsetzer » 2022-12-28 13:12

Depending on the AppGini Helper version your browser has loaded, the following should work.

Code: Select all

AppGiniHelper.DV.getField("FIELDNAME").insertAbove().h1("My Subheading);
This is much more flexible than the '#my subheading' feature from helper's early days.

You can even have custom <div>s or <span>s and even apply inserts on multiple fields, for example insert a horizontal line <hr/> before each field of a given array of fieldnames. See example below.

See docs here
https://www.appgini.de/docs/Javascript- ... nsertabove

Samples

Code: Select all

var dv = AppGiniHelper.dv;

// insert h4 above "created_by" field
dv.getField("created_by").insertAbove().h4("Metadata");

// insert red alert below "is_overdue" field
dv.getField("is_overdue").insertBelow().alert("Task is overdue", Variation.danger);

// function is also available for multiple fields (fieldnames as string array)
dv.getFields(["modified_on", "assigned_on", "finished_on"]).insertAbove().hr();
Available positions
  • insertAbove()
  • insertBefore()
  • insertAfter()
  • insertBelow()
Available Tags
  • h1...h6
  • pre
  • p
  • hr
  • alert("text", Variation.info);
  • label("text", Variation.info);
  • div
  • span
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply