# Custom UI event button

**URL:** <https://pdfjs.community/t/custom-ui-event-button/590>\
**Category:** Technical Support\
**Created:** [March 9, 2021, 2:13pm UTC](https://pdfjs.community/t/custom-ui-event-button/590 "2021-03-09T14:13:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![elvisdosreis](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/elvisdosreis/32/311_2.png) [@elvisdosreis](https://pdfjs.community/u/elvisdosreis)\
**Post date:** [March 9, 2021, 2:13pm UTC](https://pdfjs.community/t/custom-ui-event-button/590/1 "2021-03-09T14:13:52Z")

</div>

I’m building my own UI on the angled but I didn’t find how to select the Delete and Pan button, and the click on the ZooIn and ZoonOut button, could you give me an example

`this.docViewer.setToolMode(this.docViewer.getTool('AnnotationCreateDistanceMeasurement'));`

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/87177af36c4ee6c9550c6f27f4d4a285872afdba.png)

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/360a39dfb769359b6c9cf0b6649158ab5def8a79.png)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [March 9, 2021, 4:30pm UTC](https://pdfjs.community/t/custom-ui-event-button/590/2 "2021-03-09T16:30:56Z")

</div>

Hi,

For the zoom buttons, you can use the [setZoomLevel](https://pdfjs.express/api/WebViewerInstance.html#setZoomLevel__anchor) API to change the zoom.

For the eraser tool and pan tool, you can call

```javascript
// eraser
instance.setToolMode(
    instance.Tools.ToolNames.ERASER
  )

// pan
instance.setToolMode(
    instance.Tools.ToolNames.PAN
  )

```

Thanks!  
Logan