Retrieving and setting current user tool style settings from WebViewer

WebViewer Version: 10.12

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? Yes

Please give a brief summary of your issue:
Retrieving and setting current user tool style settings from WebViewer

Please describe your issue and provide steps to reproduce it:

Good day. We understand the tool settings last configured by the user is saved in a cookie maintained by the WebViewer. By tool settings, we mean the last style configurations set on tool 1, 2, 3, 4 per annotation and other type of user-initiated setups that is saved in said cookie:

Occasionally, our end users clear their browser cookies because of external and unrelated reasons but when they come back to the WebViewer, all their last configured style properties are reset to default.

We are hoping to somehow get these settings from the WebViewer so that we could save them to our datastore. Then upon initializing the WebViewer, we retrieve those settings from our datastore then set it to the WebViewer.

Ideally, we are looking for an event hook where the user is setting up (i.e. choosing colors, stroke, etc like the one in the screenshot) the style and other related things.

Thank you!

Please provide a link to a minimal sample where the issue is reproducible:
N/A

Hello @joserafael.arce,

Thanks for posting on our forum,

If you would like to retrieve the current default stylings of tools, you can do so by accessing the defaults property on the tool. You can find more information in our helpful guide here, which includes code samples for reading and writing to the default style of a tool: Customizing-default-annotation-styles | Apryse Documentation

We do not have an event that is triggered when the user changes these styles in the UI, but one option could be tracking when the popup itself is opened or closed by using the visibilityChanged event. For example:

  instance.UI.addEventListener('visibilityChanged', (event) => {
    if (event.detail.element == 'toolStylePopup' && !event.detail.isVisible) {
      console.log('toolStylePopup closed');
      // get defaults of tools desired here, upload them to database
    }
  });

Then when the viewer is loaded, you can get the presets from the database and overwrite the defaults objects of the relevant tool.

Let us know if this works for you!

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

Good day! By default stylings of the tool, do you mean each individual tool? For example, I have to get the default style of the Rectangle tool then the Ellipse tool then the Arrow tool etc?

Also, could you also provide in the example code how to get and set the style of each tool?

Thank you!

Hello @joserafael.arce,

Yes, each individual tool has its own default setting for each property (StrokeColor, TextColor, etc.). If the user changes the default setting of a tool, that setting is saved to local storage on the browser. You can actually see the stored defaults in local storage by looking in the application tab of the browser dev tools:

It is worth noting that the name of the setting may be different depending on if you are using IFrame or WebComponent:

To get the style of every tool, you can check the defaults object for each tool like such:

  // get all tools
  const tools = instance.Core.documentViewer.getToolModeMap();
  // for each tool value in the map, output the defaults
  Object.values(tools).forEach(tool => {
    console.log(tool.name, tool.defaults);
  });

You can always filter tools to see if it its default settings exists in the local storage (or in the database). Here’s the MDN docs for localstorage for your convenience: Window: localStorage property - Web APIs | MDN

To set the style of every tool, you can use the setStyles() API. You can find the API doc here: Apryse WebViewer Class: GenericAnnotationCreateTool
A simple example overriding all the tools would look something like this:

  const tools = instance.Core.documentViewer.getToolModeMap();
  Object.values(tools).forEach(tool => {
    tool.setStyles({
        // insert property overrides such as StrokeColor, TextColor, etc. Not all annotation types have the exact same defaults
    });
  });

You can find more code examples here: https://docs.apryse.com/documentation/web/guides/customizing-default-annotation-styles/

Let us know if this works for you!

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

Hi, Jacob.

Thank you for the information. We’ll try combining the code ideas from 1st and 2nd reply and see if we can achieve real-time saving of tool settings to our datastore.

Thank you very much!

1 Like