Is it possible to have non-fixed items in a repeater?

Ask the community
,
1

I realize that the beauty of a repeater is that it repeats, but here’s my problem:

We want to display children’s artwork from a collection. For each item we have three explanatory texts. We used to use “Description Dots” app to place three markers on each child’s artwork that, when clicked, would display the explanatory text. I would like to use a repeater instead, but the location of the three markers will not be the same on each item.

How can I do this?

Thanks.

2

What you are trying to achieve is a "show-more / show-less function and could be like this one for your purposes…

Do not forget to replace all used Element-IDs with your own.

  1. Text-Element-ID
  2. Button-Element-ID
  3. Repeater-ID

This code will work on the same page, where your Repeater is located at.

//---------------User-Interface------------------------
const DescriptionLength = 500; // <--- set here your SHORT-DESCRIPTION-LENGTH
//---------------User-Interface------------------------

$w.onReady(function (){
    $w('#myREPEATER').onItemReady(($item, itemDAta, index)=>{
         let fullText = itemData.description;
         let shortText = fullText.substr(0, DescriptionLength) + "...";
         $item("#yourTextElementIDhere").text = shortText;

         $item('#yourButtonElementIDhere').onClick(()=>{
               if ($w('#yourTextElementIDhere').text === shortText) {
                  $w('#yourTextElementIDhere').text = fullText;
                  $w('#yourButtonElementIDhere').label = "Show less"; 
               } 
               else {
                  $w('#yourTextElementIDhere').text = shortText;
                  $w('#yourButtonElementIDhere').label = "Show more";
               }
         });
    }); 
});

There are a lot of posts to be found related to this topic…

3

I think I understand the show more / show less function, but I don’t think that solves my issue. I have been working off of this example: https://www.wix.com/velo/forum/coding-with-velo/how-to-set-default-value-to-null-in-table
where in effect we have multiple maps each with three pin points, but the pin points are not at the same coordinates on each map. Clicking on the pin point displays the text - that’s good, But the pin point’s location needs to be unique on each map in the repeater. Possible, or no?

4

Sorry → missunderstood your issue.:sweat_smile:
Ohh, you are even refering to my own example, damn ! :sweat_smile:

5

Not sure if i understand your issue right, this time, but if you wan to show different pinpoints on different locations, you have two options.

  1. Placing a “pinpoint” on all of your wished loacations and giving them a inique ID (hide all pinpoints by default on map and show each of them, when needed).
    Generating if-else-queries which will identify the right selected/choosen pinpoint on repeater.

  2. Perhaps using the animation API.

But without a visual screenshot, it is difficult to imagine, what you have in front of your eyes.

6

@russian-dima

1368×1254 209 KB

7

Repeaters might not be the way to go, I think.

8

@rushfamilymail
As already suggested, you can generate a grid of “PinPoints” on your Repeater and indexing them IDs = (1,2,3,4,5,6,7,8,9…) or something like -->$item(‘#pin0’), "$item(‘#pin1’), "$item(‘#pin2’), "$item(‘#pin3’), "$item(‘#pin4’), "$item(‘#pin5’) and so on…

Your repeater has also an INDEX !

$w('#myReapeater').onItemReady(($item, itemData, INDEX)=>{
	if(INDEX===0) {$item('#pin0').show('fade')}
});

or regarding to your itemData…

$w('#myReapeater').onItemReady(($item, itemData, INDEX)=>{
	if(itemData==="whatEver") {$item('#pin0').show('fade')}
});
9

@russian-dima okay, thanks!

10

@russian-dima Actually, this is great. Thank-you for sharing your logic. I know next to nothing about code and am teaching myself as the need arises. This was very helpful and it’s working.

11

@rushfamilymail :wink: Don’t forget to like it if you really liked it​:grin: