Examples Consuming Service Response Data?

[thlucas1]

Just curious if anyone has used this with the (fairly new) service response data feature? It seems there are very few examples out there right now for processing service response data and creating UI / dashboards. Most of them deal with setting up a notification, or something that is non-UI related.

I have a custom integration setup that has a service to return a list of presets for a media player. I am trying to figure out how to populate a UI dashboard with the response. I have the automation setup that detects the updated preset list, and calls the service to return the updated list. It is stored as script.bose_preset_list_retrieve, and the service response variable name is PresetListResponse.

Now I am trying to figure out how to display the list in a nice tile (or column) format so the user can tap an image and a service is called to play the content.

Something like this is what I am trying for:

Here's the yaml I have been testing with:

type: custom:html-template-card
title: Bose ST10-1 Preset List
ignore_line_breaks: true
entities:
  - script.bose_preset_list_retrieve
content: |
  <style>
    table, th, td {
        border: none;
        padding: none;
        margin: none;
        vertical-align:top;
    }  
    td { 
        padding: 1px;
    }  
    .tdh { 
        display:none;
    }  
    .tdr { 
        text-align: right;
    }  
    .tdw { 
        text-align: left;
        padding-left: 12px;
        width: 90%;
    }  
  </style> <table style="width:100%">
    <thead style="display:none">
      <tr>
        <th>containerArt</th>
        <th>itemName</th>
        <th>@source</th>
        <th>@id</th>
        <th>@type</th>
        <th>@location</th>
        <th>@sourceAccount</th>
      </tr>
    </thead>
    <tbody>
    {% for preset in state_attr('script.bose_preset_list_retrieve', 'PresetListResponse')["presets"]['preset'] %}
      <tr>
       <td><img src="{{ preset['ContentItem']['containerArt']}}" width="50" height="50"></td>
       <td class="tdw">{{ preset['ContentItem']['itemName']}}</td>
       <td class="tdr">{{ preset['ContentItem']['@source']}}</td>
       <td class="tdh">{{ preset['@id']}}</td>
       <td class="tdh">{{ preset['ContentItem']['@type']}}</td>
       <td class="tdh">{{ preset['ContentItem']['@location']}}</td>
       <td class="tdh">{{ preset['ContentItem']['@sourceAccount']}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

Here's my service call and the service response data:

[PiotrMachowski]

I don't think it is possible to do it with this card. I think a dedicated card might be a better approach in such case

[thlucas1]

Thanks for the response. I can generate the necessary html via the developer tools Template tab. It's just processing the response data from the service call that is baffling me at this point. I appreciate your help. thank you.