Variable Data to HTML Type Variable

[danielbartholom]

Hi,

I was wondering if the following is somehow possible?

As shown below I have a Single Line Text variable called Fall Name (full_name). Below that I have a HTML variable (read only) called Business Card Preview.

Is there a way to configure the following

When I enter a full name in the Full Name field that somehow this information is populated to the HTML variable. So if I enter John Smith then John Smith will appear in the HTML variable. Can this be configured maybe by a onChange Catalog Client Script looking at the full_name variable and will write to something like ${full_name} or ${variables.full_name} or some other method to achieve this within the HTML variable?

I hope this makes sense. 

Any assistance that can be provided would be most appreciated.

Thanks

Dan

[Wayne Richmond]

Something like this should work in an onChange Catalog Client Script:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    function populateHTML() {
        var fullName = g_form.getValue('full_name');
        g_form.setValue('business_card_preview', fullName);
    }
    populateHTML();

}

[danielbartholom]

Hi Wayne,

This is great. Is there way to make this work like the following

so in the HTML variable if I have something like 

full_name

first_name

last_name

can I use the onChange script to write Full Name to full_name within the HTML variable? As I am sure you can assume I will be adding additional variables to the form.

Basically what I am trying to achieve is have the data populated into the HTML variable in different positions. So the Full Name may appear on the left and the First Name will appear on the right. In order to do this I would need the Populate HTML command to put the data into the right place if that make sense?

So

Full Name > full_name

First Name > first_name

Last Name > last_name

Thanks

Dan

[Wayne Richmond · Accepted solution]

I figured this might be your full requirement and I was thinking about how you might achieve it. Here's what I've come up with, although you'll need to modify the HTML do have it looking how you want.

Here's the item form when you load into it. I put some dummy text in via an onLoad Client Script but you could just as easily do this as the Default value for the HTML field:

There are four onChange Client Scripts that all contain the same code, one for each field:

The script:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var fn = g_form.getValue('first_name');
    var ln = g_form.getValue('last_name');
    var jt = g_form.getValue('job_title');
    var c = g_form.getValue('contact');

    function createTemplate() {
        g_form.setValue('business_card', '<h2 style="text-align: center;">' + fn + ' ' + ln + '</h2><h3 style="text-align: center;">' + jt + '</h3><p style="text-align: center;">' + c + '</p>');
    }
    createTemplate();

}

The result:

Catalog Client Scripts:

[danielbartholom]

My Goodness Wayne...LEGEND!. This most certainly gives me something to play with. Thank you so much for taking the time to test, play and provide the scripts, steps and screenshots 😉