Discuss

Passing Values Between your Pages

On this page

Sometimes you need to pass values between different pages of your site. You can easily do this in Wappler using the State Management Component.

There are several ways of doing this - for example using a cookie or a session, but in this tutorial we will show you how to pass a form input value, to another page, using a session. Note: the same goes for any other value and not only for for inputs.

We prepared 2 really simple HTML pages - on both of them we inserted the App Connect and Bootstrap 4 Frameworks. On Page 1 we added a Bootsrap 4 container with a single column inside:

Screenshot_1|690x396

Let's add a form input there. Click the Insert Inside button:

Screenshot_2|690x396

And add a form input. We select the Text Input Form Group, but you can use any other input type as well:

Screenshot_3|690x396

Then, click the Insert After button, to insert another element after the text input group:

Screenshot_4|690x396

We add a Button. This button will be used to store our value in a session and send us to the next page:

Screenshot_5|690x396

Make sure the button type in the properties panel is set to button:

Screenshot_6|690x396

Customize the look and feel of the form input and the button as you like:

Screenshot_7|690x396

When you are done customizing them, select App and Add New Component:

Screenshot_8|690x396

Open the State Management category and select Session Storage Manager:

Screenshot_9|690x396

Then click the Define Session Storage Items button:

Screenshot_10|690x396

Click the Add New button:

Screenshot_11|690x396

And new variable. This is the variable which we are going to use to store the form input value:

Screenshot_12|690x396

Give it a name and click the Save button, we call it: myvalue:

Screenshot_13|690x396

Then, click the Add New Component button:

Screenshot_14|690x396

Open the Components category and select the Browser Component. This component is used for redirects between pages:

Screenshot_15|690x396

Now, as we defined the Session variable, we need to make the button store the text input value in it. Select your button:

Screenshot_16|690x396

Then in the properties panel, scroll down to Dynamic Events and click the Add New button:

Screenshot_17|690x396

Select Mouse and then on Click:

Screenshot_18|690x396

Then, click the dynamic action picker to select what happens on click:

Screenshot_19|690x396

On click we need to store the input value in the session variable and then redirect to the next page. So under Session Manager select Set and click the Add button:

Screenshot_20|690x396

Select the Name of your Session Variable from the Name dropdown:

Screenshot_21|690x396

And click the dynamic data picker to select its value:

Screenshot_22|690x396

Under the Text Input, select value:

Screenshot_23|690x396

Now the input value will be set as value for our session variable:

Screenshot_24|690x396

In order to redirect to the next page we need to select the Go To action, under the Browser component and then click the Add button:

Screenshot_25|690x396

Enter the URL to redirect to. NOTE that it needs to be wrapped in single quotes: 'page2.html' if you enter it manually:

Screenshot_26|690x396

Save page 1 and open your page 2. Our page 2 contains only a title and that's where we are going to show the Session Variable value.

In order to be able to access the Session Variable, you need to add the Session Storage Manager here as well. So select App and then click the Add New Component button:

Screenshot_28|690x396

Open State Management and select Session Storage Manager:

Screenshot_29|690x396

Then click the Define button:

Screenshot_30|690x396

Add new variable:

Screenshot_31|690x396

And call it the same way as the Session Variable we defined on page 1:

Screenshot_32|690x396

Now, your session variable is available in the Dynamic Data Picker everywhere on your page. In our example we will just bind it in the title. So we double click the title to enter the Edit mode, and then we select the dynamic data button in the inline toolbar:

Screenshot_33|690x396

Your Session Variable is available under the Session Storage Manager in the dynamic data picker. Select it and click the select button:

Screenshot_34|690x396

Save your changes, and save your page:

Screenshot_36|690x396

Here's the result:

ezgif-1-bc4abd674e4d|690x276