topic_components

Back to Home

Back to main.js page

topic components Configuration

Topics are made up of components that can be configured to display data in various formats.

Some examples examples of components are:

• horizontal-table: header at top, multiple rows below
• vertical-table: header on the left, single row of data on the right
• callout: static block of text, usually for explanation
• image: static image
• badge: small text box for prominently displaying short codes/values

The basic pattern for components is:

{
  type: 'callout',
  slots: {
    text: 'This is an sample callout.'
  }
}

Each component contains named placeholders, called slots, that tell Mapboard how to source the actual data to be rendered. In the example above, there's just one slot with a static block of text. Slots can also be mapped to a function that receives the app state, which in turn provides access to API responses (see dataSources). For example, to show a badge with the property assessment account:

{
  type: 'badge',
  slots: {
    value: function (state) {
      return state.topicData.opa.account_num;
    }
  }
}

Example:

topics: [
  {
    key: 'property-assessments',
    ...
    components: [

    ]
  }
]