COMMUNITY WIKI : Custom HTML - Binding Variables

from Within Custom HTML Blocks in your Coaches

This page last changed on Feb 04, 2009 by jreynolds.

Binding Variables from Within Custom HTML

Blocks

General
Binding to Lists
Boolean Checkboxes
Custom HTML & Lists of Complex Variables
Warning
This is a legacy wiki article - for the latest information go to Binding Variables Within
Custom HTML.
Warning
Please be aware that this technique is not a part of any documented API for Teamworks.
It is possible that it won't continue to work in future versions of Teamworks. However, this
technique is widely used and so should be safe to apply in your own applications. This code
was tested in Teamworks 5.5.6 - 6.1.

General
Want to use a Custom HTML block on your coach to edit a teamworks variable?
It's really not that hard.
Assume that you have defined a String variable in your service named FavoriteColor.
Within the service where FavoriteColor is defined, you refer to it as tw.local.FavoriteColor... so if you
want to display this value in a CustomHTML block on your coach you can display the value by doing the
following:

<#= tw.local.FavoriteColor #>

That's pretty obvious, but what do you do if you want to edit FavoriteColor on your coach?

<INPUT name='tw#local#FavoriteColor' value= <#=tw.local.FavoriteColor#>>

The "trick" is in realizing that to bind output to a teamworks variable in your custom HTML, you replace
"." with "#"...
In this example, tw.local.FavoriteColor becomes tw#local#FavoriteColor.

Binding to Lists
Suppose you want a Coach to ask questions from a dynamically generated list, and you want the Coach
to bind all the answers to tw.local.answers. You have two variables:
tw.local.questions (List of String)

Document generated by Confluence on Feb 20, 2013 12:01

Page 1

 tw.local.answers (List of String)

For this example, assume they are initialized like this:

if(tw.local.questions == null) {
tw.local.questions = new tw.object.listOf.String();
tw.local.questions[0] = "Name:";
tw.local.questions[1] = "Favorite Color:";
tw.local.questions[2] = "Favorite Food:";
}
//init blank answers (answers List length needs to be set so that coach binding will succeed)
tw.local.answers = new tw.object.listOf.String();
for(var i=0; i < tw.local.questions.listLength; i++) {
tw.local.answers[i] = "";
}

Here is an example Custom HTML block that lets you ask the questions and collect all the answers:

<# //Dynamic Questions

for(var i=0; i < tw.local.questions.listLength; i++) {
#>
<tr>
<td class="sectionBodyCenterLabel">
<label><#=tw.local.questions[i].replace(/ /g, "&nbsp;"#></label>
</td>
<td class="sectionBodyCenterControl">
<input type="text" name="tw#local#answers#<#=i#>" value="<#=tw.local.answers[i]#>"
class="inputText_Full" />
</td>
</tr>
<# } #>

The key to making this work is that the List to which the Coach will bind answers must already be
initialized to the required length.

Boolean Checkboxes
When using a boolean variable from teamworks that needs to be changed inside a Custom HTML block
using an HTML checkbox, you can not perform the binding using the checkbox input itself. Instead, you
need to use a hidden input field that is holds the value of the variable. This is done in the following way:

<td><input value="<#if (tw.local.checkBox.bool){#>true<#} else { #>false<#} #>"

name="BOOLEAN_FOR_tw#local#checkBox#bool" type="hidden" id="BooleanChoice0_hidden">
<input <#if (tw.local.checkBox.bool){#> checked <#}#> id="BooleanChoice0_checkbox"
type="checkbox"></td>
<script type="text/javascript">
var varBooleanChoice0 = document.getElementById('BooleanChoice0_hidden');
document.getElementById('BooleanChoice0_checkbox').onclick = function()
{
varBooleanChoice0.value = !(varBooleanChoice0.value == "true");
}
</script>

As you can see, there needs to be a "hidden" input that holds the value of the variable as well as a
"checkbox" input. The value needs to be initialized to "true" or "false" according to the initial value that

Document generated by Confluence on Feb 20, 2013 12:01

Page 2

the variable has coming into the coach. Also. the default value for "checked" also needs to be initialized
according to the variable. In this way, the value will be correct, but the check box will also be correct
when the coach displays. The "name" property becomes "BOOLEAN_FOR_[your variable here separated
by hashes]". These are the only values that must change for this example to work for you.
Useful Information
If you want to play around with the properties, you can import the example for your
sandbox.

Custom HTML & Lists of Complex Variables

Attached is an example of how you can build a custom HTML table that displays and edits the contents of
a list of complex variables.

<TABLE>
<# for(i=0; i < tw.local.subCostList.listLength; i++) { #>
<TR>
<TD><#= tw.local.subCostList[i].code #></TD>
<TD>
<INPUT id='tableRowAmount<#= i #>'
name ='tw#local#subCostList#<#= i #>#amount'
value='<#= tw.local.subCostList[i].amount#>'
onChange='calcTotal();' />
</TD>
</TR>
<# } #>
<TR>
<TD>Total</TD>
<TD>
<INPUT id='tableTotal' name='tw#local#tableTotal' disabled="disabled" />
</TD>
</TR>
</TABLE>
<SCRIPT>
function calcTotal() {
var total = 0;
for(i=0; i < <#= tw.local.subCostList.listLength #>; i++) {
total = total + parseFloat(document.getElementById("tableRowAmount" + i).value);
}
document.getElementById("tableTotal").value = total;
}
calcTotal();
</SCRIPT>

Document generated by Confluence on Feb 20, 2013 12:01

Page 3