» Fig Leaf Software Home

We've Got You Covered.

Thursday, October 23, 2014

Building an EXTJS 4 Application with Microsoft .Net and SQL for NACCHO

The National Association of City and County Health Officials engaged Fig Leaf Software to develop a dynamic form/workflow/collaboration application using web standards. We used Sencha’s Ext JS 4 javascript framework for the front-end development and Microsoft .NET/SQL Services on the back-end to create a 3-tiered REST-based architecture that positions them for future growth.

The Challenge

NACCHO’s Model Practices Program honors and recognizes outstanding local health practices from across the nation and shares and promotes these practices among local health departments (LHDs). Model and promising practices cut across all areas of local public health, including, but not limited to, community health, environmental health, emergency preparedness, infrastructure, governmental public health, and chronic disease.
Once practices are designated as model or promising, they are stored in the Model Practices Database so all LHDs can benefit from them. NACCHO began accepting Model Practices submissions in 2003. Since then, NACCHO has placed numerous model and promising practices in the searchable online Model Practice Database with more added each year.
Since 2003, the collection and review of submissions had largely been a manual process. LHD’s entered data through a web form which was ultimately downloaded into either a Microsoft Excel spreadsheet or Microsoft Access database. Submissions went through a two-stage content review and collaboration process, often involving four or more reviewers whose actions were coordinated by NACCHO personnel and tracked manually through a series of excel spreadsheets. Due to growth of the program, this labor-intensive process was deemed to be unsustainable and Fig Leaf Software was called in to design and implement a workflow system that would automate the submission, review, collaboration, and publication cycle.

[ Teach Yourself Sencha Touch and Sencha Architect Tutorial ]

Here’s a flow chart that we created as part of our specification process that models the review cycle:
Workflow process model
Workflow process model (click to enlarge)
Figure 1: 3-Tier Architecture

3-Tiered Architecture

A 3-tiered architecture segments your app into three distinct service layers:
  1. The User-Interface
    In the pre-smartphone days, organizations could settle on creating a single front-end that only supported desktop browsers. With the proliferation of mobile devices of all shapes, sizes, and capabilities, corporate IT must now consider developing multiple front-ends for their apps. At an absolute minimum, line-of-business apps should support desktop and tablet with reduced functionality available for phones. This requirement frequently requires that multiple front-end apps be developed in parallel, each accessing a common REST-based webservices api implemented at the business intelligence tier.We chose to develop the front-end using Sencha’s frameworks – Ext JS 4 and Sencha Touch for the following reasons:
    1. The toolkits are based on web-standards (javascript & html5)
    2. Sencha Toolkits use a well-defined client-side MVC architecture, helping to ensure coding standards among developer team members thereby leading to reduced future maintenance costs.
    3. Both frameworks have good tooling (Sencha Architect and Sencha Cmd)
    4. Consistency in the Desktop and Phone API’s means that we can rapidly develop a mobile phone GUI by repurposing the data model classes from the desktop GUI.
    5. Flexibility to upgrade in the future to the recently released Ext JS 5, which will enable us to support both desktop and tablet GUI’s from a single codebase.
    6. Ext JS 4 has full backwards compatibility with IE8 – an important consideration when we evaluated NACCHO’s target audience of municipal health departments.
  2. The Business Intelligence Tier
    This tier marshals resources from  “back-office” resources – enterprise databases, CRM, mail servers, and more. NACCHO’s I.T. group is in the process of migrating from Adobe ColdFusion to a Microsoft .NET platform as their corporate standard. We honored their preferences by creating a rich REST-based webservices API that could be invoked from virtually any client-side technology that can parse data in JavaScript Object Notation (JSON) format. This architecture gives NACCHO the flexibility to publish their API so that third-parties could easily develop a custom front-end or mashup that leverages the model-practices data. At Fig Leaf, we strongly believe in “open government” and actively seek opportunities to make .gov data resources available to other developers.
  3. The Database TierNACCHO’s corporate standard is Microsoft SQL Server. We designed an efficient, normalized 20-table schema with referential integrity rules that enforce valid data input. Due to the dynamic nature of the application, MongoDB might have actually been a better choice from a development perspective – but since it wasn’t a corporate standard and we had already chosen .NET as the middleware, we went with “old reliable.” We use Microsoft Full Text indexing to drive the front-end keyword search.

Organizing Around Perspectives

