How to interact with a specific repeated element in a repeater?

Ask the community
,
1

I have a form and a repeater on a page, where users can change their own data, all repeated elements that are connected to the database are updated, but other elements - that depends on the item values - are not changing.

For example: When users change their age, if it’s +18, an repeated element should expand, and if their age is more that 18, and they changed it to less than 18, their details in the repeater should collapse a particular section.

When the page is ready, it’ll collapse or expand accordingly, but what if the users changed their data?
Only the connected elements while the other elements won’t.

Is it clear enough? Please tell me if you need more explanation.

Help is appreciated.

2

Hi Ahmad,

If I’m understanding the issue correctly, the key to dealing with this is to use the at() function to create a selector function that has repeater row level scope and capture the data of that repeater row as well.

The following is some code that illustrates the approach when using a repeater of committees with a selection tag element in it that lists the committee roles. IconCommittee is an element in the repeater. The CollapseAllOthers function, as the name implies, collapses all other selection tags other than the repeater row that the user is on.

export function iconCommittee_click(event) {
    ShowHideRoles(event);
}
export function ShowHideRoles(event){
    let $item = $w.at(event.context);
    const data = $w("#rptCommitteeRoles").data;
    let itemId = event.context.itemId;
    let itemData = data.filter(item => item._id ===  itemId);
    if ($item("#stRoles").collapsed){
        CollapseAllOthers(itemData._id);
        $item("#stRoles").options = itemData[0].selTagData;
        $item("#stRoles").expand();
    } else {
        $item("#stRoles").collapse();
    }
}
export function CollapseAllOthers(ClickedId){
    $w("#rptCommitteeRoles").forEachItem(($item,itemData) => {
        if (itemData._id !== ClickedId){
            $item("#stRoles").collapse();
            $item("#stRoles").enable();
            $item("#boxEditRole").collapse();
        }
    })
}
3

Hi @tony-brunsman , thanks for your answer.

Will this code work with the .onAfterSave() event instead of the . onClick() event?

Also, what’s the itemId ?

let itemId = event.context.itemId;
let itemData = data.filter(item => item._id ===  itemId);

How did you get it? And how to get a specific item based on its data in the (itemData)?

I’m still confused and unable to select a specific item to evaluate its values.

I appreciate your answer a lot by the way. :kissing_closed_eyes:

4

The onClick is for an element in that repeater row, and that’s crucial for accessing the data in it. Since onAfterSave doesn’t generate an event parameter tied to the repeater, I don’t see how it could work.

What does return the connected data for a given repeater row is the following code utilizing the $item selector function (if the repeater is connected to a dataset):

$item("#dataset1").getCurrentItem()

The itemId is the _id value of the dataset or queried data for that row of the repeater.

5

So basically there’s no way to run a code on a specific item, the API only allows to get the current item only when the item is clicked directly, and the repeater doesn’t have an event handler that’s triggered when an item is updated, refreshing the dataset has no effect, since the element that needs to be changed isn’t connected to any field. Shame!

Whatever you want to do, you’ll always be limited to what the API offers.

I can map the repeater data and easily get the item that I want, but then what? There’s no way to get into its scoop and interact with the item’s repeated elements.

Anyway, thanks a lot Anthony.

6

@ahmadnasriya You can use the forEachItem function to get at the element values and the data tied to any row of the repeater.