About custom capability and presentation connections

Developer Programs Support
1

Hi, I’m currently developing a feature that displays the remaining ingredients in the fridge on the SmartThings app.

I’m using my own cloud-connected server, and the OAuth 2.0 connection was successful. I created a schema to integrate my virtual device and set up a device profile with the healthCheck capability and my custom capability called fridgeIngredients.

However, I’m facing an issue where the ingredients are not displayed on my phone. I can see my device on the dashboard, but I can’t access the detail view. Instead, I get a message saying that the device cannot be connected.

Here is the code for my custom capability and presentation.

{
  "name": "fridgeIngredients",
  "version": 1,
  "status": "proposed",
  "attributes": {
    "ingredients": {
      "schema": {
        "type": "object",
        "properties": {
          "value": {
            "type": "string"
          }
        },
        "additionalProperties": false,
        "required": ["value"]
      },
      "enumCommands": []
    }
  },
  "commands": {}
}


{
  "mnmn": "SmartThingsCommunity",
  "vid": "fridgeIngredientsPresentation",
  "dashboard": {
    "states": [],
    "actions": []
  },
  "detailView": [
    {
      "label": "ingredientsInFridge",
      "displayType": "state",
      "state": {
        "label": "{{ingredients.value}}"
      }
    }
  ],
  "automation":{
    "conditions":[],
    "actions":[]
  },
  "id": "mynamespace.fridgeingredients",
  "version": 1
}

image
image756×1540 55.1 KB

Additional.

I don’t receive any response when I redirect to the callback URL (c2c-ap.smartthings.com/). Originally, I received requests to my endpoint, which handles access and refresh tokens.
However, this issue suddenly occurred, and I can’t figure out the cause of the error.
I suspect that something went wrong on the SmartThings cloud side, but I’m not sure why.

2

Hi, @ssafybmq
Is this the content of the custom capability presentation?

The properties of “mnmn” and “vid” are only present in the device presentation where the presentation of all the capabilities that belong to the device are collected.
So, to avoid confusion, I’ll list some steps here required to work with custom capabilities and device presentations in general:

  1. First, you need to create the custom capability’s definition. This is where you set the attribute/command names.
  2. Then, you create the capability’s presentation, defining the display type it will use on each view (Dashboard, Detail or Automation).
  3. Once you have confirmed that everything is configured correctly, you can add your capability to a device profile.
  4. The creation of the device presentation that will be assigned to the profile depends on you and what you’re working with:
    1. For Cloud-to-Cloud integrations (Schema), you can create the profile through the API or the Developer Workspace. Both generate a device presentation by default based on the capabilities that belong to the profile, and they should work correctly
    2. For Hub-Connected integrations, you can simply add the capability’s ID in the YAML file and once your profile is in use, a device presentation will be created with the default configuration as well.
  5. If there are other capabilities you’ll use (from the standard ones, for example), you’ll need to create a custom device presentation.
1 Like
3

Hi @nayelyz !

Thanks for your support.

However, I still can’t connect via OAuth 2.0.

I was redirected to the SmartThings callback URI with my region set to Asia-Pacific, but I still haven’t received a token request from the SmartThings cloud.

The error code I received is: JA8KCBA.

4

I thought “SeeThrough” was the device discovered by your Cloud to Cloud integration, wasn’t it?
Just to confirm, please make sure you’re following this flow:

  1. You register your Schema project with the correct URLs for your OAuth server and Schema Connector
  2. When you go to “my testing devices”, it will start the onboarding flow where your OAuth server’s URL will be called. This is where you show your Login page to the user.
  3. Once he authorizes, you need to send an authorization code to SmartThings included in the redirect URI, which is one of the of the listed here.
  4. At some point, ST will request your cloud to exchange that authorization code for an access code at the Token URI you provided during registration
  5. Then, you should start seeing activity in your Schema Connector starting with the “grantCallbackAccess” interaction.

Please, let me know you’re following those steps or if you have questions about them.

5

I have been developing zigbee hub connected device
I am a beginner and have no experiences in this kinds of field,
I used the default device presentation only. I want to create a custom device presentation as your 5th explanation. I searched for this answer but still couldn’t find. what to describe in the file and how to register as presentation and get the vid number
Would you help me these?

6

Just as a reference to others:
If I understood correctly the info sent by @kimyoungkyu privately, this is a case where the developer wanted to show more than one attribute value in a single row to save space.
So, instead of creating a custom capability per attribute, we need a single capability with the attributes we’ll use on its definition (use this command to see the configuration of the sample capability: smartthings capabilities commonsmall09402.multiattributesconcatenation -j)

The section of the detail view in the device configuration would look like this:

"detailView": [
        {
            "label": "attr One",
            "displayType": "state",
            "state": {
                "label": "{{attrOne.value}}"
            }
        },
        {
            "label": "attrTwo",
            "displayType": "state",
            "state": {
                "label": "{{attrTwo.value}}"
            }
        },
        {
            "label": "attr Three",
            "displayType": "state",
            "state": {
                "label": "{{attrThree.value}}"
            }
        },
        {
            "label": "attr Four",
            "displayType": "state",
            "state": {
                "label": "{{attrFour.value}}"
            }
        }
    ]

The final result looks like this:

Screenshot_2025-06-17-17-33-21-82_ee29f370f755f274a0693481416ae4a8
Screenshot_2025-06-17-17-33-21-82_ee29f370f755f274a0693481416ae4a81080×2400 61.2 KB

Note: We don’t have power over the column size, more tests are needed to see if the number of column changes based on the attribute’s text size.

1 Like