BadgeBox – Customer Portal

BadgeBox is a component that renders a list of awards (badges) based on predefined conditions. There are two ways to define which badges should be displayed.

Method 1.
Pass badge definitions directly via the badges array. Each badge may include rules. These rules use the same syntax as color-rules.

Method 2.
Use a callback function. The callback receives the same parameters as the aux callback and must return an array of badge IDs that should be rendered.

Both methods can be used simultaneously. First, badges defined by rules are rendered, then badges returned by the callback are added.

Example configuration:

<ui-badge-box
  title="My badges"
  :single-line="true"
  :badges="[{
    badgeUrl: 'conditional.png',
    title: 'Conditional Award',
    rules: [['s.id', 'one_of', '3,4,5', {}]]
  }]"
  :callback="({p, r, item}) => { console.log('cb', item); return ['1','2'] }"
  no-badges-text="no badges!"
  content-class="d-block text-center"
  from-array-field="p.BadgeFileList"
></ui-badge-box>

Additional parameters:

:tree-id="0"
:only-account="false"

title="Window title (used when single-line is disabled)"
:single-line="true"
background-class="bg-amber"
header-class="bg-amber-lighten-1"

callback-badge-url-template="/images/badges/{{badgeId}}.png"
:badge-width="50"
:badge-height="50"

props	default	type	description
:single-line	false	Boolean	Render badges inline without wrapping them into a container window.
:callback		Function	Standard ui2 (v2) callback. Returns an array of badge IDs.
callback-badge-url-template		String	URL template used to generate final badge image URLs (e.g. `/images/badges/{{badgeId}}.png`).
:tree-id	0	Number	Defines the tree from which data is fetched unless `only-account` is enabled.
:only-account	false	Boolean	If enabled, position data will not be fetched (traffic optimization). Useful when only account properties are required (e.g. `p.firstname`).
title		String	Title of the badge container window.
background-class header-class		String	CSS classes applied to the container background and header.
:badge-width :badge-height	50	Number	Defines the width and height of each badge.
:from-array-field		String	Retrieves a list of files from an array field (profile or marketing plan). String values are parsed as comma-separated lists.

Note: All of the settings can be customized either from admin panel 
by manually editing code or from within the back office by pressing
on a cog icon in a left upper corner of the page (only accessible
when "Online office admin" flag is presented).