12.15 CheckBox Visual Web Components
You can use checkboxes to enhance the presentation of your applications. However, there is a limitation in using checkboxes in the interaction between the browser and the Web server. This is a limitation in the interaction between the browser and the Web Server. It is not a limitation imposed by LANSA for the Web.
In HTML syntax, you can only define a value for the ON (selected) state for the checkbox element. The browser only sends back a value for the checkbox if it is selected. This means that if the checkbox is not selected, no value is sent back by the browser.
You can visualize a field as a checkbox, by using the following HTML:
<input type="checkbox" name="RFLD" value="Y" />
This technique must only be deployed if the initial value of the checkbox is unchecked.
Setting Initial State to Checked
If you visualize a field as a checkbox by just using the above technique, you will have problems if the initial value of the field is to set the checkbox ON (selected). If the user unchecks the checkbox, no value is sent back by the browser. This means that your application will not know that the field has been unchecked.
You can overcome this problem with a combination of a 'dummy' field and a JavaScript function.
This example should not be used to visualize fields in browse lists. This technique will not work in browse lists.
Your checkbox Visual Web component would contain the following:
<input type="hidden" name="RFLD" value="<RDML MERGE="RFLD">"
size="1" />
<input type="checkbox" name="DUMMY" onclick="SetState(this, 'RFLD', 'Y', 'N')" />
<script type="text/javascript" language="javascript">
//<![CDATA[
if (document.LANSA.RFLD.value=="Y")
document.LANSA.DUMMY.checked=true;
//]]>
</script>
In the above example, RFLD is the actual name of the field you want to visualize as a checkbox. Instead of visualizing this field as a checkbox, it is hidden in the HTML. A 'dummy' field is used to visualize the checkbox. When the user clicks on the checkbox, a JavaScript function, SetState, is called to set the value of the actual field, RFLD.
The initial value of RFLD is read as a result of the <RDML MERGE="RFLD"> LANSA tag. The JavaScript function will set the state of the checkbox (the DUMMY field), dependent on the initial value of RFLD.
In this example, you assume that a value of 'Y' is the checked state. When the checkbox is unchecked the value is 'N'.
Note that the HTML for the Web component is not encapsulated by the <RDML CHECKVALUE> and </RDML> LANSA tags. You rely on the JavaScript function attached to the Web component to set the initial state of the checkbox.
The SetState JavaScript function is used by the DUMMY field to set the value of the actual field, RFLD. The third parameter of this function is the value for the checked state whilst the fourth parameter is for the unchecked state.
The SetState JavaScript function can be embedded into your DEFAULT_SCRIPT page:
function SetState(obj, RFld, chkValue, unchkValue)
{
if (obj.checked)
RFld.value=chkValue;
else
RFld.value=unchkValue;
}
When the HTML form is submitted, the value attached to the RFLD field is returned to your application. The value attached to the DUMMY field is irrelevant since it is not used in your RDML function.
You will need to modify the check and unchecked values in the function according to your application.
Using Checkboxes in Browse list
The above technique cannot be used for fields in browse lists because the names of the fields in browse lists are changed by LANSA for the Web dynamically.
If you want to use checkboxes in browse lists with their initial set checked, you will need to deploy the following technique. This technique is based on the preceding example.
<input type="hidden" name="__{field name}-<RDML MERGE="&ROWNUM" FORMAT=4> D"
value="<RDML MERGE="{field name}" size="{size}">" />
<input type="checkbox" name="DUMMY" value="<RDML MERGE="{field name}">"
onclick="SetCBState(this, '__{field name}-<RDML MERGE="&ROWNUM"
FORMAT=4> D', 'Y', 'N')"
<RDML ONCONDITION="{field name}">
checked="checked"
</RDML>
/>
{field name} is the name of the field you have defined in your DEF_LIST command. This {field name} is padded with trailing blanks to 10 characters.
Note that this technique uses the <RDML ONCONDITION> tag to determine the initial state of the checkbox.
This technique calls a different JavaScript function, SetCBState:
function SetCBState(obj, RFld, CY, CN)
{
var NumElements=document.LANSA.elements.length;
for (i=0; i<NumElements;i++)
{
if (document.LANSA.elements[i].name==RFld)
{
if (obj.checked) document.LANSA.elements[i].value=CY
else document.LANSA.elements[i].value=CN;
break;
}
}
}