How to show error pop-up and block loading document

Technical Support
, ,
1

Product: Web viewer

Product Version:10.12.0

Please give a brief summary of your issue:
I want to show error pop-up and block user interaction and loading document.

Please describe your issue and provide steps to reproduce it:
I want to show error pop-up and block user interaction and loading document.
Here is my code:
const AttachedDocsItems = ;
let Annotationsmark = ;
let fileList = ;
let core = ‘’;
const rotationChanges = ;
let isComparePopupOpen = false;
let userID = ‘’;
let isLayover = false;
let isSideBySide = false;
let isRotatingPages = false;
let isDocumentLoading = false;
let currentSettings = {
offComments: false,
offStamps: false,
offAnnotations: false,
offPictures: false,
};
let url = ‘’;
let defaultComparaLayout = ‘’;
const Apryse = {
viewerId: ‘’,
pdffilepath: ‘’,
licenseKey: ‘’,
userId: ‘’,
annotationList: ‘’,
userName: ‘’,
annotationsData: ‘’,
stampData: ‘’,
rotationPage: ‘’,
rotationAngle: ‘’,
saveIcon: ‘’,
viewSettingIcon: ‘’,
compareIcon: ‘’,
turnOffComments: false,
turnOffStamps: false,
turnOffAnnotations: false,
turnOffPictures: false,
turnOffForm: true,
isFrontEndDoc: false,
isAdmin: true,
signatureUrl: ‘’,
permissions: ,
files: ,
compareDefaultLayout: ‘’,
initilize: function () {
$(‘.activityloader’).show();
WebViewer.WebComponent({
path: ‘/GovBuilt.PlanReview/webviewer’,
licenseKey: Apryse.licenseKey,
initialDoc: Apryse.pdffilepath,
loadSpinner: false,
annotationUser: this.userId,
compareDefaultLayout: Apryse.compareDefaultLayout,
permissions: Apryse.permissions,
fullAPI: true,
css: ‘/GovBuilt.PlanReview/css/viewer.min.css’,
}, document.getElementById(Apryse.viewerId))
.then((instance) => {
window.webViewerInstance = instance;
core = instance.Core;
const { documentViewer, annotationManager, Annotations } = instance.Core;
const { Feature } = instance.UI;
const { Color } = Annotations;
const { PDFNet, Tools } = instance.Core;
if (this.isFrontEndDoc) {
instance.UI.disableElement([‘leftPanelButton’]);
instance.UI.disableElement([‘viewControlsButton’]);
instance.UI.disableElement([‘menuButton’]);
instance.UI.disableElement([‘toolbarGroup-Forms’]);
instance.UI.disableElement([‘toolbarGroup-Annotate’]);
instance.UI.disableElement([‘toolbarGroup-Shapes’]);
instance.UI.disableElement([‘toolbarGroup-Edit’]);
instance.UI.disableElement([‘toolbarGroup-Insert’]);
instance.UI.disableElement([‘toolbarGroup-FillAndSign’]);
}
instance.UI.disableFeatures([Feature.FilePicker]);
instance.UI.disableTools([Tools.ToolNames.FILE_ATTACHMENT]);
instance.UI.disableTools([Tools.ToolNames.ADD_IMAGE_CONTENT]);
if (!this.isFrontEndDoc) {
instance.UI.enableFeatures([Feature.Measurement]);
instance.UI.openElements([‘notesPanel’]);
instance.UI.setHeaderItems(header => {

                    const renderDropdown = () => {
                        if (this.files == undefined || this.files.length === 0) {
                            return;
                        }
                        const select = document.createElement('select');
                        select.style.padding = '5px';
                        this.files.forEach(optionText => {
                            const option = document.createElement('option');
                            option.value = optionText.contentItmeId;
                            option.textContent = `Version ${optionText.versionNumber} - ${optionText.documentName}`;
                            select.appendChild(option);
                        });
                        if (this.files.length === 1)
                            select.addEventListener('click', (e) => {
                                isDocumentLoading = true;
                                Apryse.GetAnnotation(e.target.value, annotationManager, instance);
                            });
                        else {
                            select.addEventListener('change', (e) => {
                                isDocumentLoading = true;
                                Apryse.GetAnnotation(e.target.value, annotationManager, instance);
                            });
                        }

                        return select;
                    };

                    header.push({
                        type: 'customElement',
                        render: renderDropdown,
                    });
                });
            }
            instance.UI.disableElement('deleteCustomStampButton');
            instance.UI.enableElements(['thumbRotateClockwise', 'pageRotationHeader', 'rotatePageClockwise', 'rotatePageCounterClockwise']);
            instance.UI.enableElements(['thumbnailsControlRotateClockwise', 'thumbnailsControlRotateCounterClockwise']);
            instance.UI.disableElements(['toolbarGroup-Annotate', 'multiSelectModeButton']);
            userID = this.userId;
            if (this.signatureUrl && this.signatureUrl.length > 0) {
                ValidateAndImportSignatures(this.signatureUrl, documentViewer.getTool('AnnotationCreateSignature'));
            }
            if (this.turnOffPictures === 'True') {
                instance.UI.disableElements(['stampToolGroupButton', 'fileAttachmentToolGroupButton']);
            }
            $(document).on('fullscreenchange', () => {
                const $navbar = $('.ta-navbar-top');
                if (instance.UI.isFullscreen()) {
                    $navbar.hide();
                }
                else {
                    $navbar.show();
                }
            });

            if (this.turnOffStamps.toString().toLowerCase() === 'true') {
                instance.UI.disableElements([
                    'rubberStampToolGroupButton',
                ]);
            }
            if (this.turnOffAnnotations.toString().toLowerCase() === 'true') {
                instance.UI.disableElements([
                    'toolbarGroup-Annotate',
                ]);
            }

            if (this.turnOffForm.toString().toLowerCase() === 'true') {
                instance.UI.disableElements([
                    'toolbarGroup-Forms',
                ]);
            }

            if (this.turnOffComments.toString().toLowerCase() === 'true') {
                instance.UI.disableElements([
                    'stickyToolGroupButton',
                ]);
                instance.UI.disableReplyForAnnotations(() => true);
            }
            if (!this.isFrontEndDoc) {
                ValidatePermission(this.permissions, instance, annotationManager);
            }

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

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 display an error pop-up and block document loading and user interaction in WebViewer, you can utilize the UI.displayErrorMessage method to show an error message. You can then prevent further interactions by not loading the document or disabling the UI elements.

Some things you can try:

  • Use UI.displayErrorMessage to show a custom error message to the user. This can be done in the .then or .catch block of the WebViewer initialization promise.

  • To block loading the document, ensure that the initialDoc parameter is not set or is set conditionally based on a condition.

  • Disable user interactions by using methods like UI.disableElements or UI.disableFeatures to restrict access to specific UI components.

  • Consider using the documentLoaded event to conditionally check for errors and then decide whether to proceed with document rendering.



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 Rishu,

Thank you for contacting us.

Could you elaborate on when you want this error popup to show up? You can create a custom modal by following this guide: Custom Modals in WebViewer UI | Apryse documentation

1 Like