# 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`

<figure><img src="/files/PhTtkN9XkWdtg1I2gL5V" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/mvzHsVHRXx9xy4C5MiUS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/TKMffM3tTJbLOGhy0r5Q" alt=""><figcaption></figcaption></figure>

**Here's the code used:**

<pre><code>&#x3C;style>
  #<a data-footnote-ref href="#user-content-fn-1">date</a> {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 11 */
  }

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

</code></pre>

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

<div><figure><img src="/files/fXRA6Y2CIQmOHuFq7agL" alt=""><figcaption></figcaption></figure> <figure><img src="/files/1csQLAyz79MOSgpC7hF0" alt=""><figcaption></figcaption></figure></div>

***

### 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`).

<figure><img src="/files/hKeIn301CShaWkO927c4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/24ghbol00qzvIOIVVJIb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/QlinilwXSPX828g1jYnK" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**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
{% endhint %}

**Here is an example of the javascript that is executed :**&#x20;

<pre><code>var parentElement = document.getElementById("scroller");
var specificChildElement = document.getElementById("id<a data-footnote-ref href="#user-content-fn-2">Current cell'sdate:formatted as 5/28/25</a>");

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' });
}

</code></pre>

**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.

[^1]: This passage must be modified with the Attribute ID of the Repeating group on which the scroll bar is to be hidden.

[^2]: This is dynamic data that calls on the group that has the date.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bookit-2.gitbook.io/bookit-template-bubble/getting-started/quickstart/code-and-embedded-logic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.