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.
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.
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.
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.
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.
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)
Post Installation – Extensions
After installation, the extension will show up under the extension type "Persona Bar".
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
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: