Creating Custom DNN Plugins and Widgets

Clarity eCommerce | The eCommerce Platform to Scale and Grow Your Business
Architecture, Themes, Plugins and Module Development

DNN (Formerly DotNetNuke) Introduction

DNN is an open-source Content Management System (CMS) for ASP.NET WebForms. It is also a complete web application framework based on Microsoft. On top of DNN, you can create multiple e-commerce systems, public websites, intranets, and web applications.

DNN uses a three-tier architecture model, which has a basic framework that provides support to the extensible modular structure. DNN is also based on ASP.NET webforms. Traditionally, the DNN focus over to provide the server-side functionality, but the recent projects attempt to enhance the client-side experiences as well. In the past few years, DNN was migrated from Web Forms to allowing Single page application and Model View Controller.

Architecture, Themes, Plugins and Module Development

The UI has also been changed to REST API and JavaScript. There is 20% left on Webforms, but 80% is moved to the .NET platforms.

There are 464 products related to the theme category in DNN. You can have six themes for free, and there are hundreds of them that range between $19 to $269. There are also different themes that come with different prices. There is also a proper description written with every theme describing the specifications of the theme along with the reviews, last update, and price. There is also the option to filter the products in many subcategories like color, site type, and genre. It is the best way to find out the best theme that can suit you for best.

There are 595 plugins in DNN, and 162 of them are built up for a business website. There is a total of 25 subcategories in the e-commerce category. These subcategories include content management, checkout, email, SEO, marketing, advertisement, and many more. They also allow you to buy the product grid module, ensure secure transactions, integration with PayPal or Stripe, enable registration, and many others. If you are unable to find a plugin that you need, you can always build one for yourself as a custom plugin. This can be done in-house, or you can outsource it to some third party developer or partner.

DNN Module Development

DNN Module Development

DNN Module is a web page that has page elements and content blocks in it. Page elements include the site menu, search bar, and login control. Content blocks are the ones that are managed by modules.

The module is one basic block that gets extended for the users to be enabled to create, view, and edit the content. All of the administrative features of DNN are implemented as modules. Also, the source code of the DNN platform has many examples of modules that can help you to build up custom DotNetNuke modules. Modules are normally built up in order to display and manage a single content type due to the nature of page composition in DNN. DNN module development is the form of extensibility for DNN. There are a number of ways that can be used to handle the development of modules.

Tools like Visual Studio can be used for it. The development of modules can be done in C# or VB.NET. DNN Module Development has the option for selecting the development framework and then the development approach. While developing the modules, consider making them multiple so that the management becomes easier, and the administrators could easily control the layout as well. The frameworks that can be used with DNN are as follows:

  • WebForms – it is the traditional framework that creates the DNN modules which use controls that are based on ASP.NET web forms.
  • SPA – this is a family of frameworks that uses plain HTML, CSS, and JavaScript for the building of DotNetNuke modules.
  • MVC – this is the framework that uses the ASP.NET MVC framework in order to create the modules.

You can also choose to use a manual approach for the DNN module development in which the whole module is built up by hand. There can also be used as an automated approach where the basic module is created by using any tool or template.

Building Your Own Custom Widgets from Scratch

How to Develop Your Own DNN Widgets?

When we talk about widgets, they are the client-side applications that run in the browser by using any form of JavaScript. They are primarily written in jQuery, but you can also pull any JavaScript library for them. Widgets are also called Skin Widgets because they are used in the skins in DNN. You can add the widgets in headers and footers, in the HTML module, and many more places but not anywhere you want. For instance, the forum posts are best for guest widgets.

A widget can do many things but can be limited by two things:

  • Working with client-side restraints
  • Creativity

Widgets can be found in two places. One is ~/Resource/Widgets/DNN for finding the Core Widgets and at ~/Resource/Widgets/User/<CompanyName>.js you can find the user widgets.

The file names of widget should be kept as <WidgetName>.js for the Core Widgets and for user widgets, use <CompanyName>.Widget.<WidgetName>.js.

Below we go into the three basic sections that can make a widget

1. Namespace, Inheritance, and Constructor

For using the ASP.NET AJAX library, there should be registered for the namespace of the widget for defining the inheritance from the base Widget class. Then the constructor is defined at the end of the section.

	

Type.registerNamespace("YourCompany.Widgets"); YourCompany.Widgets.SampleWidget.inheritsFrom(DotNetNuke.UI.WebControls.Widgets.BaseWidget; YourCompany.Widgets.SampleWidget = function(widget) { YourCompany.Widgets.SampleWidget.initializeBase(this, [widget]); }

2. Rendering Method

The render method must be implemented by all widgets, and this method follows two steps. One is the enumeration of parameters that are specified in the declaration of widget for assigning them to local variables. The second is about doing the processing work based on parameters and calling the render method. The framework replaces the <object> with the DOM element and assigns an ID to it. Your widget access any DOM element to make calls to other scripts.

YourCompany.Widgets.SampleWidget.prototype = { render: function() { var params = this._widget.childNodes; if (params != null) { // Do something } var div = document.createElement("div"); // Do some work here to add content to the div YourCompany.Widgets.SampleWidget.callBaseMethod(this, "render", [div]); } }

3. Registration

The final thing you should do is to register your widget and its class. Also, tell the framework that it is able to render all instance for presentation of widget on the page.

You only need to add the custom code, followed by saving it with the proper name and at the proper location. After that, you can go to starting the widget.

view sourceprint? 1.YourCompany.Widgets.SampleWidget.registerClass("YourCompany.Widgets.SampleWidget", DotNetNuke.UI.WebControls.Widgets.BaseWidget); 2.DotNetNuke.UI.WebControls.Widgets.renderWidgetType("YourCompany.Widgets.SampleWidget");

Still Have Questions? We Can Help!

Clarity DotNetNuke Experts

DNN (DotNetNuke) is an open-source web application framework and content management system. It allows the management of different websites, even having less technical knowledge. It works with modules and widgets and has multiple plugins to make the work easier. So giving it a chance is something that you won’t regret later! If we missed something or you have additional questions, please feel free to reach out to us here!

Related Posts