Guest Blog from Town of Framingham, MA: HTML5 App Development with the Accela API - Accela

Accela Insights Blog

Better government through civic engagement

Guest Blog from Town of Framingham, MA: HTML5 App Development with the Accela API

***Editor’s Note: Today’s post comes from Alan Holt, Manager of Data Services for the IT department in the Town of Framingham, Massachusetts.***

The other day I was asked by my director to take a survey about what motivates me to do my job well here in the Town of Framingham, Massachusetts. I was supposed to pick my top 3 motivators. Of course I started to check off MONEY, then paused and spent some time reflecting on what really does motivate me. When I handed in the survey, money did not even make the cut. I was surprised to realize my top choice was “Interesting Work.”

b2ap3_thumbnail_MotivatingFactors.jpg

I am the sole Accela support person and implementer at our site. This responsibility occupies about half of my time. I find it has so many capabilities that I find interesting, that I would gladly spend all my time working on Accela-related projects if I could. I have become an evangelist for enterprise permitting, spreading Accela into 12 different departments and using it to track more than 100 different permit and license types – from A (Animal Permit) to Z (Zoning Board Ruling).

The variety of business processes required to run a municipal permitting is remarkable. I have followed public health inspectors into the field and watched them climb into dumpsters to investigate an odor complaint; helped a plans reviewer retrieve 75 year old blueprints from the archives to perform a structural certification after a winter storm damaged an old school building; even watched the Sealer of Weights and Measures measure a yard stick – with a yard stick – to certify a measuring tool for fabric sales.

Most of these processes were tracked with paper or occasionally a spreadsheet. Turning to the set of tools in the Accela Automation suite, I would create a solution that added structure, consistency, integration and collaboration to the information and tasks involved in that process. My favorite tools in the Accela tool box for creating these solutions:

  • APO integration enforces consistency of addresses. It also provides the link to the next item…
  • GIS integration links to our parcel base and our extensive infrastructure layers (flood plain, historic district, wetlands, easements to name some of the popular ones).
  • SQL Reporting Services and Report Manager for custom reports that can be run on a schedule or ad-hoc and distributed via files, email or live link.
  • Expression Builder connects to web services that validate state licenses, alert for delinquent taxes in our accounting system and populate forms with DigSafe information, all in real time.
  • EDMS Interface connects permit-related documents to our Laserfiche document archive.

Recently I was asked to try to improve some processes we were already completing in Accela. The issue was related to the number of steps involved in resulting an inspection. Many of our inspectors schedule their own inspections each day, usually over the phone or through email, and are adjusting this list constantly throughout the day as priorities change, issues appear or opportunities arise. They find the steps involved in looking up the permit and scheduling tedious. “Just assume that we are doing the inspection here and now. Can’t we just put in the comments and the status and be done?” By design, Accela Mobile Office, Accela Inspector and Automation all require that you go through this look-up and schedule step before you can result an inspection. Was there a way to skip right to the result and remove the lookup and scheduling time?

Fortunately, Accela has put another tool in the box to help us develop custom solutions. I was inspired by Kris Trujillo’s and Anil Lakkyreddy’s session, “Developing Your First App with Accela SDK,” at the Accela Engage conference last year. They built an HTML5 app during that session using the Accela API in less than an hour. My interest was piqued (remember my #1 motivator?). I started digging into HTML5, JavaScript and the Accela API. I realized I could tailor an app that could present only a minimal amount of fields needed to identify the permit and complete a new inspection. The entire app could be a single plain HTML page that posts to a web service that takes care of the scheduling and result details.

In a few days of part-time work I was able to build a prototype that worked on Apple, Android and Windows devices from smartphones to desktops. That is a huge advantage of app building for HTML5 coupled with CSS3 and JavaScript – it can render the same user interface with some dynamic capabilities across all of those devices from the same application code.

The pilot app I created was for Code Enforcement Officers. As the officer begins to type the street name, a filtered list of validated street names appears. When a street name is selected, all of the open cases that match the officer’s inspection disciplines and department are shown in a list. Click the case you want, the Case Number field is copied and case listing collapses to reveal the Inspection Info.

b2ap3_thumbnail_CodeEnfOpenCases.jpg

Open Cases Displayed in the Framingham’s HTML 5 Code Enforcement App

The Inspection Type list is filtered to types that are valid for this case type. Likewise, the Result list is filtered to the valid result choices for the chosen Inspection Type. The inspector enters any comments and submits the inspection. From start to finish, it can take less than a minute to find the case and result a new inspection.

b2ap3_thumbnail_CodeEnfInspectionInfo.jpg

Framingham’s HTML5 App for Code Enforcement Inspections

If you are wondering what the “0” and check mark represent on the header of the app, they provide feedback to the user about another HTML5 feature. The check mark indicates the app is connected to the network. If the inspector’s device is not currently online, the inspection record is stored locally using HTML5’s standard for local storage of app data. When a connection is established, the records are then uploaded automatically. The “0” is a counter to show how many inspections are stored locally, waiting to be uploaded.

After building the prototype app for Code Enforcement, I changed the field names on the form and the selection criteria and soon Electrical Inspector was born, followed later that day by siblings Plumbing Inspector and Building Inspector. I can see more family members arriving soon, including Conservation Officer, Rental Unit Inspector and Sign Officer. As I learned in the user conference session, making the app task-specific simplifies the interface, minimizes the app size and reduces the amount of data traffic. I think it also makes the user feel a bit special – “Here, I made this for you.”

Shortly after the first mobile app, I started to work on resolving another problem we had with certain online permit applications. The most difficult applications were seldom completed through Citizen Access, leaving behind temp application files and frustrated customers. By designing an HTML5 front end that looked like the paper application forms, the incidence of incomplete applications dropped to almost zero. The forms utilize some JavaScript to perform address validation and license validation, and also to recall the applicant’s information when they enter their email address. We are testing these now on our Building and Fire department kiosks.

b2ap3_thumbnail_ElectricalPermit.jpg

HTML 5 Application Form for Electrical Permit

Accela has made a very important business decision to make their products and tools “open” to their clients and business partners. Accela’s developer API is a powerful tool that opens a new capability to customize the user experience by developing our own front-end applications that work on the devices in which we have already invested.

And if you are curious, the other motivational factors I chose from the survey were “Independence” and “Pride/Sense of Accomplishment.” And “Hawaiian Shirt Fridays.”

Tags: , , , ,

About The Author

Author's recent posts

RELATED POSTS

COMMENTS

3 Responses

  1. Macy Jones says:

    is best way for framing in html5 app development 🙂

  2. Thanks for such an insightful and detailed post

  3. Great log for all designers to learn HTML5 Techniques

Leave a Reply

Your email address will not be published. Required fields are marked *