Add a Time Input Element to a Flexcard (Managed Package)

For the managed package runtime, add a Time Input element on a Flexcard to enable users to select a formatted time from a list of time intervals. From the Properties panel, configure properties and custom attributes, add an action, and add conditions.

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. From the Build panel, click Inputs, and drag the Time element onto the canvas.
3. (Optional) From the Properties panel, update the element name in the Element Name field.
4. Configure properties common to all Input elements:

   • (Optional) In Field Binding, bind the value of the input element to an existing or new data field. See Bind a Flexcard Input Value to a Data Field (Managed Package).

   • In Field Label, enter the label that appears next to the element.

   • (Optional) In Placeholder, enter temporary text that displays inside the input field and which suggest to the user what content to enter.

   • (Optional) Check Required if the user must enter or select a value for this input element.

   • (Optional) Check Read-only to disable the ability to modify the input values.

   • (Optional) In Help Text, enter helpful text about the purpose of the input field. This feature adds an info icon (i) next to the element's label, which when hovered over displays the text.

5. (Optional) Click into Default Value to select a default input value from a merge field. Or, enter a value as plain text. Enter a default value in the format specified in Time Format. For example, if the format is hh:mm a, enter 03:30 pm.
6. (Optional) Update the Time Format. Default is hh:mm a, which displays as 3:30 am or 3:30 pm. See date-fns format for format options.
7. (Optional) To limit the user to a specific time range, set the Minimum Time and Maximum Time.

   Select a time in the format specified in Time Format. For example, for 3pm, if the format is hh:mm a, enter 03:00 pm.

   Leave Maximum Time empty for the last interval of the day such as 11:30 pm. Leave Minimum Time empty for the first available interval, such as 12:00 am.

8. (Optional) In Time Interval, update the time intervals from the default 30 to another increment. For example, enter 15 to display a list of 15-minute increments, such as 12:00, 12:15, 12:30, 12:45.
9. (Optional) To configure additional properties available to the element, click + Add New in the Custom Attributes section. For each new attribute, perform the following tasks:

   1. Click into the Attribute field to select from an attribute in the dropdown. See TimePicker Lightning Web Component ReadMe (Managed Package) for available attributes.

   2. In the Value field, enter a value for the attribute.

10. To execute an action when a user interacts with the input element, click + Add Action, and see Add a Click Event to a Flexcard Element (Managed Package).
11. (Optional) To add conditions that must be met for the element to display, see Add Conditions to a Flexcard Element (Managed Package).
12. (Optional) To style your element, click Style to open the Style panel, and see Style Flexcard Elements (Managed Package).

• Flexcards Time Input Element Properties (Managed Package)
  For the managed package runtime, time Input element properties are configurable in the Properties panel when you select a Time Input element in the Flexcard Designer. With the Time Input element, enable users to select a formatted time from a list of time intervals.