Components

countdown

8min

The countdown component functionality counts down from a date, date/time, and time.  When the time expires, you can configure an outcome, for example, open a different 
﻿, or perform an action. The countdown starts as soon as the 
﻿ containing the component.countdown opens.
Countdown
﻿
﻿Configuration options﻿
﻿
Core structure
﻿
expiresAt
Add a date, date/time or time when the countdown must expire/stop, either using:
- datasource, e.g. [email protected]
- expression, e.g. =$fromMillis($toMillis($now()) + 50000)
- string, e.g. "2023-09-20 18:00", or "2023-07-25T17:30:00+02:00"
Other options
﻿
align
center, left, right, and stretch, with center as the default if the property is not specified in the YAML.
labels
isVisible - true or false with true as the default. Setting false will hide the countdown component.
position - The countdown labels of Days : Hours : Minutes: Seconds are shown at the bottom or top of the countdown.
size
Choose from extra-large, large, medium, small, with large being the default if the property is not specified in the YAML.
Actions
﻿
onPress
Choose from the provided list of available actions, for example, use the go-to action to open a different 
﻿.
onFinish
Choose from the provided list of available actions. For example, go-back action. 
Considerations
This component's function is to countdown to a predefined date/time. It is not recommended to use the component as a timer.
The component.countdown can only be used in a jig.default.
The countdown's separator is by default shown as a colon :.
The countdown starts when you navigate to the 
﻿ containing the component.countdown.
 Use any inputs for the countdown configuration, for example, different types of datasources, states and inputs. 
Use the set-state and reset-state actions to set and reset the countdown.
﻿Examples and code snippets ﻿
Countdown with inputs (static, dynamic, expression, & datasource)
Countdown
﻿
This example shows the expiresAt property value set using a static value, an expression, a static datasource, and a dynamic datasource.
Example:
See the full example in GitHub. 
countdown-input.jigx
event-dd.jigx
static-data
children:
  - type: component.section
    options:
      title: COUNTDOWN WITH STATIC VALUE
      children:
      - type: component.countdown
        options:
          expiresAt: "2023-10-06 22:00"

  - type: component.section
    options:
      title: COUNTDOWN WITH COUNT FROM NOW
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (STATIC)
      children:
      - type: component.countdown
        options:
          expiresAt: [email protected][1].date

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (DYNAMIC)
      children:
      - type: component.countdown
        options:
          expiresAt: [email protected]-dd[2].StartDate
children:
  - type: component.section
    options:
      title: COUNTDOWN WITH STATIC VALUE
      children:
      - type: component.countdown
        options:
          expiresAt: "2023-10-06 22:00"

  - type: component.section
    options:
      title: COUNTDOWN WITH COUNT FROM NOW
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (STATIC)
      children:
      - type: component.countdown
        options:
          expiresAt: =@ctx.datasources.dates[1].date

  - type: component.section
    options:
      title: COUNTDOWN WITH DATASOURCE INPUT (DYNAMIC)
      children:
      - type: component.countdown
        options:
          expiresAt: =@ctx.datasources.event-dd[2].StartDate
﻿
Countdown with alignment
You can choose to align the component.countdown to the left, right, center and stretch it across the screen.
Example:
See the full example in GitHub. 
Aligning countdown
﻿
countdown-align.jigx
children:
  - type: component.section
    options:
      title: COUNTDOWN ALIGN - LEFT
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: left

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - CENTER
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: center

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - RIGHT
      children:
      - type: component.countdown
        options: 
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: right

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - STRETCH
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: stretch
children:
  - type: component.section
    options:
      title: COUNTDOWN ALIGN - LEFT
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: left

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - CENTER
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: center

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - RIGHT
      children:
      - type: component.countdown
        options: 
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: right

  - type: component.section
    options:
      title: COUNTDOWN ALIGN - STRETCH
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 3600000)
          align: stretch
﻿
Countdown with different sizes
Size variations
﻿
Use the size property in the component.countdown to change the size from extra-large to small.
Example:
See the full example in GitHub. 
﻿
count-down-sizes.jigx
children:
  - type: component.section
    options:
      title: COUNTDOWN SIZE - EXTRA-LARGE
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: extra-large
            
  - type: component.section
    options:
      title: COUNTDOWN SIZE - LARGE (Default)
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: large
          
  - type: component.section
    options:
      title: COUNTDOWN SIZE - MEDIUM
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: medium

  - type: component.section
    options:
      title: COUNTDOWN SIZE - SMALL
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: small
children:
  - type: component.section
    options:
      title: COUNTDOWN SIZE - EXTRA-LARGE
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: extra-large
            
  - type: component.section
    options:
      title: COUNTDOWN SIZE - LARGE (Default)
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: large
          
  - type: component.section
    options:
      title: COUNTDOWN SIZE - MEDIUM
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: medium

  - type: component.section
    options:
      title: COUNTDOWN SIZE - SMALL
      children:
      - type: component.countdown
        options:
          expiresAt: =$fromMillis($toMillis($now()) + 36000000)
          size: small
