How to use primary key throughout multiple pages

Wappler General How To
#1

Hi Wappler Community!

I wasn’t too sure how to word this question, so I created an unlisted 2-minute video on YouTube. If you would consider taking the time to watch and help me with my project, it would be much appreciated.

If you don’t want to watch the video my question is: how I make it so when I click to another page, I’m strictly looking at a granular view of one company’s details. I have multiple different tables that only relate to one company, and I want a view where I can see all the tables about one company. The video makes this very clear if my problem seems convoluted.

Thanks for all the help thus far and I look forward to some responses.

#2

Have you seen this video ( https://youtu.be/4HLBcQIohdQ?si=vTHV0gA2t3URmnZJ ) on the YouTube channel. Think this goes over what you want to do.

2 Likes
#3

Using URL parameters is one of the main methods for passing values between pages. Wappler has a component called Query Manager that allows you to define the parameters on the details page, then you can use that define param and its value in Server Connect actions to return the item based on the value in the parameter.

#4

You can pass variable using URL or you can use session component to pass the variable without using URL.
You just add session component and create an if variable. It will be passed to all the page with the session component.

1 Like
#5

You can also pass variables through the Local Storage Manager. This will put the variables into the browser and they will stay there until deleted or the browser data is reset.

Might want to take a look at this too:
https://docs.wappler.io/t/creating-a-shopping-cart-with-the-data-store-component/17465

2 Likes
#6

Just to add. Using URL parameters allows you to have history and navigation. I don’t believe that is possible with session or local storage. Those are typically better for storing data about the user or caching data that they’ve accessed, not for passing data between pages or page state.

Think about the need to share a link to a specific data item that opens the detail page for it. If you use local storage, then accessing the detail page is not possible without first going to the list or overview page.

1 Like
#7

The example used is for a shopping cart, but is it possible that for a company when more details is clicked all information about one company will be stored on another page through this method as well?

#8

I would just pass the company id and then run a server connect on the subsequent page to pull the complete company details from the server, rather than passing all the details via the URL query parameters.

Alternatively, you could just show/hide sections of your page to make it appear that it’s a new page but in reality everything is on the same page. This negates the need for passing info around to different pages.

#9

Hi Heather, how would I go about keeping it all on one page? I have 11 different tables of information and each will have a multitude of different inputs from different employees. Will this be too much for one page?

#10

Hi Parker,

Have a look at - https://docs.wappler.io/t/creating-single-page-apps-spa/6583

I have about 30 server connects in my SPA page and it runs very smoothly. The initial page load is maybe a bit slower than if I was using multiple pages, but then everything is instant after that as everything is already available on the page.

Mine is set up a bit different to what is in the link above as I was already using a different method when I started using Wappler, but there are lots of people using SPA in that manner successfully.

Happy to help further.

#11

I believe that I have SPA linked as it has in the article linked for NodeJS. I have my routes linked so when I click it brings me to that page. I’m just struggling to make it so that my details page is about the specific company I select. I am confused as how parameters work, if you could point me in the direction of articles for that that’d be very helpful.

#12

Content pages have access to Server Connects, variables, etc from the main page. From one of your videos it looks like you’re recreating the server connects on the content page. You don’t need to do that. So however you’re filtering the data on your main page you can use the same method on your content page without needing to pass anything around. I hope that makes sense!

1 Like
#13

so you’re saying just put all my server connects on my layout page and everything will link together through data detail? No need to set params or anything of that nature.

#14

Yup. It’s like magic. :slight_smile:

#15

Is there a way for me to quickly transfer everything over? Or should I essentially start from scratch

#16

Transfer from where to where?

#17

Don’t I need to take my server connect on my page to my format page?

#18

You can just copy the code.

So, for instance, if you had created these server connects in your content page…

image

You could copy the corresponding code that looks like this…

image
image1775×380 83.6 KB

Over to your layout page. Then those server connects are available in all your view pages.

Is that what you were asking?

#19

Is there a way to reload a previous version of a project, because I’ve started moving stuff around and now I’ve created a bit of a mess.

#20

Been there done that!

Are you using the GIT manager? If not, it won’t help you right now, but going forward it’s extremely useful. You can commit the project to GIT at different points and then revert if need be.