Refresh current editing context on property value change

With the release of CMS UI 11.36.0 it is now possible to annotate any model property with a new attribute from EPiServer.Cms.Shell.UI.ObjectEditing namespace called ReloadOnChangeAttribute.

Imagine a simplified scenario - we have a list of available options

[Display(GroupName = Global.GroupNames.MetaData, Order = 250)]
[SelectOne(SelectionFactoryType = typeof(ItemsSelectionFactory))]
public virtual string Items { get; set; }

but the list should be filtered based on some extra property value also defined in our model:

[Display(
    GroupName = "EPiServerCMS_SettingsPanel",
    Order = 2)]
public virtual bool Important { get; set; }

Now, we would like a different set of items to be displayed when Important flag is on and different when Important flag is off.

All we have to do is to annotate our conditional property with the new attribute:

[Display(
    GroupName = "EPiServerCMS_SettingsPanel",
    Order = 2)]
[ReloadOnChange]
public virtual bool Important { get; set; }

And now we can utilize the value of Important property inside our factory.

public class ItemsSelectionFactory : ISelectionFactory
{
    public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
    {
        var content = metadata.FindOwnerContent();
        var property = content?.Property[nameof(SitePageData.Important)];
        if (property?.Value != null && (bool) property.Value)
        {
            return new[]
            {
                new SelectItem
                {
                    Text = "VERY IMPORTANT ITEM 1",
                    Value = "100"
                }
            };
        }

        return new[]
        {
            new SelectItem
            {
                Text = "NOT IMPORTANT ITEM 1",
                Value = "1"
            },
            new SelectItem
            {
                Text = "NOT IMPORTANT ITEM 2",
                Value = "2"
            },
            new SelectItem
            {
                Text = "NOT IMPORTANT ITEM 3",
                Value = "3"
            }
        };
    }
}

The same applies to OPE. Let's say you only need a specific box to be shown when the Important flag is on. All you need to do is to just read the value in the template and on every value change the template will be rerendered:

@if (Model.CurrentPage.Important)
{
    <div style="height: 100px; width: 100px; background-color: red;"></div>
}

This is how it looks in action: