Access Variables in a Custom Tile

Feature Requests
1

I would like to able to access Variables from SharpTools in a Custom Tile.

I have a custom tile which cycles through weather info from various cities. I would like the user to be able to select from a list of available cities without having to go through the Tile Editor to select from the list. Each city could be assigned a variable but currently it appears we’re currently unable to retrieve a variable value in a custom tile.

2

Can you share more details about the use-case with weather info and custom tiles? I’m trying to understand why some other browser-based storage mechanism couldn’t be used.

Is the goal to be able to communicate selections across custom tiles? For example, could the localStorage API work?

Example code:

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.1.0",
  "settings": [],
  "name": "Storage Demo",
  "dimensions": {"width": 2, "height": 2}
}
</script>
<!-- Do not edit above -->

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <button @click="increment">
    Count is: {{ count }}
  </button>
</div>


<script>
  const APP_PREFIX = 'custom-app-123'
  const COUNT_ID = `${APP_PREFIX}-count`;

  Vue.createApp({
    data() { return {
        count: this.getInitialCount(),
    }},
    methods: {
      increment(){
        this.count++;
        localStorage.setItem(COUNT_ID, this.count);
      },
      getInitialCount(){
        return localStorage.getItem(COUNT_ID) ?? 0;
      },
      onStorageEvent(e){
        let {type, key, newValue} = e;
        if(type !== "storage") return
        if(key?.startsWith(APP_PREFIX)){
          this.count = newValue;
        }
      }
    },
    mounted(){
      window.addEventListener("storage", this.onStorageEvent, false);
    }
  }).mount('#app')
</script>

<style>
html,body { height: 100%; margin:0;}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}
button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #1CB0F6;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #1899D6;
}

button:hover {
  transform: translateY(1px);
  box-shadow: 0 8px #1899D6;
}

button:active {
  box-shadow: 0 5px #1899D6;
  transform: translateY(4px);
}
</style>
3

+1. The use case I have is to be able to sidestep the inability to make API calls from a custom tile. If I can make an API call from a first-party Rule, then set a variable in the rule, and then access that variable from my custom tile, it would greatly expand the functionality of custom tiles.

4

Should this thread be rolled up into his one?

5

Yes, and add the votes!

6

:tada: Update: This feature is now available in production!

Custom Tiles: Access to Things and Variables

We’ve released an update to Custom Tiles which includes support for Things and Variables as settings!

If you have access to the beta program, you can find details in the linked topic.

If you’re a developer with an immediate use-case for accessing Things or Variables within Custom Tiles, feel free to send a note to @support requesting beta access. :slight_smile:

1 Like
7

:tada: Access to Variables and Things within Custom Tiles is now available!
 
:point_right: Learn More: Custom Tiles: Access to Things and Variables