How do I store a user selection to a cookie?

Hi guys, looking for some help and guidance on how to store a user’s preference into a cookie so that the page layout stays the same from page to page and from session to session.

In the video clip I show the top left-hand corner of a web page. The checkboxes are only shown here for the purposes of explaining what happens, normally they would be hidden as per the screenshot below.

What I want to do is store and re-use the selection made by the user, and make this selection persistent. So the ‘double chevron’ expands and reduces the left-hand menu, and the ‘phone’ hides or shows the top menu bar. The purpose of these options is to allow the user to increase the size of the main body of the screen where the important information is, in particular on smaller devices.

Screen_Trim.mp4 (586.3 KB)

ScreenCapture%201%202018-11-01

I am really struggling on how to do this in Wappler and am looking for some help and guidance. Here is the relevant code area that I currently have.

I have looked on DMXZone at things like ‘Managing Cookies’ and ‘Setting a Cookie and Filtering a Query Using Its Value’ to see if they could help but I’m getting nowhere fast. Help?

Hello @UKRiggers ,

of course you can do this …
way 1 .
you can get screen size then change style / class (hide or minimize left bar)

way 2 .
you can set cookie then change style/class

please check browser extension …

1 Like

Hi @s.alpaslan, I appreciate your answer but I don’t think you quite understand what it is that I am trying to ask. Maybe I haven’t explained myself very well. I understand the Browser extension and think it is very good but I’m not trying to automate this process depending on the device size. This is purely a user defined selection. So, for example, a user on a desktop machine may, after a while of using the system, decide to hide the top menu and use the expanded left-hand menu each time he uses the system. This may be a different set-up to the one used by his colleague sat next to him who is using a similar desktop machine. So the first user’s set-up preferences are stored in a cookie on his machine so that it opens in the same way as he left it the last time he used that machine. Does that help?

Hi @UKRiggers,
You can do this exactly using the state manager (cookie manager).

Create your cookie, in the cookie manager. Let’s say we call it - topmenu.
On your site (anywhere you like) add two buttons - “hide top menu” and “show top menu”.

Click the “hide top menu” button, then using the dynamic events > on click > cookie > set value. Add some value to it, let’s say “1”.

Now select your top menu, in dynamic attributes click > display > hide > when > select your cookie and add “== 1”:

The menu will be hidden if your cookie value == 1.

If you want to show it again, assign a dynamic event to “show top menu” button, which just removes cookie value.

3 Likes

Thanks @Teodor, I suppose where I was struggling is that I was trying to do this with one checkbox and toggling between on and off (1/0, true/false etc), whereas your suggestion is using two separate buttons. I could then hide the ‘other’ button depending which state it was in. I’ll have another go, cheers.

1 Like