Bartosz Sekula
Sep 7, 2021
  3270
(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.

Binay
Binay Dec 6, 2022 08:41 AM

Hi Bartosz Sekula 

   I wanted to implment casecading dropdown functionaliy inside IList popup. But ReloadOnChange event is not triggered for IList popup. Can you please guide me ?

Please login to comment.
Latest blogs
Vulnerability in CMS 12 shell module configuration

Introduction A potential security vulnerability has been identified in Optimizely CMS 12, triggered by a certain shell module configuration. To be...

Magnus Rahl | Sep 28, 2023

AI-Assistant: The 'Change Tone' Shortcut

The AI-Assistant for Optimizely is constantly evolving, adjusting, and transforming to meet your digital needs, providing a cutting-edge advantage...

Luc Gosso (MVP) | Sep 27, 2023 | Syndicated blog

How to fix scheduled job 'Remove Abandoned BLOBs' if it keeps failing

Optimizely inlcudes a job named 'Remove Abandoned BLOBs'. This post will help you fix it if it's no longer working.

Henning Sjørbotten | Sep 26, 2023 | Syndicated blog

Optimizely Web Experimentation Metrics

Within the domain of Optimizely Web Experimentation Metrics, the emphasis is on objective key performance indicators (KPIs) selected to assess an...

Matthew Dunn | Sep 23, 2023 | Syndicated blog