Bartosz Sekula
Sep 7, 2021
  1869
(8 votes)

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:

Sep 07, 2021

Comments

Antti Alasvuo
Antti Alasvuo Sep 7, 2021 03:13 PM

Really nice :)

Ram Kumar K
Ram Kumar K Sep 12, 2021 10:52 PM

Thank you. It is rewally a nice feature. Can't wait to try "Show and Hide" properties based other Item property values.

Ram Kumar K
Ram Kumar K Sep 12, 2021 10:53 PM

Thank you. It is really a nice feature. Can't wait to try "Show and Hide" properties based other Item property values.

KennyG
KennyG Dec 10, 2021 10:37 PM

OMG! I've needed this for so long!

Praful Jangid
Praful Jangid Jul 6, 2022 06:16 AM

This is exactly what I was looking. Why this post did not come in top results :(

It could have saved my time.

Thanks Bartosz, for sharing information about this feature.

Please login to comment.
Latest blogs
Plug-in manager is back in CMS 12

Plug-in manager is back in the UI, what is it and how can i use it?

Luc Gosso (MVP) | Oct 6, 2022 | Syndicated blog

Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog