Previous Walkthrough


Walkthrough 5: Allowing the User to Take a Snapshot and Resume the Session

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. We will be posting the snapshot to the web app using AJAX, so we’ll include the jquery library to simplify our AJAX calls. Add the following script element.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<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.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.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>
</body>
</html>
  2. Add a button for saving a snapshot of the interview.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<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.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <button onclick="snapshot()">Snapshot</button>
    <form id="form1" runat="server">
    <h1>Employment Agreement Generator</h1>
    <div id="interview" style="width:100%; height:600px; border:1px solid black">
 
    </div>
    </form>
</body>
</html>
  3. Define the snapshot function in a script element.  This function will use AJAX to post the snapshot to your web app.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<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.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <button onclick="snapshot()">Snapshot</button>
    <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>
        function snapshot() {
            HD$.GetSnapshot(function (s) { $.post(location.href, { snapshot: s }); });
        }
    </script>
</body>
</html>
  4. At this point, clicking the Snapshot button causes a snapshot to be posted to the web app, but the web app ignores it.  Add the following code to Default.aspx.cs so the web app will store the snapshot in a file.  For this walkthrough, the file will be in the temporary directory.
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using HotDocs.Cloud.Client;
using System.IO;
    
namespace EmploymentAgreement
{
    public partial class Default : System.Web.UI.Page
    {
        protected internal readonly string _snapshotFilePath = Path.Combine(Path.GetTempPath(), "snapshot.txt");
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Form["snapshot"] != null)
            {
                File.WriteAllText(_snapshotFilePath, Request.Form["snapshot"]);
                Response.End();
            }
        }
 
        protected string GetSessionID()
        {
            var client = new RestClient("SUBSCRIPTION_ID", "SIGNING_KEY");
            return client.CreateSession("Employment Agreement", Server.MapPath("/EmploymentAgreement.hdpkg"));
        }
    }
}
  5. Add a link to Default.aspx that will allow the user to resume the interview from the point at which the snapshot was taken. This link will be visible only if the snapshot file exists.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<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.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <button onclick="snapshot()">Snapshot</button>
    <a style="float:right; display:<%= System.IO.File.Exists(_snapshotFilePath) ? "block" : "none" %>"
        id="resume-link" href="Default.aspx?resume=true">Resume Interview from Snapshot</a>
    <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>
        function snapshot() {
            HD$.GetSnapshot(function (s) { $.post(location.href, { snapshot: s }); });
        }
    </script>
</body>
</html>
  6. The Resume Interview from Snapshot link reloads Default.aspx with the query string "resume=true". We need make the web app respond to this option by resuming the session and deleting the snapshot file. To do this, add the following code to Default.aspx.cs.
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using HotDocs.Cloud.Client;
using System.IO;
 
namespace EmploymentAgreement
{
    public partial class Default : System.Web.UI.Page
    {
        protected internal readonly string _snapshotFilePath = Path.Combine(Path.GetTempPath(), "snapshot.txt");
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Form["snapshot"] != null)
            {
                File.WriteAllText(_snapshotFilePath, Request.Form["snapshot"]);
                Response.End();
            }
        }
 
        protected string GetSessionID()
        {
            var client = new RestClient("SUBSCRIPTION_ID", "SIGNING_KEY");
            if (Request.QueryString["resume"] == "true")
            {
                var snapshot = File.ReadAllText(_snapshotFilePath);
                File.Delete(_snapshotFilePath);
                return client.ResumeSession(snapshot);
            }
            return client.CreateSession("Employee Agreement", Server.MapPath("/EmploymentAgreement.hdpkg"));
        }
    }
}
  7. Finally, tweak the snapshot function in Default.aspx so it causes the Resume Interview from Snapshot link to become visible immediately when the snapshot is posted to the web app.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<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.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <button onclick="snapshot()">Snapshot</button>
    <a style="float:right; display:<%= System.IO.File.Exists(_snapshotFilePath) ? "block" : "none" %>"
        id="resume-link" href="Default.aspx?resume=true">Resume Interview from Snapshot</a>
    <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>
        function snapshot() {
            HD$.GetSnapshot(function (s) { $.post(location.href, { snapshot: s }, function () { $('#resume-link').show(); }); });
        }
    </script>
</body>
</html>
  8. Confirm that the snapshot/resume functionality works by partially completing an interview, clicking the snapshot button, closing and restarting the web app, and clicking on the Resume Previous Session link.

Note:  This is not intended to be a realistic application of the snapshot/resume functionality, as it does not store snapshots on a per-user basis.

Previous Walkthrough