Custom component help rendering data from query

💬 App Building
1

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": {{ defaultIconColor.data.iconUrl }}
}

In the html section I have:

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Data Fetch</title>
  </head>
  <body>
    <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>

    <script>
      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
      fetchAndDisplaySVG();

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

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:

iconUrl:"data:image/svg+xml;base64,PD94bW..."

What am I doing wrong in the html script?

2

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?

3

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.

4

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

5

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 Model.name. Then I changed
model.defaultIconColor to model.iconUrl and it works.

Thanks for pushing me in the right direct!

1 Like