[Designer] How to customize Toolbar

[becory]

Hi, I am trying to customize the adaptive card designer toolbar.
I had been to move 2 selectors from the original designer.
I want to move a "Preview mode" toggle button after the host app selector.
but the togglePreview() function is private in the card-designer.ts
How can I use this function or have another way to set Preview mode in the designer?

I think a lot of function is private in card-designer that can't be customized by the designer.

[becory]

Have any chance to removeElement from CardDesigner.toolbar?
I only found that have addElement in the toolbar.

I want to remove Copy JSON payload button.

designer.toolbar.getElementById('__copyJsonButton').isVisible = false
It seems not working.

[anna-dingler]

Can you share the code where you are customizing the toolbar?

designer.toolbar.getElementById('__copyJsonButton').isVisible = false; needs to be called before you attach the designer to its host element (designer.attachTo(document.getElementById("designerRootHost"));)

[becory]

It's works now, thanks!

[anna-dingler]

@becory
You can enable/disable preview mode using designer.designerSurface.isPreviewMode = true; and designer.designerSurface.isPreviewMode = false;.

You will need to create a new ToolbarButton that handles the preview toggling itself, and hide the given "Preview mode" button.

Hope this helps!