World is now on Opti ID! Learn more

Kristoffer Lindén
Dec 8, 2021
  39
(0 votes)

Create your own menu to handle your custom plugin

So in CMS 11 when you wrote your plugin you easily add settings to your plugin using GuiPlugin attribute and adding properties using the PlugInProperty attribute.
In CMS 12 that is not longer possible so the best is instead to create your own top menu item with a submenu that contains for example Dashboard and Settings.

The menu provider could look like this:

[MenuProvider]
public class MyPluginMenuProvider : IMenuProvider
{
    private readonly LocalizationService _localizationService;

    public MyPluginMenuProvider(LocalizationService localizationService)
    {
        _localizationService = localizationService;
    }

    public IEnumerable<MenuItem> GetMenuItems()
    {
        var mainMenuItem =
            new UrlMenuItem("My plugin", MenuPaths.Global + "/cms/myplugin", null)
            {
                IsAvailable = context => true,
                SortIndex = SortIndex.Last + 100,
                AuthorizationPolicy = CmsPolicyNames.CmsAdmin
            };

        var dashboardMenuItem =
            new UrlMenuItem(_localizationService.GetString("/Plugin/DisplayName"),
                MenuPaths.Global + "/cms/myplugin/dashboard", "/MyPlugin/Dashboard/Index")
            {
                IsAvailable = context => true,
                SortIndex = 100,
                AuthorizationPolicy = CmsPolicyNames.CmsAdmin
            };

        var settingsMenuItem =
            new UrlMenuItem(_localizationService.GetString("/Plugin/Settings"),
                MenuPaths.Global + "/cms/myplugin/settings", "/MyPlugin/Settings/Index")
            {
                IsAvailable = context => true,
                SortIndex = 200,
                AuthorizationPolicy = CmsPolicyNames.CmsAdmin
            };

        return new List<MenuItem>
        {
            mainMenuItem,
            dashboardMenuItem,
            settingsMenuItem
        };
    }
}

That would give you this look:

Your layout view should look something like this to have the Optimizely menu to render:

@using EPiServer.Framework.Web.Resources
@using EPiServer.Shell.Navigation

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>My Plugin</title>

        <!-- Shell -->
        @ClientResources.RenderResources("ShellCore")

        <!-- LightTheme -->
        @ClientResources.RenderResources("ShellCoreLightTheme")
    </head>

    <body>
        @Html.CreatePlatformNavigationMenu()
        <div @Html.ApplyPlatformNavigation()>
            @RenderBody()
        </div>
    </body>
</html>

When this is done you can easily work with your dashboard and settings functions.

Thanks Scott Reed for enlighting me in this forum post:
https://world.optimizely.com/forum/developer-forum/CMS/Thread-Container/2021/12/admin-plugin--tool-in-cms-12/

You can read more here:
https://world.optimizely.com/documentation/developer-guides/CMS/user-interface/extending-the-navigation/using-menu-providers/

/Kristoffer

Dec 08, 2021

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |