Table of Contents

UI elements

The various ScreenTypes you can inherit from when constructing a custom workspace make use of various standard UI elements depending on the task at hand. This article lists each standard UI element you have access to, what it's typically used for, and the type that represents it in code.

All of these types live under the Dynamicweb.CoreUI namespace (the specific sub-namespace is noted with each element). You rarely construct the layout types — Tab, Group, Section, Form — by hand; the screen base classes build them for you when you call AddComponents, AddWidget, and friends. The display types — InfoBar, Alert, Widget — you do create directly.

Tabs

Tabs are used on overview screens and edit screens. They are typically used to group related input fields or widgets together for screens with a lot of information. Tabs

Represented by Tab / TabContainer (Dynamicweb.CoreUI.Layout). On edit and overview screens, the first argument to AddComponents / AddComponent is the tab name — a tab is created automatically if it doesn't exist yet.

Topbar

A topbar is used for two things; to show where in the system the user is located by displaying a breadcrumb, and to contain buttons like the action menu button, save buttons, and so on. topbar

The save/cancel buttons are added for you when an edit screen has a save command. Add your own buttons through the action menu (Button lives in Dynamicweb.CoreUI.Actions).

A navigation tree is used to enable the user to navigate between features or content for an area. Depending on the area, navigation trees may have several sections with a group of nodes under a label. NavigationTree Often, individual nodes will allow you to create new content using a +-icon - and access more features or settings using a context menu.

Build navigation trees with NavigationSection and NavigationNodeProvider — see Area tree.

Dialogs

Dialogs (modals) are occasionally employed when we want to allow the user to create or edit content without leaving the current view. You open one by navigating to a screen with OpenDialogAction.To<TScreen>(). Modal

Represented by Dialog (Dynamicweb.CoreUI.Layout); opened via OpenDialogAction.

Slideover panel

A slideover panel is a panel which appears as, well, a slide over on top of the current view. It is typically employed when the user is prompted to select an asset, a page/paragraph, and so on. You open one by navigating to a screen with OpenSlideOverAction.To<TScreen>(). SlideOver

Represented by SlideOver (Dynamicweb.CoreUI.Layout); opened via OpenSlideOverAction.

Context menu

Context menus are collections of context-sensitive actions available by clicking a ...-button. Context menus are always present for list items and often for nodes in a navigation tree. ContextMenu

Represented by ContextMenu (Dynamicweb.CoreUI.Actions), filled with ActionGroup/ActionNode. See Action menu for how to build the actions inside it.

Toasts

A toast is a small notification providing the user with feedback at certain times, e.g. when something goes right (or wrong). Toasts are produced by the system in response to command results — you don't place them on a screen yourself.

toast

Collapsible rows

Collapsible rows are used for certain lists-within-lists - most importantly for item types and paragraph containers. Most collapsible rows feature a context menu for the whole row as well as for the list item. CollapsibleRows

Info bar

The Info bar element is used whenever we need to show key information in a prominent manner, e.g. on pages. Set one with SetInfobar(...) on an edit or overview screen. InfoBar

Represented by InfoBar (Dynamicweb.CoreUI.Displays.Information). Its key-value rows are InfoValue entries; you can also append components such as Alert and ProgressDisplay. See Screen injectors for how to read and modify an info bar.

Widgets

Widgets are elements on an overview screen highlighting something and providing the user with the option of viewing more or managing the type of content shown. Add them with AddWidget(...) / AddComponent(...). widgets

Represented by Widget (Dynamicweb.CoreUI.Layout).

How the elements fit together on a screen

The edit screen is a good place to see several of these elements combine. The example below sets an info bar, splits its content across two tabs (Address and Fields), groups input fields under headings, and supplies a save button via a command — all from one BuildEditScreen override.

This is an illustration of how the pieces map together; for the full walkthrough of BuildEditScreen, AddComponents, EditorFor, and GetEditor, see edit screens.

    public sealed class UserAddressEditScreen : EditScreenBase<UserAddressModel>
    {
        protected override string GetScreenName() => Model?.Id > 0 ? $"{Model.Name}" : "New address";

        protected override void BuildEditScreen()
        {
            var model = Model;
            if (model is null)
                return;

            SetInfobar(UsersComponentsHelper.GetUserInfoWidget(model.UserId));

            CreateUserTab();
            CreateFieldsTab();
        }

        private void CreateUserTab()
        {
            AddComponents("Address", new LayoutWrapper[]
            {
                new LayoutWrapper("Address", new[]
                {
                    EditorFor(m => m.Name),
                    EditorFor(m => m.Email),
                    EditorFor(m => m.Address),
                    EditorFor(m => m.Address2),
                    EditorFor(m => m.HouseNumber),
                    EditorFor(m => m.Zip),
                    EditorFor(m => m.City),
                    EditorFor(m => m.State),
                    EditorFor(m => m.CustomerNumber),
                    EditorFor(m => m.CountryCode),
                    EditorFor(m => m.IsDefault),
                }),
                new LayoutWrapper("Phone", new[]
                {
                    EditorFor(m => m.Phone),
                    EditorFor(m => m.Cell),
                    EditorFor(m => m.Fax),
                }),
                new LayoutWrapper("Work", new[]
                {
                    EditorFor(m => m.Company),
                    EditorFor(m => m.PhoneBusiness),
                }),
            });
        }

        private void CreateFieldsTab()
        {
            AddDynamicFields("Fields", m => m.CustomFields);
        }

        protected override EditorBase? GetEditor(string property) => property switch
        {
            nameof(Model.CountryCode) => EditorsHelper.CreateRegionCodeSelect(),
            _ => null,
        };

        protected override CommandBase<UserAddressModel> GetSaveCommand() => new UserAddressSaveCommand();
    }

This screen will be rendered like this in the frontend: EditScreen

This UserAddressEditScreen contains a few different UI elements:

  • Top Bar - Up top, you'll find the breadcrumb (so users always know where they are) that also contains the Cancel, Save and Close, and Actions buttons.

  • Info Bar - Just below the topbar, the info bar shows some important information about the user at a glance.

  • Tabs - The screen has been split into Address and Fields tabs for simplicity.

  • Input Fields - These make up the core of the screen - forms, checkboxes, dropdowns - whatever the user needs to interact with.

Edit screens are a great example of how the different UI elements fit together to create something flexible, familiar, and easy to use.

Improve this doc
To top