API for adding custom modals or popups

[pdftron]

API for adding custom modals or popups

[ghills]

This would be very useful for our use as well for page operations. For moving and adding pages we pop up separate modals right now but it is a bit clunky and doesn't work when using WebViewer in full screen mode.

[justinjung04]

Yup, we also think that similar API should exist for modals and popups. It's in our roadmap, but not the highest priority at the moment. Hopefully we will get to it soon and create better dev experience for everyone :)

[ascherer1993]

Something else I would like to add is that you might want to think about how you want to handle the onkey listeners for when a modal is open. In our product, we had a modal specifically linked to the selected annotation, and pressing delete would cause the annotation to be deleted and thus the modal to close. Because ondelete seemed to be handled in core code, I had to set up my own listener that would stop propagation if my modal was open. Perhaps you could turn off all listeners if a modal is open?

(This comment is related to issue #41)

This is an image of our temporary solution fore delete within onKeyDown.js

[justinjung04]

That's a great point. We'll consider it when we design the API.

[ZhijieZhang]

During this time we've added a few APIs that can be used to customize modals and popups:

• instance.setCustomModal can be used to create a custom modal in the viewer. The modal can be toggled using instance.openElements and instance.closeElements.
• Popup APIs that can be used for instance.annotationPopup, instance.contextMenuPopup and instance.textPopup.
• The settings overlay can also be customized using instance.settingsMenuOverlay

Let us know if you have any other questions.

[sabieber]

Thanks for the new APIs, the ones for custom modals are great to use.
I currently only find the possibility of altering the existing popups via the new Popup API, is anything similar to setCustomModals for popups possible (so a setCustomPopup method that creates a new popup with a render function)? That in combination wwith an easy way of updating the position of the custom popup to be near the click when opened would make our live a lot easier.
We currently do something similar via code that renders a custom box, positions and sizes it accordingly and renders its content.

[sabieber]

@ZhijieZhang @justinjung04 any news on this?

[sabieber]

Is there any news on the Custom Popup API front?

[bollain]

Hi @sabieber,

We are currently working on a new and improved way to customize the UI without having to fork this repo, and can explore this requirement more in depth.

If I understand correctly you want:

• An API to add a fully custom popup (not one of the default ones)
• A mechanism to open this based on an action (like a click on a certain annotation?)

Can you elaborate more on what your ideal use case is, and what an ideal API would look like for you?

[sabieber]

Hi @bollain,

thanks for the update and heads up! This sounds really promising.

Yes our use case is to create an annotation for the word the user clicked on and displaying a custom popup next to the created annotation.

Best would be an API where a popup with a fully custom content (like the dialog APIs) can be created. Also it would be helpful if there was an easy way to update the position of that popup to be next to a specified annotation.

[adam9000]

Hi @sabieber,

We are currently working on a new and improved way to customize the UI without having to fork this repo, and can explore this requirement more in depth.

If I understand correctly you want:

• An API to add a fully custom popup (not one of the default ones)
• A mechanism to open this based on an action (like a click on a certain annotation?)

Can you elaborate more on what your ideal use case is, and what an ideal API would look like for you?

Hi guys...

Can you give me, please, some hints on how this customization works?

Any help will be very much appreciated...It's a real struggle just to build it...

Even following those steps found in here ((https://docs.apryse.com/documentation/web/guides/advanced-customization/))

I'm using the 10.6 branch.

I only get to do those steps after install Visual Studio 2019 with "Desktop development with C++" package...

But, after the build, the copied files (from webviewer-ui/build folder) don't work correctly with my app (build with React).

:(

Someone can help?

Tnx in advance!!!