Device pairing with custom view before list_devices template

Developers
1

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:

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

The handler in the driver class:

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?

1 Like
2

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.

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

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

2 Likes
3

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…

4

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.

1 Like