I am really enthusiastic about the Dnn-Elements project that will soon find its way into Dnn as an available, built-in set of very useful components. Imagine the simplicity of putting a highly functional color picker on your page with just some HTML like this:

<dnn-color-picker color="0000ff"></dnn-color-picker>

If you just toss them on the page as-is, with no additional styling, the available Dnn-Elements currently look like this. Look again at that HTML above for the color-picker, then look at the fully function UI element it turns into in the browser. That is pretty incredible, no?

Important note: this article is not going to go very deep on using Dnn-Elements. It's mostly just a good example. The headline should have been (and the real reason for the article is) :

From a 2sxc Razor View, how can I get my JavaScript assets on the page in Dnn using modern attributes like type="module" and async in my <script>? 

If you would like to better understand the problem, check out this StackOverflow 2sxc question and answer.

Now back to Dnn-Elements.

If you are not familiar with the terms HTML Elements or Web Components or StencilJS, I recommend you find out more. But before you get lost Googling about it (there is a lot of info, code, videos, and more out there), I'll give you an example or three in a few moments.

The main thing you need to know is that, in a way,
Web Components are simply,
"spin your own HTML tags"
that work in all modern browsers.

Since I knew Dnn-Elements was using StencilJS, I had already guessed and verified that Dnn-Elements had a built-in process to get it published to UNPKG, a fast, global CDN for everything on NPM. One of its output options was an ESM, a modern JS module (which made it important to get the attribute type="module" in the script tag). So I should be able to get the latest version CDN-style using the following standard URL:

https://unpkg.com/@dnncommunity/dnn-elements/dist/dnn/dnn.esm.js

Do click on the link above and examine the result. That URL rewrites (a little) and delivers the complete Dnn-Elements as a JavaScript module. That is exciting, so can I simply get that on the page and start using it - all in a 2sxc View? The answer is yes, and Dnn makes it easy. Without further delay, here is the complete 2sxc View that I put together. If you are interested, below I talk through the key elements of the code.

@using DotNetNuke.Web.Client.ClientResourceManagement

@{
  // Add a <script> tag in the head as a JS module
  var include = new DnnJsInclude 
  {
    FilePath = "https://unpkg.com/@dnncommunity/dnn-elements/dist/dnn/dnn.esm.js", 
    ForceProvider = "DnnPageHeaderProvider",
    Priority = 1001, // stay out of the way?
    HtmlAttributesAsString = "type:module,async:async,defer:defer,crossorigin:anonymous",
  };
  var loader = (Context.CurrentHandler as Page).FindControl("ClientResourceIncludes");
  if (loader != null)
  {
    loader.Controls.Add(include);
  }  
}

<div id="[email protected]">

  <h3>1. Simple Button, as is</h3>
  <dnn-button>Default (label)</dnn-button>

  <h3>2. Use some of the Button's attributes</h3>
  <dnn-button 
    size="large"
    type="secondary"
    reversed="true"
    title="This should get passed along untouched and appear like a tooltip on hover" 
    onclick="alert('this is a dnn-elements button');"
  >
    Large Secondary and Reversed
  </dnn-button>

  <h3>3. Who doesn't love a Color Picker?</h3>
  <dnn-color-picker color="EF3E42"></dnn-color-picker>

  <hr style="margin-top:4rem;">
  <p>That is all folks.</p>

</div> 

And here is what this looks like on a Dnn Page.

First, the using statement gives us a reference so we can use the ClientResourceManagement's DnnJsInclude control. This is important because the normal 2sxc way to link page assets can get your <script src="..."> on the page and even in the head, but it will strip off needed type="module" and other useful attributes like async and defer. Below is the desired result:

<script src="https://unpkg.com/@dnncommunity/dnn-elements/dist/dnn/dnn.esm.js" type="module" async="async" defer="defer" crossorigin="anonymous"></script>

Tip: it is important to note that this style of getting your assets in place is not limited to 2sxc Views. Though there is no specific example like it on the DNN Docs page, this code works almost anywhere server-side: .cs or .cshtml files you put in /App_Code, RazorHost, .aspx/.ascx code-behind, etc. So if you need detailed control not offered by one of the other methods, this is a good option.

After that block of code, the rest is just plain HTML with 3 sample Dnn-Elements being used, two dnn-buttons, and the dnn-color-picker.

In closing, you should probably know that using Dnn-Elements this way is not a likely scenario for many projects. It is a front-end technology most useful via JavaScript in the browser. These types of HTML elements are more likely to be used in a Node development environment like any other node module (in React, Angular, VueJS, etc). For example, in Dnn v10 you will start to see PersonaBar modules, and the Resource Manager (the newer one that will probably get a better name) use Dnn Elements.

And finally, keep in mind that Dnn-Elements is stable and has many useful elements already, but it is still an in-development project that is best characterized as, "alpha heading towards beta very quickly" (Mar, 2022).

PS, Dnn Platform, 2sxc, and Dnn-Elements are all open source projects by developers who contribute their time without getting paid. These developers need to be supported for their efforts. If you benefit from open source and love these projects, I recommend you find out who the active developers are on the projects you use and love, and consider Sponsoring them. GitHub has made this simple and you can read more here. The 4 gentlemen that I thanked below are all open source developers that work directly on the products mentioned in this article. I linked directly to their GitHub Sponsor pages if available. 

Thanks: Daniel Valadas, David Poindexter, Brian Dukes, and Daniel Mettler

Read more of my Dnn Community Blog posts... More about Accuraty Solutions...