Is is possible to cache a whole page using local storage, with App Connect State Management?

Eg a category is selected from a menu, running a database query, and a page of results is returned, using the Data Traversal extension. This page includes several lists to refine the search result - eg by subcategory or price. These lists are generated dynamically using the GroupBy filter.

This all works well until a link is clicked on an item, to display a detail page. Returning to the results page, the set of records which were displayed changes - because the page was generated using Javascript, using one of the dynamically-created list items, not the original database query. I can restore the paging etc., using URL parameters. Is there a way to restore the page content, by caching it and then retrieving it from the cache?

Hi Tom,
You can store the form field values in local storage ... then use them to bring the values, when you are back.

Thanks Teodor

There are some forms which need to have their values retained - eg options selected for sort order and items to show per page. These are not a problem as I can use URL parameters to restore these values.

The issue is with the main page content and menus. Is there a way of using local storage to store the contents of div elements, so the same items reappear on the page - items which appear using javascript (not the direct results of a database query).

Your showcase demo here - showcase.dmxzone.com/FurnitureStore/index.html - can serve as an example. If a checkbox were selected and a link on one of the images was clicked - to go to a detail page - when you returned to the page, the products selected before you left the page would no longer be selected. Is there a way using App Connect State Management to store that state - so the selection is retained?

I realise there aren't in fact any links on the images, but if you right-click an image and choose 'view image' and then click the back button, you will see what I mean. In this case I would like to store the contents of <div id="repeat1"> and reload it when returning to the page. This sounds like something an extension for 'state management' would do, but I don't know if it does.

Hi Tom,
As i replied in my previous post - you CAN store the form values in the local storage vars, the same way as in URL params.
I don't understand what do you mean by "to save the content of a div" - if this is a repeat region and its values are filtered, then they are filtered somehow already - just store the filter values in local storage and read them when you are back on the page - just the same as using URL params.

I appreciate I can store form values in local storage - thanks. However I'm not using a form to select records. I'm using links, in a series of dynamically generated lists, eg here is one of the lists:

[I get: 'WebKnight Application Firewall Alert' when I add the code. I'll try in another post]

.. which results in a list of links like this:

Less than £100 (20)
£100 - £199 (7)
£200 - £299 (2)
£300 - £399 (1)
£800 - £899 (1)

I was thinking I could store the items which appear when a link is clicked (the div containing the items) and restore them when returning to the page.

I can't type the code in the message, so here's an image:

What is the "filterResults" used in "filterResults.setValue()"?

It's part of data view 'filter' attribute. These are the data view properties I'm using. It all works as I want, except for the issue above:

<dmx-data-view id="data_view1" dmx-bind:data="serverconnect1.data.query1" dmx-bind:sorton="query.sortorder.split('-')[0]"
filter="(price_range == filterResults.value ||
date_range == filterResults.value ||
author == filterResults.value ||
keywords == filterResults.value ||
filterResults.value == &quot;&quot;)"
pagesize="15" dmx-bind:page="query.page" dmx-bind:sortdir="query.sortorder.split('-')[1]" dmx-bind:pagesize="query.perpage"></dmx-data-view>

My question was - is the filterResults a variable or - how it is defined, what is it on your page?

It is a variable, created in App Connect.

I've sent you a link to a demo which hopefully explains the issue more clearly.

Hi Tom,
I understand the issue - just needed to clarify what this filterResults is.

The workflow here is:
1. You already have your variable, used to filter the results (nothing is required for it)
2. Add state management > local storage > and define a var there
3. Bind the local storage variable value as a value for the value you use to filter results.
4. On click set the value of the local storage variable (instead of the app connect variable)
when you go back, the local storage variable will still keep the value so the results displayed will be the same.

Hi Teodor,

Many thanks for your help. I've more or less got all of this working now.

This sort of development takes quite a bit of trial and error in my experience - particularly because the interface doesn't seem to cope with more complex expressions and there's no easy way to find out what the syntax etc. is.

The only thing I haven't managed to do as far recreating the page state is to keep the menus in their initial state. There are several sidebar menus, dynamically generated from the initial query, which are used to filter the results (using Data View). These menus can be expanded or collapsed (as I demonstrated in the demo). If it were possible, adding a second dynamic event to the links - to store a variable to control these menus - might be solution. However I believe this is not an option at the moment. Perhaps there's another way of doing it.

The only other issue is some extra flickering when the page reloads (generally, this seems to be one of the biggest problems developing pages in this way, rather than straight PHP). I'll try to track the cause down.

Thanks again,
Tom

Hi Tom,
Actually in the latest App Conenct version, you can add more than one dynamic event, not fully integrated in the UI yet. You can manually add them, like:

dmx-on:click="geo1.getCurrentPosition();var1.setValue('abc')"

As for page flickering i need to see a live link, where i can inspect what is flickering exactly.

Hi Teodor,

That's good to know about the dynamic events. That will be very useful.

The page flickering is probably due partly to the pre-loader I'm using. But I'm using this to avoid the rendering issues - curly brackets with expressions appearing (eg {{content}} ) as the page loads. I know there are ways to help with this, but I'm not sure what the best method is. There doesn't seem to be a perfect solution.

I've experimented using Inner Text/HTM and divs with dmx-show="!serverconnect1.state.executing" (is dmx-show="!serverconnect1.state.processing" a good option too?). I've seen in some of your demos use of the opposite approach: using 'mx-show="serverconnect1.state.executing" (ie without the '!') as an attribute to a div with a loader image. Is this a better method? George mentioned another idea: that divs should initially use 'display:none'.

Some information about the best options would be helpful, and the whether it's better to use positive or negative conditions (dmx-show when true/ hide when not) etc.. Perhaps it's just a matter of trial and error.

I'll send you a link to the page when I put it on an accessible server.

Thanks,
Tom

Hi Tom,
The most used way to prevent FOUC is to use inner text/inner HTML options.

Thanks Teodor,
I think it was mentioned somewhere that App Connect is based on vue.js. If so, something like this might be a good feature:
vuetips.com/v-cloak-directive-hides-html-on-startup
(unless it's already available).

Hi Tom,
You can add the following attribute to your body tag: dmx-app ->

<body dmx-app id="..."> 

then in your css just add:

[dmx-app] { display: none } 

This should hide the page, until the data is loaded.

Thanks Teodor.

Are you just adding

dmx-app

or in addition to

is="dmx-app"

?

I think I've got this to work, but I suppose there's still going to be some flicker as the content is finally displayed, even if there's no FOUC. Perhaps it's inevitable that creating dynamic pages like this won't be as smooth as straight PHP, at least in some cases. I think using a page loader is probably the best solution.

Hi Tom,
Yes, it is just a separate attribute, so in addition to is="" attribute.

Thanks Teodor

Hi Tom,
We will probably release a loader extension for App Connect, so that the page will be displayed when the data is loaded.

Hi Teodor
This sounds like a good idea.

Hi Tom,
please check the newly released app connect loader

I have - it works very well.