Help Needed with Time Input and Saving in Repeating Groups Using Toolbox Plugin

[paulb]

Hello Bubble Community,

I’m working on building a dynamic hours of operation module for a brick-and-mortar business. The goal is to allow the business to set their opening and closing times for each day of the week, which will later enable scheduling employees based on these hours.

Data Types:

1. (bH)businessHours

• Fields:
  • day (Number): Represents the day of the week (1 for Sunday, 2 for Monday, etc.).
  • timeSlots (List of (bH)TimeRange): A list of time slots for that day.

2. (bH)TimeRange

• Fields:
  • openingTime (Date): The opening time for the time slot.
  • closingTime (Date): The closing time for the time slot.
  • businessHours ((bH)businessHours): Reference to the associated businessHours.

UI Structure:

• Repeating Group (RG businessHours):
  • Type of content: (bH)businessHours
  • Data source: List of (bH)businessHours entries (one for each day of the week).
• Within Each Cell of RG businessHours:
  • Group (Group (bH)businessHours-day):
    • Contains a button to add a new time slot.
    • Contains another repeating group (RG TimeSlot).
• Repeating Group (RG TimeSlot):
  • Type of content: (bH)TimeRange
  • Data source: Current cell's (bH)businessHours's timeSlots
• Within Each Cell of RG TimeSlot:
  • Group (Group TimeSlot):
    • Contains dropdowns for selecting hours, minutes, and AM/PM for both opening and closing times.

The Issue:

Initially, I used Input elements with the content format set to “Date” for entering the opening and closing times. However, Bubble’s Input element with “Date” format only allows users to select dates, not times, which is not suitable for my use case.

To resolve this, I replaced the Input elements with Dropdowns to allow users to select hours (HH), minutes (MM), and AM/PM. I also created Option Sets for time selections:

• Option Set: OS - TimeSlots
  • Options for times in half-hour increments (e.g., “12:00”, “12:30”, …, “11:30”).
• Option Set: OS - TimeAM/PM
  • Options: “AM”, “PM”

Using the Toolbox Plugin:

I used the Toolbox plugin’s Expression element to combine the selections from the dropdowns into a Date object that can be saved in the database.

Expression Element Setup:

• Expr Start Time:
  • Type of result: Date
  • JavaScript code:

javascript

Copy code

(function(){
  var hours = Number(DropdownStartHourValue);
  var minutes = Number(DropdownStartMinuteValue);
  var ampm = "" + DropdownStartAmPmValue;

  if (!hours || !minutes || !ampm) {
    return null;
  }

  if (ampm === "PM" && hours !== 12) {
    hours += 12;
  }
  if (ampm === "AM" && hours === 12) {
    hours = 0;
  }

  var date = new Date();
  date.setHours(hours);
  date.setMinutes(minutes);
  date.setSeconds(0);
  date.setMilliseconds(0);

  return date;
})();

• Note: Dynamic data is inserted using Bubble’s “Insert Dynamic Data” feature, referencing the dropdowns for hours, minutes, and AM/PM.

Problem Encountered:

Despite multiple attempts to correct the JavaScript code in the Expression elements, I keep encountering errors like:

vbnet

Copy code

ReferenceError: PM is not defined

I have tried various methods to ensure that the AM/PM value is treated as a string, such as:

• Using "" + DropdownStartAmPmValue
• Wrapping the dynamic data in quotes
• Converting the value using String()

However, the error persists.

Workflow Details:

• When the user clicks “Save Changes”:
  • I use the Orchestra plugin to trigger workflows in each cell of the repeating group to save the time slots.
  • Event: “Trigger musicians under Maestro” action is used to trigger Musicians A in each cell.
• In the workflow “When Musicians A is Revealed”:
  • I schedule an API workflow save_time_slots with parameters:
    • timeRange: Parent group's (bH)TimeRange
    • openingTime: Expr Start Time's value
    • closingTime: Expr End Time's value
• Backend API Workflow (save_time_slots):
  • Action: Make changes to a thing
    • Thing to change: timeRange (passed as a parameter)
    • Fields to set:
      • openingTime: openingTime (parameter)
      • closingTime: closingTime (parameter)

What I’ve Tried:

• Variable Names:
  • Ensuring variable names in the JavaScript code are valid (no spaces or special characters).
  • Using camelCase for variable names.
• Dynamic Data Insertion:
  • Correctly inserting dynamic data into the JavaScript code without wrapping it in quotes.
  • Using concatenation ("" + dynamicData) to ensure the value is treated as a string.
• Error Handling:
  • Adding checks for null or undefined values.

Request for Assistance:

I’m seeking help to resolve the error in the Expression element and ensure that the opening and closing times are correctly calculated and saved in the database.

Specific Questions:

1. How can I correctly reference the AM/PM dropdown value in the Expression element’s JavaScript code to avoid the ReferenceError?
2. Is there a better approach to convert the dropdown selections into a Date object suitable for saving in Bubble’s date fields?
3. Are there any known issues with using the Toolbox plugin’s Expression element in this context?

Additional Context:

• This module is intended to allow the business to set their hours of operation dynamically.
• The ultimate goal is to enable scheduling of employees based on these hours.

Any guidance or suggestions would be greatly appreciated.

Thank you for your help!

[ihsanzainal84]

You can adjust a Bubble date object natively. Just use the some date :change hours/minutes operators in an expression.

[paulb]

Thanks. Actually figured out a fix. Used the air date/time plugin and then just used autobinding and it works more efficiently than what I was describing.