Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
171 lines (156 sloc) 20.6 KB
title author image excerpt licenses
Excel yourself with our web spreadsheet editor
Simon Worthington
img/our-new-web-spreadsheet-editor.png
We wanted to use a spreadsheet interface to let our users feel at home editing Registers. But we needed an editor that was similar to desktop office apps but didn't confuse users in areas that Registers and spreadsheets differ. So, we built our own spreadsheet widget and we're now using it everywhere in Registers.app.
Data from the Welsh Government Principal Local Authority register used under the [Open Government License v3](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).

Traditional data management techniques take control of data away from the people who understand it the most – the domain experts. We started building Registers.app to give back agency and autonomy of important, canonical data so we knew that we needed a way for these users to insert and update their data that was intuitive, familiar and didn’t require massive technical knowledge.

We’ve talked before about how everyone already uses spreadsheet tools and how they meet the needs of their users well. They offer a direct interface for users to manage structured data in a simple way. Through experience with tools like LibreOffice or Excel, many users already feel at home with a spreadsheet. We’ve found that many of our enterprise users are also already managing their data with these tools.

We wanted to capture some of that familiarity and make users feel at home straight away when they made a Register for the first time in Registers.app. We decided to use a spreadsheet-style interface to tap into a user’s existing experience and help them feel comfortable with inserting data.

Registers are more than spreadsheets

One problem with this approach is that a Register is not exactly like a spreadsheet. Because columns in a Register can link directly to whole items in another Register, cells often need to contain more than simple string values. We also knew that to help our users the most, we should help them insert correct values for types like dates or codes from another Register with context-specific editors and metadata per cell.

So we had to use a spreadsheet widget that got the right balance of being similar to our favourite spreadsheet programs whilst being different in the ways that Registers are different. We also knew that we’d want to use a similar spreadsheet view for letting users review draft changes and showing differences between historical Register updates, so the interface had to scale to those challenges too.

We looked at lots of existing spreadsheet components on the web to see whether they’d fit our use cases and to mine them for UX features that helped them feel like a spreadsheet. Despite finding some great work, none of the components we identified had quite the right balance for us to use directly. We did, however, draw a lot of inspiration from them to form a list of key features that made them approachable whilst also allowing expert behaviour.

We made our own spreadsheet for the web

So, we decided to implement our own spreadsheet interface for the web. Without any further ado, here it is!

<script type="text/javascript" src="{{ site.url }}/js/spreadsheet.js"></script>
Principal-Local-Authority Name Name-Cy Official-Name Official-Name-Cy Start-Date End-Date
A principal local authority in Wales. The commonly-used name of a record. The commonly-used Welsh name of a record. The official or technical name of a record. The official or technical Welsh name of a record. The date a record first became relevant to a register. The date a record stopped being applicable.

The sheet is displaying a subset of the data from the Welsh Government’s Principal Local Authority register.

We’ve designed the interface to be familiar to users of desktop office programs. The look and feel of cursor movement and selection is familiar, and copy/paste and undo functionality are available. It sits on top of [an ordinary HTML table](https://github.com/register-dynamics/registers.blog/blob/master/{{ page.path }}) and falls back gracefully if Javascript is not running. In addition, it makes prominent space for column metadata and the side gutter can be used to display an indication of row changes (try editing or clearing a row!).

There’s more still to do

We’re very happy with what we’ve achieved so far, but there’s still lots more to do. We’re going to be expanding it to use in our Register creation process, including allowing multiple cell selections to tie in with our step-by-step creation flow.

We hope you think the widget is as cool as we do! We’ll be posting further updates on our work as it progresses. If you’d like to give us some feedback (maybe on some killer features we’re missing) or tell us how much you’d like to use it, drop us a note by e-mail or on Twitter!

You can’t perform that action at this time.