Dynamic HTML component

Ask the community
, ,
1

Hi,

I am trying to dynamically update my HTML component based on the content stored for each item in the data collection.

My code almost work but still cant manage to make it happen and display the final widget form. Maybe am I missing something, could someone help ?

Here is the page code :

$w.onReady(() => {
const currentItem = $w(“#dynamicDataset”).getCurrentItem();
$w(‘#text352’).text = currentItem.html;
$w(“#dynamicDataset”).onReady(() => {
const currentItem = $w(“#dynamicDataset”).getCurrentItem();
if (currentItem && currentItem.html) {
// Envoie le contenu HTML à l’élément HTML via postMessage
$w(“#htmlComponent”).postMessage({ htmlContent: currentItem.html });
console.log(“Message envoyé avec le contenu HTML.”);
} else {
console.warn(“Contenu HTML non trouvé dans l’item courant.”);
}
});
});

Here is the HTML component code :

Example 2 :

For now, I just have this display “[object Object]”

Thanks in advance for your help !

Victor

2

Hi, @contact23585 !!

This past topic might be related. Apologies if my response is off the mark. :innocent:

3

Salut Victor!

Well to be able to recieve → DATA ← inside your HTML-Comp. you will need also to put in some code into your HTML-Component and save it.

For example…

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: black;
        padding: 10px;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="content">Waiting for content...</div>

    <script>
      // Listen for postMessage from the page code
      window.onmessage = (event) => {
        if (event.data && event.data.htmlContent) {
          // Safely inject the received HTML
          document.getElementById("content").innerHTML = event.data.htmlContent;
        } else {console.warn("No htmlContent received.");}
      };
    </script>
  </body>
</html>

This is what will make your HTML-Component be possible to recieve data …

 window.onmessage = (event) => {...........};

As soon something has been sent to your HTML-Component, this FUNCTION will catch the data!

And if you would type in → HTML-COMPONENT ← into the searchbar → what do you think you would get as output ???

2025-04-17 20_34_54-Window
2025-04-17 20_34_54-Window1055×1842 230 KB