1

I'm developing a custom Webedit button for Sitecore Experience Editor. The goal is to display a popup in the Experience Editor when the button is clicked and retrieve user input from the popup. Currently, I have successfully created the /sitecore/content/Applications/WebEdit/Common Field Buttons Webedit button from Core database, and it is visible in the Experience Editor. I'm seeking guidance on implementing this functionality and would greatly appreciate it if someone could provide me with some references.

Thank you in advance.

1

3 Answers 3

2

You will need to create a custom command and invoke it on button click. This command should be registered through patch. Here is one old article but it should give you some clue.

Edit Frame with custom command

If you can decompile SXA assemblies, do check Sitecore.XA.Foundation.Editing.Commands namespace. This is helpful.

Btw, as you need to read user input in EE, you can also think of using rendering parameter. Since it is a native feature of Sitecore, it can be easily implemented. You can simply educate your content authors how to edit it. Also, if you want to restrict user, you can create parameter template and associate it with rendering. Here are some examples -

https://www.logicalfeed.com/posts/114/rendering-parameters-in-sitecore-with-example

Rendering Parameter Template

2

I have done a similar kind of thing where the requirement was to show a popup on the experience editor where the user can input the data.

And the button and the popup look like this.

enter image description here

So I am not repeating the steps I did with this answer as I have written a blog for the same. Where you will find the steps I did with the graphical representation along with the code snippet.

https://sbhatiablogs.wordpress.com/2019/09/02/add-a-custom-button-on-experience-editor-ribbon/

I hope you have already done some steps to create the button but this article will help if you get stuck in something.

Hope this will help.

1

There are a number of articles available on the internet, depending on your need you can use either a custom experience button or an edit frame to make component content author friendly.

Custom Experience Buttons

  • In the core database navigate to /sitecore/content/Applications/WebEdit/Custom Experience Buttons and create a new item based on Field Editor Button.
  • On your button item make sure you set an icon and the list of fields the button should allow the content editor to edit. These should be pipe separated.
  • Switch to the master DB and navigate to the rendering item for your component
  • In the field for Experience Editor Buttons select the new button
  • Selection the component will now show the additional button on the toolbar
  • Clicking the icon will load a dialogue to edit the listed fields enter image description here

Edit Frame

  • In the core database navigate to/sitecore/content/Applications/WebEdit/Edit Frame Buttons and create a new item based on Edit Frame Button Folder. This folder will be referenced in your view for the collection of buttons to be displayed.

  • Under the new folder create a new item based on Field Editor Button and give it the name of your button.

  • On your button item make sure you set an icon and the list of fields the button should allow the content editor to edit. These should be pipe separated.

  • In Visual Studio open the view for your rendering

  • Add a reference to Sitecore.Mvc.Extensions

  • Surround the section to show the button with a using block as follows:

@using (Html.BeginEditFrame(RenderingContext.Current.ContextItem.Paths.FullPath, "Button Folder Name", "Toolbar Title"))

{

      // HTML here

}
  • You will now see a toolbar appear in the experience editor
  • Clicking the icon will load a dialogue to edit the listed fields

You can also customize it using commands based on your dynamic field editor logic and extend it as per your need. Refer to below links for more details.

  1. Sitecore Dynamic Field Editor Custom Experience Button
  2. https://www.partech.nl/en/publications/2016/04/custom-field-editor-for-all-of-the-templates-fields
  3. https://himynameistim.com/blog/custom-experience-buttons-vs-edit-frames-in-sitecore

Hope it helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.