Change the Widget Display based on a Field Attribute

You have a form that contains several fields of the same widget type -- for example, a group of text edit fields -- however you want the rendering of the individual fields to be different based on some attribute of the field.

In this example, we provide you with an example of how you would have a snippet render the field differently based on a field attribute. A TAG attribute is added to an EDIT field, identifying the field as one that contains a location. The value of this TAG attribute is then evaluated by a condition instruction within the snippet file and generates the appropriate code accordingly.

First, we modify the form specification file to include a TAG attribute with a value that specifies it as a location (e.g., locationHere).

EDIT edt10=formonly.edt10, SCROLL, TAG="locationHere";

You now have a value that you can use within the Edit.xhtml snippet file to react to the tag based on a gwc:condition instruction.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:gwc="http://www.4js.com/GWC">

<!-- the head element is ignored -->
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Edit snippet</title>
</head>
<body>
 <!--
 (fontPitch ? ' gFontPitch_'+fontPitch : ' gFontPitch_variable') +
 -->
 <gwc:snippet-root>

  <input type="text" readonly="readonly" class="gField gInherit"
   gwc:marks="
   field [CID];
   currentFieldStyle [CID,'gCurrentField'];
   modifiable isModifiable?[CID]:null;
   "
   gwc:attributes="
     type isPassword ? 'password' : 'text';
     class _tpl_+(isModifiable ? '':' gDisabled') +
     ' g'+type+' '+prefix('gc',class)+' '+prefix('g'+type+'_gc',class) +
     (hidden!=2?'':' gHidden') +
     (justify ? ' gJustify_'+justify :
     (isNumeric ? ' gJustify_right' : '')) +
     (shift ? ' gShift_'+shift : '') +
     ' gFontFamily_'+style['fontFamily'];
     style (style['textColor']?' color:'+style['textColor']+';':'') +
     (style['backgroundColor']?'
    background-color:'+style['backgroundColor']+';':'');
     value value;
     size width;
     maxLength maxLength || null;
     title comment;
   "
  />
  <image gwc:condition="tag=='locationHere'" onclick="alert('hello')" -- line 37
  gwc:attributes="src application/connectorURI + '/pic/accept.png'" />
 </gwc:snippet-root>
</body>
</html>

In Line 37, a gwc:condition instruction specifies that if the value of the tag is "locationHere", include the image tag specified.