Page 1 of 2
Setting the title dynamically in detail view
Posted: 2019-12-03 03:59
by pilandros
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?
Re: Setting the title dynamically in detail view
Posted: 2019-12-03 06:23
by onoehring
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
Re: Setting the title dynamically in detail view
Posted: 2019-12-05 06:25
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2019-12-15 12:49
by jsetzer
@pilandros, is this issue still open?
Re: Setting the title dynamically in detail view
Posted: 2020-01-22 18:25
by pilandros
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.
Re: Setting the title dynamically in detail view
Posted: 2020-01-25 17:16
by pilandros
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?
Re: Setting the title dynamically in detail view
Posted: 2020-01-25 17:37
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-05 10:17
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-05 10:25
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-05 10:43
by skoch
...thank you for the quick feedback - I am happy to wait for an example.
Best,
Stefan
Re: Setting the title dynamically in detail view
Posted: 2020-02-05 11:29
by jsetzer
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 (4.89 KiB) Viewed 12953 times
Screenrecording
- pGuRWuhpWn.gif (64.39 KiB) Viewed 12953 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
Re: Setting the title dynamically in detail view
Posted: 2020-02-05 16:53
by skoch
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
Best,
Stefan
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 06:44
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 06:53
by jsetzer
Please post your code...
(a) for detecting the change of the lookup and
(b) for fetching the value of the selected lookup item
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 07:39
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 08:15
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 11:13
by skoch
Hi Jan,
sorry, that was a translation error, the required field is called "bauherr" and not "client" - thank you Google
Re: Setting the title dynamically in detail view
Posted: 2020-02-06 11:14
by jsetzer
OK, I am going to prepare a sample for a lookup-ChangeHandler today. Stay tuned!
Re: Setting the title dynamically in detail view
Posted: 2020-02-07 19:11
by jsetzer
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 (34.38 KiB) Viewed 12870 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
Re: Setting the title dynamically in detail view
Posted: 2020-02-08 15:49
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-08 16:52
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-09 09:30
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-09 10:15
by jsetzer
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-10 07:31
by skoch
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
Re: Setting the title dynamically in detail view
Posted: 2020-02-10 07:49
by jsetzer
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);
}