Smartthings Classic App doesn't render tiles the same as in the example

Hi Smartthings Support Team,

I am getting confused with the example defined in documentation on how to create tiles.

I was using this example to create an interface for my custom device handler.

Here is what it looks like

Here is my code

metadata {
    definition (name: "CC1352 Sample Switch", namespace: "smartthings", author: "SmartThings") {
        capability "Switch"
		capability "Refresh"
        capability "Temperature Measurement"

        // Generic
		fingerprint profileId: "0104", inClusters: "0000" , outClusters: "0006", manufacturer: "TexasInstruments", deviceJoinName: "CC135R1 SWITCH"
		fingerprint profileId: "0104", inClusters: "0000" , outClusters: "0006", manufacturer: "TexasInstruments", deviceJoinName: "CC1352R1 SWITCH"
	

    }

    tiles(scale: 2) {
        multiAttributeTile(name:"sliderTile", type:"generic", width:6, height:4) {
    tileAttribute("device.switch", key: "PRIMARY_CONTROL") {
        attributeState "on", label:'${name}', backgroundColor:"#00A0DC", nextState:"turningOff"
        attributeState "off", label:'${name}', backgroundColor:"#ffffff", nextState:"turningOn"
        attributeState "turningOn", label:'${name}', backgroundColor:"#79b821", nextState:"turningOff"
        attributeState "turningOff", label:'${name}', backgroundColor:"#ffffff", nextState:"turningOn"
    }
    tileAttribute("device.level", key: "SECONDARY_CONTROL") {
        attributeState "level", icon: 'st.Weather.weather1', action:"randomizeLevel", defaultState: true
    }
    tileAttribute("device.level", key: "SLIDER_CONTROL") {
        attributeState "level", action:"switch level.setLevel", defaultState: true
    }
}
multiAttributeTile(name:"valueTile", type:"generic", width:6, height:4) {
    tileAttribute("device.level", key: "PRIMARY_CONTROL") {
        attributeState "level", label:'${currentValue}', defaultState: true, backgroundColors:[
            [value: 0, color: "#ff0000"],
            [value: 20, color: "#ffff00"],
            [value: 40, color: "#00ff00"],
            [value: 60, color: "#00ffff"],
            [value: 80, color: "#0000ff"],
            [value: 100, color: "#ff00ff"]
        ]
    }
    tileAttribute("device.switch", key: "SECONDARY_CONTROL") {
        attributeState "on", label:'${name}', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#00A0DC", nextState:"turningOff"
        attributeState "off", label:'${name}', action:"switch.on", backgroundColor:"#ffffff", nextState:"turningOn"
        attributeState "turningOn", label:'…', action:"switch.off", icon:"st.switches.switch.on", backgroundColor:"#79b821", nextState:"turningOff"
        attributeState "turningOff", label:'…', action:"switch.on", backgroundColor:"#ffffff", nextState:"turningOn"
    }
    tileAttribute("device.level", key: "VALUE_CONTROL") {
        attributeState "VALUE_UP", action: "levelUp"
        attributeState "VALUE_DOWN", action: "levelDown"
    }
}
        valueTile("power", "device.power") {
    // label will be the current value of the power attribute
    state "power", label: '100'
}
        main "switch"
        details(["switch", "refresh"])
    }
}

// Parse incoming device messages to generate events
def parse(String description) {
    log.debug "description is $description"

    def event = zigbee.getEvent(description)
    if (event) {
        sendEvent(event)
        log.debug("this is goooooooooood")
    }
    else {
        log.warn "DID NOT PARSE MESSAGE for description : $description"
        log.debug zigbee.parseDescriptionAsMap(description)
    }
}

def off() {
	zigbee.command(0x0006,0x00, "", [destEndpoint: 0x09]);
    //zigbee.writeAttribute(0x06, 0x00, Integer dataType, value, Map additionalParams=[:])
    //zigbee.off()
}

def on() {
//zigbee.on();
    zigbee.command(0x0006,0x01, "", [destEndpoint:0x09]);
}

def setLevel(value) {
    zigbee.setLevel(value)
}

def refresh() {
    return zigbee.readAttribute(0x0006, 0x0000) +
       zigbee.readAttribute(0x0402, 0x0000) +
       zigbee.configureReporting(0x0006, 0x0000, 0x10, 0, 600, null)+
       zigbee.configureReporting(0x0402,0x000, 0x09,0, 600,null)
        
        //return zigbee.readAttribute(0x0402, 0x0000) +
        //zigbee.configureReporting(0x0402,0x000, 0x09,0, 600,null)
}


def configure() {
    log.debug "Configuring Reporting and Bindings."

    return zigbee.configureReporting(0x0006, 0x0000, 0x10, 0, 600, null) +
        zigbee.configureReporting(0x0008, 0x0000, 0x20, 1, 3600, 0x01) +
        zigbee.readAttribute(0x0006, 0x0000) +
        zigbee.readAttribute(0x0008, 0x0000)
}

And also, I would like to ask, would it be possible to display these tile in the new smartthings app?

To get Classic to show those multiAttribute tiles, you need to change this:

    main "switch"
    details(["switch", "refresh"])

to this: (you don’t don’t have a refresh tile defined)

    main "sliderTile"
    details(["sliderTile", "valueTile", "power"])

There are tons of great examples to use that are way better than what’s in the documentation. Take a look at ST’s own code:

The new app renders tiles completely different, so what you see in Classic will not be the same. Again, look at ST’s code for an example. If you specify a certain “ocfDeviceType” within your DTH code, as well as the appropriate capabilities, ST’s standard tiles will show up, BUT, not any custom capabilities. There are also other factors influencing tiles in the new app.

There are a lot of topics about developing handlers for the new app, so do a quick search on what you’re trying to do and you may find what you’re looking for. Unfortunately I can’t link to those for you at the moment, sorry about that!

Hi John,

Man you are great! Now I know where I went wrong.
The link of the examples that you provided is very useful, I can probably use some of the example as my base.

Thank you so much,
Jonathan

1 Like

You bet @Jonathan_Espanol, glad to have helped!

1 Like