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: Extending the Persona Bar

The new Persona Bar in DNN 9.0 is extensible. No surprises there. We at DNN believe in extensibility, it’s core of how we build software. The Persona Bar is no exception. Let me walk you through the simple steps to build a Hello World Persona Bar Extension.p

Hello World Extension

The purpose of this extension is to show a “Hello World” sub-menu under the Settings area in the Persona Bar. Clicking on the sub-menu will show a new UI consisting a simple line of text. Here is how the extension will look after installation:

UI After Installation Folder Structure

This extension has a very simple structure. It contains a folder named “admin” with 4 files under different sub-folders. There are 6 other files at the root of the project also. These 6 files are very standard DNN files. The folder structure will get complex as you add more functionality into it. This sample extension does not have any Web APIs per se.

Source Folder Structure


Manifest

Extension is driven by the standard DNN manifest. We have added a few updates to provide this extensibility. 

A new extension type “PersonaBar” has been introduced.

There is a new section under Components called as “PersonaBarMenu”. This section is used to specify the menu location for this component. The attribute “parent” is meant to specify the primary menu for the extension.

Manifest

 

Source Structure

Persona Bar does not use web forms or Asp.Net ascx controls. Instead it's built using modern front-end technologies including Html, JavaScript and CSS. Of course the Web APIs are still provided using C#, but the front-end does not use any server side controls as such.

Persona Bar automatically loads the corresponding Html, CSS and JavaScript files upon clicking of the respective menu. It uses convention to load those files. The file names for .html, .css and .js must match what's specified in the manifest.

Html file

This simple extension simply prints a line of text in the Persona Bar. However, you are free to render your own custom Html with matching CSS and JavaScript. In this example, HelloWorld.html file is loaded from admin\personabar folder.

Html File

CSS file

Persona Bar expects a corresponding .css file under admin\personabar\css folder and loads it automatically. In this example, the file name is HelloWorld.css. You can add your own custom styles here.

CSS File

JavaScript file

Persona Bar also loads the respective JavaScript file as well from the admin\personabar\scripts folder. In this example, the file name is HelloWorld.js.

There is a little bit of boiler plate code that's required for your extension to load up in the Persona Bar. This code is included in the sample extension as well (link below). We will get into more details in a future blog.

JavaScript File

Resource File

Persona Bar expects a resource file to be present under admin\personabar\App_LocalResources folder. It must follow the same naming convention also. In this example, file is named HelloWorld.resx.

It has one resource key entry "nav_HelloWorld". This entry is required, and corresponds to the resourcekey entry under PersonaBarMenu section of the manifest (see Manifest section). This key is rendered on the sub-menu.

Resource File

Reference Library

This sample depends on just one library - Dnn.PersonaBar.Library. You will need more references when this extension becomes complex. The nuget package for this library is currently included in the repo (see below) Nuget Reference Library

Post Installation – Extensions

After installation, the extension will show up under the extension type "Persona Bar". Post Installation View In Extensions

Post Installation – Folder Structure

All the four key files are deployed under SiteRoot\admin\Dnn.PersonaBar folder

  • Html – installed under root folder

  • Resx – installed under App_LocalResources sub-folder

  • CSS – installed under css sub-folder

  • JavaScript – installed under scripts sub-folder

Post Installation Folder Structure

Installation Zip File

The sample code contains all the build scripts to create an installation package. Simply compile in “Release” mode and a zip file should be found under: Website\Install\Module

Install Zip File

 

Sample Source Code

The entire source code of this sample extension is available on GitHub for free. Here is the link:

https://github.com/ashishpd/Dnn.PersonaBar.Samples

 

Git Repository


Comments

Scott Wilkinson
I guess the step I am missing is how to build the existing Dnn.PersonaBar.Extensions solution and install that in Dnn9 before I try to build my own extension.
Scott Wilkinson Friday, November 18, 2016 10:15 AM (link)
Scott Wilkinson
Disregard my previous comment. The easiest way forward is to just start with a nightly build. http://www.dnnsoftware.com/platform/build/nightly-builds
Scott Wilkinson Friday, November 18, 2016 10:26 AM (link)

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