Code & Embedded Logic

This template includes a few lightweight custom code scripts, carefully embedded to improve user experience (UX) and functional interactivity. All logic is implemented via the Toolbox Plugin, using JavaScript to Bubble and Run JavaScript actions. Below is a breakdown of what this logic does, how it works, and how you can modify or remove it if needed.

---

1. Scrollbar Hiding for Design Purposes

Objective: To improve the aesthetic and prevent visual clutter on certain interfaces — especially within the reservation module on the landing page (index) — scrollbars on Repeating Groups are intentionally hidden.

How it works:

• A simple <style> tag is injected using a HTML element directly on the page.

• The script targets a Repeating Group using the ID Attribute you’ll find set on the element.

• The scrollbar is visually hidden, but the scroll functionality remains fully intact.

Note: Removing this HTML element will restore the native scrollbar without affecting any functional logic.

In total, there are only 3 HTML injections on this template. They are all present in the index page, in the group named : G:bookingModuleDateTime

Here's an example :

The “HTML” element is present on the page (invisible to the online visitor). It requires a #...which refers to a Repeating Group.

The repeating group has an Attribute ID equivalent to that called in the HTML element, so the scroll bar is not displayed.

Here's the code used:

<style>
  # {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 11 */
  }

  #date::-webkit-scrollbar {
    display: none; /* Chrome, Safari et Edge */
  }
</style>

The 2 other HTML injections are in the selection of the start and end times:

---

2. Scroll to Selected Date in Repeating Groups

Objective: To enhance navigation within horizontally-scrolling date pickers by automatically centering the selected date on click.

Automatic scrolling on the backoffice page and on the backofficemobile page.

How it works:

1. Each date cell in the Repeating Group has a unique ID Attribute, based on the formatted date (e.g., id05/26/25).

1. When a user selects a date, a workflow triggers a JavaScript action to scroll the Repeating Group targeted with an ID attribute.

1. The script ensures that the clicked date is smoothly centered in the visible viewport.

Important: This logic relies on specific workflow steps and ID attributes. ⚠️ If the workflows or element IDs are deleted or altered, the scroll functionality may break

Here is an example of the javascript that is executed :

var parentElement = document.getElementById("scroller");
var specificChildElement = document.getElementById("id");

if (!parentElement) {
    console.log("Error: The 'scroller' element does not exist in the DOM!");
} 

if (!specificChildElement) {
    console.log("Error: The 'scroller' element does not exist in the DOM!");
} else {
    specificChildElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

To adapt or debug:

• Make sure the RG has an ID (e.g., scrollerRG).

• Make sure each cell has a correctly formatted and unique ID.

• If you rename the ID or custom state, update the JavaScript accordingly.

---

Final Notes

These embedded scripts are minimal and efficient — they do not introduce dependencies or third-party codebases. You can remove or adjust them freely based on your design or UX preferences, but make sure to test the related workflows before doing so.