Customize Sidekick Library in Adobe Edge Delivery Service: Tagging Integration Guide for Document-Based Authoring
What is the Sidekick Library?
The Sidekick Library is an extension for the AEM Sidekick that enables developers to create UI-driven tooling for content authors for document-based authoring. It includes a built-in blocks plugin that can display a list of all blocks to authors in an intuitive manner, removing the need for authors to remember or search for every variation of a block. Developers can also write their own plugins for the sidekick library. More →
Customize Sidekick Library to Add Tagging for Document-Based Authoring
Adobe Edge Delivery Service offers a robust and flexible Sidekick Library that can be customized to enhance the authoring experience for document-based authoring. One powerful customization is adding tagging features, including the “tag”
Tag Plugin
The Sidekick Library already includes a example plugin for adding tags. For detailed information and implementation guidance, check the Example Section of the Sidekick Library. Once the tag plugin is set up, it will be accessible in your application at the following URL:https://main--<respository>--<owner>.hlx.page/tools/sidekick/library.html?plugin=tags
The current plugin uses a simple tag list sourced from the “helix-tags” sheet in the Library Excel.
You can select one or multiple tags, use the copy icon to copy them, and paste them directly into your documents. The plugin also features a search option, allowing you to easily find the tags you need.
However, this plugin only supports a flat tag list. For those familiar with AEM, you know that the Tagging page arranges tags hierarchically, allowing for more structured and organized tagging.
Unfortunately, the current Sidekick tag plugin does not offer hierarchical tagging functionality.
Get Arun Patidar’s stories in your inbox
Join Medium for free to get updates from this writer.
To address this limitation, a potential solution would be to develop a new plugin, called the “Advanced Plugin.” This would enable hierarchical tag organization similar to what AEM users are accustomed to, enhancing the tagging experience in Adobe Edge Delivery Service.
Advance Tag Plugin
While the basic tagging feature uses a flat tag list exposed as JSON from Google Sheets/Excel, the “advanced tag” feature utilizes a hierarchical tag structure. In this blog post, we’ll focus on implementing the advanced tag feature, which transforms hierarchical data from Google Sheets into a tree structure to enhance your tagging options within the Sidekick Library.
Step 1: Set Up Google Sheets for Tag Authoring
Start by authoring hierarchical tag data in Library Excel Google Sheets under the helix-tags_advance sheet. This data will be exposed as JSON and later transformed into a format that displays as a tree structure in the Sidekick Library.
Step 2: Expose Tag Data as JSON
The authored tag data is available in JSON through the URL: https://main--<respository>--<owner>.hlx.page/tools/sidekick/library.json?sheet=tags_advance.
{
"total": 25,
"offset": 0,
"limit": 25,
"data": [
{
"tag-category": "Vehicles",
"level1": "Passenger Vehicles",
"level2": "Sedans",
"level3": "Compact Sedans",
"level4": "",
"level5": ""
},
{
"tag-category": "",
"level1": "",
"level2": "",
"level3": "Midsize Sedans",
"level4": "",
"level5": ""
},
{
"tag-category": "",
"level1": "",
"level2": "",
"level3": "Full-size Sedans",
"level4": "",
"level5": ""
},
{
"tag-category": "",
"level1": "",
"level2": "SUVs",
"level3": "Compact SUVs",
"level4": "",
"level5": ""
},
.....
}Step 3: Convert JSON to Hierarchical Format
Implement a transformation script (e.g., JavaScript,) to convert the flat JSON data from Google Sheets into a hierarchical JSON format. This conversion is necessary to render the tags as a nested tree structure.
Step 4: Integrate with the Sidekick Library
Customize the Sidekick Library in Adobe Edge Delivery Service to incorporate the “advanced tag” feature, allowing users to work with a structured tagging system.
Step 5: User Interface Customization
Enhance the UI by implementing expand/collapse functionality for each tag node, ensuring a user-friendly experience. You can further refine the look with custom CSS styling.
The “advanced tag” feature allows users to interact with a nested tag hierarchy, making it easier to select tags that fit the content context. Unlike the standard flat tags, this hierarchical approach supports parent-child relationships, creating an intuitive navigation for content authors. The plugin also includes search functionality similar to the standard tag plugin, enabling quick and efficient tag selection.
Here are the links to the code:
- Tag Plugin: https://github.com/arunpatidar02/aem-helix-1/pull/43
- Advanced Tag Plugin: https://github.com/arunpatidar02/aem-helix-1/pull/44
Benefits of Advanced Tagging in Adobe Edge Delivery Service
- Enhanced Content Categorization: The advanced tagging system helps organize content more effectively, making it easier to manage and retrieve tagged content.
- Improved Authoring Experience: The hierarchical structure provides a more intuitive and streamlined interface for authors, reducing the time spent searching for relevant tags.
- Scalability: The hierarchical approach scales well with complex tag sets, allowing for future expansion without overwhelming the authors.
Conclusion
Adding an advanced tagging feature to the Sidekick Library in Adobe Edge Delivery Service for Document-Based Authoring significantly enhances the content authoring experience. By leveraging a hierarchical tag structure authored in Google Sheets, content authors can navigate and apply tags more efficiently, improving the overall content management workflow. This customization allows for more nuanced tagging, making it a valuable addition to any AEM setup.
Explore the customization options and elevate your tagging strategy today!
