Customizing Dynamic Zone Component Cards in Strapi 4.12.5 for Enhanced User Documentation

General
1

I’m working on customizing Strapi version 4.12.5 to enhance the user experience when selecting components in Dynamic Zones. My goal is to add an icon to each card representing a component. When clicked, this icon will open a modal displaying detailed information about that specific component. This will allow users to access a dynamic documentation right from the selection interface, making it easier to understand the purpose and usage of each component.

The file that I need to modify is ComponentCategory.js, located at node_modules/@strapi/admin/admin/src/content-manager/components/DynamicZone/components/ComponentCategory.js.

Currently, the component uses Strapi’s design system to present a list of components within an accordion structure, where each card includes an icon and a title. My plan is to add an info icon or button to each card that, when clicked, triggers a modal containing more details about the component.

This change aims to make it simpler for users to access helpful information about each component during the selection process, improving the usability and efficiency of building content with Dynamic Zones in Strapi.

I’m looking for suggestions or guidance on the best way to implement this customization. Has anyone done something similar or have tips on optimizing this approach?

image
image701×535 24.8 KB

2

Hi Lucas, actually I am looking for a very similar solution, did you find anything?

3

Hi! I went with a plugin instead. It shows the documentation for each component in a sidebar on the right side of the Strapi page. This way, users can check details about the components while using Dynamic Zones, and it didn’t require changing core files.

4

Thanks for your answer! I created a custom field to scrap and inject HTML tags in the places I needed.

5

I have a very interesing i it
do you have a gitHub with this ?

6 
const toggleDynamicZone = (hideOriginal = true) => {
    const elements = document.querySelectorAll('.sc-bdvvtL.sc-dUbtfd.bOQZK.eAMngj');
    elements.forEach((element) => {
        if (element.children[0].className === 'sc-bdvvtL sc-htJRVC bOQZK cxSmfy') {
            if (element.children[0].children[0].className === 'sc-bdvvtL sc-gsDKAQ bOQZK cJazwc') {
                if (hideOriginal) {
                    (element as HTMLElement).style.display = 'none';
                    // Create a new div to render the custom component
                    const customDiv = document.createElement('div');
                    customDiv.className = 'custom-dynamic-zone-container';
                    element.parentNode?.insertBefore(customDiv, element.nextSibling);

                    // Render the custom component inside the new div
                    const root = createRoot(customDiv);
                    root.render(<NewDynamicZone content={content} componentLayouts={componentLayouts} onChange={onChange} />);
                } else {
                    (element as HTMLElement).style.display = 'block';
                    const customDiv = document.querySelector('.custom-dynamic-zone-container');
                    if (customDiv) {
                        customDiv.remove();
                    }
                }
            }
        }
    });
}