UI Customization

Technical Support
1

Product:

Product Version:

Please give a brief summary of your issue:
(Think of this as an email subject)
disable drog&drop, close Button and Select Files Button

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I select 2 documents and use the functionality of domain Loading WebViewer from another domain, in this new tab i have 2 documents to compare.
I want to disable the Close Document button, the Drag&Drop functionality and the Browse Files button.
please support me to reach this goal

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

1 Like
2

Hello a.kehtarian

WebViewer currently does not have an API exposed for disabling Close Document button, Drag & Drop functionality and Browse Files button. What we can suggest as a workaround is implementing a custom css file and hiding the buttons and drag&drop area. Note: this WILL not disable the drag&drop functionality, for that you would need to fork out and customize our UI, you can find a guide for that here:

You can read more about custom css here: Apryse Documentation | Documentation
Following css sample should hide the requested buttons:
div.control-buttons > button[aria-label="Close Document"] { display: none; } div.DropArea > button { display: none; }
you can also add .DropArea { display: none; }
To hide drop area entirely.

All the best,
Bojan

2 Likes
3

Thank you for your solution.

I have following code:

WebViewer 
 <!-- Custom CSS styles -->
<style>

    #container2 {
        display: none;
        visibility: hidden;
    }

    button.Button[aria-label="Close Document"] {
display: none;

}

    div.DropArea > button {
        display: none;
    }

    .DropArea {
        display: none;
    }

  .Button {
   dip
</style>

But it does not work and I have no change in the UI
I also tried as follows, but without result too:

const wvElement = document.getElementById(‘viewer’);
WebViewer({
path: ‘/sap/bc/lib’, // path to the Apryse ‘lib’ folder on your server
licenseKey: ‘___’, // sign up to get a key at https://dev.apryse.com

fullAPI: true,

loadAsPDF: true,

disabledElements: [
'menuButton',
'toolbarGroup-View',
'selectToolButton'
],

isReadOnly: true,

css: './stylesheet.css'

}, wvElement)
.then((instance) => {
const { UI, Core } = instance;
const { Annotations, documentViewer } =Core;
const { Color } = Annotations;

// Assuming instance.UI.iframeWindow is the iframe window object

const iframeDoc = instance.UI.iframeWindow.document;
const zoomOverlay = iframeDoc.querySelector(‘button[aria-label=“Close Document”]’);
if (zoomOverlay) {
zoomOverlay.style.display = ‘none’;
}

const zoomOverlay2= iframeDoc.querySelector(‘[data-element=“zoomOverlay”]’);

console.log(iframeDoc); // #document
console.log(zoomOverlay); // null
console.log(zoomOverlay2); // null

var Feature = instance.UI.Feature;
console.log(Feature);

thank you in advance

1 Like
4

Hi,

i can access the html element via css: ‘./stylesheet.css’ within the WebViewer instance.

thanks and regards
Amir Kehtarian

1 Like