Bri Garrett
by Bri Garrett
share this
« Back to the Blog

DirigoEdge PageBuilder v1.0

DirigoEdge PageBuilder v1.0

We’ve just completed a PageBuilder Branch merge. It is called DirigoEdge-PageBuilderV1.0. PageBuilder was first put into commercial use in August 2013 on our Ski and Automotive platforms.  PageBuilder is a graphical user interface that sites atop DirigoEdge.  It allows the end user to create complex pages on their own using a WYSIWYG interface, a 12 column grid, and many pre-built modules. It is not part of the open-source DirigoEdge project because we put a ton of time into building DirigoEdge into a turnkey system.

A lot of what we think of when we think of websites—all the pretty graphical stuff (e.g. transitions, animations, responsive grids, tabbed interfaces and menus, slideshows, sticky elements, typography)—is very close to being plug and play. Writing these components from scratch is silly. The last several years has seen a wave of technology aimed at eliminating web development complexity. The rise of the content management system (CMS) was the first wave of the movement. But now marketers want to DIY.  Getting ideas and marketing campaigns quickly to market at a low cost is imperative in this 24/7/365 connected word. Taking "web development" out of web development is vital to increasing efficiency.  We are not far off the tipping point wherein simple (and some complex) web development tasks become ubiquitous. So it makes sense that firms like Dirigo are in pursuit of reducing the bloated, heavy and complex development cycles. PageBuilder is our answer to simplifying website development.  It is a drag and drop content management system.

We’ve been working a lot with DirigoEdge PageBuilder on various projects. PageBuilder has only been extended to Dirigo clients and is not part of the open-source project. It allows on-page editing and WYSIWYG page creation using our app store and custom built modules/templates.

This upgrade was about:

  • Ability to click on a module title in PageBuilder and open the associated module for edits. Some of this functionality was already in place via the old edit-module-in-place functionality. This edit mode is sometimes preferable since PageBuilder modules are a little more advanced in that they typically require Javascript updates, which cannot be easily updated live in-browser.  So now we have several ways to edit modules.
  • Turned off in-page editor toggle if the user isn’t in edit mode. The system was designed to function this way, but, in-page editing varies from browser to browser. If you toggle the page to edit, then back to preview, it comes close. We fixed some UX issues.
  • We made a few CSS changes:
    • z-index of some PageBuilder button elements
    • We considered making changes to the scope of the icons but did not do so. We ran into issues where site specific icons were being hidden. Maybe something more specific like .pb-icon-* or even .admin-icon-* since .icon-* is pretty common. I guess one could argue that the site specific icons should use something like .icon .icontype-*.
    • We use  fontawesome icons which are widely used. We're certainly open to a safer prefix, but think the fontawesome icons are so widely used it may be more trouble than it’s worth.
  • We added content page user css and user JS to the PageBuilder template. It only had the module related css and JS.
  • In practice we’re generating a ton of modules using PageBuilder (most of which are used in multiple places). This makes the module selector for PageBuilder kind of long and hard to search through. This update makes it work a bet better.  We sometimes remove the large thumbnails because some people are too lazy to add a thumbnail.  This causes the list to be super long. Moving forward we need to figure out how to keep a visual indicator - perhaps small icons could help. Derek working on a “Module Gallery” where users can install modules we’ve created through the Dirigo AppStore interface. The idea is that we can write a module and host it on a public domain where every PageBuilder installation has access.  Then we can install modules from that gallery. As make changes to the interface we need to keep this in mind – this new platform suggests that there will potentially be many modules “installed” as well as a need to quickly access frequently used module types.
  • We updated the URL so that a save refreshes the page when the page title/URL is changed on the front end admin. We used  window.history.replaceState() if when supported in the browser, otherwise we just use location.reload().
  • Flushed out a new interface for the "Add Module" modal for static modules. Deployed Isotope and a plugin called LiquidMetal. LiquidMetal is a jQuery plugin for scoring search. Added a "Most Used" feature. This works by taking the average usage of all the modules and comparing that to the individual usage. If the score is above the average, the module displays under "Most Used".

DirigoEdge-PageBuilderV1.0 took about 24 hours of development time.  These edits are being reviewed by our lead developer and will be rolled into production shortly.


Thank you for contacting us!

We'll be in touch!

Back Home ×