Referencing values from a table in a separate page

[Anthony_Gray]

• Goal: I want to take values from a table and have them appear in a separate page.

• Steps: I created a JS query that references localStorage but it's not working. What I want to happen is when you click on a row in the table, you go to the page in the second image and the values from the table in the first image appear in the fields in the second image.

[MiguelOrtiz]

Hey there @Anthony_Gray ,

You can achieve this without using a js query. The approach I would take is:

1. Create an event handler in your table so that on row select your container / page view changes.
2. In your second page, you can refer to all the values in the selected row by using the property {{ table1.selectedSourceRow }}

So for address it would be table1.selectedSourceRow.address, for chain table1.selectedSourceRow.chain, etc.

[Anthony_Gray]

When I do that, I get this error messag.e

[MiguelOrtiz]

Hi there @Anthony_Gray,

Ah sorry, I still need to get used to page being referred within a multipage app.

I'm not sure what is the best method to do this in a multipage app, you could set up a global variable, and setValue() once the row is clicked. You should be able to refer to the global variable from any page.

[Anthony_Gray]

Thank you!

[kelvin-reyes]

Referencing values from a table in a separate page

Goal: I want to take values from a table and have them appear in a separate page. Steps: I created a JS query that references localStorage but it's not working. What I want to happen is when you click on a row in the table, you go to the page in the second image and the values from the table in the first image appear in the fields in the second image. [Screenshot 2024-10-22 at 2.11.31 PM] [Screenshot 2024-10-22 at 2.11.40 PM]

Are you using multipage apps? If yes, you can follow this guide from docs. If not, you can try this solution.

[AJVancattenburch]

Just wanted to reinforce @MiguelOrtiz suggestion in creating a variable that's empty to store your row of data, and calling an Event Handler on the same action that sends you to another page.

• In the Edit Event Handler GUI, set the following properties;
  • Action: Set Variable
  • State: variableName
  • Method: Set value
  • Value: selectedSourceRow

[Anthony_Gray]

Can you show me what that looks like?

[AJVancattenburch]

Sure thing! I'll show you two different examples:

• The table component method, using either currentRow or selectedRow -- with and without setting a variable.
• The listView component method, using item;

First off, the table component method does not typically require the use of setting the value of a variable, but it can be done setting the id as an additionalScope upon triggering a query, if you're doing that as you're redirecting to your app.

Table Component Method (w/out setting a variable)

1. On your table, create a Row Action

2. On your Row Action, you can attach an Event Handler to it by pressing the + symbol, so click that symbol

3. Set up your Event Handler on your Row Action like so:

   • Action: Go to app
     --------- Go to app options ---------
   • App: folderName/targetAppName
   • Query params:
   • id: {{ currentRow.ID }} // or {{ tableName.selectedRow.ID }}

4. The required id that you seek will now be usable by referencing {{ urlparams.id }}

   Example image w/out setting a variable:

   

Table Component Method (setting a variable)

If you are firing a query that does something like open a frame (drawers, modals, sidebars) that contains that table row's information, and within that drawer/modal/sidebar you want to go to that user's profile or details page, set up your process like so:

1. Like we did in the last example, set up a Row Action and give it an Event Handler. Only this time, we will be setting up two Event Handlers. Set it up like so:

   Event Handler #1:

   • Action: Control component
     --------- Control component options ---------
   • Component: yourFrameComponentName
   • Method: Show

   Event Handler #2:

   Note: When creating this variable, just leave your value as null

   • Action: Set variable
     --------- Set variable options ---------
   • State: yourVariableName
   • Method: Set value
   • Value: {{ currentRow.ID }} // or {{ tableName.selectedRow.ID }}

Now, you can directly reference this variable like so

{{ yourVariableName.value }}.

if you attach a button within that modal/drawer/sidebar frame, you can fire and set up an attached Event Handler to that button to open your app like so:

• Action: Go to app
  --------- Go to app options ---------
• App: folderName/targetAppName
• Query params:
• id: {{ yourVariableName.value }}

Quick Example of passing variable when firing a query on trigger using additionalScope:

• Instead of firing your query directly in the GUI of an Event Handler (we will call it exampleList) set up the Event Handler as a Run script instead of Control query for your 'Action' type, and set it up like so:
  • Action: Run script

exampleList.trigger({
  additionalScope: {
    ID: yourVariableName.value
  }
})

ListView Component Method (using item)

If you place a button to your listView component instance (for example, let's say you have a container component within a listView component) with a data source from a data query called exampleList.

When we iterate over anything by adding components within the container instance within our listView, we use {{ item.column_name }} to display data for each container a.k.a. listView instance.

Steps to open profile/details page w/ a listView component:

1. Place a listView component in your app;

2. Give it a data source of exampleList (of course, change this name to the name of your actual data source);

3. Set the Primary Key to {{ i }};

4. Add a container component to your listView component;

5. Within that container component, add a button component;

6. Attach an Event Handler to that button within your container, and set it up like so;

   • Action: Go to app
     --------- Go to app options ---------
   • App: folderName/targetAppName
   • Query params:
   • id: {{ item.ID }} // or whatever your primary column key is that designates the ID you want to reference i.e. if you called it something like EMPLOYEE_ID etc.

   Example image using a listView component:

   

Hope this is helpful for you @Anthony_Gray and that one of these use cases can solve your current issue! Let me know if you have any other questions and happy coding!

EDIT: I apologize as it was early when I woke up and replied to this, and that you need to be passing your entire row of data. You can still do this, just pass the entire row like so:

• If using a table, pass {{ currentRow }} or {{ tableName.selectedRow }} instead of {{ currentRow.ID }} or {{ tableName.selectedRow.ID }}
• If using a listView, pass {{ item }} instead of {{ item.ID }}

It is worth noting though -- that just passing the ID should also still work as long as you're still working with the same data query on the following page. If not, simply pass the entire row (for tables) or item (for listViews).