Previous Walkthrough Next Walkthrough


Walkthrough 4:  The HD$ Namespace -- Adding a Button to the Toolbar

Prerequisites:

  1. A copy of the "EmploymentAgreement" project created in Walkthrough #1.  (Copy the entire project directory structure and work with the copy, leaving the original unmodified for use in other walkthroughs.)

Instructions:

  1. As in the previous walkthrough, add a script element.  This time set HDInterviewOptions.OnInit to a function that will be called when the interview is initialized.  This function will call the HD$.AddCustomToolbarButton function, passing in a click event handler function, a button image, an alternate image to display when the cursor is hovering over the button, and a tooltip text string.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/easyXDM.min.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <form id="form1" runat="server">
    <h1>Employment Agreement Generator</h1>
    <div id="interview" style="width:100%; height:600px; border:1px solid black">
    
    </div>
    </form>
 
    <script>
        HDInterviewOptions.OnInit = function () {
            HD$.AddCustomToolbarButton(
                function () { HD$.AnsGetVal('Employee Name', null, setSwappedName); },
                'btnswap.png',
                'btnswaph.png',
                null,
                'Swap first and last name');
        };
    </script>
</body>
</html>
  2. Add a definition for the setSwappedName function. This function will receive the employee's full name, swap the first and last names, and update the Employee Name answer.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/walkthrough/easyXDM.min.js"></script>
    <script type="text/javascript" src="hotdocs.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <form id="form1" runat="server">
    <h1>Employment Agreement Generator</h1>
    <div id="interview" style="width:100%; height:600px; border:1px solid black">
    
    </div>
    </form>
 
    <script>
        HDInterviewOptions.OnInit = function () {
            HD$.AddCustomToolbarButton(
                function () { HD$.AnsGetVal('Employee Name', null, setSwappedName); },
                'btnswap.png',
                'btnswaph.png',
                null,
                'Swap first and last name');
        };
 
        function setSwappedName(name) {
            HD$.AnsSetVal('Employee Name', name.split(' ').reverse().join(' '), null, function () { HD$.ScreenRefresh(); });
        }
    </script>
</body>
</html>
  3. Run the web app, enter a first and last name in the Employee Name field, hit tab to leave the field, and click the new toolbar button.  You should see the first and last name swapped in the Employee Name field.



The functions in the HD$ namespace, which comprise the HotDocs Embedded JavaScript API, call for some explanation.

Programmers familiar with the HotDocs Server JavaScript API will notice that most functions in the HD$ namespace are asynchronous versions of HotDocs Server Javascript functions. For example, the code above has calls to HD$.AddCustomToolbarButton, HD$.AnsGetVal, HD$.AnsSetVal, and HD$.ScreenRefresh, which are analogous to HDAddCustomToolbarButton, HDAnsGetVal, HDAnsSetVal, and HDScreenRefresh.

Since the HD$ functions are asynchronous, each has an additional parameter for a callback function. This callback parameter is included above in the call to HD$.AnsGetVal in order to get a return value, and in the call to HD$.AnsSetVal in order to refresh the screen after the answer has been set.

Previous Walkthrough Next Walkthrough