NACCHO Model Practices has four different user roles:
  1. Casual browsers who want to search and retrieve Practices.
  2. Applicants who are submitting Practices for review
  3. Internal Reviewers on the NACCHO staff who parcel out Practices for review
  4. External Reviewers who review and comment on Practices as well as collaborate on forming an opinion as to whether a submission is a Model Practice, Promising Practice, or Neither
  5. Administrators who perform an initial review of submitted practices, create the submission form, create and run ad-hoc reports, and manage the overall review cycle.
To address the very different roles and responsibilities of the stakeholders, we organized the application around a series of “Perspectives”

The Browser Perspective

The Browser Perspective, as illustrated by Figure 2, enables users to easily apply filter criteria to search through NACCHO’s Model Practice database. The Ext JS 4 data grid automatically downloads records in the background as the user scrolls, reusing DOM elements on-the-fly to keep memory overhead at manageable levels. Search filters are applied automatically after a user stops typing in a field.
Figure 2: The Browse Perspective running in Satan’s favorite browser (IE 8)
Users can resize and rearrange grid columns. In addition, all of the sections of the layout can be expanded or collapsed in order to maximize available space. These settings persist between a user’s sessions, enabling them to create a personalized interface that only shows the information that they find to be helpful.

The Applicant Perspective

The Applicant Perspective, as illustrated in Figure 3, enables logged-in users to edit, save, and submit a Model Practice for review. Ext JS’ rich form field widgets, customizable validation, and flexible layouts enable us to dynamically assemble the form at runtime based on instructions that are read from the server. We also implemented a “Print” feature that redraws the form in a printer-friendly format with hard page-breaks that separate each section.
Figure 3: The Applicant Perspective
Figure 3: The Applicant Perspective. Yes, this works in IE 8 too!
In order to facilitate the editing of large blocks of text, we created an Ext JS extension that integrates the best-in-class TinyMCE 4 WYSIWYG editor and added a previous/next buttons at the bottom of the screen to help users navigate through the different tabbed-based sections.

The Administrator Perspective

The Administrator Perspective, depicted in figure 4, uses roles-based security to restrict access to administrator/reviewer functionality by role.
“Super Admins”, of course, have full run of the system but are primarily responsible for the following tasks:
  1. Reviewing the initial submissions and assigning them to an “internal reviewer”, a subject matter expert within NACCHO, who reads through the practice and decides whether it has been properly categorized.
  2. Designing forms
  3. Creating and running reports
  4. Auditing the review cycle
  5. Managing accounts
Assigning an initial reviewer
Figure 4: Assigning an initial reviewer
Using the Form Builder Perspective
Since NACCHO’s survey form changes from year-to-year, Fig Leaf Software designed the Model Practices application to enable non-technical admins to customize their forms without involving I.T. Form fields can be grouped into tab panels and we support collecting data via text input fields, wysiwyg editor (TinyMCE 4), select boxes, checkboxes, and radio buttons. Admins can set data validation rules to require input on select fields, restrict text input by word count, and more!
Admins can build custom forms without involving I.T.
Figure 5: Admins can build custom forms without involving I.T.
Running Reports
We’ve implemented several query-by-example reporting tools into the Model Practices application. Admins can quickly identify the status of practices in workflows and run statistical roll-ups on approved documents. Using Sencha Ext JS 4, we were able to easily  present data in a scalable grid and display aggregate statistics in a native web chart. We also developed a custom extension that allows users to export the information in any grid to Microsoft Excel, as illustrated in figure 7.
Figure 7: Executing reports, charting the results, and exporting to Microsoft Excel
Figure 7: Executing reports, charting the results, and exporting to Microsoft Excel
In rare cases, query-by-example interfaces might not be sufficient to enable administrators to extract the information that they require. To handle any reporting criteria that might come up in the future, we implemented the query builder, depicted in figure 8, that enables admins to create a dynamic filter for every field on any form. We’ll be posting the Query Builder code to GitHub before the end of the year.
The Query Builder enables admins to create and save custom reports.
Figure 8: The Query Builder enables admins to create and save custom reports.

 The Internal Reviewer Perspective

As illustrated in Figure 9, the Internal Reviewer’s job is to read through the submitted document and assign subject-matter experts (external reviewers) who will grade and judge the responses. If an Internal Reviewer decides that the submission has been incorrectly classified, they can reclassify it forward it back to the Administrator who, in turn, can pass it on to a different internal reviewer. This view uses a drag & drop, searchable grids that facilitate the assigning of external reviewers. We used a third-party extension, Ext.ux.grid.Filterbar, to define the “filter row” depicted in the “Search for Reviewers” grid control.
Internal reviewers read through the submissions and assign them to external reviewers for "grading"
Figure 9: Internal reviewers read through the submissions and assign them to external reviewers for “grading”

