# Relation Columns are not accessible from the details \> fields \> option

**URL:** <https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683>\
**Category:** Ask for Help\
**Created:** [July 7, 2024, 7:33pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683 "2024-07-07T19:33:29Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 7:33pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/1 "2024-07-07T19:33:29Z")

</div>

I have a table of _tags_ which is related to another table - _instructions_

What I need to do is to list which instructions are used by the tag when I selected the tag detail screen.

Under Options I do not have the ability to select the rel2instructions column from the tag detail screen editor

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/d/5d6132f360bf2e54d9a6661cbebab7c0e89fa43b.png)

the relationcolum from tags to instructions

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

I want the user to be able to select the tag to see what other instructions share the same tag.

Ideas?

thanks

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 7, 2024, 7:57pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/2 "2024-07-07T19:57:31Z")

</div>

You can’t display a relation in the fields component. You’ll need to display the relation using a collection instead.

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 7:58pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/3 "2024-07-07T19:58:12Z")

</div>

thanks much. Been Beating my head against that wall a lot.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 7, 2024, 8:00pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/4 "2024-07-07T20:00:15Z")

</div>

Ya, in classic apps we used to be able to display a relation in a “basic table” component, but that didn’t come over when Glide introduced Pages (current version of Glide apps).

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 8:07pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/5 "2024-07-07T20:07:24Z")

</div>

BIG fan of yours btw. Your vids are a game changer

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 7, 2024, 8:10pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/6 "2024-07-07T20:10:13Z")

</div>

Thanks for that! 😊 Let me know if there’s other content you’d like to see.

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 8:14pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/7 "2024-07-07T20:14:05Z")

</div>

I have quiet the request list… be careful what you wish for. One thing I’d like to do (think there’s a tutorial on this?) is to create a traditional tag button with the word on a pill shaped image rather than the image and the word.

Is this supported already and I am just not finding it?

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 8:39pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/8 "2024-07-07T20:39:09Z")

</div>

worked great btw. I am going to use this extensively in the app. Cheers

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 7, 2024, 9:33pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/9 "2024-07-07T21:33:16Z")

</div>

Did the pill need to be clickable?

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 11:19pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/10 "2024-07-07T23:19:39Z")

</div>

yes on the clickable button

---

<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:** [July 7, 2024, 11:21pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/11 "2024-07-07T23:21:31Z")

</div>

What do you mean by “on the clickable button”? So in the end you mean it has to be clickable and lead you to some sort of screen, or whatever type of action you need?

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 11:24pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/12 "2024-07-07T23:24:56Z")

</div>

yes - I have tags now that loads the detail screen for each tag which includes a description and the other tables that reference the tag

---

<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:** [July 7, 2024, 11:35pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/13 "2024-07-07T23:35:38Z")

</div>

So can a record hold multiple tags?

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 11:37pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/14 "2024-07-07T23:37:59Z")

</div>

yes

---

<div class="post-metadata">

**Author:** ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)\
**Post date:** [July 7, 2024, 11:39pm UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/15 "2024-07-07T23:39:30Z")

</div>

Example - Tags could be, veggies, grains, …

Recipes are tagged with the ingredients they use.

If I click the grains tag I see a list of all the recipes that use grain

I have it working now but with images and text for the tag style

---

<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:** [July 8, 2024, 12:15am UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/16 "2024-07-08T00:15:46Z")

</div>

I have a working prototype for you. Will record a video during today my time.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 8, 2024, 2:32am UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/17 "2024-07-08T02:32:32Z")

</div>

