Fluent Commerce Logo
Docs
Sign In

Enable Navbar Badges

How-to Guide

Author:

Fluent Commerce

Changed on:

13 Dec 2023

Key Points

  • Overview
  • Who is this guide for?
  • Steps to enable navigation bar badges with an example
No alt text provided

Steps

Steps to enable navigation bar badges with an example

Step arrow right iconStep 1

Find the relevant queryName from GraphQL Schema queries.

For Example, 

`waves`
 queryName will show data about waves.

Step arrow right iconStep 2: Set the variables

  • A property used to access 
    `waves`
     query to filter data. For Example: 
    `processingLocation {ref}`
     is taken to filter data according to the location.
  • In-progress Waves contain waves with the status pick, pack, and dispatch. Hence, set the 
    `status`
     to 
    `PICK`
    ,
    `PACK`
    ,
    `DISPATCH`
    .

Step arrow right iconStep 3. Set thresholds values (Optional)

  • Set thresholdLow value = 
    `Any Number`
     to show a green color badge if the result is less than this threshold. For Example, 3 (If the result is less than 3, the badge will be green color.)
  • Set thresholdHigh value = 
    `Any Number`
     to show a red color badge if the result is more than this threshold. For Example, 5 (If the result is more than 5, the badge will be red color but if the result is between 3 and 5 the badge will be orange.)

Step arrow right iconStep 4. Put the badge configuration in nav object of the waves page manifest.i.e. fc.mystique.manifest.store.fragment.waves.

1"nav": {
2                "label": "i18n:fc.sf.ui.waves.index.nav",
3                "icon": "store",
4                "badge": {
5                    "queryName": "waves",
6                    "variables": {
7                        "processingLocation": {
8                            "ref": "{{activeLocation.ref}}"
9                        },
10                        "status": [
11                            "PICK",
12                            "PACK",
13                            "DISPATCH"
14                        ]
15                    },
16                    "thresholds": {
17                        "thresholdHigh": 5,
18                        "thresholdLow": 3
19                    }
20                }
21            }

Language: json

Name: Sample Navigation Configuration for Waves page

Description:

[Warning: empty required content area]
No alt provided
  • The image displays '7' results on the In Progress Waves dashboard tile.
  • The image displays the result count of 7 from the 
    `waves`
     GraphQL query on Waves navigation bar badge.
  • The count '7' is above thresholdHigh which is why the color of the badge is red.
Fluent Commerce

Fluent Commerce

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo