Sitecore’s Headless ASP.NET Core Rendering SDK provides a powerful platform for building content-rich web applications. In this blog-post, I’ll explore how to leverage this SDK to create a custom Sitecore Edit Frame Tag Helper. This tag helper allows you to render an HTML edit frame for a Sitecore item, providing a seamless editing experience for content authors.
What is an Edit Frame?
Edit Frames are a valuable feature in Sitecore’s Experience Editor. They offer content authors front-end access to fields that might not be directly accessible. These fields could be hidden from view or of a type that isn’t directly editable from the front end. Edit Frames provide a user-friendly interface for making changes to such fields within the context of a webpage, ensuring a smooth content editing process.
It’s worth noting that Edit Frames are not part of the default Sitecore’s Headless ASP.NET Core Rendering SDK. However, by creating a custom Sitecore Edit Frame Tag Helper, you can integrate this feature seamlessly into your projects.
Prerequisites
Before I’ll dive into creating the custom Sitecore Edit Frame Tag Helper, make sure you have the following prerequisites in place:
- A project that includes Sitecore’s Headless ASP.NET Core Rendering SDK.
- Familiarity with Tag Helpers and Razor views in ASP.NET Core.
Creating the Custom Sitecore Edit Frame Tag Helper
The custom Sitecore Edit Frame Tag Helper is implemented as a C# class. Below is the complete code for this tag helper:
This code defines a ‘CustomEditFrameTagHelper’ class that inherits from the ‘TagHelper’ base class. The tag helper has several attributes and properties, including ‘asp-commands’, ‘asp-model’, ‘asp-id’, ‘asp-fields’, and ‘asp-commands’, which allow you to customize the Edit Frame’s behavior and appearance.
Inside the ‘Process’ method, the code checks if the page is being edited in the Sitecore Experience Editor, and if so, it generates the HTML for the Edit Frame.
The ‘GetChromeContent’ method is used to create the Edit Frame’s configuration, specifying which commands should be available in the frame. The ‘ClickCommand’ class defines individual commands within the Edit Frame, such as “Edit Fields”, “Insert New Item”, “Delete Link” and “Move Up/Down”.
Using the Custom Sitecore Edit Frame Tag Helper
To use the custom Sitecore Edit Frame Tag Helper in your views, follow these steps:
- Make sure the ‘CustomEditFrameTagHelper’ class is included in your project.
- In your Razor view, add the ‘custom-sc-edit-frame’ tag and set the necessary attributes, such as ‘asp-commands’, ‘asp-model’, and ‘asp-fields’. For example:
Ensure that you’re running the application in the Sitecore Experience Editor to see the Edit Frame in action.
What Happens When You Don’t Pass Field Names?
If you choose not to pass field names in the ‘asp-fields’ attribute, the custom Sitecore Edit Frame Tag Helper will automatically generate a list of fields to be edited based on the ‘asp-model’ provided. This is a convenient way to include all available fields for editing without explicitly specifying them.
Here’s an example without the ‘asp-fields’ attribute:
In this case, the Edit Frame will dynamically include all fields from the yourModel object for editing, simplifying the configuration process.
Conclusion
Creating a custom Sitecore Edit Frame Tag Helper with Sitecore’s Headless ASP.NET Core Rendering SDK can enhance your content editing experience by providing a tailored interface for managing content within the Sitecore platform. This tag helper allows you to define which commands should be available for editing and, if needed, automatically include all fields for editing when not explicitly specified.
By following the steps outlined in this blog post, you can integrate the custom Sitecore Edit Frame Tag Helper into your application and take advantage of Sitecore’s powerful content management features.
Happy Sitecore-ing!
–Robbert
