#Custom button card js events not working on android app

1 messages · Page 1 of 1 (latest)

rich isle
#

Hi all.

I'm working on a project where i need to make a rather custom frontend. I have found a way to do this with custom:button-card, and i looks great. However i cant get the interaction to work on the android app. it works flawlessly on web.

I have cooked it down to this example:
type: custom:button-card
name: "Debug Menu"
tap_action:
action: none
styles:
card:
- padding: 10px
custom_fields:
debug_button:
- pointer-events: auto
- width: 100%
custom_fields:
debug_button: >
[[[
return <div style="background: #d32f2f; color: white; padding: 25px; border-radius: 8px; font-weight: bold; text-align: center; cursor: pointer;" onclick="const ev = new Event('hass-more-info', { bubbles: true, composed: true }); ev.detail = { entityId: 'sun.sun', view: 'info' }; this.dispatchEvent(ev); event.stopPropagation();"> CLICK HERE TO TEST MOBILE INTERACTION </div>;
]]]

Can anyone point me in the right direction? or does this simply not work on android?.

fierce mesa
#

Do you mean that it works in the browser on the Android phone? Or on a desktop machine?

#

BTW:

stiff geodeBOT
#

To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks.
```yaml
example: here
```
Don't forget you can edit your post rather than repeatedly posting the same thing.

rich isle
#

Hi Rob. Thank you for the reply..
I went back and forth many times but found a solution. Attaching here for others.

type: custom:button-card
name: Android Debug
tap_action:
action: none
styles:
card:
- padding: 20px
custom_fields:
test_button:
- pointer-events: auto
custom_fields:
test_button: |
[[[
return <button style="width: 100%; padding: 30px; background: #2196F3; color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 16px;" onpointerup=" const ev = new CustomEvent('hass-more-info', { detail: { entityId: 'sun.sun' }, bubbles: true, composed: true }); document.querySelector('home-assistant').dispatchEvent(ev); "> OPEN SUN INFO (ANDROID TEST) </button> ;
]]]

fierce mesa
#

can you please format it?