Categories
Portfolio

DocuSign Demo App

I created this demo app using PowerForms to try and impress the developer evangelism team at DocuSign.

Update – Feb 27

I applied for a “Developer Evangelist” job at DocuSign and was one of two finalists.

I did not end up getting the job and actually felt a much less qualified candidate was able to get the job due to bias but overall, they had a really engaging interview process and everyone was super nice so kudos to DocuSign.

The work you can find below was part of my attempt to better convince the developer evangelism team that I’d be a good fit.

I have since removed the PowerForm that I created but the PowerForm looked like this.

I also created a presentation for this interview on Demystifying Meltdown & Spectre.

More details on my unsucessful but engaging interview process can be found on Glassdoor.

https://www.glassdoor.com/Interview/DocuSign-Interview-RVW19450031.htm

Creating Your Own PowerForm

Check out the DocuSign documentation for how to create your first PowerForm.

The code is really simple and looks like the following for this site:

HTML

<div>
  <form>
    <div class="field half first">
      <input
        autocomplete="on"
        type="text"
        name="name"
        id="applicantName"
        placeholder="Your name"
      />
    </div>
    <div class="field half">
      <input
        autocomplete="on"
        type="email"
        name="email"
        id="applicantEmail"
        placeholder="Your email"
      />
    </div>
    <div class="warning-message">
      You didn't fill out the form entirely. Try filling it out? 😅
    </div>
    <ul class="actions">
      <li>
        <button onclick="docuSign()" class="button big">
          Support Frances 🎉
        </button>
      </li>
    </ul>
  </form>
</div>

JavaScript

Note that I am using jQuery as a dependency.

// initially hide warning message
$(".warning-message").hide();
// open in new tab
function openInNewTab(url) {
  var win = window.open(url, "_blank");
  win.focus();
}
// DocuSign
function docuSign() {
  if (!$("#applicantEmail").val() || !$("#applicantName").val()) {
    // if no values, show warning message
    $(".warning-message").show();
  } else {
    // set PowerForm url
    var url =
      "https://demo.docusign.net/Member/PowerFormSigning.aspx?PowerFormId=18bd5af0-3a6f-4d59-9400-82d7be18cc2e";
    // set email
    url += "&Applicant_Email=" + encodeURIComponent($("#applicantEmail").val());
    // set name
    url +=
      "&Applicant_UserName=" + encodeURIComponent($("#applicantName").val());
    // set updated URL
    openInNewTab(url);
  }
}

There’s also this useful YouTube video that gives a technical overview of how PowerForms work.

Thanks Aaron & Dewey for the useful tutorial!

 

By Frances Coronel

Frances Coronel is a software engineer specializing in UI development on the Customer Acquisition Team at Slack where her mission is to make your working life simpler, more pleasant, and more productive.

She has been working professionally as a developer since 2015 and holds a Bachelors in Computer Science from Hampton University and a Masters in Computer Science from Cornell Tech.

Outside of Slack, Frances is an Executive Director of Techqueria, a 501c3 nonprofit that serves the largest community of Latinx in Tech in the US.

She also supports Code Nation as a member of their Bay Area Leadership Council and the Latino Community Foundation as a member of their Latinos in Tech Giving Circle.