Blog posts by Linh Nguyen

Improve user experience with restriction information

Tue, 19 Mar 2024 12:50:16 GMT

In EPiServer.CMS.UI 12.28.0, an improvement for restriction information is added.

Previously the restriction information takes quite a lot of space, especially for big sites with a long list of restricted types.

This new improvement reduces the space significantly while still gives editors information about restricted types they need to know.

Before:

Now:

Users can expand the list to view all restricted types, and collapse it if they want.

Create media content types from UI

Tue, 12 Dec 2023 19:50:52 GMT

In CMS UI 12.26.0, a new feature is made to support creating media content types, similar to how users can create page types and block types.

Users will need to specify which media type they want to create and which media extensions the content type is going to support.

The supported media extension list is displayed in Content type page > Settings. For content types created from code, the supported media extension list is readonly.

Improve error handling for visitor groups

Thu, 08 Dec 2022 09:44:49 GMT

In CMS UI 12.15.0 we added several improvements in handling errors for visitor groups.

The visitor group list and detailed visitor group page will always be loaded. When the list of all visitor group criteria are failed to load (for example, when one of custom visitor group criterion has exceptions in its constructor), the detailed page can still be viewed, even though users will not be able to add criteria to it

It informs users in a more friendly way with some technical details when there are errors in visitor group criteria.

Improve user experience with ContentArea and ContentReference

Wed, 17 Nov 2021 19:29:29 GMT

In EPiServer.CMS.UI 12.1.0, several user experience improvements were made.

Easily navigate to the selected item in ContentReference properties

The Edit/View command is added to the selected item, so now users can easily go to that item. If the selected item is a block, it also has the Quick Edit command.

The Edit/View command is available even if the ContentReference property is readonly

Display restriction information for ContentReference and ContentArea

You can see which content types you are allowed or disallowed to add to the current ContentArea or ContentReference, the same way ContentReferenceList has.

The old message is removed when there is no restriction.
"You can add these content types
All"

Change button text from ... to Select [Type]

The button text now explicitly indicates which content type you can select.

Widen the input field for ContentReference properties

ContentReference input field becomes wider. Currently it only applies for main content area. In dialogs, it still keeps the old length.

Move inline block edit from Labs.BlockEnhancements to CMS UI

Tue, 19 Jan 2021 07:53:41 GMT

Features in EPiServer.Labs.BlockEnhancements have been used and appreciated by many users. The most common feature - inline editing, now becomes a part of the product and will be available from CMS UI 11.32.0.

Inline Edit

Using the Quick Edit command from the context menu, editors can edit blocks without changing the current content context. The command is available in Forms View, On-Page Edit and the assets pane.

The command opens a dialog box with an editable block form. Editors can edit blocks the same way as when switching to blocks editing context.

By default, the Name, Categories properties and the Setting tab are hidden. This developer guide topic shows how to enable them with InlineBlockEditSettings attribute.

The bottom-left button mirrors the main button in the Publish menu, so it can be Ready for Review, Ready to Publish, Publish or Publish Changes. It helps editors to change the block's status directly from the inline edit dialog box.

For block content types that have properties in more than one tab, those tabs are replaced with sections in the inline edit dialog box. Below is an example of a block type which is configured to show Name property and Setting tab, and has property in three tabs - Contact, Products and Content.

    [SiteContentType(GUID = "9E7F6DF5-A963-40C4-8683-211C4FA48AE1")]
    [SiteImageUrl]
    [InlineBlockEditSettings(ShowNameProperty = true, HiddenGroups = "")]
    public class AdvancedBlock : SiteBlockData
    {
        [Display(Order = 1, GroupName = SystemTabNames.Content)]
        public virtual string Text1 { get; set; }

        [Display(Order = 2, GroupName = SystemTabNames.Content)]
        public virtual string Text2 { get; set; }

        [Display(Order = 1, GroupName = Global.GroupNames.Products)]
        public virtual string Text3 { get; set; }

        [Display(Order = 2, GroupName = Global.GroupNames.Contact)]
        public virtual string Text4 { get; set; }
    }

