Content Editor Collapse and Expand Accordions

Wednesday, April 06, 2016 @ 07:00

By: Scott Gillis, Lead Consultant – During development, I bounce between multiple items in the content tree, setting or checking field values. One of the things that always slows me down is the need to collapse down the different field sections so it shows what I want.

Part of my frustration can be fixed by turning off the Standard Fields via the View tab in the ribbon, but this is only really helpful when doing quick content entry and not checking setup fields

Field Sections without Standard Fields

Field Sections without Standard Fields

Field Sections with Standard Fields

Field Sections with Standard Fields

So my investigation begins with assumption that there is some JavaScript that allows for the collapse and expand of the fields section accordions. A quick F12 to launch the developer toolbar and the DOM explorer proves this:

Image Three

There is an onclick event javascript:scContent.toggleSection('QuickInfo','QuickInfo')

The toggleSection method can be found in
<Sitecore web root>\sitecore\shell\Applications\Content Manager\Content Editor.js, on about line 893.

With this knowledge I set out to create ribbon buttons that would collapse or expand all field sections for the currently selected item. What made this an interesting investigation into button creation, is that I wanted to trigger JavaScript on click verses performing a server side action.

My initial research led me to a lovely step-by-step guide from Sitecore for creating buttons for the Experience Editor, https://doc.sitecore.net/Sitecore%20Experience%20Platform/The%20editing%20tools/Customize%20the%20Experience%20Editor%20ribbon. Turns out, this was a dead-end! The Experience Editor has been completely re-written in SPEAK UI, which provides all kinds of new and helper methods for creating custom buttons, while the simple Content Editor awaits its turn to be re-written, still clinging onto last version’s clothes in the form of ‘SHEER UI’.

How to Call JavaScript from Command

This was the easier part of the problem to solve. As the Command class provides access to Sitecore.Context.ClientPage.ClientResponse, which provides a number of methods to give perform browser actions and feedback to the user.

Some of these include:

  • Sitecore.Context.ClientPage.ClientResponse.Alert
    • Provides a dialog box with the given message, some basic header and additional trigger options are available in the overloads
  • Sitecore.Context.ClientPage.ClientResponse.Confirm
    • Launches a dialog box to confirm an action should happen
  • Sitecore.Context.ClientPage.ClientResponse.Focus
    • Pass a specific ID and the screen focus will be set to this time
  • Sitecore.Context.ClientPage.ClientResponse.Eval
    • Performs a JavaScript eval on the script provided

How awesome is that! It is like Sitecore knew we would want to call some JavaScript from a command. I choose the ‘Eval’ method, and passed in the name of the collapse method that needed to trigger.

Load My Custom JavaScript in the Content Editor

The next challenge to overcome was how to properly load my JavaScript file when the Content Editor spun up for a user.

At first, I thought I might be able to accomplish it in the command, via something like
Sitecore.Context.ClientPage.ClientScript.RegisterClientScriptBlock(this.GetType(),"CollapseAll", "My Script");
but it turns out that this didn't load the JS at the right point in time to be triggered by the command.

With some research, I found a helpful article by jammykam, which talks about leveraging the renderContentEditor pipeline, Adding custom Javascript and Stylesheets in the Content Editor. Using this helpful suggestion, I added a pipeline injector and, like magic, my custom JS was loading into the Content Editor.

Creating the Buttons

The final piece of the puzzle now was to create some buttons and wire them up accordingly.

  1. Patch config file that ties a command to the code. This patch file should be placed in your zz-Load Last file, to make sure it properly adds your commands at the right point in the compiled configuration file
    1. Be warned that you MUST have a space after the comma before the assembly. If you don't, you will see the following unhelpful error message in the log and your command won't trigger
      WARN Could not find type in ReflectionUtil.CreateObject: TheCodeAttic.CustomContentEditorButtons.CollapseAllCommands
      ERROR Could not instantiate "TheCodeAttic.CustomContentEditorButtons.CollapseAllCommands,TheCodeAttic.CustomContentEditorButtons" command object
  2. Launch the Desktop from the Sitecore Launchpad and change your database to Core
    Image Four
  3. Click the Sitecore Start icon and launch the Content Editor
  4. Expand the content tree to Chunks, Sitecore -> Content -> Applications -> Content Editor -> Ribbons -> Chunks
    Image Five
  5. Right-click on Chunks, and perform an 'Insert from Template'. In the template modal select Sitecore -> templates -> System -> Ribbon -> Chunk
    1. Complete the Header field, which will act as a label under all buttons that are part of this Chunk
  6. Right-click on your newly created chunk and perform an 'Insert from Template'. In the template modal, select the proper button type. The simplest options are:
    1. Sitecore -> templates -> System -> Ribbon -> Small Button
    2. Sitecore -> templates -> System -> Ribbon -> Large Button
  7. Complete the following button fields:
    1. Header – Text displayed by the button, think of it as the button label
    2. Icon – Select from the Sitecore icon list
    3. Click ‐ The command name you put in your command configuration file
    4. Tooltip ‐ Because it is helpful for the user
    Image Six
  8. Tie this chunk of actions to a Ribbon, by expanding Sitecore -> Content -> Applications -> Content Editor -> Ribbons -> Strips
  9. Right-click the ribbon tab, for my example that was 'Developer', and do an insert from template. In the template modal, select Sitecore -> templates -> System -> Reference
  10. Complete the Reference Field by pointing to the chunk created in step 6
    Image Seven
  11. Refresh the content editor and navigate to the ribbon tab you’ve added your buttons to. Click and enjoy the custom experience
    Image Eight

You can check-out the full source solution on GitHub. As always, feel free to tweet me questions or comments @thecodeattic or on Sitecore Slack Community as @gillissm.

 

 

Scott Gillis, Lead Consultant at Paragon and 2017 Sitecore MVP, has been working with Sitecore for several years. He has a deep passion for helping clients leverage their content and data into powerful new capabilities in Sitecore and has produced successful outcomes as the technical lead on numerous, complex implementations. Recently, Scott has been focusing on helping these clients take advantage of the wealth of data collected by Sitecore Experience Analytics.