Persisting Mockup Edits using the ContentEditable attribute and CouchDB

At SphereGen we aim to be always responsive to your needs as a client. One of the areas where your feedback is critical is in the area of UI mockups. Many a times you would like to change the text or the labels on the UI.  We want to capture this feedback asap and implement it in the shortest possible time.  Often, this is a long, time consuming process, where the demo presenter makes notes of the feedback and passes them on to some developer at the backend, who then makes the changes to the HTML files, and then re-publishes them.

We wanted to cut this cycle short and make changes ‘instant’. We wanted to build a system where the presenter (or even you) could ‘live edit’ the text on the web page, and voila! the page was updated without having to refresh it.

The Approach and the Challenge

We decided to implement a design where a plugin code in each page captured changes to the context, persisted them to a database on the server, and updated the page without a refresh. Technologies were available, which would store the changes locally in the browser cache. But we needed to persist the changes, without having to write a full fledged application for it or having to install anything on the demo machine.

Key Considerations

Some key considerations were:

    1. The person modifying the page text need not have any knowledge of HTML or Javascript, so options like Dreamweaver were eliminated. (Dreamweaver would also add to the license cost.) We wanted to make it very simple for the customer to make changes.
    2. The modified mockup should be usable as is in the final product, hence this precluded the use of web applications like WordPress or Drupal, as an option.
    3. We wanted to have a lightweight, simple to use, plug and play script approach which was re-usable on every page. The UI developer creating the mockup page should be able to just copy paste a plugin into every page to add the live-edit feature to the page. So this eliminated the use of any backend programming, and instead we decided to go with a HTML+Javascript approach, along with CouchDB.  This plugin would also provide a Save button in each page to capture the changes.

Enter “ContentEditable”

HTML5 provides a “ContentEditable” attribute which was perfectly suited to our purpose. It enables client-side in-browser, rich text editing. If the ContentEditable attribute is set to true on an HTML element, you can edit it in the web page itself. This is what enables you to make the UI changes you want in a WYSIWYG way.

As a next step, we needed to make these changes persistent to a DB.

Persisting the changes

We used CouchDB on the remote server to store the label texts in the HTML page. JavaScript is used to capture the changes to the labels and write them to a CouchDB database on the server that is serving the mockup pages.

We chose CouchDB for its ease of use and suitability to the web and mobile. It is a NoSQL DB which stores data as JSON documents and lets you access them via your web browser and modify them with JavaScript.  CouchDB has an API that you can access directly via JavaScript, which you can use to update documents.

With the JavaScript embedded in the HTML we could easily read and write data from and to the CouchDB and reflect the label changes using Ajax.  We could thus hook up CouchDB to HTML to store data from HTML to CouchDB. The JavaScript operating on the client machine could update the labels on the server DB.  When you click Save on the page, it finds the label changes and sends them to the database. Ajax calls update the label on the page using JSON format.

Each HTML page also has a separate plugin to connect to the CouchDb to provide login credentials, etc.

Handling changes to multiple pages

Since it has more than one mockup screens, we needed to identify each label in a unique way. We gave each text area  a unique id. This id plus its  particular HTML file name created a unique identifier for that label.

Implementation Details

The UI developer who is going to use the plugin will need to follow these steps:

  1. Include the CouchDB JQuery plugin from your server. If the URL of the DB server is ‘localhost:5089’ then it will be located at

           ‘http://localhost:5089/_utils/script/jquery.couch.js

  1. Include the SphereGen  ‘ContentEditable Plugin for persistent storage’.
  2. Configure the login parameters for the plugin.
  3. Add HTML5 attribute ContentEditable=”true” with unique id to the labels in the page as follows
    <p id="patient-address" contenteditable="true" >
      613 SW Camden Ave, Stuart, FL 34994, United States </p>
  4. That’s it! Now you can persist the changes to your mockup page text.

Conclusion

We believe in innovation with technology to help our clients do better.  If you would like to learn more about what we have to offer, please contact us.

Talk to us