The External Reviewer Perspective

External reviewers are charged with reviewing the application and answering a series of targeted review questions that were defined in the Form Builder perspective. Responses that don’t meet the designated data validation criteria are denoted by a red [X] in the left-side tree control. Once they have completed commenting on applicant responses, they designate the application as being a “Model Practice,” “Promising Practice,” or “Neither.”
Figure X: Ranking and reviewing applicant responses
Figure 10: Ranking and reviewing applicant responses

The Reconciliation Perspective

If two or more external reviewers disagree as to whether an application is a “Promising Practice” or “Model Practice”, they are directed into the perspective, depicted in figure 11, where each reviewer can see all of the other reviewer’s responses and comments. They can also schedule a conference call from directly within the GUI to take place via VOIP (implemented by integrating the Twilio API) where they can hash out their differences. All external reviewers must ultimately reach consensus as to whether a submission is a “Model Practice”, “Promising Practice”, or “Neither”.
Figure: Comparing other reviewer's responses, scheduling a conversation, using VOIP
Figure 11: Comparing other reviewer’s responses, scheduling a conversation, using VOIP
Once the external reviewers reach consensus the applicants are notified via email of it’s final disposition and, if rated as a “Model Practice”, or “Promising Practice”, the application becomes accessible to the public on the web site.

Built using Sencha Architect

Sencha Architect, depicted in figure 12, enabled our development team to respond to changes in our customer’s requirements with agility as well as rapidly prototype and visualize new features. Using it’s deep integration with Sencha Cmd made it easy for us to create and post development, testing, and production builds.
Sencha Architect's visual designer enabled our development team to act with agility.
Figure 12: Sencha Architect’s visual designer enabled our development team to act with agility.

Futures – Mobile and More!

Model Practice Mobile Prototype
Model Practice Mobile Prototype
Using Ext JS for the project paid off handsomely when the customer asked us to develop a level-of-effort (LOE) for porting the search perspective over to a mobile-phone form factor. Using Sencha Architect and relying on the REST-based api that we produced during the desktop app development phase allowed us to create a quick proof-of-concept using Sencha’s Touch framework.

Would you like to know more?

Please contact us at info@figleaf.com to find out more about our custom application development services and how we can help you realize your visions of productivity enhancements across your enterprise in a cost-effective manner!

FREE Sencha Touch / Architect Tutorial

Learn Sencha Touch or Sencha Architect for FREE with our Teach Yourself Sencha Touch and Sencha Architect Tutorial

Fig Leaf Software Certified As A Service Disabled Veteran Owned Small Business (SDVOSB)

We are proud to announce that we have received official verification as a Service-Disabled Veteran-Owned Small Business (SDVOSB) from the U.S. Department of Veterans Affairs Center for Veterans Enterprise (CVE). The SDVOSB certification is good for two years and allows Fig Leaf Software to participate in Veterans First Contracting Program opportunities. The SDVOSB provides Fig Leaf access to Federal Government set aside contracts that are only available to SDVOSB companies as well as the award of sole source set aside contracts up to $3M. As a SDVOSB, Fig Leaf Software will maintain the following listing in the Vendor Information Pages (VIP) database that federal procurement officials use when searching for vendors and suppliers:https://www.vip.vetbiz.gov/Public/Search/ViewSearchResults.aspx?SCID=2124742

