Change an icon and add a badge

5min
Overview
You can easily customize widgets on the 
﻿ 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 
﻿ 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 Quick start.
Solution with Calendar -3 icon
﻿
Solution with calendar badge
﻿
Steps
Change an widget icon
Open the Hello-
﻿ solution in 
﻿ in 
﻿, click on the calendar.jigx file.
  Replace icon: calendar-3 with  icon: calendar.
Add a badge to the calendar widget
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 
﻿. 
﻿
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]-data
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
# 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: =@ctx.datasources.calendar-data
item:
  options:
    title: =@ctx.current.item.title
    from:
      format:
        dateFormat: lll
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventStart * 3600000)
    location: =@ctx.current.item.location
    people: =@ctx.current.item.people
    tags: =@ctx.current.item.tags
    to:
      format:
        dateFormat: lll
      text: =$fromMillis($toMillis($now()) + @ctx.current.item.eventEnd * 3600000)
  type: component.event
﻿
4. Save and publish the Hello-
﻿ solution.
5.  Run the Hello-
﻿ 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 
﻿.
Updated 01 Nov 2023
Did this page help you?
Customize the Hello-Jigx solution
Add widgets