Best way to work with $record

[labiangashi-prosperoware]

Hi everyone,

I am having some issues working with the $record attribute inside Repeaters...

I have a form (created with a Repeater widget) and it has many records (represented by $record) but I am having some issues controlling them correctly.

For example, when I press a button next to the record, I want that specific record to be chosen and represented in $record. Am I doing it incorrectly or am I missing something crucial? Sometimes, that $record is not chosen and something else is instead. What is the correct and effective way to select the records I want inside the repeater widget?

Thanks.

[mstijak]

Yes, this is supported. You can use the second argument in the onClick callback method to retrieve the store for that particular record.

<Button onClick={(event, instance) => { console.log(instance.store.get('$record')); }} />

It's common to use destructuring to make it a bit shorter.

<Button onClick={(event, { store }) => { console.log(store.get('$record')); }} />

If you don't use the store provided with the callback, $record will always point to the last record rendered.

[labiangashi-prosperoware]

I found the issue and don't know whether this is a bug (might be).

So here's the thing, I have (in this case) three form fields with each one having a tooltip attached to them. All the tooltips have a alwaysVisible property set to true and the form fields are lookups.
Here's the initial DOM:

After I open the lookup, one of those absolute positioned elements disappeared and the tooltip is gone forever....

Is there a workaround for this and should this be reported as an issue? (Eventhough it looks like an edge case to me but it can happen)

[mstijak]

Please provide a fiddle reproducing the issue. It's very hard to figure it out based on the description you provided.

[labiangashi-prosperoware]

@mstijak
https://fiddle.cxjs.io/?f=q6oagJ0T

It apparently is happening when the field is required, if it is and it triggers the validation, the tooltip never shows again.

[labiangashi-prosperoware]

That kind of makes sense since the validation tooltip overrides the one on the component so it is a little difficult to maintain both... Do you have any suggestions for a workaround though?

[mstijak]

Ah, I know what happens. One widget can have only one tooltip, so the error tooltip takes over when the field becomes invalid. Maybe you can wrap the field in a div and put the "alwaysVisible" tooltip on that div. You can use a LabeledContainer - https://docs.cxjs.io/widgets/labeled-containers if you encounter problems with labels.

…

On Mon, Nov 15, 2021 at 12:16 PM Labian Gashi ***@***.***> wrote: That kind of makes sense since the validation tooltip overrides the one on the component so it is a little difficult to maintain both... Do you have any suggestions for a workaround though? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#904 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADJZ4XSWOTOA7FJN2KSPP3UMDTYLANCNFSM5IBKG76Q> .

[labiangashi-prosperoware]

Yep, that solved the issue! I initially thought it had to do with the lookup field itself but then found out it's all about the tooltip and the alwaysVisible property.

Wrapping them both around a <div> fixed the issue, I'll mark this as answered, thanks!