Adding a Button to the Sidebar

o.herrmann · November 23, 2022, 2:47pm

Hello everyone, the Problem i am having is the following:

I want to add a button to randomize the order of the Nodes here:
grafik

But i dont understand how to add a Button in an already existing React component.
I was able to remove the component and replace it with some text but thats it.

I was inspired by this guide but that one only replaces the whole bar and doesnt add anything to it.

Alternatively, can I add my own React Component to an exiting Container like “LeftSideBar/ContentTreeToolbar”.

Thanks in Advance.

mficzel · November 24, 2022, 9:14am

The flatnav package adds button to the same place in the document tree … maybe this helps GitHub - psmb/Psmb.FlatNav: Custom flat navigation component for Neos CMS

o.herrmann · November 25, 2022, 7:04am

Thanks for the quick answer but the flatnav package only replaces the whole sidebar as far as i can tell.

github.com

psmb/Psmb.FlatNav/blob/master/Resources/Private/FlatNav/src/manifest.js

import React from 'react';
import manifest from '@neos-project/neos-ui-extensibility';
import makeFlatNavContainer from './makeFlatNavContainer';
import style from './style.css';

manifest('Psmb.FlatNav:FlatNav', {}, globalRegistry => {
    const containerRegistry = globalRegistry.get('containers');
    const PageTreeToolbar = containerRegistry.get('LeftSideBar/Top/PageTreeToolbar');
    const PageTreeSearchbar = containerRegistry.get('LeftSideBar/Top/PageTreeSearchbar');
    const PageTree = containerRegistry.get('LeftSideBar/Top/PageTree');

    const OriginalTree = () => (
        <div className={style.pageTreeContainerOriginal}>
            <div className={style.pageTreeToolbarOriginal}>
                <PageTreeToolbar/>
            </div>
            <PageTreeSearchbar/>
            <PageTree/>
        </div>
    );

This file has been truncated. show original

I only want to add one button to the toolbar not replace it with a new one if that is possible.