The WebViewer UI provides APIS to easily handle each of these cases and more.
Get items
The unique identifier of the items in the popup can be retrieved using the getItems API. It returns an array of objects where each object contains a key that denotes the dataElement.
Adding items
Adding items can be done using the add API. The type of items to add can be found in the header item API.
Add new items at beginning of the popup
To add new items at beginning of the popup, do not provide a second parameter to the add function.
1WebViewer(...)
2 .then(function(instance) {
3 instance.UI.contextMenuPopup.add({
4 type: 'actionButton',
5 label: 'some-label',
6 onClick: () => console.log('clicked'),
7 });
8 });
1WebViewer(...)
2 .then(function(instance) {
3 instance.contextMenuPopup.add({
4 type: 'actionButton',
5 label: 'some-label',
6 onClick: () => console.log('clicked'),
7 });
8 });
Add new items at a specific location in the popup
There are 2 ways to do this.
Option one:
If you know the specific element you want it to be after then you can provide a valid dataElement string as a second parameter. This will insert the new item(s) after the specified data element.
Option two:
If you know the index where you want to add it (for example as the last button) then you can get the list of data elements in the popup using the getItems API. Then retrieve the data element from the item at that index.