How to customize UI?

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.1.0

Detailed description of issue
How to

  1. Page Transition : Show Page by Page by default
  2. Show search button by default without click the gear button

Thanks,
Nat

3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

I’ve found a solution to set the default page transition as “Page by page” instead of continuous. You can use the setLayoutMode API for this:

instance.setLayoutMode(instance.LayoutMode.Single);

But still don’t know how to show the search button by default without clicking the gear button.

5

Hi Withnat,

Very odd as the search button is in the default header group normally

image
image841×146 5.97 KB

Do you have any other code moving the position of the search button currently?

If you don’t and for some reason, it does not appear for you, you can use the following code to add the search button to the header group:

            instance.UI.setHeaderItems((header) => {
              header.getHeader('default').push({
                img: "icon-header-search",
                index: -1,
                title: "component.searchPanel",
                type: "toggleElementButton",
                element: 'searchPanel',
              });
            });

You can read more about header customization and more about toggleElementButton APIs here: PDF.js Express Viewer Customize Toolbar | Documentation

Cheers,
Dustin