"Fig Leaf Software is proud to be certified by the Department of Veterans Affairs Center for Veterans Enterprise as a Service-Disabled Veteran-Owned Small Business. The certification gives Fig Leaf a true differentiator in government contracting opportunities. Coupled with our already stellar past performance and expertise within the federal sector, the SDVOSB opens a whole new arena of opportunities as a prime and partner on federal contracts. Becoming a certified SDVOSB was one of several strategies that we have launched to increase our market position within the federal sector."
- Dave Gallerizzo USMCR (Ret.), CEO of Fig Leaf Software.
Fig Leaf Software, a recent member of the Inc. 500/5000 listing of Fastest Growing Private Companies, serves companies and organizations from a wide variety of industries including: the US Federal Government; city, state, and local agencies; healthcare; financial services; legal; technology; and associations and nonprofits. Fig Leaf Software's federal government customers include the United States Senate, the National Park Service (500 content managed web sites), the Broadcasting Board of Governors, the Department of the Interior, the Department of Justice, Export-Import Bank of the United States and many others. 
"As a core team member on the EAGLE II Small Business 8(a) Track, Functional Category 1 – Service Delivery, Contract Number: HSHQDC-13-D-E2084, we are delighted that Fig Leaf Software has been certified as a Service-Disabled Veteran-Owned Small Business. The company's expertise and experience delivering Drupal and other solutions will greatly benefit their governemnt clients."
Gus Vazquez, Principal, Delivery Operations for Customer Value Partners, Inc
Fig Leaf Software is a certified Service-Disabled Veteran-Owned Small Business (SDVOSB) and a full-service digital agency specializing in marketing, web and mobile design, development and web professional training. For nearly 20 years, Fig Leaf Software has helped organizations overcome business challenges through the implementation of technology and award-winning design. Fig Leaf Software is closely partnered with Google, Adobe, Ektron, Acquia, PaperThin, HubSpot and Brightcove. Fig Leaf Software's team is comprised of talented marketers, developers, graphic artists and designers with years of experience delivering web and mobile applications and developing public web sites, portals, intranets, extranets. As an industry thought-leader in web technology, Fig Leaf Software has authored many publications and training classes and is a frequent contributor to technology forums and user-groups. The company's training division has provided certified training for more than 35,000 web professionals in the Google Search Appliance, Google Apps for Business, Drupal, Adobe ColdFusion, Adobe Creative Cloud and more . Visit www.figleaf.com or call 202-797-7711 to learn more about our products, training or consulting services.
If you would like more information about this topic, please contact Bret Peters, Chief Marketing Officer, at 202-797-7711 x109 or email at bpeters@figleaf.com.
Also please check out the full press release on PR Newswire here: http://tinyurl.com/FIGSDVOSB

Wednesday, October 1, 2014

Spotlight INBOUND 2014: Best Practices for Building an Inbound Marketing Team

Mike Volpe, CMO at HubSpot shared some great ideas for creating an internal team of inbound marketers.  Below are some keys to hiring inbound marketers based on Mike’s presentation and my own industry experience.  

  1. Smart - Make sure the individuals you hire are intelligent.  Smart people figure things out.
  2. GSD Principle - You want people who can “Get Stuff Done”.  It’s not just about being smart. The people you hire also need to be able execute tasks.  I usually refer to this as does the person have an MBA - “Mop Bucket Attitude” a phrase my friend Troy Vlahos and I coined when we worked at Fresh Fields (now Whole Foods Market) to identify the employees who were willing to do anything needed, including mop the floor or clean up.
  3. DARC - Inbound marketers should exhibit as many of the “Digital, Analytical, Reach, Content” qualities as possible > Digital Citizens - Look to hire individuals who speak the digital language.  It’s important to hire “Digitals” whether they be a “Digital Native” or a “Digital Immigrant”.  Think about this in terms of a foreign language. If you’ve ever known anyone to learn a foreign language at a young age and witness how they can become fluent with ease, you’ll get this concept.  Being a Digital Native is not about age - it’s about the ease in which the individual gets digital ... do they understand digital intuitively. > Analytical - In the role of Inbound Marketer, an individual should be more analytical than the average person in their role elsewhere. > Reach - Good Inbound Marketers provide evidence that they have gravitational attraction - they have done something that attracted people to them or their work before.  I count my son, Bijan Peters, in this category, especially after his study abroad adventures in Europe with Virginia Tech.   > Content Creators - Find people who create content naturally - you don not want content to be a struggle.  Look for people who have the power to persuade.

Note that every person you hire doesn’t need to be strong in all four areas of DARC.  If you find individuals who are strong in two or three of the areas they may be a great fit for your organization.  You may find an individual who has not had the opportunity to create Reach but if they are Digital, Analytical and have great Content skills you can be sure the with the right direction they’ll achieve Reach.

Growing a Content Marketing / Inbound Marketing team can take time so it is important to network and keep your eyes out for top talent and always be recruiting. The Agency Post has a section dedicated to Talent & Recruitment which can be a great source for internal corporate teams or full service agencies.

Download HubSpot's eBook "Hiring in the DARC Ages", to assist you with selecting employees that will help make your organization successful. Click the image below to grab your copy today!

Thursday, September 25, 2014

The Age of the Webinar and Content Marketing

As a web solutions company, Fig Leaf Software’s mission is to help our clients communicate over the web.  We do this in many ways.  One way we help is with webinars.  Specifically, we help our clients use Adobe Connect to deliver engaging webinars.  Most of the time, companies are using webinars for marketing purposes, which makes a lot of sense because webinars are easy to produce and reach a large audience—and if you are a marketer to control the message. Fig Leaf Software is also a consulting company that provides Web Content Strategy, Management and Digital Marketing services, aka: Content Marketing.

