Web UI

HOWTO: Use Web UI Internal Events

Updated: September 26, 2024

You can fire a couple of events from your extensions/contributions in order to tell the Web UI to perform some actions. Here are the common and useful ones:

Event name Purpose Context Event details
navigate Navigate to a document Can be fired from anywhere doc: the document to navigate to
notify Toast a message Can be fired from anywhere message: the message to be toasted
document-updated Refresh the current document Can be fired from anywhere
refresh Update the current listing by fetching data from the server. Does not keep selection. Can be fired in result listings
refresh-display Refresh the display of the current listing to adapt to the screen size. Does not update the information on screen. Keeps current selection. Can be fired in result listings

As a reminder, you can fire your custom events

  • with Polymer 2 legacy syntax:
    this.fire('navigate', {
     doc: this.document
    });
    
  • with Polymer 2 ES6 class-based syntax:
    const event = new CustomEvent('navigate', {
     composed: true,
     bubbles: true,
     detail: {
         doc: this.document
     }
    });
    this.dispatchEvent(event);