World is now on Opti ID! Learn more

Linus Ekström
Jul 23, 2014
  6350
(0 votes)

Built in auto suggestion editor

Last week’s UI release added support for two built in auto suggestion editors giving the same functionality as I described in this previos blog post: http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2013/12/Auto-suggest-editor-in-EPiServer-75/. In this blog post we will create two editors that gives the editor suggestion in a drop down list that will look like this:

AutoSuggestionScreenShot

To implement this, just create a class that implements the new interface ISelectionQuery:

using System;
using System.Collections.Generic;
using System.Linq;
using EPiServer.ServiceLocation;
using EPiServer.Shell.ObjectEditing;
 
namespace EPiServer.Templates.Alloy.Business.EditorDescriptors
{
    [ServiceConfiguration(typeof(ISelectionQuery))]
    public class MySelectionQuery : ISelectionQuery
    {
        SelectItem[] _items;
        public MySelectionQuery()
        {
            _items = new SelectItem[] { 
                new SelectItem() { Text = String.Empty, Value = String.Empty },
                new SelectItem() { Text = "Alternative1", Value = "1" },
                new SelectItem() { Text = "Alternative 2", Value = "2" } };
        }
        //Will be called when the editor types something in the selection editor.
        public IEnumerable<ISelectItem> GetItems(string query)
        {
            return _items.Where(i => i.Text.StartsWith(query, StringComparison.OrdinalIgnoreCase));
        }
        //Will be called when initializing an editor with an existing value to get the corresponding text representation.
        public ISelectItem GetItemByValue(string value)
        {
            return _items.FirstOrDefault(i => i.Value.Equals(value));
        }
    }
}

And to use this you can add the new AutoSuggestionEditor attribute to your property:

[AutoSuggestSelection(typeof(MySelectionQuery))]
public virtual string SelectionEditor1 { get; set; }
 
[AutoSuggestSelection(typeof(MySelectionQuery), AllowCustomValues = true)]
public virtual string SelectionEditor2 { get; set; }

 

Notice how the second property sets the AllowCustomValues property to true. This means that the editor is not forced to select one of the suggested choices, it’s merely used for giving editors suggestions. By default, this property is set to false and the editor needs to select one of the suggested values.

Jul 23, 2014

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |