Skip to main content
Home  ›  Blog

Give your DataSource a Configuration UI with Global ContentTypes (#5)

When you create a custom DataSource you'll often want to have a custom configuration UI. Here's how to do this. 

Note: this is part 5 of the blog-series about custom DataSources. If you haven't checked the rest, you should read those first:

  1. Part 1: The most basic DataSource delivering 1 item
  2. Part 2: Creating lists which come from elsewhere
  3. Part 3: Unit Testing DataSources
  4. Part 4: Creating a distributable DNN package with your DataSource
  5. Part 5: Giving the admin a configuration UI

Configuration is a Content-Item

Whenever you hit edit on a DataSource, it always opens a content-editing dialog like this: 

It's obvious that this is a content item. You could just place the definition of this in your app so it's available, but that wouldn't be practical. What we need is the ability to...

  1. ...have a global content-type which can work in all apps
  2. ...distribute & install such a global content-type with our DNN extensions 

Creating a Global ContentType

To create a global content-type, we must create it just like any content-type in an app. Just create a new type, give it fields etc. Here's an example of the FnL (Form and List, aka UDT Universal Data Table) content type in design:

In addition, you should also give it some description and help text, as this will help the user to understand what he/she is doing:

When you're done, export it as a JSON, as this is how we'll distribute/install it:

Distributing a Global ContentType

To make sure you can distribute it, place it in a folder of your module. As you can see in the example for the FormAndList DataSource, we like to put it inside a .data folder, because this is protected from external access. You can see it on the FnL DataSource Github here. Note that it must be inside a contenttypes folder.

We recommend to put it into your installable extension, but if you're just developing for a single solution, then you could also put it in the .data folder of the website root. 

Registering the ContentType for global use

Now the EAV (data system in 2sxc) must know that it should pick up this folder as a content-type supplier. To do this, you must do the following:

  1. Create a class which inherits from RepositoryInfoOfFolder which makes the EAV pick it up automatically and ask it for RootPaths
  2. Make give it a RootPaths property which returns a list of the root paths

If you do this, the EAV will automatically pick up your class and traverse the RootPath for content-types you supply. Here's the code as it's used in the FnL DataSource:

Registration of Global ContentType in FnL

using System.Collections.Generic;
using System.Web;
using ToSic.Eav.Repositories;

namespace ToSic.Dnn.DataSources
{
    /// <summary>
    /// This class simply tell the EAV / 2sxc that there is another folder 
    /// which contains content-types to load from...
    /// </summary>
    public class RegisterContentTypeForConfigUi: RepositoryInfoOfFolder
    {
        public override List<string> RootPaths => new List<string>
        {
            HttpContext.Current.Server.MapPath("~/desktopmodules/ToSic.Dnn.DataSources.FnL/.data")
        };
    }
}

That's it!

Hope you love it :)

Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler