Custom drop down is not visible

Technical Support
1

Product: Web viewer

Product Version:11.4.0

Please give a brief summary of your issue: I want to add custom dropdown in header.
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
I want to add custom dropdown in header. Here is my code. It is working in 10.12.0 version. But I have updated version and now it is not working.

instance.UI.setHeaderItems(header => {
const renderDropdown = () => {
if (!this.files || this.files.length === 0) return;

      const select = document.createElement('select');
      select.style.padding = '5px';
      select.style.margin = '5px';
      select.style.borderRadius = '5px';
      select.style.border = '1px solid #ccc';

      this.files.forEach(optionData => {
          const option = document.createElement('option');
          option.value = optionData.contentItemId;
          option.textContent = `Version ${optionData.versionNumber} - ${optionData.documentName}`;
          select.appendChild(option);
      });

      const handler = (e) => {
          isDocumentLoading = true;
          const selectedId = e.target.value;
          Apryse.GetAnnotation(selectedId, annotationManager, instance);
      };

      select.addEventListener('change', handler);

      return select;
  };
  console.log(header);
  header.push({
      type: 'customElement',
      render: renderDropdown,
      dataElement: 'customVersionDropdown',
      className: 'custom-version-dropdown',
      title: 'Select Version',
  });

});

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.


It seems like you’re trying to add a custom dropdown to the header in the WebViewer, but it’s not appearing as expected in version 11.4.0. Changes between versions might affect how custom components are rendered in the UI.

Some things you can try:

  • Ensure that the setHeaderItems function is correctly called after the WebViewer instance is fully initialized.

  • Verify that the CSS styles and HTML structure of the custom element are not conflicting with any new styles or layout changes in version 11.4.0.

  • Check the console for any errors that might indicate why the dropdown is not rendering.

  • Make sure that the files array is correctly populated before the dropdown is rendered.

  • Check if there are any changes in the API that might affect the way custom elements are added to the header.



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

Hi there,

Starting in version 11 of WebViewer, we now have modular-UI enabled by default. The code you are using would work with our legacy-UI, and you can still enable this via the WebViewer constructor:

Please note that legacy-UI support is deprecated and we recommend you to switch to modular-UI.

For your use-case, you will want to use the new modular-UI flyouts, you can read more about them here:

best regards,
Kevin

1 Like
4

can you give me any example using flyout. How i can add custom drop down.

1 Like
5

An example of adding a custom flyout to the menu button would be the following:

const flyout = instance.UI.Flyouts.getFlyout('MainMenuFlyout');

// Saving the flyout items because setItems will replace its items
const savedFlyoutItems = flyout.items;

// As an example, I'm going to add an item which its children will be the zoom flyout
const zoomFlyoutItems = instance.UI.Flyouts.getFlyout('zoom-containerFlyout').items

flyout.setItems([...savedFlyoutItems, {
    dataElement: 'item-1',
    label: 'New Item',
    onClick: () => console.log('New Item clicked'),
    icon: 'icon-add',
    children: zoomFlyoutItems
  }])

You will then see a ‘New Item’ button inside the settings fly-out that contains the zoom flyout items

image
image1920×862 157 KB

best regards,
Kevin

1 Like