# Custom Code Component Help

**URL:** <https://community.glideapps.com/t/custom-code-component-help/75356>\
**Category:** Ask for Help\
**Created:** [August 1, 2024, 3:44pm UTC](https://community.glideapps.com/t/custom-code-component-help/75356 "2024-08-01T15:44:13Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 1, 2024, 3:44pm UTC](https://community.glideapps.com/t/custom-code-component-help/75356/1 "2024-08-01T15:44:13Z")

</div>

Need help writing a pin to a text field in my database. The below code generates a 10 key pin pad for employees to enter their pin which then has follow on workflows to clock in/clock out. 2 questions:  
1- how can I modify the code to write to the field  
2- how do i modify the code to incorporate actions

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/e/fe27221be901d2b4af89fd2add7e3ca49e701466.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2024, 12:12am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/2 "2024-08-02T00:12:52Z")

</div>

You can use AlpineJS to bind your “data” variable to the code. Also make sure you add the right actions in the action section just under your “content”, then specify them in the code as well.

However, I’m not sure why you don’t just use a number entry and normal Glide buttons to do this.

---

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 2, 2024, 12:27am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/3 "2024-08-02T00:27:40Z")

</div>

Do you have an example of this? I’ve searched and haven’t found a good way to simply use glide buttons an dhave it formatted. i"ll give this a try.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2024, 12:30am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/4 "2024-08-02T00:30:24Z")

</div>

> [@Clock in and out for workers](https://community.glideapps.com/t/clock-in-and-out-for-workers/74971/7):
>
> Here’s a recording for you.

What do you mean by “have it formatted”?

I think you also participated in that thread.

---

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 2, 2024, 12:34am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/5 "2024-08-02T00:34:35Z")

</div>

When I place a number entry component on the page, no number pad pops up. This application will have the clock in page displayed on a tablet. Unless the number pad pops up when published and using the actual tablet?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e8a145c80f21be1db39ce0263b4645804f9c3fed.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2024, 12:43am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/6 "2024-08-02T00:43:40Z")

</div>

It should pop up when you click on the entry itself on the tablet.

---

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 2, 2024, 1:05am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/7 "2024-08-02T01:05:15Z")

</div>

Worked like a charm on the tablet. If you do have a moment though, can you share how I would go about modifying the code? I’d still like to learn how to have the custom component code interact directly with a field in the database.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2024, 1:19am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/8 "2024-08-02T01:19:14Z")

</div>

It kind of depends on your use case. Let’s say for this:

