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.
Some key considerations were:
- 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.
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
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.
The UI developer who is going to use the plugin will need to follow these steps:
- Include the CouchDB JQuery plugin from your server. If the URL of the DB server is ‘localhost:5089’ then it will be located at
- Include the SphereGen ‘ContentEditable Plugin for persistent storage’.
- Configure the login parameters for the plugin.
- 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>
- That’s it! Now you can persist the changes to your mockup page text.