Products

Solutions

Learn More

Partners

Community

Blog

About

DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


DNN 9: Persona Bar Architecture

We are very excited about the upcoming Admin Experience in DNN 9 and Evoq 9.  With this blog I want to share the high-level architecture. 

Modern UI Tooling

Modern UI Tools

Since we were building this experience from the groud up, we decided to use the latest UI tooling such as:

  • ReactJS with Redux
  • ES6
  • ESLint
  • webpack
  • npm
  • babel
  • Visual Studio Code
  • RequireJS

Admin Experience vs. Persona Bar

Before we go to o far,  I want to clarify that "Admin Experience" and "Persona Bar" mean the same. Admin Experience refers to the feature, whereas Persona Bar refers to the fact this feature is built for different Personas in mind. 

The word Persona Bar was first introduced in Evoq Engage, where this experience was first introduced a few years back. The experience was meant for "Community Managers". The Evoq Engage customers liked this experience so much that we extended the experience into Evoq Content, at which time we added two new Personas - "Content Managers" and "Content Editors".

The Evoq Content customers loved the new experience as well. Our intent was also to extend the same experience to other two personas - "Administrators" and "SuperUsers". 

Makes sense so far? 

So, what's a Persona Bar - A management interface that provides a universal experience across several persons in your system. The word "Admin" in "Admin Experience" refer to the fact that we are extending the same experience to Administrators and Super Users. 

Architecture Layers

Architecural Layers

The new Persona Bar is built on top of the existing DNN Core. A new layer named "Persona Bar Library" was created on top of DNN Core to provide persona bar related services. Services include Menu, Permission, iFrame, Utilities, Extensiblity points, etc.

Above the Persona Bar Library are the Persona Bar Modules (extensions). Each of the panel or menu that gets added on the persona bar comes from such modules. They are like your typical modules, which can be installed and uninstalled. However, they can not be added to a page. They are meant to be included in the Persona Bar only.

These Persona Bar modules have versions as well, so you can upgrade just that module. Examples of such modules are: Users, Pages, Assets, Themes, etc. 

How is Persona Bar Injected?

It is important to note that we didn't add anything new in the DNN Core to provide this experience. We used the existing "control bar" extensibility (under Host Settings) that was already present in the core. 

As part of the installation of the Persona Bar Library, we update this setting to use Persona Bar as opposed to the standard Control Bar. 

The UI shown below indicates the options available at the time of writing. This UI may not make it in the new experience, but we will provide you with an SQL script to update it back to older options. At this time, we intend to remove the standard Control Bar and the Ribbon Bar from the installation. However, if you had your own control bar, you can continue to use that, just make sure to update the below setting (using SQL and clear cache).

Injection

The iFrame Approach

One of the design decision we took for this experience is to use an iFrame to deliver the new UI. The main reason was to make it skin agnostic. We wanted to deliver the same UI regardless of the skinning applied to the site. This not only provides a consistent look and feel, but also removes any interference  from font and color choices used in the skins.

The image below shows how the iFrame looks under browser's developer tool. 

iFrame

The Persona Bar Library

As noted above, the Persona Bar Library is a library that provides basic services to this experience. The screenshot below shows how the library shows up under the Library section of Extensions.

Library

The Persona Bar Modules

The Persona Bar modules such as Pages, Assets, Themes, etc. are modules (or extensions) of type "Persona Bar". They also get listed under the Extensions area and can be installed or uninstalled just like any other extension. They cannot be added to a page though.

Modules

New Tables

So far we have introduced four new tables to save Persona Bar Settings:

  • PersonaBarMenu
  • PersonaBarExtensions
  • PersonaBarMenuDefaultRoles
  • PersonaBarMenuPermission

Tables

Stay tuned for more updates....

 

Comments

There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.

NewsArchives


2sic Daniel Mettler (133)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (25)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (7)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (164)
William Severance (5)
DNN Launch Webinar
REGISTER NOW
DNN Launch Webinar
REGISTER NOW
DNN Launch Webinar
REGISTER NOW