> [@Carl\_Johnson](#):
>
> yes on the clickable button

Here’s what I came up with. It involves a horizontal cards component that uses a relation to a unique list of tags as the source. When clicked, it will show all the items with that tag. It’s styled with CSS (see below):  
https://www.loom.com/embed/e57a4772fdbe45eb80b991b139aa200d

```auto
.tagsList [data-testid="cc-card"] {
width: fit-content !important;
}

.tagsList .card {
padding: 0 3px;
text-align: center;
}

.tagsList p {
font-size: 0.75rem;
}

```

---

<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:** [July 8, 2024, 2:50am UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/18 "2024-07-08T02:50:07Z")

</div>

> **[Dynamic tags](https://docs.lowcode.agency/recordings/vWJXanLgiEcvDrdMOsR1)**

Here’s an alternative approach using custom component.

**Prompt**

> Create a list of tags in a pill-style that would use the “Tags” column as input, each element delimited by a comma, justify-content: start, align-items: start.
> 
> Once clicked, determine the chosen tag’s name, set the chosen tag’s name to the “Viewing” column, wait 100ms, and execute the “Show tag” action.

**Code**

```auto
<html>
  <head>
    <script src="//unpkg.com/alpinejs"></script>
    <style>
      /*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.flex{display:flex}.cursor-pointer{cursor:pointer}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.justify-start{justify-content:flex-start}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-full{border-radius:9999px}.bg-\[\#613DC7\]{--tw-bg-opacity:1;background-color:rgb(97 61 199/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}
    </style>
  </head>
  <script>
        const S = Alpine.reactive({"tags":null,"viewing":null});
        S.init = () => {
          window.parent.postMessage({ type: "start-component" }, "*");
        };
        Alpine.data("state", () => S);
        let updateTimeout = null;
        Alpine.effect(() => {
            let updates = {};
            // Alpine needs to know about all the fields to watch them
            if (S.tags !== null) updates.tags = S.tags;
            if (S.viewing !== null) updates.viewing = S.viewing;
            // Debounce updates to prevent spamming the parent window
            if (updateTimeout) {
              clearTimeout(updateTimeout);
              updateTimeout = undefined;
            }
            updateTimeout = setTimeout(() => {

              const updatesNoProxy = JSON.parse(JSON.stringify(updates));
              window.parent.postMessage({ type: "set-state", state: updatesNoProxy }, "*");
            }, 50);
        });
        function showTag() {
      window.parent.postMessage(
        { type: "trigger-action", state: "showTag" },
        "*"
      );
    }
        function setState(newState) {
          for (const key in newState) {
            if (S[key] !== newState[key]) S[key] = newState[key];
          }
        }
        window.addEventListener("message", event => {
          switch (event.data.type) {
            case "set-state":
              const state = event.data.state;

              setState(state);
              break;
            case "set-theme":
              const theme = event.data.theme;

              const root = document.querySelector(&apos;:root&apos;);
              root.style.setProperty(&apos;--accent-color&apos;, theme.colors.accent);
              root.style.setProperty(&apos;--foreground-color&apos;, theme.colors.foreground);
              root.style.setProperty(&apos;--background-color&apos;, theme.colors.background);
              break;
            default:
              break;
            }
        });
  </script>
  <body
    x-data="state"
    class="flex items-start justify-start bg-transparent"
  >
    <div
      class="flex flex-wrap justify-start items-start space-x-2"
    >
      <template x-for="tag in tags.split(',')">
        <div
          class="bg-[#613DC7] text-white rounded-full px-4 py-2 cursor-pointer"
          @click="viewing = tag.trim(); setTimeout(() => showTag(), 100)"
          x-text="tag.trim()"
        ></div>
      </template>
    </div>
  </body>
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child"></script>
</html>

```

Updated: Succesfully changed, plus styling the text (font size + weight).

```auto
<html>
  <head>
    <script src="//unpkg.com/alpinejs"></script>
  </head>
  <style>
  body {
    font-size: 12px;
    font-weight: 600;
  }
</style>
  <script>
    const S = Alpine.reactive({
      tags: null,
      viewing: null,
    });
    S.init = () => {
      window.parent.postMessage(
        { type: "start-component" },
        "*"
      );
    };
    Alpine.data("state", () => S);
    let updateTimeout = null;
    Alpine.effect(() => {
      let updates = {};
      // Alpine needs to know about all the fields to watch them
      if (S.tags !== null) updates.tags = S.tags;
      if (S.viewing !== null) updates.viewing = S.viewing;
      // Debounce updates to prevent spamming the parent window
      if (updateTimeout) {
        clearTimeout(updateTimeout);
        updateTimeout = undefined;
      }
      updateTimeout = setTimeout(() => {
        const updatesNoProxy = JSON.parse(
          JSON.stringify(updates)
        );
        window.parent.postMessage(
          { type: "set-state", state: updatesNoProxy },
          "*"
        );
      }, 50);
    });
    function showTag() {
      window.parent.postMessage(
        { type: "trigger-action", state: "showTag" },
        "*"
      );
    }
    function setState(newState) {
      for (const key in newState) {
        if (S[key] !== newState[key])
          S[key] = newState[key];
      }
    }
    window.addEventListener("message", (event) => {
      switch (event.data.type) {
        case "set-state":
          const state = event.data.state;

          setState(state);
          break;
        case "set-theme":
          const theme = event.data.theme;

          const root = document.querySelector(":root");
          root.style.setProperty(
            "--accent-color",
            theme.colors.accent
          );
          root.style.setProperty(
            "--foreground-color",
            theme.colors.foreground
          );
          root.style.setProperty(
            "--background-color",
            theme.colors.background
          );
          break;
        default:
          break;
      }
    });
  </script>
  <body
    x-data="state"
    class="flex flex-col items-start justify-start bg-transparent w-full"
  >
    <div
      class="flex flex-wrap items-start space-y-2 w-full"
    >
      <template x-for="tag in tags.split(',')">
        <div
          class="bg-[#613DC7] text-white rounded-full px-4 py-2 cursor-pointer mr-2 mb-2"
          @click="viewing = tag.trim(); setTimeout(() => showTag(), 100)"
          x-text="tag.trim()"
        ></div>
      </template>
    </div>
  </body>
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child"></script>
</html>

```

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

---

<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:** [July 15, 2024, 2:50am UTC](https://community.glideapps.com/t/relation-columns-are-not-accessible-from-the-details-fields-option/74683/19 "2024-07-15T02:50:16Z")

</div>

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