# Problems building components

**URL:** <https://forums.realmacsoftware.com/t/problems-building-components/50354>\
**Category:** Elements\
**Created:** [August 29, 2025, 2:31pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354 "2025-08-29T14:31:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 2:31pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/1 "2025-08-29T14:31:55Z")

</div>

Hey guys,

I am trying to build my first element component. I took the examples, setup a new component, added it and now my pain starts.

Sometimes the new component is shown just empty and is displayed as unknown in the overview. Disabling and enabling the element in the settings seem to fix it sometimes, but not always.

It’s an element component with a collection of items (which later shall include drop zones)

Any idea what I can take a look at to debug?

And second question: how can I give each drop zone a unique id, when increasing the amount of items in the collection? Something like @each and using iteration number?

Cheers Maik

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 2:38pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/2 "2025-08-29T14:38:20Z")

</div>

can you share a simple example using the cloud

drop zone

```auto
 @dropzone("Name", title: "Name")

```

put in whatever you want in first quotes and title area

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 2:50pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/3 "2025-08-29T14:50:21Z")

</div>

I can share something this evening.

Can I use something like an iterable number in the name?

I saw @each has something like that but I have no clue how to use it. 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 2:55pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/4 "2025-08-29T14:55:57Z")

</div>

depends on what you are trying to do, example uploaded will help

[https://docs.realmacsoftware.com/elements-docs/elements-language/component/language](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language)

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 3:27pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/5 "2025-08-29T15:27:49Z")

</div>

Ok. Will send it later. I am going to recreate some of my stacks as elements. In this case as a first start the Content Switcher. The idea:

I need a set of drop dropzones where I can put in any content. Each dropzone is uniquely identified and hidden.

Another component will be used as activator. Clicking on that component will trigger some DOM manipulations like hide and show.

Therefore the activator will have to target all dropzones and hide them. Also will it use an id of one of the dropzones to show that one.

As said, sample will follow later.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 3:40pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/6 "2025-08-29T15:40:41Z")

</div>

a bit like this

> [@Swap component](https://forums.realmacsoftware.com/t/swap-component/50224/8):
>
> sorted a few thing edit view works better now all transparent

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 3:43pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/7 "2025-08-29T15:43:21Z")

</div>

I use some alpine for this

> **[Start Here — Alpine.js](https://alpinejs.dev/start-here)**

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [August 29, 2025, 3:55pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/8 "2025-08-29T15:55:04Z")

</div>

if you look at Dev Diary 15 video it shows basic of naming and structuring custom components and is what I used to start with. Hope this helps.

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 3:55pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/9 "2025-08-29T15:55:54Z")

</div>

Yes, that seems related. This is my original stack: [Barz-Stacks](https://www.barz-stacks.eu/stacks/content-switcher)

A lot of my Stacks work with those dropzones and need to be somehow recreated. But I need a clean start to have it going on.

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 3:56pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/10 "2025-08-29T15:56:39Z")

</div>

Thank you. I will look into it.

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 4:23pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/11 "2025-08-29T16:23:55Z")

</div>

Here’s a very rudimentary component based on the examples, which simply doesn’t work. I believe this must be really something stupid I am overseeing.

> **[Dropbox](https://www.dropbox.com/scl/fi/q0yk55vqraq9ylwqn90py/Content-Switcher.elementsdevpack.zip?rlkey=kqf2yfk081nwkcrembzwf367o&st=uuqs59xp&dl=0)**

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 4:50pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/13 "2025-08-29T16:50:50Z")

</div>

try this

[https://www.dropbox.com/scl/fi/sdvcq7rbkrqzm8c3qq07j/Link-Collection.elementsdevpack.zip?rlkey=c2pu8wm5cfm2k5fzqgo1pa4o0&st=wswkdboh&dl=0](https://www.dropbox.com/scl/fi/sdvcq7rbkrqzm8c3qq07j/Link-Collection.elementsdevpack.zip?rlkey=c2pu8wm5cfm2k5fzqgo1pa4o0&st=wswkdboh&dl=0)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 4:54pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/14 "2025-08-29T16:54:53Z")

</div>

this was posted before not sure who posted it

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 6:19pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/15 "2025-08-29T18:19:30Z")

</div>

That’s the default example from RMS which I used to do an adoption for my needs 😉

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 29, 2025, 6:21pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/16 "2025-08-29T18:21:40Z")

</div>

> [@barz-stacks](#):
>
> It’s an element component with a collection of items (which later shall include drop zones)

Elements doesn’t support creating dropzone’s from within any type of loops.

If you let me know what you’re trying to do, I can try and point you in the right direction 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 6:26pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/17 "2025-08-29T18:26:58Z")

</div>

@ben @barz-stacks

I preload load them then drop in, in this case equal position around a circle, with controls to move each one etc

first one offset using the controls

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 6:33pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/18 "2025-08-29T18:33:46Z")

</div>

in use

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 7:18pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/19 "2025-08-29T19:18:33Z")

</div>

The idea is to have sets of “Containers”. Each container shall be programmatically be hidden or shown.

Like

```auto
<div class=”my-container my-container-1”>
   droppedOtherComponentsForContainer1
</div>

```

```auto
<div class=”my-container my-container-2”>
   droppedOtherComponentsForContainer2
</div>

```

I want to create a number of div-containers and have the user put in any combination of components.

I then afterwards want to hide all and show only one specific div-container. Like pressing “Show my-container-1“ and it first hides all my-container class Dom-elements and then only shows all containers with class “my-container-1“

---

<div class="post-metadata">

**Author:** ![barz-stacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/barz-stacks/32/3644_2.png) [@barz-stacks](https://forums.realmacsoftware.com/u/barz-stacks)\
**Post date:** [August 29, 2025, 7:23pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/20 "2025-08-29T19:23:18Z")

</div>

And @ben , can you tell me what I am doing wrong with the component at all, that it is not correctly loaded and shown?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 29, 2025, 7:31pm UTC](https://forums.realmacsoftware.com/t/problems-building-components/50354/21 "2025-08-29T19:31:39Z")

</div>

So would that be multiple triggers or a dropdown list and are the hidden containers in the same place or in separate locations

[Next page](https://forums.realmacsoftware.com/t/problems-building-components/50354.md?page=2)
