How to add a custom right panel

savoier · August 23, 2022, 6:28pm

Product: PDFTron Webviewer

Product Version: 8.6.0

Looking for a way to display a custom panel on the right of the screen.

It seems rather easy to display additional tabs in the left panel but I can’t seem to find anything to display a custom panel on the right of the screen.

Is there anything at all we can do or should I simply build my own overlay panel?

Thanks!

Armando_Bollain · August 23, 2022, 11:26pm

Hi @savoier,

Currently there is no API to add a right panel to WebViewer. If you want something inside the viewer, the only option is to fork our UI and add one.

There is a component named RightPanel, which can be used to achieve this. You can have a look at how we added the Redaction panel for example.

github.com

PDFTron/webviewer-ui/blob/8.7/src/components/App/App.js#L182


      
          <ToolsHeader />
          <div className="content">
            <LeftPanel />
            <DocumentContainer />
            <RightPanel dataElement="searchPanel" onResize={width => dispatch(actions.setSearchPanelWidth(width))}>
              <SearchPanel />
            </RightPanel>
            <RightPanel dataElement="notesPanel" onResize={width => dispatch(actions.setNotesPanelWidth(width))}>
              <NotesPanel />
            </RightPanel>
            <RightPanel dataElement="redactionPanel" onResize={width => dispatch(actions.setRedactionPanelWidth(width))}>
              <RedactionPanel />
            </RightPanel>
            <RightPanel
              dataElement="wv3dPropertiesPanel"
              onResize={width => dispatch(actions.setWv3dPropertiesPanelWidth(width))}
            >
              <Wv3dPropertiesPanel />
            </RightPanel>
          </div>
          <ViewControlsOverlay />

Let me know if you have any further questions about this approach.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

savoier · August 24, 2022, 12:05pm

Thanks for the reply!
That is what I thought but wanted to make sure.

Have a nice day.