Pair with custom screen

Developers
1

Hi,

I am struggling with the pairing code. I have the following

   "pair": [
      {
        "id": "list_the_devices",
        "template": "list_devices",
        "navigation": { "next": "apikey" },
        "options": { "singular": true }
      },
      { 
        "id": "apikey",
        "navigation": { "next": "add_devices" }
      },
      {
        "id": "add_devices",
        "template": "add_devices"
      }
  ]

and in my driver I have overwritten onPair:

  async onPair(session) {
    const deviceDriver = this.id;
    let deviceArray = {};

    session.setHandler('list_devices', async () => {
			try {
				this.log(`[Driver] ${deviceDriver} - mDNS discovery`);

				const discoveryStrategy = this.getDiscoveryStrategy();
				const discoveryResults = discoveryStrategy.getDiscoveryResults();
				const results = Object.values(discoveryResults).map((discoveryResult) => ({
					name: discoveryResult.name,
					data: {
						id: discoveryResult.id,
					},
					settings: {
						address: discoveryResult.address,
						driver: deviceDriver,
					},
					store: {},
				}));

        deviceArray = results;

				if (results.length > 0) return results;
				return {};
			} catch (e) {
				this.log(e);
				throw new Error(this.homey.__('pairing.error'));
			}
		});

		session.setHandler('add_devices', async (data) => {
      console.log('in add_device')
      console.log(data);
      console.log(deviceArray);
			try {
				return Promise.resolve(deviceArray);
			} catch (error) {
				this.error(error);
			}
		});

  }

My question is, I would like to list_devices template to makes things easy. After that a new screen must be visible to show where they can enter an API Key.
Then the device needs to be added.

So I have a screen “apikey” where you can enter the apikey and then continue to add_devices. But how to I got the APIkey data? Or is my structure not correct and do I need to do this differently?

2

You are only showing the eventhandler for standard views.
Did you create an own view (html file) for your custom pair view?

From your html file you could use an event to push the key to your driver. Register the eventhandler like it’s done for orher standard events.
There is a good explaination in the SDK documentation.

Perhaps you can use the user/password view to insert the api key. But I don’t know if it’s possible to hide the username field.

3

Hi,

Yes, I create indeed my own form (HTML page). Ok that I can do but I wasn’t sure this was the correct way.

Unfortunatly I cannot use the user/pw template as I cannot hide the username. (at least not that I find in the doc’s).