# Device pairing with custom view before list\_devices template

**URL:** <https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873>\
**Category:** Developers\
**Created:** [July 28, 2021, 8:29pm UTC](https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873 "2021-07-28T20:29:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [July 28, 2021, 8:29pm UTC](https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873/1 "2021-07-28T20:29:49Z")

</div>

Hello,

I’m struggeling with implementing a custom view in the device pairing.

My goal is:  
I have a list with thousands of districts (id+name) as possible device ID.  
So I want to display a custom view as first pairing view with a input field to set a name (or a part of it).  
Then I want to display the next default view (type list\_devices). This view calls the eventhandler onPairListDevices where I could filter the district array and return the filtered list to be displayed for selecting one entry (single mode).

I got the custom html with a input field to work.  
But how can I use the input field value in the next view/event to filter the device list?  
I tried to react on the oninput event of the input field, call a function, call Homey.emit() to transport the value to the driver instance and store it in a attribute. But it seems, that the oninput or onchange evenet is not raised.

Using the Pincode-view it seems to work. This view has a own event “pincode” which passes the value to the driver.

Is there another way to pass the input value to the next view? Or am I missing something in the implementation why it is not working like the pincode view?

Does anyone have an example for this?  
Many thanks!

Edit:  
The JavaScript in the HTML file works. I cal alert th evalue (Homey.alert()).  
But the emit for the event doesn’t call the handler in the driver instance (the first log is not written to console).

The emit in HTML:

```auto
        Homey.emit("warncellname", value).then(function (result) {
            Homey.alert(result);

```

The handler in the driver class:

```auto
async onPair(session) {
    this.log("onPair()");
    session.setHandler("list_devices", async () => {
      return await this.onPairListDevices(session);
    });
    session.setHandler("warncellname", async function (data) {
      this.log("Event warncellname, Name: "+data);
      this.warncellname = data;
      let filteredDevices = this.warncellids.filter(x => ( x.name.indexOf(data) != -1 ) );    
      this.log("Found "+filteredDevices.length);  
      return filteredDevices.length;
    });
  }

```

Any ideas what’s wrong?

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [July 29, 2021, 6:22am UTC](https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873/2 "2021-07-29T06:22:10Z")

</div>

Possibly a quick fix: you need to use an arrow function expression for the callback of the handler, just like you’re doing for the `list_devices` handler.

```auto
session.setHandler("warncellname", async (data) => {
  …
});

```

If you don’t do that, `this` inside the event handler will probably not be correct.

---

<div class="post-metadata">

**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\
**Post date:** [July 29, 2021, 7:24am UTC](https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873/3 "2021-07-29T07:24:01Z")

</div>

Hey Robert. Many thanks. Your suggested change fixed it!

…but why is Athom using this varient in the developer documentation?  
And I assumed, there should be a “unassigned” error message in the console if “this” is not valid. But perhaps this caused because the functionis called by the HTML, not the app itself. Perhaps I had seen something in the browser console using the web app of homey…

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [July 29, 2021, 7:31am UTC](https://community.homey.app/t/device-pairing-with-custom-view-before-list-devices-template/49873/4 "2021-07-29T07:31:19Z")

</div>

Where they use `async function()` in the example code, they’re not using `this` inside the handler so it’s not a problem, but the examples aren’t very consistent.

As for errors (not) being logged: it’s likely that any errors are being passed to the frontend (HTML), so you should indeed check in your browser’s console.