# Passing Row Value into a Component

**URL:** <https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142>\
**Category:** Ignition\
**Created:** [October 30, 2023, 3:29am UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142 "2023-10-30T03:29:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 3:29am UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/1 "2023-10-30T03:29:07Z")

</div>

What would be the correct way to pass a cell value to my Progress bar component?

Example:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/53312c53d9bc7379c82ec42e8774283736eaca8c.png)

I would like the LineID to be called upon in order to use it for an indirect tag reference in the Progress bar component.

Searching the forums is making me lean towards a message event handler script on the Progress bar component. If so, what would that look like?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 30, 2023, 6:47am UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/2 "2023-10-30T06:47:03Z")

</div>

Looks like... Perspective maybe? Is your progress bar a view? If so, create A param called rowData as an object and add the keys from the row dataset you want to pull in to use

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 30, 2023, 8:13am UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/3 "2023-10-30T08:13:02Z")

</div>

> [@dcan87](#):
>
> What would be the correct way to pass a cell value to my Progress bar component?

You don't have to. Progress bar is built into the Table component.

 ![Table progress bar](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/2/d23799b0180f271f218e5a45ab1aaea6ed9ce21d.png)

1. Make sure that you name the field. (It looks like you have.)
2. Tell it to render as a number.
3. Tell it to render numbers as progress.
4. Set the range.

For the range, I thought it would auto-scale based on the maximum value. I think this might only be for datasets and the sample table component data in this case is JSON. In your case it doesn't matter as long as you don't expect to display over 100%.

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 1:22pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/4 "2023-10-30T13:22:33Z")

</div>

Would that object 'rowData' be on the view, root, or table component?

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 1:23pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/5 "2023-10-30T13:23:58Z")

</div>

Thanks! Not sure how I missed that built in feature. Looking great just have to figure out my indirect binding for it now based on the 'LineID' value of the row.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 30, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/6 "2023-10-30T13:28:20Z")

</div>

What do you mean, indirect binding ?  
How are you populating your table ?

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 1:29pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/7 "2023-10-30T13:29:45Z")

</div>

Looking to do something like this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/5458cedbddf246b44767946a0c3e7371d5cf0f36.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 30, 2023, 1:30pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/8 "2023-10-30T13:30:54Z")

</div>

Oh, so the table rows are hardcoded ?  
Then you don't even need indirect binding, is the `LineID` is hardcoded, just hardcode the tag path too.

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 1:33pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/9 "2023-10-30T13:33:20Z")

</div>

The indirect would save me a little time since I could just copy/paste the binding to the 29 data sets.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 30, 2023, 1:34pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/10 "2023-10-30T13:34:56Z")

</div>

Then it might be easier to build the whole thing in a script transform on the `data` property.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 30, 2023, 2:11pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/11 "2023-10-30T14:11:13Z")

</div>

Why not make the `LineID ` a parameter for the view, and then use that in your indirect bindings. Then instead of copy/paste the binding 29 times, just use the same view and send the appropriate parameter value?

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 6:43pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/12 "2023-10-30T18:43:33Z")

</div>

When you say parameter for the view do you mean props.params, and by view you are implying the perspective view the table is in?

Not sure I understand why I wouldn't have to still copy the binding 29 times since all the data sets already exist in my table?

Can you create an example of what you mean?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 30, 2023, 6:46pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/13 "2023-10-30T18:46:37Z")

</div>

