Autocomplete Single-Line Text and CSS Picker Field

I finally managed to release CSS Picker Field Sitecore module. The module allows content authors to pick up CSS class names directly from the files stored in the project. Combining with Sitecore rendering parameters can slightly improve overall content editing experience.

CSS Picker Field Module Features

• Module loads and caches the names of CSS classes from given files
• Cached CSS classes are used in custom field type “Css Picker” included in the module, with autocomplete and suggestions capabilities.
• It also contains base template “_CssPicker” containing Css Picker field, which can be used as a base in your templates:
• Paths to CSS files can be defined in configuration file (check out App_Config\Include\CssPickerField\SmartSitecore.CssPicker.config for details)
• Paths can be also defined in “Css Picker” field’s data source (separated with coma):
• It’s based on Sc.AutoCompleteTextField nuget package.
• Module is available in Sitecore marketplace and Github

CSS Picker Field in Sitecore Rendering Parameters

One of the possible use cases of the module is combining it with built-in Sitecore rendering parameters. This gives content authors ability to select from CSS classes and use it directly on the renderings.

1. To connect the module with rendering parameters, first you need to add “Standard Rendering Parameters” to base templates on the template containing “Css Picker” field:
2. Next, use the template on rendering definition item in “Parameters Template” field:
3. Finally, after adding the component to a page, open “Component Properties” within Content or Experience Editor and CSS picker should appear in the modal, when you start typing CSS class name:

You can use those parameters in code, for example in Sitecore MVC controller:

or Glass Mapper MVC (where MyParameters is a Model class for corresponding template):

Sc.AutoCompleteTextField Package

Nuget package extending Sitecore’s “Single-line Text Field” with suggestions and autocomplete features.

• It’s available via nuget and can be installed via Visual Studio or cmd:

• Source of Sc.AutoCompleteTextField is available in Github

After installation you need to inherit from abstract class SmartSitecore.AutoCompleteTextField.Fields.AutoCompleteText and implement GetServiceUrl method. Method should return relative path to ajax method (WebMethod or MVC GET).

Logic of this method can be implemented elsewhere. As input parameter it should have a string and should return list of strings as json object, like:

Next you need to create a new field type in core database (under “/sitecore/system/Field types” node), pointing to the name of the assembly and class extending AutoCompleteText.

Now new field type can be used in your templates. When you start typing inside the text field, it will call ajax method defined in previous step, which should return the list of matching phrases.