> **[Thinh Dinh on LinkedIn: On my first Weekend Workshop post, Glide themselves...](https://www.linkedin.com/posts/thinhcdinh_on-my-first-weekend-workshop-post-glide-activity-7219685988787212288-5314?utm_source=share&utm_medium=member_desktop)**
>
> On my first Weekend Workshop post, Glide themselves left a comment to say: "Considering the possibilities with the new component are virtually infinite, we'd…

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Set Standard Hours</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js"
      defer
    ></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .switch-input {
        width: 3rem;
        height: 1.5rem;
      }
      .dot {
        top: 0.125rem;
        left: 0.125rem;
        width: 1.25rem;
        height: 1.25rem;
      }
      .dot-inside-open {
        transform: translateX(1.5rem);
      }
    </style>
  </head>
  <body class="bg-gray-100 p-4 sm:p-8">
    <div
      x-data="businessHours()"
      x-init="initializeHours"
      class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md"
    >
      <h1 class="text-2xl font-bold text-gray-800 mb-6">
        Set Standard Hours
      </h1>
      <p class="text-gray-600 mb-6">
        Configure the standard hours of operation for this
        location.
      </p>
      <div class="space-y-4">
        <template x-for="(day, index) in days" :key="index">
          <div class="flex items-center space-x-4">
            <div
              class="w-28 font-semibold text-gray-700"
              x-text="day"
            ></div>
            <label
              class="inline-flex items-center cursor-pointer"
            >
              <div class="relative">
                <input
                  type="checkbox"
                  x-model="hours[day].isOpen"
                  class="sr-only"
                  @change="updateJSON"
                />
                <div
                  class="switch-input rounded-full shadow-inner transition-colors duration-200 ease-in-out"
                  :class="{ 'bg-blue-600': hours[day].isOpen, 'bg-gray-200': !hours[day].isOpen }"
                ></div>
                <div
                  class="dot dot-inside bg-white rounded-full shadow absolute transition-transform duration-200 ease-in-out"
                  :class="{ 'dot-inside-open': hours[day].isOpen }"
                ></div>
              </div>
              <span
                class="ml-3 text-gray-700"
                x-text="hours[day].isOpen ? 'Open' : 'Closed'"
              ></span>
            </label>
            <template x-if="hours[day].isOpen">
              <div class="flex items-center space-x-2">
                <select
                  x-model="hours[day].open"
                  class="form-select w-24 border-gray-300 rounded-md shadow-sm"
                  @change="updateJSON"
                >
                  <option value="">Select</option>
                  <template
                    x-for="time in timeOptions"
                    :key="time"
                  >
                    <option
                      :value="time"
                      x-text="time"
                    ></option>
                  </template>
                </select>
                <span class="text-gray-700">TO</span>
                <select
                  x-model="hours[day].close"
                  class="form-select w-24 border-gray-300 rounded-md shadow-sm"
                  @change="updateJSON"
                >
                  <option value="">Select</option>
                  <template
                    x-for="time in timeOptions"
                    :key="time"
                  >
                    <option
                      :value="time"
                      x-text="time"
                    ></option>
                  </template>
                </select>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>

    <script>
      function businessHours() {
        const days = [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];

        let hours = days.reduce((acc, day) => {
          acc[day] = { isOpen: false, open: "", close: "" };
          return acc;
        }, {});

        const timeOptions = generateTimeOptions();

        function generateTimeOptions() {
          const options = [];
          for (let hour = 0; hour < 24; hour++) {
            for (
              let minute = 0;
              minute < 60;
              minute += 15
            ) {
              const time = new Date(
                2000,
                0,
                1,
                hour,
                minute
              );
              options.push(
                time.toLocaleTimeString("en-US", {
                  hour: "numeric",
                  minute: "2-digit",
                  hour12: true,
                })
              );
            }
          }
          return options;
        }

        function initializeHours() {
          if (S && S.open) {
            try {
              const savedHours = JSON.parse(S.open);
              for (const day in savedHours) {
                if (hours.hasOwnProperty(day)) {
                  hours[day] = savedHours[day];
                }
              }
            } catch (error) {
              console.error(
                "Error parsing saved hours:",
                error
              );
            }
          }
        }

        function updateJSON() {
          if (S) {
            S.open = JSON.stringify(hours);
          }
        }

        return {
          days,
          hours,
          timeOptions,
          initializeHours,
          updateJSON,
        };
      }
    </script>
  </body>
</html>

```

I update the field using the updateJSON function, referencing the variable name and set the component-saved variable value to it.

In the case above, I was having to generate a JSON before saving. On use cases where a direct value can be written, it can be a bit easier.

---

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 2, 2024, 1:21am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/9 "2024-08-02T01:21:27Z")

</div>

Ok. in this case, it would be writing directly to a text or number field. so it may be alittle easier.

---

<div class="post-metadata">

**Author:** ![Alger\_Bradley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alger_bradley/32/63597_2.png) [@Alger\_Bradley](https://community.glideapps.com/u/Alger_Bradley)\
**Post date:** [August 2, 2024, 1:24am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/10 "2024-08-02T01:24:01Z")

</div>

This is insanely impressive btw. Awesome work!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2024, 1:48am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/11 "2024-08-02T01:48:11Z")

</div>

I’m trying to do it every weekend to post haha. It’s been super fun.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 9, 2024, 1:48am UTC](https://community.glideapps.com/t/custom-code-component-help/75356/12 "2024-08-09T01:48:35Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.