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:

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.

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.

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.

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.

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.

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.

Reference Library

Post Installation – 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

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

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