Example: Input Repeaters

#Repeater #Text #Dropdown #RepeaterInput #InlineActions #GlobalActions


Demonstrates

Links for this example

About this example

Demonstrates using input components in a Repeater. The Inline actions tab shows how to do inline actions using buttons embedded in the repeater items. The Global Actions tab has buttons on the page outside of the Repeater that apply actions to the selected Repeater items.

7 Likes

Hey Yisrael,
Thanks for sharing this awesome stuff
I have a request for you
Can we use $w(‘#dataset’).remove() when the Dataset is write mode only
i am building a form with a multiple product can be added/removed by the user

I am trying to do using dataset
There will be 2 dataset both are in write mode
Main dataset and Product dataset
On the product dataset there is a reference field for the main dataset which will be added using setField value
this product dataset will be connected to a repeater

we can add a new product form (container) using $w(‘#dataset’).new()
but we can’t remove CONTAINER unless DATASET read and write mode

I tried filtering the product dataset with the id of main dataset
but we can’t get the id using $w(‘#dataset1’).getCurrentItem()._id; since the dataset is write only mode
(we can only get the id of the dataset inside the repeater ( itemData._id ) still can’t filter the dataset write only mode)

currently i am using full code to add/remove the repeater it will be much easier if we can do this just by connecting the dataset

1 Like

Hello Yisrael ,

Thanks for the example. Is this working with date pickers as well?

If not can you recommend a good work around. I guess you could make some populated selection fields…

Also, if not is this in the works?

Many thanks, talk to you soon.

Kind regards,

Chris

I don’t see any reason why it shouldn’t work with data pickers, although I haven’t tried it myself. I guess I will someday.

@yisrael-wix The date picker(calender window) isn’t showing outside the container of the repeater
So we need to create a enough space for the container to show the full date picker

2 Likes

Hey Yisrael

The example isn’t available anymore?

Sorry. I’m having issues with this example. Trying to work out with development the details.

1 Like

@yisrael-wix : Many thanks for having a look at this, I’m assuming that you are trying to get the calendar picker pop-ups to show up in thin repeater strips?

@chrs-ppls No - haven’t tried calendar pickers. There are other issues with input components in Repeaters that I’m trying to work out with the developers.

@yisrael-wix What issues specifically are you trying to work out? I’m using a lot inputs in repeaters.

Regarding the date picker, the pop-up will not show up if the repeater is not high enough to show the entire pop-up. Please see a test site below, I’m not sure how to give you a link to the editor, but I will add the page code as well.

https://chrsppls.wixsite.com/testsite

$w.onReady(function () {

 // Repeater and data structure variables
 const repeaterTypes = ["text", "selection", "check", "date"]
 let repeaterArray = []
 let repeaterItem

// Fill the data object for the repeater
 for (var i = 0; i < repeaterTypes.length; i++) {
        repeaterItem = {}
        repeaterItem._id = i.toString()
        repeaterItem.type = repeaterTypes[i]
        repeaterArray.push(repeaterItem)
    }
    
    // Fill the repeater with data
    $w("#inputRepeater").data = repeaterArray
    
    // Open the respective type of input box on a repeater item
    $w("#inputRepeater").forEachItem(($w, itemData) => {
        $w("#" + itemData.type + "Label").text = itemData.type
        $w("#" + itemData.type + "Box").expand()
    })
});

@yisrael-wix Hey Yisrael, one more quick question. I have page that is taking almost 1 minute to load. It is not something that I can readily put on the forum, but it is a key component of my website. How can I get some help in addressing this. We are getting close to doing a product launch and I have already done a couple of client presentations with the site, however, I really have to do something about the speed as even during the presentation my clients and I are sitting there watching a blank screen. Many thanks, talk to you soon. Chris

@chrs-ppls I would really suggest that you contact the Wix support team regarding the page load time, as they will be better equipped to address this subject.

If you feel that this is Wix Code issue, then post the Editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

@yisrael-wix … Well I have called them like 4 times already and the canned answer is always, “since there is code on the page we will have to ask you to turn to the Wix support forum.”

I know that certain things however are not a code issue, but just the fact that my page has code on it pretty much gives the support team an instant disqualifier from helping me at all. For example, below is a picture of a page where the text gets messed up on the load.


As soon, as I right click and attempt to have a look at the console in chrome, it automatically snaps into place and there are no errors shown in the console.


That is not a coding error, there is something happening on the back-end there, I think.

Perhaps you can help me with this, but quite frankly I have literally spent hours with the support team and sent multiple emails back and forth even after they said that they would escalate the issue to the development team. After about 5 emails back and forth however, I found out that the email traffic was with a regular support agent and not someone from the development team, after which I again got the canned, please turn to the forum guidance.

Many thanks in advance.

How do I open the example? I get a 404 with that url.

Sorry, I think this example is currently undergoing maintenance and is unavailable. Instead, refer to the following example:

To-Do List

Let users create, filter, and update their own customized to-do list . The same functionality can be created using data binding or with the Wix Data API.

@yisrael-wix I needed something like this, so I looked at your example. I have 3 remarks:

  1. if you fill out 2 rows, leave app, go back in and add a row, it always inserts below row 1. I tried sorting " .descending(“_updatedDate”, no luck. Why does it always insert below 1?
    2)page Inline, async function addNewOnEmpty() is, as far as I can see, never called
  2. as stated above, DatePicker doesn´t work (no calendar). Maybe Wix could increase rowheight temporarily when DatePicker opens? Not beautiful, but it should work. Now DatePicker is more as less useless, unles you make your repeater rows very, very high.
1 Like

let it= $item(‘#dataset1’).getCurrentItem();
console.log(it);

it always shows first row,how can i get different rows whenever context changes

Great Job!

@barb What happens to the Datepicker? What doesn’t work?

You can try putting the Datepicker in a Box . A Box should behave correctly.

You could use separate Dropdowns for Month, Day, and Year - with a check that the date is valid.

You can also use a plain TextInput element and validate it using a regular expression. Here’s one example . A search will invariably turn up a bunch more possibilities.

2 Likes

A Datepicker in a repeater that isn’t tall enough to show the calendar doesn’t work because the calendar doesn’t pop up.

thank you for your suggestions. There were many postings but I didn’t find one that showed how to create a plain text box with an example like you included. I will try this and will post my results when I get it working.

Many thanks for a speedy reply!