HTML Component

The HTML component allows you to create an HTML page with dynamic content from Buzz components such as Applications (Microapps) and Advanced Maps. It uses handlebars to keep your HTML pages simple and clean and decoupled from the logic-based JavaScript files. The main purpose of using the HTML component is the ability to print to PDF.

Block helpers (#each) allow you to iterate over microAppData.

renderResourceItem allows you to visualize a Buzz component.

Example

The following example extracts the fields First and Last from a Microapp in the same Buzz and encodes them in a HTML table.

<div class="buzzy-html">

<table border=1>
 <thead>
   <tr>
     <th>First name</th>
     <th>Last Name</th>
   </tr>
 </thead>
 <tbody>
   {{#each children}}
     {{#if microAppData}}
       {{#each microAppData}}
       <tr>
         <td>{{First}}</td>
         <td>{{Last}}</td>
       </tr>
       {{/each}}
     {{/if}}
   {{/each}}
 </tbody>
</table>

<div id="dummy123456">{{renderResourceItem "e5a9b8d4dd01be5209117f4b" "dummy123456"}}</div>

</div>

The div with renderResourceItem is used to display an Advanced Map. To find the ID of the Advanced map you must use the browser developer tools in Chrome or Firefox.

In this example, using Chrome, the ID can be found 2 ways:

1. in the browser inspect it , see id="e5a9b8d4dd01be5209117f4b" (open image in new tab for full resolution).

2. in the console you can do a Resources.find({path:/3df6c8aa9bd9aec17b9fea32/}).fetch() where the long number is top level buzz id copied from the url… you’ll see something like then in the result you can see the “Advanced Map” resource