Change an icon and add a badge

Overview

You can easily customize widgets on the Home Hub by changing their icons and adding additional components such as badges to the widgets. In this section, you learn to change the calendar icon and add a badge using an expression on the calendar jig to show the number of calendar events for the week.

For a view of the icons in a list see the Types - List - List with all icons in the jigx-samples solution available in https://manage.jigx.com/quickstartQuick start.

Solution with Calendar -3 icon

Solution with calendar badge

Steps

Change an widget icon

1. Open the Hello-Jigx solution in Jigx Builder in VS Code, click on the calendar.jigx file.

2. Replace icon: calendar-3 with icon: calendar.

Add a badge to the calendar widget

1. Under icon add a new line for the badge code that shows the number of calendar events for the week. Add badge: Then use the =$count(@ctx.datasources.calendar-data.id) expression to count the events in the calendar and show the number in the badge on the Home Hub.

Expressions are JSONata language-based. Learn more about JSONata and try out your expressions in their JSONata Exerciser. The root element of Expressions in .jigx files always starts with "@ctx" vs. "$." in JSONata Exerciser (e.g. @ctx.data vs.$.data). Jigx supports shorthand $ expressions for JSONata.

calendar.jigx

# The system name that uniquely identifies the jig
title: Calendar
# The jig type used to display a calendar with the current date
type: jig.calendar
# icon that displays on the widget on the home hub
icon: calendar
# Add a badge to the calendar widget and use an expression to count the entries in the calendar by id
badge: =$count(@ctx.datasources.calendar-data.id)
# The expression that structures the data from the datasource before binding it to the jig. Expressions are JSONata based
data: [email protected]
item:
  options:
    title: [email protected]
    from:
      format:
        dateFormat: lll
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    location: [email protected]
    people: [email protected]
    tags: [email protected]
    to:
      format:
        dateFormat: lll
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
  type: component.event

4. Save and publish the Hello-Jigx solution. 5. Run the Hello-Jigx solution on your mobile device to see the change to the calendar icon and see the badge displaying 3 events for the week on the Home Hub.