An Encanvas Use Case Story

Squork Mapping - Mining the hidden depths

How we built Squork Mapping [with Encanvas]

16th January 2012

Encanvas is a registered trademark of Encanvas Inc. All other trademarks and trade names

used in this publication are recognised as belonging to their respective owners. Copyright

exists on this material. No part of this document may be replicated or reused without the

prior written consent of Encanvas Inc.

2

ABOUT ENCANVAS

Encanvas is an application fabric used to design, deploy and operate cloud applications. It levers the

advantages of the Microsoft Web Platform to create and operate industry standard web-borne (and

database-driven) business applications.

Encanvas is designed to service the long-tail of ‘situational applications’ demanded by business

professionals when pre-authored software applications are too big, too small, too complicatedtoo

poorly integrated or just not as good as they could be. This means the economics of Encanvas must

allow for its applications to be used for a short time and discarded when no longer needed. It is the

ecosystem where situational applications (we call them ‘canvases’) are born and exist.

Our award winning software is unique for several reasons:

It’s based around ‘canvases’ – web based documents powered by relational databases.

It enables the design, deployment and operation of web applications without authors and

operators needing to have programming or scripting skills.

It includes advanced version control features that mean applications stay in-tune with the

operating platform.

It integrates painlessly with existing data sources and supports multi-threaded data integration.

It supports a hybrid user-identity environment.

It creates a Master Data Management model creating a single version off the truth.

It automates the creation of web forms and data repositories.

It produces cross-browser compatible applications.

It employs ready-made engines for file and image management, search, printing – so that

applications can be created without having to weld together third party components.

It manages the full life-cycle of applications from a single blob of code.

The design interface of Encanvas Create is friendly and easy to use. It looks like this:

3

OVERVIEW TO THIS USE CASE EXAMPLE

Squork Mapping is a Software-as-a-Service (SaaS) application that provides business people with the

ability to upload, plot, manage and share geo-referenceable data on global maps. It has been

developed and is operated using Encanvas software. The application consists of:

1. An outer marketing site – incorporating payment processing through integration with the Sage

Pay Payment Gateway. This site has been largely coded in PHP (because we had the resource

to do so), with database-centric components authored in Encanvas - though we could

probably have produced the entire site in Encanvas had we chosen to do so.

2. The main application site – where registered users of Squork Mapping (i.e. site administrators)

design, publish and manage their site. This site is wholly created in Encanvas.

3. The viewer sites - where named users and visitors to the mapping site (published by the Squork

Mapping registered user / administrator) view the maps.

4. The Technical Administration site – employed by Squork to manage the SaaS application and

all related activities such as publishing mapping resources, managing enquiries, help

administration, user permissions and account settings etc.

1. Outer Marketing Site 2. Application Site

3. Published Map Sites 4. Technical Administration Site

In this document we summarise what makes it an interesting case story.

4

PROJECT OUTLINE

April 2010 – The project team decided to produce an application using Encanvas that could give

casual users of digital mapping the means to securely publish and share their geo-referenceable data

on maps to give it a geo-context. The development team consisted of a product manager (me), our

finance director (Nick) and a single developer (Andrew). The team spent five days huddled around a

table and a computer iteratively developing the application. The result was pretty pleasing but there

was a list of things we weren’t happy with.

Our initial idea was to develop Squork Mapping for the UK market adopting the Ordnance

Survey free mapping resources and based around Eastings and Northings – but mid way

through we decided it would be cool to support overseas partners with an international map

set – and international maps require longitude and latitude plotting which we were unable to

support.

Uploading data is never easy and we were confident that we would have an issue if non-

experts tried uploading their own data without excellent wizards and human readable error

reports.

The original Encanvas mapping engine was designed for use by people that use maps

frequently so we provided lots of ways of selecting data pins and presenting data in tables. But

for casual users, we knew this level of map complexity was too much

We hadn’t had time to develop ‘user user’ tools for people that were presented with maps –

like search data, print, share etc.

In addition to all of the above Encanvas didn’t have a billing application layer or user

administration.

BREAK – ….so we had a 17-month break on other projects.

Sept 2010 – We re-visited Squork Mapping and set to work finishing it off. January 12th 2012 we finished

the first cut.

RELATED ENCANVAS DEVELOPMENTS

During the course of this project the Encanvas development team added the following features:

Secure Socket Layer (SSL) security on canvases used in User login/registration

Integration with Sage Pay

HTML template for producing header site navigation (Help, My Account, Login/Out)

Improvements to wizard control

Embedding of canvases into HTML pages

Improved search controls

Web printing

Further development on image selection and publishing to the Web

Improved mapping control: longitude/latitude support, mouse wheel zoom, hover over

controls…

Enhancements to simplify CSV data upload template

Improved User reporting on reasons for upload failure

Creation of User Help administration system (admin pages for simple topic/article creation and

publishing, and user pages to browse topics and review articles)

5

User Registration and Secure Socket Layer Stuff

Registering on Squork Mapping is a simple task (we’ve made sure of that) but behind the scenes we’re

employing Secure Socket Layer (SSL) technology to make sure that transacted information is secure.

This ability to use SSL is integrated into the configuration options provided by Encanvas Web Server

Manager.

eCRM / Scheduled Email Integration

As soon as someone registers on Squork Mapping it registers with our schedule based eCRM

component – also developed in Encanvas – that schedules a series of pre-templated emails to ‘on-

board’ the new registrant and provide them with help, guidance and encouragement to not only use

the application but also, after 14-days, to invest in it.

Sage Pay Payment Gateway Integration

Encanvas integrates seamlessly with Sage Pay Payment Gateway and provides a trustworthy, easy to

use mechanism to transact payments via Encanvas created websites. We chose the Sage Pay

Payment Gateway as a simple secure online payment procesisng service because we’d heaerd good

things about their customer support and the quality of their API tools (all of which has so far proven to

be correct!). The team at Sage Pay were able to advise us on how to setup a Merchant Account

integration with HSBC bank – something we’d never done before. Sage Pay processes millions of

secure payments each month for over 30,000 businesses including easyJet and Lovefilm.com - certainly

big enough to cater for our requirements.

6

Screen-shot of ‘BUY IT’ page options showing catalogue and the on-ramping point for the close integration with

the Sage Pay Payment Gateway.

Product Catalogue Integration

We worked with textyouhome.com founder Allanna Lawrie-Fussey to develop and perfect the glue-

ware to bind Encanvas to Sage Pay Payment Gateway. Thankfully, Alanna had done this before for

her business and was able to provide the team at Squork with good advice on how to develop a

product catalogue and integrate it with the payment processing system. Behind the scenes the

application needs to take care of upgrades, renewals, repeat payments, invoice generation and many

other details that need to be properly managed to avoid labour overheads.

7

‘Contact Us’ Wizard

The ‘Contact Us’ Wizard guides users through the choices that define the reason for theiir enquiry and

help to direct the enquiry to resolution as quickly and painlessly as possible. It’s created using a canvas

embedded into an HTML page (though you won’t be able to see the joins!).

Log files and recording of user activity

Under the covers there’s a lot that goes on in a SaaS platform. One of the essential ingredients is

monitoring user activity to facilitate the learning process and for marketing purposes. Understanding

how users interact with the application(s) and improving the user experience at every touch-point is

essential to the health and profitability of the business. Encanvas makes it easy to create the activity

monitoring and click-stream analysis needed to expose behaviours and provide the dashboards and

reports that bring the activity data to life.

8

Getting the navigation hierarchy right

We recognised that it had to be easy for users to appreciate which aspects of the site were generic to

the Squork Site and which features were peculiar to the Squork Mapping application. Therefore the

header HTML feature provided by Encanvas was used to create a top-line site menu forming a

hierarchy to the menus so that users would not get confused between the ‘SITE MENU’ (‘Help’, ‘My

Account’ and ‘Login’) and the ‘APPLICATION MENU’.

Getting familiar with Squork Mapping… (the start wizard)

The first time users visit Squork Mapping we were concerned that they wouldn’t know where to start! So

we created a wizard using Encanvas to guide users through the things they really need to know. We’ve

used the action layer rules to set a condition that this only appears once – so the second (and future)

times users access the application, they don’t have the hassle of walking through the welcome wizard

again. If users aren’t that patient they have the option to skip the guide (there’s a video if they care to

use it too!). Users can always visit the help section and click on the link to re-visit the start guide at any

time should they need to. (We also added a check-box for administrators within the user administration

page so they can check accounts that don’t require the wizard to appear.)

9

Downloading Templates

We created a way for users to organise their data ready for uploading by providing CSV templates that

non expert users could easily use. This overcame the challenge of users putting the wrong data in

columns. It also meant that users could automatically define field names by simply changing the

column headings in the downloaded template. Notice in the example below how the drop-down

conditionally selects the download.

Uploading Templates

We also produced a wizard to aid the uploading of templates. The challenge for users when uploading

data is to know why an upload didn’t work. For this reason we’ve enhanced the user reporting to

explain in English why an upload hasn’t worked correctly. (Also notice the little question marks that

pop-up help using the information text feature of Encanvas.)

Custom Pin Selection

Having uploaded a data-set, users can select their own pins or tags to personalise their map. This uses

Encanvas image management upload and download. There is significant complexity in the use and

management of images on the web that Encanvas takes care of here.

10

Users