> [@dcan87](#):
>
> Not sure I understand why I wouldn't have to still copy the binding 29 times since all the data sets already exist in my table?

Perhaps, I don't understand what you mean when you say Dataset. When I say dataset, I mean an object containing potentially multiple rows of data, which is often bound to a tables data property. Is that what you mean?

> [@dcan87](#):
>
> When you say parameter for the view do you mean props.params, and by view you are implying the perspective view the table is in?

Yes.

> [@dcan87](#):
>
> Can you create an example of what you mean?

I can, but it will not be until later, unfortunately. If no one else has offered help by then, I will see what I can throw together.

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 6:55pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/14 "2023-10-30T18:55:21Z")

</div>

Wondering if you can help me solve this next problem. I am doing an event script for my table onRowClick so that a Popup action happens with more details of the progress.

I have the onClick working and Popup windows is already configured. The issue comes when I am trying to pass the LineID value of the selectedRow.

{/root/OEEProjectTable.props.selection.selectedRow}  
-The above only returns the index value of the selected row.

{/root/OEEProjectTable.props.data[0].LineID}  
-This actually returns a LineID value and passes it into my Popup but is limited to being hardcoded to row 0 data.

Is there a way I can combine both to have the value of the data in the selected row?

The property binding selector hierarchy:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b77af270460b5abf893098f086eeb883028b887.png)

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [October 30, 2023, 7:22pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/15 "2023-10-30T19:22:59Z")

</div>

> [@lrose](#):
>
> Perhaps, I don't understand what you mean when you say Dataset. When I say dataset, I mean an object containing potentially multiple rows of data, which is often bound to a tables data property. Is that what you mean?

For simplicity I hardcoded with direct tag binding earlier similar to this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/8/98b1cdfb230ec1b5f134bb74bcc92d569b9ad33d.png)

So in my actual non-test table I have 29 data sets (rows).

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 30, 2023, 7:41pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/16 "2023-10-30T19:41:15Z")

</div>

‘Data[0]’ is actually exactly what you need. It will contain the data from the annexed row.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [October 30, 2023, 7:46pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/17 "2023-10-30T19:46:10Z")

</div>

So what @lrose is saying is that instead of making one binding at a time, you can create one script binding on the `data` prop. It accepts an Ignition [Dataset](https://docs.inductiveautomation.com/display/DOC81/Datasets) or a dictionary structure.

Quick overview of setting one up:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/3/031a1fcf6e1c6ce6c63e8fb5ae7efc6002b86ea4.png)

I'm assuming here you have a custom prop with just the base tag path, "[Application]OEEProjectTracker". Here you'd create a project script function that takes that path and:

1. loops over all the tag paths to make a tag list
2. grabs all the data from those tags at once using `system.tag.readBlocking`
3. packs those into a list of rows, e.g. [areaName, lineID, quantity, progress]
4. converts that list into a dataset using `system.dataset.toDataset()`
5. returns that dataset.

Your binding would then automatically apply the dataset to the table, giving the same results you already have but a lot less manually.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [October 30, 2023, 7:49pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/18 "2023-10-30T19:49:56Z")

</div>

@dcan87 Specifically, `props.selection.data[0]`.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [October 30, 2023, 8:06pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/19 "2023-10-30T20:06:17Z")

</div>

Pretty much, except, I would probably opt for a `runScript()` expression rather than a script transform. More performant.

---

<div class="post-metadata">

**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\
**Post date:** [October 30, 2023, 8:09pm UTC](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142/20 "2023-10-30T20:09:34Z")

</div>

I was actually about to look up which one was more performant, I know they're technically both terrible for performance if overused but I never remember which is less bad.

EDIT: Yeah, found the thread. Something about transforms adds a really nasty bottleneck to execution. Nothing that matters if your script only executes once every second, but adds up if you have multiple.

> [@Tag binding or expression to read dynamic list of tags](https://forum.inductiveautomation.com/t/tag-binding-or-expression-to-read-dynamic-list-of-tags/76610/16):
>
> Collected some overhead stats. Added a sixth binding for comparison, and made them all trigger from a common reference. The new expression transform looks like this: nanoTime() - {value} It is notably faster than the other transforms. To make the recorder() run smoothly, I made a trigger timestamp with now({this.custom.pace}) and set pace to 200. Then I modified the transforms' first stages to look like this: asList( {this.custom.trigger}, nanoTime() )[1] The non-transform tests of run…

As a bonus, with `runScript()` you'd be able to set up a polling rate naturally, whereas with the script transform, you'd have to call `now()` in the base expression since otherwise it will never refresh.

[Next page](https://forum.inductiveautomation.com/t/passing-row-value-into-a-component/81142.md?page=2)
