Forum | Appery.io

How can I add search results to another page?

For example, I have a search page that searches for TV Shows by name. I want the user to be able to click the TV Show they search for and add it to their "My Shows" page.

It seems like it should be simple, but I can't figure it out. Please help!

Hi Alex,

Please take a look here:
:: http://docs.appery.io/tutorials/build...
:: http://docs.appery.io/tutorials/build...
:: http://docs.appery.io/tutorials/build...

Thanks for the quick response! I will check it out

I got this to work, but it is only letting me add one variable on the page. Also, if I try to add a second one, it requires a refresh to show the new show and it replaces the old one.

Any suggestions?

Hello!
Save JSON array into localStorage and parse it on page. Here are some examples https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...

Thanks, Maryna. I have looked at and messed around with the examples you provided, but I am still not sure where and how I am supposed to add/convert this JS to work for my app.

Since I am using a "Search" page, and adding the result to the "My Shows" page, do I need to do something different?

I only have a service on my "Search" page, no service on "My Shows" page.

Next steps should help:

1 get "show chosen" event with given id(you are implemented it already).

2 in this event handler you have to add following javascript:

pre
code
//here is id of element that's user clicked on.
var id = ...

var storedShows = localStorage.getItem("storedShows");

if(!storedShows)
storedShows = "{}&quot

storedShows = JSON.parse(storedShows);
storedShows[id] = {};
localStorage.setItem("storedShows", JSON.stringify(storedShows));
/code
/pre

3 In the second page add "load" event handler with js and fill it by following code:
pre
code
var storedShows = localStorage.getItem("storedShows");
storedShows = JSON.parse(storedShows);

//Add code which restore selected show in the previous page

for(var i in storedShows)
console.log("stored show is = " + i);
/code
/pre

You can add more information directly in LSV but it's better to use databaseService to query selected "show" from DB.

Just a bit of clarity might help. Here is what I implemented before:

searchPage:
On "mobilelist_19" click, set LSV. (var name = Shows, bind to component = yes, target = series_name, Property Name = text), then navigate to mainPage.

mainPage:
On "mainPage" load, set Property (component name = mobilelistitem_27, property name = text, read from LSV = yes, value = Shows)

My interpretation of what you are saying:

Step 1: I do not need to change anything with what I already implemented.
Step 2: I add a "click" event to "run js" action and paste the code you provided. How do I know what to put in for the var id?
Step 3: I add a "load" event to the page with the "run js" action and paste the code you provided.

I have done some work with it, but when i put a var id in for the "...", I get a var not defined.

(apologies for my basic JS knowledge)

Hi Alex - I recommend you to to pass this tutorial: http://docs.appery.io/tutorials/build...

A lot of questions will disappear after.

Thank you, this helped a lot. I now have a pretty good system set up using the API and setting local storage variables.

But I am still having difficulty getting the page to show multiple LSV's. I can not figure out how to display all of the shows the user adds in the LSV (it currently only shows one). I understand that I need a JSONarray, and that it has to be parsed on the page. Where do I even put it this code? In the data tab or design tab? I am trying to understand how to use it, but I have little experience with JS.