This article will explain how you can improve the Content Author’s experience. Actually, content authors need to change content or settings (like checkbox, drop list) on data source which probably is not accessible by the Experience Editor´s UI. What content authors usually do in those cases, is open Content Editor and browse the data source and edit it, but at this point content author exits the experience editor.

In order to improve their lives, it´s recommended to use a Custom Experience Button.

You can create an Experience Button from the content editor using the following steps:

Select Core Database

Go to path /sitecore/content/Applications/WebEdit/Custom Experience Buttons

3. You can create a folder with your site name that contains the experience buttons for your module.

Create an item like [Your-Module-Name] with /sitecore/templates/System/WebEdit/Field Editor Button Template.

Header: You can fill with “Edit”
Icon: Choose an icon, edit.png fits.
Fields: Pipe-separated list of field names to be edited by the Field Edtior
Tooltip: you can fill with “Edit”.

5. Add your Experience Button in your desired Rendering.

6. Now, in Experience Editor you can see a new Button in the options. If you clicked you will find a form to fill all fields that you declared in the Experience Button.

This will increse the content authors experence using Experience Editor, especially in the fields that are not in-line editing.

Sitecore Experience Editor Tips! – Part 1

13 October, 2021

Roberto Armas

Sitecore

I want to talk about a common problem that you could face when you develop for Experience Editor.

Imagine that you build your module and it requires Datasource attached to the rendering. If you didn´t add any validation in the view just for the experience editor. Content authors probably experience some errors or couldn’t see the module like the following example:

This is a simple controller which generate a model based on RenderingContext.Current.Rendering.Item.

  public class HeadlineAndDescriptionController : Controller
    {
        private readonly IViewPathResolver _viewPathResolver;
        private readonly IModelMapper _modelMapper;

        public HeadlineAndDescriptionController(IViewPathResolver viewPathResolver, IModelMapper modelMapper)
        {
            this._viewPathResolver = viewPathResolver;
            this._modelMapper = modelMapper;
        }

        public ActionResult Index()
        {
            var model = _modelMapper.MapItemToNew<HeadlineAndDescription>(RenderingContext.Current.Rendering.Item);
            return View(this._viewPathResolver.ResolveViewPath(RenderingContext.Current.Rendering.RenderingItem), model);
        }
    }

We are going to add the Rendering on a Sample Page, noticed that the Data Source is empty.

Then if we open the Experience Editor, it generates a bad experience for the content author because we coudn´t find anything on the view in order to associate the desired data source.

Solution:

In your controller you can add [RequireDatasource] filter.

  [RequireDatasource]
        public ActionResult Index()
        {
            var model = _modelMapper.MapItemToNew<HeadlineAndDescription>(RenderingContext.Current.Rendering.Item);
            return View(this._viewPathResolver.ResolveViewPath(RenderingContext.Current.Rendering.RenderingItem), model);
        }

This is a simple filter but makes difference for Content Authors:

 public class RequireDatasource : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (RenderingContext.CurrentOrNull != null &&
                (string.IsNullOrEmpty(RenderingContext.Current.Rendering.DataSource) || RenderingContext.Current.Rendering.Item == null))
            {
                // Check Experience Editor
                if (Context.PageMode.IsExperienceEditorEditing)
                {
                    filterContext.Result = new ContentResult() { Content = @"<p class=""rmc-select-datasource"">[Module: " + RenderingContext.Current.Rendering.RenderingItem.Name + " ("+ filterContext.ActionDescriptor.ActionName+ "): No Datasource Found, Please select Datasource Item]</p>", ContentType = "text/html" };

                }
                else
                {
                    filterContext.Result = new EmptyResult();
                }
            }
        }
    }

Finally, if you observe a module with message : “Module: {ModuleName} (Method) : No Datasource found, Please select Datasource item”. And content authors know that they need to add a Data source.

I hope this will be helpful to improve the experience for your Content Authors while they are editing.

Sitecore Experience Editor Tips! – Part 2

Sitecore Experience Editor Tips! – Part 2

Sitecore Experience Editor Tips! – Part 1