# Device capabilities

**URL:** <https://community.homey.app/t/device-capabilities/144566>\
**Category:** Developers\
**Tags:** device-capabilities\
**Created:** [October 26, 2025, 6:14pm UTC](https://community.homey.app/t/device-capabilities/144566 "2025-10-26T18:14:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aren\_Slootweg](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/aren_slootweg/32/79236_2.png) [@Aren\_Slootweg](https://community.homey.app/u/Aren_Slootweg)\
**Post date:** [October 26, 2025, 6:14pm UTC](https://community.homey.app/t/device-capabilities/144566/1 "2025-10-26T18:14:58Z")

</div>

I’m startng with my first Homey App. I want to build an app for my device that has a backlight. The backlight can be set with an available API to: on/off, brightness and color.

If I followed the developer introduction from Emile and I understand that I can use use the class **‘light’** to set on/off and dim values. But how about the color? How do you define that the color UI is also displayed in the App screen?

**First try**  
in driver.compose.json:

```auto
 {
   "name": { "en": "Backlight" },
   "images": {
     "small": "/drivers/my_driver/assets/images/small.png",
     "large": "/drivers/my_driver/assets/images/large.png"
   },
   "class": "light",
   "capabilities": ["onoff", "dim"],
   "capabilitiesOptions": {
     "dim": { "preventInsights": true }
   }
 }

```

And when I register the capabilities:

```auto
    this.registerCapabilityListener('onoff', async (value) => {
      this.log('Backlight On/Off', value);
    });

    this.registerCapabilityListener('dim', async (value) => {
      this.log('Helderheid: ', value);
    });

    this.registerCapabilityListener('light_hue', async (value) => {
     this.log('Licht Hue: ', value);
    });

```

It worked only for onoff and dim values.

**Second try**  
Then I found that I can add the capabilities to the device in the onInit() in device.js  
In device.js:

```auto
    const lightCapabilities = [
      "onoff",
      "dim",
      "light_hue",
      "light_temperature",
      "light_saturation",
      "light_mode",
    ];
    this.registerMultipleCapabilityListener(
      lightCapabilities,
      async ({
        onoff,
        dim,
        light_hue,
        light_temperature,
        light_saturation,
        light_mode
      }) => {
        // handle the changed capabilities here all at once
        await DeviceApi.setOnOffAndDimAndColorAsync();
      }
    );

```

With in driver.compose.json:

```auto
{
  "name": {
    "en": "Backlight"
  },
  "class": "light",
  "capabilities": [
    "onoff",
    "dim",
    "light_hue",
    "light_temperature",
    "light_saturation",
    "light_mode"
  ],

```

Removed the app and installed it again now the color UI is available. (-:  
But on every capabilitie change I get now:

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/6/666ca619e04c195c46857ded287c529c31d00d6c.png)

Where is this ‘device by id’ available or where must it be set?

---

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [October 26, 2025, 6:21pm UTC](https://community.homey.app/t/device-capabilities/144566/2 "2025-10-26T18:21:18Z")

</div>

Hi Aren,

You can view the code of the example app, or any Homey app source @ github for example

> **[GitHub - athombv/com.ikea.tradfri-example: Ikea Trådfri — Example code to inspire your own...](https://github.com/athombv/com.ikea.tradfri-example)**
>
> Ikea Trådfri — Example code to inspire your own Homey app.

---

<div class="post-metadata">

**Author:** ![Aren\_Slootweg](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/aren_slootweg/32/79236_2.png) [@Aren\_Slootweg](https://community.homey.app/u/Aren_Slootweg)\
**Post date:** [October 26, 2025, 6:59pm UTC](https://community.homey.app/t/device-capabilities/144566/3 "2025-10-26T18:59:52Z")

</div>

Thanks Peter, I found that too but was so impressed by the amount of code for a lamp that I closed it 😕

To big to understand at this moment for a beginner 🤷‍♂️

My app id is in the generated code from the app so why is it complaining that it could not get the device id

---

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [October 26, 2025, 7:13pm UTC](https://community.homey.app/t/device-capabilities/144566/4 "2025-10-26T19:13:30Z")

</div>

No problem, Aren.  
App ID = for ex. `com.appname.my` and is unrelated to a device ID

---

<div class="post-metadata">

**Author:** ![Aren\_Slootweg](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/aren_slootweg/32/79236_2.png) [@Aren\_Slootweg](https://community.homey.app/u/Aren_Slootweg)\
**Post date:** [October 26, 2025, 9:22pm UTC](https://community.homey.app/t/device-capabilities/144566/5 "2025-10-26T21:22:30Z")

</div>

Ok noted but where is the device id?  
How does this work then app builders…

---

<div class="post-metadata">

**Author:** ![Aren\_Slootweg](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/aren_slootweg/32/79236_2.png) [@Aren\_Slootweg](https://community.homey.app/u/Aren_Slootweg)\
**Post date:** [October 27, 2025, 10:26am UTC](https://community.homey.app/t/device-capabilities/144566/6 "2025-10-27T10:26:20Z")

</div>

Ok found it. The device id is in the driver.js.

Due an error in device.js the export off the Homey.Device class gave an error in the node.js console. But that was scolling out of the view, and started the app in Homey.  
Now I fixed it and the color UI is also there.

The capabilities are now in the device.js like this:

```auto

    const lightCapabilities = [
      "onoff",
      "dim",
      "light_hue",
      "light_temperature",
      "light_saturation",
      "light_mode"      
    ];
    
    this.registerMultipleCapabilityListener(
      lightCapabilities,
      async ({
        onoff,
        dim,
        light_hue,
        light_temperature,
        light_saturation,
        light_mode
      }) => {
        // handle the changed capabilities here all at once
        await DeviceApi.setOnOffAndDimAndColorAsync();
      }
    );

```

And this is in driver.compose.json:

```auto
{
  "name": {
    "en": "Backlight"
  },
  "class": "light",
  "capabilities": [
    "onoff",
    "dim",
    "light_hue",
    "light_temperature",
    "light_saturation",
    "light_mode"
  ],

```

Now up to the next challange 😀