Try our conversational search powered by Generative AI!

Bartosz Sekula
Sep 7, 2021
  3813
(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
Join the Content Recommendations Work Smarter webinar May 8th 16.00-16.45 CET with expert Aidan Swain

Learn more about Content Recommendations, with Optimizely’s very own Senior Solutions consultant, Aidan Swain . He will discuss best practices and...

Karen McDougall | Apr 12, 2024

Plugin for Identifying and Bulk Deleting Orphaned Missing Properties in Optimizely

I am aware that the Optimizely World community has extensively discussed this topic, with numerous solutions and code snippets available to help...

Adnan Zameer | Apr 11, 2024 | Syndicated blog

Enhancing the Authoring Experience: Extending the LinkItem

The LinkItem field is one of the most demanded properties by the community, allowing editors to effortlessly create and manage links across pages a...

Santiago Morla | Apr 10, 2024 | Syndicated blog

The distinctions between Optimizely Web Experimentation and Optimizely Feature Experimentation

This blog is part of the series - Unlocking the Power of Experimentation: A Marketer's Insight. Let’s dive into Optimizely's powerful experimentati...

Holly Quilter | Apr 9, 2024