Note: For people who use Labs.BlockEnhancements and Labs.ContentManager:
If you have a previous version of EPiServer.Labs.BlockEnhancements installed, you should upgrade to the version 0.10.0 as it is compatible with CMS UI 11.32.0
Compatible version of Labs.ContentManager to work with CMS UI version 11.32.0 is coming soon.

Send feedback from UI

Tue, 08 Dec 2020 15:02:04 GMT

In EPiServer.CMS.UI 11.31.0, a new option "Give Us Feedback" is added to the help menu in the top platform navigation.

It's available in CMS, Commerce and Addons that use the platform navigation loaded from the CMS instance.

Clicking on the option will open the EPiServer Customer Feedback in a new tab where you can add feedback about EPiServer.

Improve OPE with client-side rendering (features out of beta in 11.24.0)

Tue, 31 Mar 2020 06:46:01 GMT

Several features to improve the client-side rendering in OPE have been tested with beta customers for a while. With EPiServer.CMS.UI 11.24.0, they have finally dropped the beta tag.

The features are:

contentSaved: introduced in CMS UI 10.12.0 (Taking control of client-side rendering in OPE)

When a property value has been saved, a message is published on the topic contentSaved, together with an object containing the content link to the content that was just updated.

Now you can listen to this event with:
```
// Wait for the scripts to run so we can use the 'epi' global object.
window.addEventListener("load", function() {
    epi.subscribe("contentSaved", function(event) {
        console.log("On Page Edited!");
        console.log(event.contentLink);
    }
}
```
The event will look like this:
```
{  
    "contentLink": "6_164",
}
```

epiReady: introduced in CMS UI 11.11.0 (Routing in a SPA with a working On-Page Editing experience)

The epiReady event will be raised as soon as the iframe inside the UI is loaded. It contains information regarding if the current content is editable. In addition to that event, a few properties are set on the global epi object that are available in edit view. Those properties are:

epi: {
    isEditable: false, // true in edit mode, and false in preview mode
    inEditMode: true,  // true in both edit mode and preview mode
    ready: true  // true if the property isEditable has been initialized        
}

isEditable value will not be correct until the event has been raised. By looking at the ready property you will know if the property isEditable has been initialized or not.

Here is a sample of how this event and properties could be used:

const context = {
    inEditMode: false,
    isEditable: false
};

// Listen to the `epiReady` event to update the `context` property.
window.addEventListener('load', () => {
    // Expect `epi` to be there after the `load` event. If it's not then we're
    // not in any editing context.
    if (!window.epi) {
        return;
    }

    function setContext() {
        // The event only has `isEditable`, but the epi object has both.
        context.inEditMode = window.epi.inEditMode;
        context.isEditable = window.epi.isEditable;
    }

    // Check that ready is an actual true value (not just truthy).
    if (window.epi.ready === true) {
        // `epiReady` already fired.
        setContext();

    // The subscribe method won't be available in View mode.
    } else if (window.epi.subscribe) {
        // Subscribe if the `epiReady` event hasn't happened yet.
        window.epi.subscribe('epiReady', () => setContext());
    }
});

domUpdated: first introduced in CMS.UI 11.2.0 (Taking more control of client-side rendering in OPE 2). At that time, you needed to tell the OPE view to remap all the overlays on the page by publishing to the domUpdated topic like epi.publish("beta/domUpdated").
From CMS.UI 11.4.0, you didn't need to publish to that topic anymore because the overlays automatically get updated. BUT, this feature applied only for beta users.

From CMS.UI 11.24.0, it will work with all users - when a new element with the attribute data-epi-edit, or an existing element change their value to another property name (which makes the DOM changes), the overlays will update themselves automatically.

Waste basket enhancements

Fri, 01 Feb 2019 07:35:23 GMT

In the next release of CMS UI (11.17.0), we will be releasing some enhancements for waste baskets. The enhancements are small, but hopefully they will help editors while working with the waste baskets.

1. Adding more information about each item

Before, when you hovered over an item in the trash list, only item name was shown in the tooltip. Now, the tooltip will include item name, id and type.

2. Support deleting a single item

You can select a single item from the trash list and choose to delete it permanently. If the selected item has children, those children will also be deleted permanently.