Freddy Montes Frontend Javascript Developer

Freddy Montes

Costa Rica (GMT-6)

Frontend Developer with a graphic design degree. UX/UI and Javascript crafter. More

DotCMS Edit Mode

August 2018

Plan, design and develop an edit page experience for enterprise CMS

Tech Stack

angularCreated with Sketch.
Angular
rxjsCreated with Sketch.
RxJS
CE
Custom Events
dragulaCreated with Sketch.
Dragula
CP
CSS Properties

DotCMS helps you manage and deliver content across all channels, devices, and platforms.

One of the key features of the platforms is “Edit Mode”, is the place where users can manage their page:

  1. Add or edit content
  2. Edit properties: title, description, permissions, etc…
  3. Publish or published a page.

Demo

DotCMS Edit Mode

Challenge

Edit mode is a great feature but it was developed 10 years ago and never update or maintained.

DotCMS customers deserve and need a most modern experience a better way to manage their pages. So we want:

  1. Less code more work
  2. Drag and drop content
  3. A way to change the layout of a page
  4. Preview the page in different devices and languages
  5. Scale faster.

Solution

Api

Working with the backend developers we develop an API that will give us all the information about a page:

  1. Layout
  2. Containers
  3. Contentlets
  4. “Special” HTML in which we add data attributes.

Page

By rendering the HTML with special data attributes we could tap inside containers and contentlet and inject tools (buttons and handlers) to allow users to edit the content, move content inside the page and other edit page actions.

Edit

By listening to the events on the page we render, we can save all the changes a user make on real time with no extra actions is a WYSIWYG for the whole page.

Layout

We represent any page layout as an object and by doing that we were able to create a “Layout Designer” where our user can create rows, columns, sidebar, header and footer to a page with zero code.

Benefits

  1. Easy to scale
  2. Allow us to use edit mode with any server-side technology.
  3. Fastest and modern UI

Results

We deliver the first version of the new edit mode feature within months and with the release to the public, we start gathering a lot of good feedback and ideas for a future version.

Edit mode becomes the feature that differentiates DotCMS from any other competitor in the market and the main selling point for the product.