Thanks to Encanvas features to manage user permissions, we were able to create secure named user

views, administration and public map views. In addition, when creating a new account, we’ve used

the conditional rules again to only ‘switch on’ the Add New when the Password and Confirm Password

match. These labels are colour coded using link rules to turn from red to green when a rule applies. A

check box creates another data rule that gives administrator the means to enable users to change

their own password.

Having created a user, administrators have full control over the data-sets they permit users to see, edit

and download – fully exploiting the rule-based conditional linking of Encanvas. It demonstrates the

necessity for close relationship between data linking, logic and presentation that Encanvas supports

through its real-time ‘around the table’ design approach.

11

Views

The map views exploit the dexterity of the Encanvas GIS engine which means users can drag and slew

maps, zoom in and out (using the map controls or mouse wheel) and view pin data simply by hovering

over the map. The position of the mouse on the map denotes the point of zoom. All of these features

work in a similar way to Google Maps (given the popularity of Google Maps, most people presume that

all maps should work this way). On the administrator and named user views, pins can also be plotted

and associated data added. This is made possible by having a separate canvas for these views with

different data link relationships.

User control features (search data, print, select data-layer, set default view, plot data

The user control buttons use three action levels (select, hover and toggle) so that users can enjoy a

more interactive ‘Web 2.0’ button experience. They also can be confident of the action they’ve made

such as selection.

Use of a toggle button means that conditions can be applied to the ‘toggle on’ state – in this case we

used this feature to allow users to show multiple conditional panels and realise which buttons were

affected.

12

The use of Encanvas’s conditional panels and action rules means that the SAME page area can be

utilised for several different aspects of the application without reducing the available map space for

browsing. This is particularly important on mapping applications when customers want to maximise the

available browsing space for the map itself!

Search

The search feature searches the data uploaded on the map, not the map itself. This means a search

algorithm had to be developed for Encanvas to enable searching across the Microsoft SQL Server

database that users publish their mapping data to. The algorithm assumes an ‘and’ ‘and’ operator but

this could have just as easily been ‘and’ ‘or’, or some such other structure.

Web Print

We created a web page print feature to enable users to print the map they are looking at.

Select Visible Data Sets

Squork mapping users enjoy a great deal of control over their data sets and specify who can see each

data set, who can edit them and download them. A simple check box is employed to enable

adminsitrators to ‘go public’ with their data. The ‘Select Visible Data Set’ user control

Select Default View

This feature enables the Squark Mapping administrator to set a precise default view of the map and

data (i.e. a specific position and level of zoom) to share with colleagues and present a part of the

world that is relevant to the map audience.

13

Sharing

Some considerable amount of effort went into enabling map sharing using dedicated URLs and

engineering Microsoft IIS to enable simpler references on URLs. A dedicated sharing page provides

users with the ability to access a variety of copy and paste sharing options. Not only can users copy

and paste dedicated URL links into messages that take recipients to a specifc map view (subject to

permissions), they can also copy and paste HTML code to embed mapss into their websites or blog.

Creating and managing help

Help administration on a SaaS site is a big influencer on customer satisfaction but maintaining it can be

a real challenge. Using Encanvas we were able to create an administration canvas to create help

topics and articles online which then presents its content using topic based results (user view below).

14

Behind the scenes

For SaaS platforms, the entire business model is based around many customers being professionally

serviced through the online portal. To make the economics work of the business model demands that

customer service, user administration, product delivery, marketing and promotion, payment processing,

renewals etc. are automated through the SaaS platform. In the case of Squork Mapping, this is made

possible through the creation of a technical Administration site that includes a series of canvases used

to manage every aspect of day-to-day administration; some aspects associated with the

management of customer accounts while other relate specifically to the operation of the mapping

application itself (such as uploading mapping resources).

HOW MUCH OF THE SQUORK MAPPING PLATFORM IS RE-USABLE?

Given that Squork Mapping has been almost exclusively developed using Encanvas, many of the

canvases (and processes) we’ve created for this application can be used time and time again for

other, similar applications.

These include (not a complete list):

General site navigation and look and feel

Welcome wizard

User registration, login/log out, SSL security, forgotten password controls etc.

Payment processing (via the Sage Pay Payment gateway integration)

Account forms and help administration tool-set

Automated templated email / eCRM

Data upload via CSS templates (useful for a variety of data-centric web applications from

business intelligence to email marketing!) including simple English error reporting

Data download and archival

URL sharing

Embedded HTML

Web printing

Data search

MORE INFORMATION

For more information about Encanvas or for details about Squork, please visit www.encanvas.com,

email us on info@encanvas.com or call us on +1 201 777 3398 (usa) or +44 1865 596151 (europe).

Visit Squork at www.squork.com.