How to Select Default Toolbar Group

Technical Support WebViewer
,
1

WebViewer Version: 11.4.0

Reproduction:

Create two webviewer pages. Select a toolbar group on one page then load the second page, the header will stay visible on the second even if the toolbars are not visible or disabled.

Summary:

I have two pages on my website that both use WebViewer. The issue is that only one of them I want to have the ability to use the toolbar. I only want the second page to have the View option. I did not have an issue pre-V.11 since the header states would not transfer from page to page thanks to the iframe. However, now that they are no longer iframes, the secondary toolbar headers will transfer from page to page.

Is there a way to select by default the “View” toolbar item programmatically? I attempted to do this with instance.UI.setToolbarGroup('toolbarGroup-Insert'); but the header was still present. Disabling the toolbar groups with instance.UI.disableElements(['toolbarGroup-Shapes']); did not seem to work either. I would like it to select “View” when the page loads so the user has the default functionality.

Screenshots show the issue below:
Page 1 (Ability to use all tools):

image
image846×261 18.5 KB

Page 2 (Should not be able to use any tools):

image
image722×285 23.3 KB

As you can see, the annotations header is still there.

Please let me know if you need any additional information.

Thank you!

1 Like
2

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 ensure that the second page in your WebViewer implementation only displays the “View” toolbar by default, you can programmatically set the default toolbar group when the WebViewer loads. The issue you’re encountering seems to be related to the persistence of toolbar states across different instances of WebViewer. In version 11, you can utilize the setActiveRibbonItem method to achieve this.


Some things you can try:

  • Use the setActiveRibbonItem method to select the “View” toolbar group when initializing WebViewer on the second page.

  • Ensure that the toolbar group you want to activate is correctly identified by its data element name, which might differ from older versions.

  • Disable other toolbar groups using disableElements to ensure that they do not appear or interfere with the “View” toolbar.



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.

1 Like
3

Hello @noswald,

Thank you for posting on our forum.

By “two webviewer pages”, do you mean that you’ve created two instances of WebViewer? Let me know if I’ve misunderstood your workflow.

If you are trying to go to the “View” toolbar, rather than passing in ‘toolbarGroup-Insert’, you should be passing in ‘toolbarGroup-View’

If you are using two separate viewers/instances of WebViewer, you could also enable readOnly on the second viewer to that they will not have access to tools and will be set to the ‘view’ tool group. For more information, see this guide here: https://docs.apryse.com/web/guides/annotation/annotationmanager/permissions#readonly-mode

Let us know if these solutions work for you!

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

1 Like
4

Hi Jacob,

Thanks for the response. I did mean two WebViewer instances. The readOnly solution you provided did work so I will be moving forward with that.

One thing to note is that certain sidebars do not disappear when selecting toolbarGroup-View or using readOnly. (Examples Below):

Instance 1: (Selecting new signature)

image
image919×375 48.2 KB

Instance 2: (toolbarGroup-View and readOnly applied)

image
image952×342 43.2 KB

Do you happen to know a way around this besides disabling every sidebar element? I can do that if needed, but I was not sure if there was a better solution or not.

Either way, thank you for your help!
Nick Oswald.

1 Like
5

Hello @noswald,

Glad to hear our solution worked for you!

For the side panels, we would recommend disabling them all at once using the disableElements() API. Alternatively, you could try using the closeElements() API, which would close any open elements you specify without disabling them entirely.

No problem, have a nice day.

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

1 Like