How to Create a Custom Umbraco backend section

Last updated on 14 Dec 2016 | Posted on 19 Nov 2016

This article focuses on creating your own custom backend Umbraco 7+ section. Umbraco installs with the following built in sections:

Umbraco's main dashboard:

We won't go into the details of those sections on this ocassion but instead take a look at adding a new one.

There are two files in Umbraco's config folder that we need to edit in order to do this. Firstly, applications.config and secondly, Dashboard.config and both live in the Config folder as shown below:

Within applications.config we need to add a new entry like the one below that I have called MySection:

<?xml version="1.0" encoding="utf-8"?>
<applications>
  <add alias="content" name="Content" icon="traycontent" sortOrder="0" />
  <add alias="media" name="Media" icon="traymedia" sortOrder="1" />
  <add alias="settings" name="Settings" icon="traysettings" sortOrder="2" />
  <add alias="developer" name="Developer" icon="traydeveloper" sortOrder="3" />
  <add alias="users" name="Users" icon="trayuser" sortOrder="4" />
  <add alias="member" name="Members" icon="traymember" sortOrder="5" />
  <add alias="forms" name="Forms" icon="icon-umb-contour" sortOrder="6" />
  <add alias="translation" name="Translation" icon="traytranslation" sortOrder="7" />

  <add alias="mySection" name="MySection" icon="trayuser" sortOrder="8" />
</applications>

Choose your own alias, name, icon and sortOrder. You could at this stage re-order the navigation if you wanted to.

Next, we need to edit Dashboard.config and add something like the following:

<section alias="StartupMySectionDashboardSection">
  <areas>
      <area>mySection</area>
  </areas>
  <tab caption="Tab A">
      <control showOnce="false" addPanel="false" panelCaption="">
          /umbraco/Plugins/MySection/MySection.ascx
      </control>
  </tab>
  <tab caption="Tab B">
      <control showOnce="false" addPanel="false" panelCaption="">
          /umbraco/Plugins/MySection/MySection.ascx
      </control>
  </tab>
</section>

This allows us to create an Area which is effectively a new CMS section as shown below:

Hopefully this has been helpful

How to Create Custom Examine Settings in Umbraco

How to Create Custom Examine Settings in Umbraco

Posted on 28 Jan 2016

Umbraco has both an internal and external indexer. The idea behind this is to provide an index for all back office searching within the Umbraco CMS. T…

Read more