Custom Admin Sections

The existing sections are all built using the same plugin system you will use, so you can add items to existing sections or create your own new sections.

Sections

Sections are created using the ISection interface. Just create a new Blazor component and implement the ISection interface like below. This component will become your section index/default page and also add a nav item in the top admin navigation. The example below would add a new section called 'My Custom Section'.

@attribute [Route(Url)]
@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]
@layout SectionLayout
@implements ZauberCMS.Core.Sections.Interfaces.ISection

@* This will show any dashboard set to this sections alias *@
<SectionDashboards SectionAlias="@(Alias)"/>

@code {
    // Save the url as a const, so we can reuse it
    // this is the main page of your section
    private const string Url = "/admin/mycustomsection";
    
    // The name displayed in the nav at the top
    public string Name => "My Custom Section";
    
    // The alias you will use throughout for this section
    public string Alias => "MyCustomSection";
    
    // The url of the main page of your section
    public string IndexUrl => Url;
    
    // The sort across the admin nav where you want this section to appear
    public int SortOrder => 1;
    
    [CascadingParameter] protected SectionLayout? Layout { get; set; }

    protected override void OnInitialized()
    {
        // Set your section as normal
        Layout?.SetSection(Alias);
    }
}

Section Nav Group

In the left hand navigation panel on sections, the navigation is split into groups, and each group has a heading and many section navs (See next section below). Creating a Section Group Nav is simple, just create a class and implement ISectionNavGroup

public class ContentNavGroup : ISectionNavGroup
{
    public string Heading => "Content";
    public string Alias => Constants.Sections.SectionNavGroups.ContentNavGroup;
    public int SortOrder => 0;
    public string SectionAlias => Constants.Sections.ContentSection;
}

Heading = The heading you want to appear Alias = This is the alias the ISectionNav will use so SortOrder = Self explanatory SectionAlias = What section you want the nav group to show in

Below shows two Section Nav Groups, Structure and Advanced.

Section Nav

To show trees or navigation links under your section nav groups, you just need to create a blazor component and implement ISectionNav like below.

ISectionNav does implement IDisposable so you can optionally make use of the AppState events and refresh things like Trees when something is changed. The source code in ZauberCMS has lots of examples of using Trees in ISectionNavs.

@implements ZauberCMS.Core.Sections.Interfaces.ISectionNav

<NavLink href="/mycustompage" />

@code {
    public void Dispose()
    {
        // Not needed in this example
    }
    
    // The sort order on the section nav
    public int SortOrder => 2;
    
    // Which section nav group this nav should appear in
    public string SectionNavGroupAlias => "MyCustomNavGroupAlias";
}

Section Dashboards

Finally, you can add Dashboards to any section. These appear on the main/default section page in tabs. Each main section has a default dashboard. The example below adds a dashboard tab to the media section (Changing the alias adds it into any section you wish)

@implements ZauberCMS.Core.Sections.Interfaces.ISectionDashboard

<p>Dashboard code here</p>

@code {
    // Name of the tab
    public string TabName => "Custom Tab Name";
    
    // The order of the tabs to appear
    public int SortOrder => 2;
    
    // The section I want this to appear
    public string SectionAlias => Constants.Sections.MediaSection;
}

Adding A Page To Existing Sections

Adding a page to an existing section is easy, you just need to make sure you use the SectionLayout for your layout and then set the section you are in. Example below would be a page that would show in the media section

@page "/admin/media/mypagename"
@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]
@layout SectionLayout

<p>My content here</p>

@code {
    // Pass in the Layout via a CascadingParameter so we can use it below
    [CascadingParameter] protected SectionLayout? Layout { get; set; }
    
    protected override void OnInitialized()
    {
        // Set the section we want this page to be in via the section alias
        // all our sections are stored in the constants to save manually using the string
        Layout?.SetSection(Constants.Sections.MediaSection);
    }
}

Authentication

Remember. If you are creating an admin page, make sure you restrict the access to admins only by using the X attribute on your pages

@attribute [Authorize(Roles = Constants.Roles.AdminRoleName)]