﻿
Countdown onPress
Action when pressed
﻿
This example shows two scenarios, the first opens a different 
﻿ when the component is pressed and the second opens a URL when pressed. Use the onPress property to set up an action when pressing on the component. 
Example:
See the full example in GitHub. 
countdown-OnPress.jigx
countdown-sizes.jigx
children:
  - type: component.section
    options:
      title: COUNTDOWN - G0-T0 JIG WHEN PRESSED
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)
            onPress: 
              type: action.go-to
              options:
                linkTo: countdown-sizes

  - type: component.section
    options:  
      title: COUNTDOWN - OPEN URL WHEN PRESSED
      
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)     
            onPress: 
              type: action.open-url
              options:
               url: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350
        - type: component.web-view
          options: 
            uri: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350          
children:
  - type: component.section
    options:
      title: COUNTDOWN - G0-T0 JIG WHEN PRESSED
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)
            onPress: 
              type: action.go-to
              options:
                linkTo: countdown-sizes

  - type: component.section
    options:  
      title: COUNTDOWN - OPEN URL WHEN PRESSED
      
      children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 360000)     
            onPress: 
              type: action.open-url
              options:
               url: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350
        - type: component.web-view
          options: 
            uri: https://www.tourismthailand.org/Destinations/Provinces/Phuket/350          
﻿
Countdown onFinish
In this example the onFinish property is used to show a modal when the component.countdown expiresAt property reaches zero.
Example:
See the full example in GitHub. 
Modal when countdown expires
﻿
count-down-onFinish.jigx
 children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 3600)
            onFinish: 
              type: action.info-modal
              options:
                modal:
                  title: 🏖️ Holiday time!
                  buttonText: Enjoy!
 children:
        - type: component.countdown
          options:
            expiresAt: =$fromMillis($toMillis($now()) + 3600)
            onFinish: 
              type: action.info-modal
              options:
                modal:
                  title: 🏖️ Holiday time!
                  buttonText: Enjoy!
﻿
Countdown started from another jig 
Countdown from jig input
﻿
Add inputs from another 
﻿ to set the expiresAl property for the countdown to start.
Example:
See the full example in GitHub. 
Supporting example in GitHub.
count-down-jig-input.jigx
start-countdown-support.jigx
title: [email protected]
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1675989167596-915a77b361e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGhvbGlkYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60
        

children:                                
  - type: component.countdown
    options:
      size: extra-large  
      expiresAt: [email protected]
      
actions:
  - children:
      - type: action.info-modal
        options:
          title: [email protected] & " - BUY"
          modal:
            title: Let the countdown begin!
            buttonText: Close
            element: 
              type: image
              resizeMode: contain
              uri: https://plus.unsplash.com/premium_photo-1680466283263-91b51ab91832?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8YmVhY2glMjB1bWJyZWxsYXxlbnwwfHwwfHx8MA%3D%3D
title: =@ctx.jig.inputs.packageName
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1675989167596-915a77b361e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODN8fGhvbGlkYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60
        

children:                                
  - type: component.countdown
    options:
      size: extra-large  
      expiresAt: =@ctx.jig.inputs.packageDate
      
actions:
  - children:
      - type: action.info-modal
        options:
          title: =@ctx.jig.inputs.packagePrice & " - BUY"
          modal:
            title: Let the countdown begin!
            buttonText: Close
            element: 
              type: image
              resizeMode: contain
              uri: https://plus.unsplash.com/premium_photo-1680466283263-91b51ab91832?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8YmVhY2glMjB1bWJyZWxsYXxlbnwwfHwwfHx8MA%3D%3D
﻿
﻿

Updated 22 Aug 2024

Did this page help you?

chat

entity

Docs powered by Archbee

TABLE OF CONTENTS

Configuration options

Examples and code snippets

Countdown with inputs (static, dynamic, expression, & datasource)

Countdown with alignment

Countdown with different sizes

Countdown onPress

Countdown onFinish

Countdown started from another jig

Core structure
expiresAt	Add a date, date/time or time when the countdown must expire/stop, either using: - datasource, e.g. [email protected] - expression, e.g. =$fromMillis($toMillis($now()) + 50000) - string, e.g. "2023-09-20 18:00", or "2023-07-25T17:30:00+02:00"

Other options
align	center, left, right, and stretch, with center as the default if the property is not specified in the YAML.
labels	isVisible - true or false with true as the default. Setting false will hide the countdown component. position - The countdown labels of Days : Hours : Minutes: Seconds are shown at the bottom or top of the countdown.
size	Choose from extra-large, large, medium, small, with large being the default if the property is not specified in the YAML.

Actions
onPress	Choose from the provided list of available actions, for example, use the go-to action to open a different .
onFinish	Choose from the provided list of available actions. For example, go-back action.

countdown

﻿Configuration options﻿

Core structure

Other options

Actions

Considerations

﻿Examples and code snippets ﻿

Countdown with inputs (static, dynamic, expression, & datasource)

Countdown with alignment

Countdown with different sizes

Countdown onPress

Countdown onFinish

Countdown started from another jig

Configuration options

Examples and code snippets