How do Webinars and Content Marketing relate?  Well, glad you asked.  But first let’s define Webinars and Content Marketing:

  • A Webinar is a live, online informational presentation during which participants can ask questions and submit comments.
  • Content Marketing is any marketing that involves the creation and sharing of media and publishing content in order to acquire and retain customers.

A Content Marketing Strategy Varies

A Content Marketing Strategy will include a number of different tactics, like email announcements, newsletters, white papers, website content and, of course, webinars.  This content marketing mix, also referred to as the Content Marketing Funnel, guides potential users down an “ideal” path to purchase by providing valuable information.

The key to effective content marketing is valuable, relevant content. That is, content that speaks to the intended audience.  Marketers will devise a Content Marketing strategy that is unique to whatever they are selling and who they are selling to.  With the rise of social media and all the various forms of communication, sky’s the limit on how marketers choose to disseminate this valuable content.  Metrics, statistics, reports and gut feelings also play a role in how and where marketers focus their content.

Whatever the strategy, the goal in any Content Marketing Strategy is to engage users.  This is where webinars relate to content marketing.

Top Ways to Use Webinars for Content Marketing:

Engage the audience: Webinars are ideal for engaging users.  During a live webinar, presenters can control the content and get instant feedback from participants. Using Adobe Connect, hosts can take it to a higher level by leveraging a variety of content, like PowerPoint, Video, interactive games and more.  At Fig Leaf Software, we highly suggest using polls during webinars to engage and learn more about your audience. Knowing your intended audience is also important to your overall Content Marketing Strategy.

Provide Value: Live webinars can provide tremendous value to participants.  The first question we ask a client when they are planning a webinar is WHY.  Why would a participant attend?  What are they going to learn or take away from the webinar?  We call this the Learning Goal.  A webinar must have a learning goal of some kind for the participants. (Marketers should also ask these questions when creating content too!)

Flexibility—Mix it up: As a tactic within an overall marketing strategy, a webinar can be introduced anywhere within the Marketing Mix or Content Funnell.  Some of our Adobe Connect clients use webinars at the beginning or top of the funnel--to introduce their company and solutions to prospective clients.  Alternatively, some marketers think a webinar should come after a client has consumed other forms of marketing content, (whitepapers, case studies, etc).

For savvy marketers, this ability to change, revise and hone when and where a webinar resides in the marketing mix is extremely valuable.  Our clients who use Adobe Connect have the flexibility and ease of use to mix-it-up and offer webinars in all stages of the marketing cycle.

Note: Adobe Connect users can also offer additional forms of content, (white papers, case studies,etc.), to participants during a live webinar.

Metrics and Reporting: For any content marketing strategy to be truly successful, there needs to be some level of metrics involved.  How do marketers know if their strategy is working or needs to be improved?  Is the content being consumed by the intended audience?  Which social media site should you focus on? These questions and more can be answered by incorporating webinars into the marketing funnel!  Our Adobe Connect clients know how many users register for webinars from Facebook, LinkedIn and other specific campaigns.  During a live webinar, Adobe Connect tracks the engagement level of each participant.  This type of reporting also helps marketers revise and improve their content marketing strategy.

Note: Adobe Connect clients can also easily record webinars and incorporate those recordings into their content marketing mix, and see reports on the number of views and hits.

Are Webinars are just for Sales and Marketing?

Nope!  Webinars are not just limited to sales and marketing.  Webinars can be used by anybody to broadcast to a wide audience.  At Fig Leaf Software, we also work with a lot of non-profit and associations that use Webinars to communicate with their members.  We work with government agencies that use webinars to communicate, engage and educate the public.  We have seen online conferences, consortiums, panel discussions, board meetings and much more delivered with Adobe Connect.

Webinars can also be used to provide value to both new and existing clients.  We have a number of clients who use Adobe Connect to on-board new customers and provide informational updates to existing clients.

In either case, the webinar is the communication medium that is providing some kind of information to someone who wants that information.  Users are engaged and immersed. Feedback and questions are asked and answered. Users are learning.  Is not this the whole idea behind Content Marketing?

Attend a webinar:


Wednesday, September 10, 2014

Website Survey and a Chance to Win an iPad Mini!

In an effort to improve our website, we invite you to participate in a short survey. You will also have the opportunity to enter a raffle for an iPad Mini! Your input is very important to us and will be kept strictly confidential. 

The deadline for the survey is Wednesday, September 17, 2014.

For any questions about the survey or if you have trouble accessing the link, please email marketing@figleaf.com 

Complete the survey here: Fig Leaf Software Website Survey

We appreciate your input! 

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us


Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036