# 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2FAeEwSTvOAAymY7oxfCtF%2F27.png?alt=media&#x26;token=11b2db09-f871-429f-bc39-898c868a8729" 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2FUs4GjyFn21c5ik2tNTDP%2F28.png?alt=media&#x26;token=1bf20b81-fe43-4043-b413-6263fb6e8db3" 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2FwBNxQYU0Fky5eHhLmMAL%2F29.png?alt=media&#x26;token=0e1bf0ec-5d6d-4141-80fe-01ce45d70d3d" 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2FgLge8lbDn0i8X9zpqHKB%2F30.png?alt=media&#x26;token=2f681015-87ec-465a-aeb2-79952961226c" alt=""><figcaption></figcaption></figure> <figure><img src="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2Fc5INb3GMd6GG6K1u4W7F%2F31.png?alt=media&#x26;token=50dc9385-3f90-486b-9730-cdc03a7b64c7" 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2F0ZfLIQTa4bauWQpBbmbG%2F32.png?alt=media&#x26;token=3e22f888-1d70-4208-a817-67ee903dc102" 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="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2F6QyQF8dPlw3KFSI6dq9M%2F33.png?alt=media&#x26;token=d37a4b2f-372c-45fb-8096-350db400a8e5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1090343189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtXOHB12wdZ2DTTb4DtQh%2Fuploads%2FyF4fn9s5UtdGbI1GRpbd%2F34.png?alt=media&#x26;token=0f5ed08a-b62b-410b-9dc9-5f4a3a4cd96a" 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.
