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).