Skip to main content
Home  ›  Blog

Quick-Edit to add Content and App Modules in 1-2nd (one second)

We believe that content management must be easy, slick and cool. A core factor to achieve that is a fast UI - in our vision, interactions should take less than 1 second. So we call it the 1-2nd vision. We've already achieved much using AJAX, angular-js, drag-and-drop upload and more. Now in 2sxc 8.4 we're introducing quick-insert / quick-edit, which allows inserting content and app modules in less than 1 second.

Adding a DNN Module was Cumbersome

In the standard DNN implementation, adding a module to a page is very cumbersome. It takes at least 6 steps, namely:

  1. Click on Module (a menu appears)
  2. Click on Insert-Module in a the menu
  3. Wait for the page to reload, as it will now go to edit-mode
  4. Choose a module and drag...
  5. ...and try, really, really try hard, to drop it in the right place
  6. Wait for the page to reload

This is kind of ok once you get used to it, but it's really not nice. It also takes about 10-20 seconds; possibly longer. Not sexy.

Enable Quick-Edit on All Pages

<%@ Register TagPrefix="Edit" TagName="QuickEdit" 
Src="~/DesktopModules/ToSIC_SexyContent/DnnWebForms/Skins/QuickEdit.ascx" %>
<Edit:QuickEdit runat="server" />

Warning about DNNEmptyPane

DNN has a special behaviour which is as follows:

  1. When a pane has no modules inside, it receives a CSS class called DNNEmptyPane 
  2. For special reasons this DNNEmptyPane will then automatically have a width: 0px

This is a problem, because the insert-toolbar can't highlight the pane to show where inserting will happen. Because of this, we had to include a CSS giving the DNNEmptyPane a width:auto.

There are cases where skin-designers may have accidentally relied on this DNNEmptyPane, thinking it a good idea to use this for things like "border which is only visible if a module is added" or something. We recommend against such patterns as there are better ways. BUT if our implementation causes bad surprises, it's easy to compensate:

  1. Our solution uses a very weak CSS selector. This means we really only address the ".DNNEmptyPane" and nothing else.
  2. Because of this, you can easily add a stronger selector like "div.DNNEmptyPane" or "body .DNNEmptyPane" which will take precedence over our rule
  3. so you could add a rule like "div.DNNEmptyPane {width: 0px}" which would be stronger than our rule

But better would be to re-think your implementation, because anything you did relying on DNNEmptyPane can also be done with another class, and as we believe that in-page editing is a key usability feature, we recommend that you change your implementation. 


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler