BUILDING A DECLARATIVE TIME PICKER AND WORKING WITH TIME IN FLOWS (AND HOW SUMMER ’21 HELPS)

If you’re reading this at some point in the future, then hopefully this will all be a distant memory, but right now, Flows and the Time field type really don’t get along. Which is a shame, because we love Flows and we need to work with data in time fields.

We have found a way. We also built a declarative time picker in Flow and the Summer ’21 release has made it better. So, if anyone else is struggling like I was, this is what we did …

Before we get to the time picker, you first need to get Time into your Flow. Unless I’m missing something fundamental, that’s not as easy as you might think.

We need to do four things …

  1. Read from a time field
  2. Create data with time fields
  3. Display editable data from a time field
  4. Update a time field

Sounds simple right? Except we tripped over at number one. These are the obvious things we tried that you can’t do …

  • Create a time variable and assign a value to that (no Time variable type exists)
  • Assign the time value to a text field (this one causes a pretty spectacular fail with lots of red ink and obscure numbers)
  • Build a formula on a time field value retrieved using a Get Record element such as HOUR, TEXT or MINUTE

But, that last one’s not so very far off what we did get to work. Essentially build formula fields on the Object that return the HOUR and MINUTE values of the time field as integers. That’s not very efficient, but it does work and you can read the hour and minute values and then have a Time value in your Flow to play around with.

So now we have that, we can make and populate our time picker.

You can probably work out from the picture exactly what you need to do, but here’s a little summary …

  1. Use the new (GA Summer ’21) Section component and create four columns within it. Columns one, two and three are 2 of 12 wide (this will make sense if you try to do this) and the last column is 6 of 12 wide.
  2. In the first column use a Display Text component to put the title of your time picker. It’s kind of hard to get the font to match and make it look like the other labels, but Verdana 11 and a dark grey (RGB 50:50:50) seems to get pretty close.
  3. The second and third columns are picklists. The first one has choices of 0 to 23 and the second in our case just has 0, 15, 30 and 45 which is precise enough for our use case. Of course you could use 0 to 59. If you don’t want to use a 24 hour clock it’s harder and you’d need an AM/PM picker in the last column which messes up the widths a bit.

And then this is where Summer ‘21 gives us another helping hand, because you can now set the default value of the picklist to the hour or minute value. That in turn means you can pre-populate the value of the time picker with the value of a record you want to Clone or Edit.

Superb. Now all we need to do is save it and we’re done.

Ha!

Because Flows aren’t particularly good at saving into Time fields either. You can’t just convert the Hour and Minute values into a TIMEVALUE because there’s no such function available in a Flow. However, after a bit of rummaging around I discovered that you can save a DATETIMEVALUE into a Time field and the date gets stripped out just leaving you with the time and there is a function available for that.

So, you make a little formula to do that. Here’s mine. You can choose any date you like.

DATETIMEVALUE (
    ‘2020-01-01 ‘
    & IF ({!StartHourInput}<10,’0′,”)
    & TEXT ({!StartHourInput}) & ‘:’
    & IF ({!StartMinuteInput}=0,’0′,”)
    & TEXT ({!StartMinuteInput})
    & ‘:00.000Z’
)

And then you can save that using a Create Record Element. One final ‘gotcha’ is that this only works if you try to save the record directly and it doesn’t work if you try to assign the value to a record variable in an assignment step. So, you can’t add records to a collection and save them all at once. Instead you have to go against best practice and start Creating or Updating records inside a loop, which is far from perfect but it does work.

And that’s it – a declarative time picker for Flows 😊