Hide Page Layout menu

Technical Support WebViewer
,
1

WebViewer Version: 11.7.1

Do you have an issue with a specific file(s)? no
Can you reproduce using one of our samples or online demos? no
Are you using the WebViewer server? no
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? no
Is your issue related to annotations? no

Please give a brief summary of your issue:
How to hide Page Layout menu under View Controls flyout?

Please describe your issue and provide steps to reproduce it:
I want to hide entire Page Layout submenu under view controls

image
image385Ă—503 21.6 KB

Please provide a link to a minimal sample where the issue is reproducible:
I’m able to hide individual buttons under Page Layout using disabledElements but it leaves the label

const instance = await WebViewer({
    path: '/webviewer',
    preloadWorker: 'pdf',
    disabledElements: [
        'singleLayoutButton', 'doubleLayoutButton', 'coverLayoutButton',
    ],
}, document.getElementById(container_id));

I tried to set items of the flyout but it didn’t work

const viewControlsFlyout = UI.Flyouts.getFlyout('viewControlsFlyout');
const withoutPageLayout = viewControlsFlyout.items.filter(item => !['singleLayoutButton', 'doubleLayoutButton', 'coverLayoutButton'].includes(item.dataElement));
viewControlsFlyout.setItems(withoutPageLayout);
3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To hide the entire Page Layout submenu under the View Controls flyout in WebViewer, you can modify the UI by accessing and customizing the flyout items. It seems like you are already on the right track by trying to filter out specific buttons. However, to completely hide the submenu, you might need to ensure the entire group of elements related to Page Layout is removed or hidden.

Some things you can try:

  • Ensure that you are correctly identifying and removing all related elements, not just individual buttons.

  • Consider using the disableElements method to target specific UI components effectively.

  • Use instance.UI.disableElements to disable the entire Page Layout section if it’s grouped under a specific data element.

  • Check if there are grouped data elements that encompass the entire Page Layout section.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hello @jackson.tong,

In order to hide the “Page Layout” section of our “View Controls” flyout, we recommend the setItems() API to override which items will be in that flyout. Please try using the documentLoaded event and seeing if that resolves the issue.

An example would look like this:

  instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
    console.log('document loaded');
    const viewControlsFlyout = instance.UI.Flyouts.getFlyout('viewControlsFlyout');
    // remove items at indices 7-11 (zero-based), aka the items in the "Page Layout" section
    viewControlsFlyout.setItems(viewControlsFlyout.items.filter((item, index) => index < 7 || index > 11));
  });

The result should look like this:

image
image675Ă—375 75 KB

For more information on modifying flyouts, see our guide here: https://docs.apryse.com/web/guides/modular-ui/flyouts

Let us know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

2 Likes