Setting the title dynamically in detail view

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
User avatar
pilandros
Veteran Member
Posts: 73
Joined: 2014-02-13 18:19

Setting the title dynamically in detail view

Post by pilandros » 2019-12-03 03:59

In the "../documentation/detail-view/set-title-detail-view/" there is a Tip message at the bottom of that page that reads:
"You can change the title dynamically at runtime, for example whenever a field changes, update the title."
How can I do that?

In the documentation it reads:
// file: hooks/patients-dv.js
// create your custom title
var title = "<b>PAN-TAO</b>, <u>Petra-Christine</u> Catharina";
var dv = new AppGiniDetailView();
dv.setTitleHtml(title);

I need to set the "JS title variable" to have the contents from the mysql name field.
Can I have an example?

onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 541
Joined: 2019-05-21 22:42
Contact:

Re: Setting the title dynamically in detail view

Post by onoehring » 2019-12-03 06:23

Hi pilandros,

probably Jan will answer this much better than I can: You could create an ajax call to some php file which returns your content only...

Olaf
Some postings I was involved, you might find useful:
Backup your database (viewtopic.php?f=4&t=3341); Improve security (viewtopic.php?f=4&t=3168); Field Permissions (viewtopic.php?f=4&t=3308); Custom (error) message (viewtopic.php?f=7&t=1740&p=10871#p10906); Audit Log (viewtopic.php?f=4&t=1369&p=10407); Two Factor Authentication (viewtopic.php?f=7&t=3306&p=11478); Add 2nd SAVE CHANGES button (viewtopic.php?f=2&t=3242&p=11104); Place a search on details view (viewtopic.php?f=2&t=3479&p=12484#p12484); Column-Value-Based-Permissions (viewtopic.php?f=4&t=3498)

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2019-12-05 06:25

pilandros wrote:
2019-12-03 03:59
I need to set the "JS title variable" to have the contents from the mysql name field.
Can I have an example?
Hi,

do you really need a value from MySQL which is NOT part of your form? Or does your form already contain that value?

Best,
Jan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2019-12-15 12:49

@pilandros, is this issue still open?

User avatar
pilandros
Veteran Member
Posts: 73
Joined: 2014-02-13 18:19

Re: Setting the title dynamically in detail view

Post by pilandros » 2020-01-22 18:25

jsetzer wrote:
2019-12-15 12:49
@pilandros, is this issue still open?
@jsetzer, Thank you for asking and sorry for my delayed response. I already solved it by not trying to change any line in my script.

User avatar
pilandros
Veteran Member
Posts: 73
Joined: 2014-02-13 18:19

Re: Setting the title dynamically in detail view

Post by pilandros » 2020-01-25 17:16

jsetzer wrote:
2019-12-15 12:49
@pilandros, is this issue still open?
Now I came into a need for dynamically insert a paragraph, only when certain criteria is met.
Is there a chance to do this, instead of hard coding the paragraph into the file "hooks/tablename-dv.js" for inserting elements?

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-01-25 17:37

Yes, sure, please have a look at the insert-functions of our JS Library:

https://appgini.bizzworxx.de/products/j ... aragraphs/

Use Javascript to evaluate your criteria/conditions and insert a paragraph, a headline or an alert dynamically using one of our insert functions.

Best,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-05 10:17

Hi there,
have another question about dynamic titles in dv:
Is it possible to display a field content as a title using the AppGini helper, so that the data record is adapted when changing?

Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-05 10:25

Hi,

sure, using Javascript you can catch the change event of your form, then get the values you need and update the title.

I can prepare a sample by the end of next week, publish the code on our website and put a link here.

Best,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-05 10:43

...thank you for the quick feedback - I am happy to wait for an example.

Best,
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-05 11:29

Dynamically changing the detail view title on change

Attention: The functions shown below are BETA and unsupported. The change-handlers should work for most of the common datatypes. They may not work for special types like GoogleMaps, Video-URLs, Image-Uploads, Timestamp, BLOB-types and probably for a few more. Feel free to try and perhaps provide feedback. If .onChange or .getValue does not work in your case, you can always use Javascript directly.


This is a sample I was using on our website:

Code

Code: Select all

// file: patients-dv.js

// variable for current detail view
var dv = new AppGiniDetailView();

// initially call the update function
updateName(); 

// update title on change of any of these three fields
new AppGiniFields(["last_name", "first_name", "middle_names"])
  .onChange(updateName);

// this function fetches the current values of the three name-fields 
// and concats a new html title 
// with little formatting
function updateName() {

	// get last name, first name, middle names
	var last = new AppGiniField("last_name").getValue();
	var first = new AppGiniField("first_name").getValue();
	var middle = new AppGiniField("middle_names").getValue();

	var newName = "Patient";

	if (last) {
		newName = "<b>" + last.toUpperCase() + "</b>";

		if (first && middle) {
			newName = newName + ", <u>" + first + "</u>" + " " + middle;
		} else if (first) {
			newName = newName + ", " + first;
		} else if (middle) {
			newName = newName + ", " + middle;
		}
	}

	dv.setTitleHtml(newName);
}
Result

The following screen recording shows the result. Watch the title:
chrome_w5rX5g6set.png
chrome_w5rX5g6set.png (4.89 KiB) Viewed 5542 times

Screenrecording
pGuRWuhpWn.gif
pGuRWuhpWn.gif (64.39 KiB) Viewed 5542 times

Any feedback highly appreciated!

Kind regards,
Jan

PS: By the way, of course you can use the .onChange-handler for various tasks, not only for updating the title

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-05 16:53

Hi Jan,
after the first tests I am thrilled, it works wonderfully. Will try a few more tables in the next few days.
Thanks alot :D

Best,
Stefan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-06 06:44

Hi Jan,
after a few tests with other tables, i found that the script does not accept lookup fields. Is there a way to display such titles?

Best,
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-06 06:53

Please post your code...

(a) for detecting the change of the lookup and
(b) for fetching the value of the selected lookup item

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-06 07:39

Hi Jan,
Hi
I am not quite sure now whether it is the right area that I copied. The field "client" is a lookup field, which shows the name and the first name from the parent table:

Code: Select all

var dv = new AppGiniDetailView();
//Kompaktansicht einschalten
dv.compact();

// initially call the update function
updateName(); 

// update title on change of any of these three fields
new AppGiniFields(["bauherr"])
  .onChange(updateName);

// this function fetches the current values of the three name-fields 
// and concats a new html title 
// with little formatting
function updateName() {

	// get last name, first name, middle names
	var last = new AppGiniField("bauherr").getValue();

	var newName = "Bauherrdetails";

	if (last) {
		newName = "<b>" + last.toUpperCase() + "</b>";

	}

	dv.setTitleHtml(newName);
}
Best,
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-06 08:15

The field "client" is a lookup field
There is no field "client" in your code.

In your case the title will be "Bauherrdetails" by default OR the value of field bauherr. It will never be the value of field client because you do not fetch the value from client field.

If you need then value of client field, you should replace...

Code: Select all

	var last = new AppGiniField("bauherr").getValue();
... by ...

Code: Select all

	var last = new AppGiniField("client").getValue();
Regards,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-06 11:13

Hi Jan,

sorry, that was a translation error, the required field is called "bauherr" and not "client" - thank you Google :oops:

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-06 11:14

OK, I am going to prepare a sample for a lookup-ChangeHandler today. Stay tuned!

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-07 19:11

As promised, I have put together a sample for detecting and reacting to lookup-changes.

There is a table addresses with a lookup-column patient_id pointing towards table patients. See the following model which is an extract of my project documentation:

chrome_40jPmQerYQ.png
chrome_40jPmQerYQ.png (34.38 KiB) Viewed 5459 times

Now this is the code for listening to changes on that lookup column and to react to the changes. Watch the console output.

Code: Select all

// file: hooks/addresses-dv.js

// testing onChange handler for lookup fields
// field addresses.patient_id is a lookup referencing patients.id

// file: hooks/addresses-dv.js
new AppGiniField("patient_id").onChange(testLookupChange);

function testLookupChange(value) {
    console.log("lookup has changed");
    console.log(value);
}
The value variable contains both, the id AND the text of the selected lookup value. You can get and use either value.id and/or value.text.

This should do the job.
Kind regards,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-08 15:49

Hi Jan,
thank you for your effort. The data is displayed in the console with ID and text. But how do I get it in the script for the title now?

Regards,
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-08 16:52

See one of my previous posts above:

viewtopic.php?p=12103#p12052

Once again you can use the dv.setTitle(...) or dv.setTitleHtml(...) function. Just concatenate the title you want including value.text and pass it into setTitle function.

For example:

Code: Select all

...

new AppGiniField("patient_id").onChange(testLookupChange);

...

function testLookupChange(value) {
  var mytitle = 'Test - ' + value.text;
  dv.setTitle(mytitle);
}
Best,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-09 09:30

hi Jan,

thank you for the tip - now it works and the data is retrieved.
In the original script the option worked

Code: Select all

// initially cal the update function
updatename();
that the data is already displayed in the title when the detail view is loaded. How can I set this up?

Kind Regards
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-09 10:15

viewtopic.php?p=12119#p12067

Please re-read my previous post above. Everything you need has been described there, for example how to initially call the update function, how to get the value after lookup change and also how to get values by code. See the .getValue() functions described in my previous posts.

The rest is just javascript.

Best,
Jan

skoch
Posts: 19
Joined: 2020-01-27 14:20

Re: Setting the title dynamically in detail view

Post by skoch » 2020-02-10 07:31

Hi Jan,

sorry that I am annoying again, but somehow I can't get the title data to appear when I open the form. Here is my code:

Code: Select all

// initially call the update function
updateName();

new AppGiniField("bauflstID").onChange(updateName);

function updateName() {
	
	var baugrund = new AppGiniField("bauflstID").getValue("text");	
	var newName = "Baugrund?";
		
	if (baugrund) {		
		newName = "Flst. Nr. " + baugrund;
	}	
	dv.setTitleHtml(newName);	
}
Best,
Stefan

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

Re: Setting the title dynamically in detail view

Post by jsetzer » 2020-02-10 07:49

You can try this (I did not test this, so there may be typos):

Code: Select all

// setup change handler for lookup field
new AppGiniField("bauflstID").onChange(updateTitleOnChange);

// initially call the update function

// CHANGED at 1:40PM
new AppGiniDetailView().ready(updateTitleOnStart);


function updateTitleOnStart() {
    var baugrund = new AppGiniField("bauflstID").getValue(true); // CHANGED: pass any value which evaluated to true to get the text
    updateTitle(baugrund);
}

function updateTitleOnChange(value) {
    var baugrund = value.text;
    updateTitle(baugrund);
}

function updateTitle(baugrund) {
    var text = baugrund ? "Flst. Nr. " + baugrund : "Baugrund?";
    new AppGiniDetailView().setTitle(text);	
}

Post Reply