Developer forum

Forum » PIM » Customizing product header layout in Dynamicweb 10 PIM

Customizing product header layout in Dynamicweb 10 PIM

Ferri Halfhide
Reply

Hi Team,

I am working with Dynamicweb 10 PIM and would like to customize the product detail screen layout.

Specifically, I want to modify the top header section that displays:

  • Product name

  • Number

  • ID

  • Translations

  • Updated date

My questions:

  1. Is it possible to customize or hide elements in this top header?

  2. Can we control which fields are displayed there (e.g. remove ID or translations)?

  3. Is there any way to override this using screen layouts or UI extensions?
     

Any guidance or best practices would be appreciated. Thanks!


Replies

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Reply
This post has been marked as an answer

Hi Ferri

You can use a Screeninjector to do that - in this case you want the ProductOverviewScreen - see below how to inject to that one.

Here's the full expanded example:

InfoBar API (quick reference)

InfoBar
├── Image?                — product image
├── Icon?                 — icon enum
├── Information           — Dictionary<string, InfoValue>  (the key/value rows)
├── AppendComponents      — List<UiComponentBase>  (badges, progress, alerts…)
└── PrimaryAction?        — ActionBase (click action)

InfoValue accepts: string, DateTime, bool, DisplayBase, or (string, ActionBase).

Default product infobar entries

Key Value source
"Name" model.Name
"Number" model.Number
"ID" product ID string
"Updated" model.UpdateAt
"Variants" variant count + navigate action

Plus AppendComponents: language badges + completeness progress bar.


Full ScreenInjector example

using Dynamicweb.CoreUI.Screens;
using Dynamicweb.CoreUI.Displays.Information;
using Dynamicweb.CoreUI.Displays.Widgets;
using Dynamicweb.Products.UI.Screens;

public sealed class MyProductInfoBarInjector : ScreenInjector<ProductOverviewScreen>
{
    public override void OnBefore(ProductOverviewScreen screen)
    {
        // Runs BEFORE BuildOverviewScreen().
        // Layout/infobar don't exist yet, but screen.Model is available.
        // Use for prefetching data that OnAfter will need.
    }

    public override void OnAfter(ProductOverviewScreen screen, UiComponentBase content)
    {
        if (!content.TryGet<ScreenLayout>(out var layout))
            return;

        var infoBar = layout.InfoBar;
        if (infoBar is null)
            return;

        // ── REMOVE entries ───────────────────────────────────
        infoBar.Information?.Remove("Variants");
        infoBar.Information?.Remove("Number");

        // ── ADD new entries ──────────────────────────────────
        // Simple string
        infoBar.Information?.Add("Brand", new InfoValue("Acme Corp"));

        // DateTime
        infoBar.Information?.Add("Created", new InfoValue(screen.Model?.CreatedAt));

        // Bool (renders as LabelWithStatus checkmark/cross)
        infoBar.Information?.Add("Active", new InfoValue(screen.Model?.Active ?? false));

        // String with a click-action
        infoBar.Information?.Add("Category", new InfoValue(
            "Electronics",
            NavigateScreenAction.To<SomeCategoryScreen>()
                .With(new SomeCategoryQuery { Id = 42 })
        ));

        // ── MODIFY an existing entry ─────────────────────────
        if (infoBar.Information is not null)
        {
            infoBar.Information["Name"] = new InfoValue($"★ {screen.Model?.Name}");
        }

        // ── MODIFY PrimaryAction ─────────────────────────────
        infoBar.PrimaryAction = NavigateScreenAction.To<SomeOtherScreen>()
            .With(new SomeQuery { Id = "123" });

        // ── ADD an AppendComponent ───────────────────────────
        infoBar.AppendComponents.Add(new Alert
        {
            Text = "This product needs review",
            Type = AlertType.Warning
        });

        // ── REMOVE an AppendComponent (e.g. remove progress) ─
        infoBar.AppendComponents.RemoveAll(c => c is ProgressDisplay);
    }
}

Cheat sheet

Goal Code
Remove info row infoBar.Information?.Remove("Key")
Add info row infoBar.Information?.Add("Key", new InfoValue(value))
Overwrite info row infoBar.Information["Key"] = new InfoValue(newValue)
Replace entire infobar layout.InfoBar = new InfoBar { ... }
Change click action infoBar.PrimaryAction = action
Add component infoBar.AppendComponents.Add(component)
Remove component by type infoBar.AppendComponents.RemoveAll(c => c is T)

The injector is auto-discovered via AddInManager — no registration needed. Existing real-world examples in the codebase: OrderOverviewScreenInjector modifies PrimaryAction, EcomFieldPermissionListScreenInjector replaces the entire InfoBar.

Votes for this answer: 1

 

You must be logged in to post in the forum