HOWTO: Use Web UI Internal Events

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);