Tuesday, August 4, 2009

Creating a Basic Two Way Form

We had a brief description of the Two Way Forms feature back in May and since then we've gotten a lot of great feedback. I'd like to expand on that and show the steps necessary to augment an existing dojo dijit style form to create a Two Way Form.

Here is a very simple dojo dijit style form with a single text field
<html>
<head>
   <script type="text/javascript" src="/PlantsByWebSphereAjax/dojo/dojo.js"
     djconfig="parseOnLoad: true, isDebug: false"></script>
    
   <script type="text/javascript">
      dojo.require("dijit.form.TextBox");
      dojo.require("dojo.parser");
   </script>
   <style>
      @import "/PlantsByWebSphereAjax/dijit/themes/tundra/tundra.css";    
   </style>
</head>

<body class="tundra">
   <form method="post" action="/PlantsByWebSphereAjax/myAction">
   <table border="0" cellpadding="0" cellspacing="5" width="100%">
      <tr>
    <td><label for="fullName">Full Name</label></td>
    <td><input id="fullName" type="text" name="fullName" class="medium" dojoType="dijit.form.TextBox"/></td>
      </tr>
 <tr>
    <td><input type="button" name="submit" value="Submit" alt="Submit"></td>
 </tr>
   </table>
   </form>
</body>
</html>
1. The first step when creating a Two Way Form is to replace the existing javascript import with one pointing to ceadojo, the ceadojo toolkit must first be copied to the application from the WAS install.
 <script type="text/javascript" src="/PlantsByWebSphereAjax/ceadojo/dojo/dojo.js"
2. Next you need to replace dojo.require statements with ceadojo.require.
 ceadojo.require("dijit.form.TextBox");
 ceadojo.require("dojo.parser");
3. Then replace dojoType with ceadojoType for the input element.
 <input id="fullName" type="text" name="fullName" class="medium" ceadojoType="dijit.form.TextBox"/>
These first three steps update the form to use the ceadojo toolkit that is included in the CEA Feature Pack. Since the Two Way Form interacts with the other CEA widgets to send and receive the notifications its is required that they all use the same version of dojo.

4. Next add the CSS import for the Two Way Form's style
<style>
 @import "/PlantsByWebSphereAjax/ceadojo/dijit/themes/tundra/tundra.css";
 @import "/PlantsByWebSphereAjax/ceadojo/cea/widget/TwoWayForm/TwoWayForm.css";   
</style>
5. Finally add ceadojoType="cea.widget.TwoWayForm" to the form element
<form method="post" action="/PlantsByWebSphereAjax/myAction" ceadojoType="cea.widget.TwoWayForm">
With these five changes you have created the most basic Two Way Form. At this point both the reader and writer will have access to modify the field.

Lets take it a step further. For this scenario we only want the writer to have access to modify the field. By setting the ceaCollabWriteAccess attribute we can make the field read-only for one of the peers.
 <input id="fullName" type="text" name="fullName" class="medium" ceadojoType="dijit.form.TextBox" ceaCollabWriteAccess="writer"/>
Note: The roles of reader and writer are determined by who has collaboration control when the Two Way Form is launched. The active user will be the writer and the passive user the reader.

Two Way Forms also offer the ability to perform field validation and data masking for more information on these two topics please check out the Infocenter.

One of the questions that keeps coming up is whether a Two Way Form can be used outside of the Contact center cobrowsing and Peer to peer cobrowsing scenarios. The answer is yes. This works because when the Two Way Form is loaded it checks to see if its being used in a collaboration session and if not the additional attributes are ignored.

This gives you the ability to augment an existing form and only have one copy that can be used for both the single user scenario and the collaborative scenarios offered thru the CEA widgets.
Posted by at
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)