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
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:
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:
Hi Wayne,
Firstly thank you so much for your help as you can see below I have been able to get this working however, if I may I have a few other questions that you may be able to help me with:
Question 1:
Via your code I see we are using headers is there a way to write the code so the following would appear
T +44 020 123 1234
M +44 020 123 1234
Question 2: Is there a way to place text immediately after a header so what I am looking to do is put in an address form field and it should be presented as follows:
T +44 020 123 1234 123 London Road
M +44 020 123 1234 London, EC2A
United Kingdom
daniel@email.com
This is one of the reason's why I was wondering if you could place holders into the HTML variable and then write variable data (Full Name, Title etc) to the place holders in the HTML variable. I could then potentially put everything into a table and structure accordingly.
Here is my script so far:
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
var tbanner = g_form.getValue('top_banner');
var bbanner = g_form.getValue('bottom_banner');
var fullname = g_form.getValue('full_name');
var title = g_form.getValue('title');
var telephone = g_form.getValue('telephone');
var mobile = g_form.getValue('mobile');
var emailaddress = g_form.getValue('email_address');
function createTemplate() {
g_form.setValue('business_card_preview',
// '<h2 style="text-align: center;">' + tbanner + // Top Banner
'<h3 style="padding-left: 120px; text-align: left; color: navy; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">' + fullname +
'<h3 style="padding-left: 120px; font-family: Arial, Helvetica, sans-serif;">' + title +
'<h3 style="padding-left: 120px; padding-top: 50px; font-family: Arial, Helvetica, sans-serif;">' + 'T' + ' ' + telephone +
'<h3 style="padding-left: 120px; font-family: Arial, Helvetica, sans-serif;">' + 'M' + ' ' + mobile +
'<h3 style="padding-left: 120px; padding-top: 50px; font-family: Arial, Helvetica, sans-serif;">' + emailaddress +
// '<h2 style="text-align: center;">' + bbanner + // bottom Banner
'</p>');
}
createTemplate();
}Below is what the script produced so far
Any assistance you can provide would be most helpful.
Thanks
Dan
The only way I can think to do something like this is with a table. You've already figured out how to make your code more readable, so creating the table shouldn't be too hard. Here's a very basic one:
<table style="border-collapse: collapse; width: 500px; height: 78px;" border="0">
<tbody>
<tr style="height: 13px;">
<td style="width: 496px; height: 13px; text-align: center;" colspan="2">Full Name</td>
</tr>
<tr style="height: 13px;">
<td style="width: 496px; height: 13px; text-align: center;" colspan="2">Job Title</td>
</tr>
<tr style="height: 13px;">
<td style="width: 246.5px; height: 13px;">T: 01234 567890</td>
<td style="width: 246.5px; height: 13px;">100 Fleet Street</td>
</tr>
<tr style="height: 13px;">
<td style="width: 246.5px; height: 13px;">M: 09876 543210</td>
<td style="width: 246.5px; height: 13px;">Birmingham</td>
</tr>
<tr style="height: 13px;">
<td style="width: 246.5px; height: 13px;"> </td>
<td style="width: 246.5px; height: 13px;">B3 1LP</td>
</tr>
<tr style="height: 13px;">
<td style="width: 246.5px; height: 13px;">E: starlord@email.com</td>
<td style="width: 246.5px; height: 13px;"> </td>
</tr>
</tbody>
</table>
