Custom component help rendering data from query

I've been working on a section of a custom query and can't seem to get it to render the data.

In the Model section I have:

  "iconUrl": {{ }}

In the html section I have:

<!DOCTYPE html>
    <title>SVG Data Fetch</title>
    <div id="content">This is a test content to ensure the body is rendered.</div>
    <div id="svgData">Initial SVG Data</div>
    <div id="replacetest">Initial replacetest</div>
    <div id="iconURL">Initial Icon URL</div>

      async function fetchAndDisplaySVG() {
        document.getElementById('content').innerText = "Starting fetchAndDisplaySVG";
        try {
          // Trigger the defaultIconColor query
          await window.Retool.triggerQuery('defaultIconColor');
          document.getElementById('replacetest').innerHTML = "boo";
        } catch (error) {
          document.getElementById('content').innerText = "Error in fetchAndDisplaySVG: " + error;

      // Call the function to fetch and display the SVG data

      // Subscribe to model updates
      window.Retool.subscribe(function (model) {
        document.getElementById("svgData").innerHTML = model.defaultIconColor || "No data available";

I set up a js query rendering the same results and it works fine:

// Function to set the default icon color
async function defaultIconColor() {
  const color = "#808080"; // Default color
  const defaultIcon = "house"; // Default icon

  // Access the appropriate SVG from the global object and replace the placeholder with the actual color
  let selectedSvg = window.iconsSVGs[defaultIcon];
  if (selectedSvg) {
    selectedSvg = selectedSvg.replace(/COLOR_PLACEHOLDER/g, color);
  } else {
    throw new Error('Default icon not found.');

  // Convert the modified SVG content to base64
  const base64Svg = btoa(unescape(encodeURIComponent(selectedSvg.trim())));
  const iconUrl = `data:image/svg+xml;base64,${base64Svg}`;

  return { iconUrl };

// Call the function and return the new icon URL
const newIconUrl = await defaultIconColor();
return newIconUrl;

The data output here looks something like this:


What am I doing wrong in the html script?

I'm not sure what you're expecting as a result? you should be able to use data:image/svg+xml;base64,PD94bW... directly as the source for an img tag/component. were you expecting a blob or some other json obj?

Hi @bobthebear,
iconUrl:"data:image/svg+xml;base64,PD94bW..." is the result of the script. In the js script I get this result and in the html I should but I get nothing. It seems the custom components are slightly different with a different syntax.

ah, I think you need to use a react component to pass data from the query to your custom component. as it is your component isn't part of the React visual tree so it isn't being rendered

I'm not using a React component but that page did inspire me to look at the syntax again and I found my mistake.

I wasn't correctly referring to the Then I changed
model.defaultIconColor to model.iconUrl and it works.

Thanks for pushing me in the right direct!

1 Like