LogoLogo
Enterprise GuideCommunity Edition GuideDeveloper Guide
  • Using The Polarity Developer Guide
  • Quick Start
    • What's New
    • Installing Integrations
    • Quick Start Guide
    • Learning Resources
  • Building an Integration
    • Directory Layout
    • package.json
    • Configuration File
    • Integration Main Module
      • startup
      • doLookup
        • Entity Objects
        • Result Objects
        • Error Objects
      • onDetails
      • onMessage
      • validateOptions
    • Customizing the Overlay Window
      • Templates
        • Conditionals
        • Displaying a List of Items
        • Display Object Properties
        • Built-in Helpers
        • Displaying Icons
      • Component File
        • Aliased Properties
        • Computed Properties
        • Event Hooks
      • CSS Styles
    • Vendor Javascript
      • Inserting Javascript into DOM
    • README Guide
    • Debugging Integrations
      • Web Inspector
      • Using Integration Logs
      • Testing Main Module
  • Recipes
    • Enabling User Actions
    • Throttling Lookups
    • Using Custom Entity Types
    • Custom Summary Tags
    • Creating a Tabbed Interface
    • Accessing Username of Requestor
Powered by GitBook
On this page
  1. Building an Integration
  2. Customizing the Overlay Window
  3. Templates

Display Object Properties

You can iterate over the properties on a object using the {{#each-in}}{{/each-in}} block helper. This is particularly helpful when the properties on the object are dynamic or unknown ahead of time.

As an example, if your result object contains the following data

{
    entity: entityObj,
    data: {
        summary: ['tag1', 'tag2'],
        details: {
          key1: 'value1',
          key2: 'value2',
          key3: 'value3'
        }
    }
}

You could iterate over the details object with the following

template.hbs
{{#each-in block.data.details as | key value |}}
   <div>
     <span class="p-key">{{key}}</span>
     <span class="p-value">{{value}}"</span>
   </div>
{{/each-in}}

In our example this would create the following HTML

<div>
   <span class="p-key">key1</span>
   <span class="p-value">value1</span>
<div>
<div>
   <span class="p-key">key2</span>
   <span class="p-value">value2</span>
<div>
<div>
   <span class="p-key">key3</span>
   <span class="p-value">value3</span>
<div>
PreviousDisplaying a List of ItemsNextBuilt-in Helpers

Last updated 1 year ago