Problems building components

Elements
1

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

2

can you share a simple example using the cloud

drop zone

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

put in whatever you want in first quotes and title area

3

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. :slight_smile:

4

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

https://docs.realmacsoftware.com/elements-docs/elements-language/component/language

5

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.

6

a bit like this

7

I use some alpine for this

8

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.

9

Yes, that seems related. This is my original stack: Barz-Stacks

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.

10

Thank you. I will look into it.

11

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.

13

try this

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

14

this was posted before not sure who posted it

15

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

16

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 :slight_smile:

17

@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

18

in use

19

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

Like

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

<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“

20

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

21

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