Designer customization Issue

[linesh98]

I customized the designer as shown below, but it has some issues. I’ll provide the code as well. I added a custom button to the designer and hide all the icons in the header toolbar. I placed the custom button in the top-right corner to serve the same purpose as the original Edit/Preview toggle and theme switch button.

Now, I need to include the Undo/Redo and Multilanguage buttons. However, I’m unable to access these specific buttons from the designer. When I set hidden: false for these two buttons in builder customization, they don’t appear. These buttons only work when I remove the entire builder customization from the code.

const builderCustomizations: CustomizationMap = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
position: "relative",
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
width: "100%",
padding: "0.5rem",
}}
>


</>
),
},
};

and
const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

and <FormBuilder
view={view}
builderRef={(ref) => {
if (ref) onRefReady(ref);
}}
customization={builderCustomizations}
onFormDataChange={({ data }) => {
onDataChange(data);
}}
/>

[sergeythrees]

Hi, @linesh98
here is an example of advanced customization, with your case:

const RenderIn = ({inBuilder, inViewer}: {inBuilder: ReactNode, inViewer: ReactNode}) => {
  const {builderMode} = useFormBuilder()
  if (builderMode === 'builder') return <>{inBuilder}</>

  return <>{inViewer}</>
}

const headerStyle = {display: 'flex', width: '100%', justifyContent: 'flex-end'}

const HeaderWrapper = ({children}: PropsWithChildren) => (
  <RenderIn
    inBuilder={children}
    inViewer={<div style={headerStyle}>{children}</div>}
  />
)

const builderCustomizations: CustomizationMap = {
  JsonViewButton: {hidden: true},
  MainMenu_Button: {hidden: true},
  ResolutionSelect: {hidden: true},
  ToggleThemeButton: {hidden: true},
  Header_Toolbar: {
    customRenderer: defaultEl => <RenderIn inBuilder={defaultEl} inViewer={null}/>},
  LocalizationSelect: {
    customRenderer: defaultEl => <RenderIn inBuilder={null} inViewer={defaultEl}/>},
  ToggleModeButton: {
    customRenderer: () => <CustomToggleModeButton/>},
  Header: {
    customRenderer: defaultEl => <HeaderWrapper>{defaultEl}</HeaderWrapper>
  }
}