SDK/Theme Update - New Hours List Fomatter

We added a new hours Formatter called hoursList. This Formatter has more flexibility around displaying hours, and the open status information on cards.

Before

After

Basic Usage

To use the formatter out of the box, call the formatter in your card’s the following in your card’s hours field (under dataForRender):

hours: Formatter.hoursList(profile),

Additional Formatter Options

The second parameter in the formatter allows you to add additional configuration. It accepts a JSON object with three optional keys:

  1. isTwentyFourHourClock: Use 24 hour clock if true, 12 hour clock if false. Defaults based on locale if undefined.
  2. disableOpenStatus: If true, displays the hours intervals, rather than the open status string for today. Defaults to false.
  3. firstDayInList: A day name in English, e.g. “SUNDAY”, this day will be displayed first in the list. If unspecified, the current day will be at the top.

Advanced Examples

To use a twenty four hour clock:

hours: Formatter.hoursList(profile, { 'isTwentyFourHourClock': 'true'} ),

To disable open status:

hours: Formatter.hoursList(profile, { 'disableOpenStatus': 'true'} ),

To set the first day in the list to Sunday a twenty four hour clock:

hours: Formatter.hoursList(profile, { 'firstDayInList': 'SUNDAY'} ),

Using a Different Hours Field or Locale

The formatter defaults to using the hours built-in filed. To use a different hours field, you’ll need to use the third parameter, and pass an empty object as the second.

hours: Formatter.hoursList(profile, {}, 'c_myCustomHoursField'),

Finally, the locale used defaults to the page’s locale. You can override this in the fourth parameter if needed.

hours: Formatter.hoursList(profile, {}, 'hours', 'en'),
1 Like

Hi @roser ! Super excited for this update - unfortunately right now I’m getting a console error when I update the hours Formatter; I’ve updated my experience to 1.20 and it’s using SDK 1.8 but I may have missed something during the upgrade. Any ideas?

Fixed! I realized that I just needed to add hoursList to my formatters.js list so that it could pull that in correctly.

Screen Shot 2021-05-04 at 1.14.11 PM

1 Like