React to input field changes and change page title of Detail View

Here I will briefly show how you can react to <input/> field changes and modify the title of the detail view page.

I assume that you have already integrated AppGiniHelper Javascript Library into your project.

In an example project I have the following three fields:

• first_name
• middle_names
• last_name

The Detail View looks like this by default:

First I create a Javascript file for Detail View hooks. Because the table is called contacts, the javascript file must be called contacts-dv.js and must be located in the hooks directory.

I need a function for getting the current values of those three fields and for changing the detail view title. This function has to be called initially on page-load and additionally on every change of one of those fields. Here is the Javascript code, please see the comments:

// file: hooks/contacts-dv.js

// get a handle to detail view
var dv = AppGiniHelper.dv;

// this function will get the current values from UI
// and return a concatenated string like this:
// Hawking, Stephen William 
function buildTitle() {
    let ln = dv.getField("last_name").getValue();
    let mns = dv.getField("middle_names").getValue();
    let fn = dv.getField("first_name").getValue();
    return (ln + ", " + fn + " " + mns).trim()
}

// this function will get the title based on current values
// and then update the detail view title
function updateTitle() {
    let title = buildTitle();
    dv.setTitle(title);
}

// on page-load, initially update the title
dv.ready(updateTitle);

// initialize change handler on all three fields
// on change of any of those fields, call the updateTitle() function
dv.getFields(["last_name", "middle_names", "first_name"]).onChange(updateTitle);

That's it, let's see the result:

Do you want some formatting?

There is another function: dv.setTitleHTML("")

Try this code instead and check the title after changing the name-parts:

// file: hooks/contacts-dv.js
var dv = AppGiniHelper.dv;
dv.getField("id").hide();
function buildTitle() {
    let ln = dv.getField("last_name").getValue();
    let mns = dv.getField("middle_names").getValue();
    let fn = dv.getField("first_name").getValue();
    let parts = new Array();
    if (ln.length) parts.push(`<b>${ln}</b>`);
    if (fn.length )
    {
        if (mns.length)
            parts.push(`<u>${fn}</u> ${mns}`);
        else
            parts.push(fn);
    }
    return parts.join(", ");
}

function updateTitle() {
    let title = buildTitle();
    dv.setTitleHTML(title);
}

dv.ready(updateTitle);
dv.getFields(["last_name", "middle_names", "first_name"]).onChange(updateTitle);