Developer forum

Hi Anders,

>> Can we register a custom menu item in the Commerce navigation?

Yes. Create a new class that inherits EcommerceSectionBase and then set the name and sort order:

public sealed class MyDemoSection : EcommerceSectionBase
{
  public MyDemoSection(NavigationContext context) : base(context)
  {
    Name = "New top-level node";
    Sort = 50; // Promotions is 40, so this places it at the end of the list.
  }
}

Then create another class that inherits NavigationNodeProvider<MyDemoSection> (where MyDemoSection is the Section created above) and add child nodes:

public sealed class DemoNodeInCustomSectionProvider : NavigationNodeProvider<MyDemoSection>
{
  internal const string SectionDemoNodeId = "SectionDemoNodeId ";
  internal const string AnotherNodeId = "AnotherNodeId";

  public override IEnumerable<NavigationNode> GetRootNodes()
  {
    yield return
      new()
      {
        Name = "Demo node in custom section",
        Id = SectionDemoNodeId,
        Icon = Icon.Ticket,
        NodeAction = NavigateScreenAction.To<VoucherListScreen>().With(new VoucherListsAllQuery()), // Change to your action / screen
        Sort = 10
      };
    yield return
      new()
      {
        Name = "Another node",
        Id = AnotherNodeId,
        Icon = Icon.Ticket,
        NodeAction = NavigateScreenAction.To<VoucherListScreen>().With(new VoucherListsAllQuery()), // Change to your action / screen
        Sort = 20
      };
  }

  public override IEnumerable<NavigationNode> GetSubNodes(NavigationNodePath parentNodePath) => [];
}

>> Can it be placed under an existing group such as “Promotions” or “Order Management” what displays a custom screen that we provide with content just like the other menu items?

Yes. Inherit NavigationNodeProvider<T> T where T is an existing NavigationSection, like PromotionsSection.

public sealed class DemoNodeProvider : NavigationNodeProvider<PromotionsSection>
{
  internal const string DemoNodeId = "DemoNodeId";

  public override IEnumerable<NavigationNode> GetRootNodes()
  {
    yield return
      new()
      {
        Name = "Demo node",
        Id = DemoNodeId,
        Icon = Icon.Ticket,
        NodeAction = NavigateScreenAction.To<VoucherListScreen>().With(new VoucherListsAllQuery()), // Change to your action / screen
        Sort = 100
      };
  }

  public override IEnumerable<NavigationNode> GetSubNodes(NavigationNodePath parentNodePath) => [];
}

Here's how the two implementations show up under Ecommerce:

>> Is there any documentation or recommended approach for this?

Yes, Here's the Custom UI section: https://doc.dynamicweb.dev/documentation/extending/administration-ui/index.html The section Area tree explains the concepts shown above: https://doc.dynamicweb.dev/documentation/extending/administration-ui/areatree.html

Hope this helps,

Imar