Build it with Tim - How do I save values to local storage? (Ep. 13)

Webinars On Demand
#1

Hey everyone :wave:

This weeks Build it with Tim is how to use CSS classes with Display Rules to take your Form to the next level!

In this episode, we’ll take a look at:




Got a suggestion or wondering how to build something? Make sure to let me know here :point_down:

3 Likes
#2

Hi Tim, thanks for this. It gave me an idea on a use case for local variable for the user. I have an application with policies which I would like everyone in the company to read. I would like to have proof of that. So, the idea is to put a button below the policy, which can be used by the user to acknowledge they have read this policy. I can now use the ID of the user and with an action button have the user connected to the policy. So, there is a clear overview for HR of the (important) policies have been read by whom and by whom not. Great!

#3

@tim.young How do you get the user-ID of the logged-in user in the local storage upon login, so it is available in the whole application. Now you only have the possibility to set the variable in the local storage in a details page.

Is there a way during login to add the user-id in the local storage?

#4

Hey @Peter,

The Detail Component is the only component that has the option to save values to local storage built in, but with a little JavaScript, you can save whatever value you want!

In this example, I’ve placed this JS on a Layout to save the Logged In User’s ID field that I created.

$( document ).ready(function() {
    localStorage.setItem("user_record_id", "{loggedInUser.Record ID}");
});

278781D3-D757-48D6-AF76-4E7B7B4F09E4

1 Like
#5

@tim.young

I used this code on my global landing page layout in the JavaScript tab:

window.scrollTo(0, 0);

$(document).ready(function() {
    localStorage.setItem("user_record_id", "{loggedInUser.Record ID}");
});

$(document).ready(function() {
    localStorage.setItem("exc_rate", "80");
});

exc_rate gets created and filled with the data
user_record_id gets created but stays empty.

image
image950×184 9.58 KB

Could it be that the space character in “Record ID” needs to be a special character for it to work?
As this uses jQuery, should jQuery be referenced in the Customer header/footer code for it to work? ( I don’t think so because exc_rate is working, but just to be complete)

#6

Peter, are you sure there is a user logged in when this page loads?

If this is the order of events, ti will likely not work:

  1. User loads page
  2. User logs in
  3. User remains within the same layout

The reason this won’t work is the layout code already ran and the user was not logged in. When you refresh the user is now logged in and the code should work.

I hope that makes sense.

#7

@moe I have the standard login page - after login it moves to the main page of the application, and in this layout the code is in the JavaScript tab.
It says in the code document.ready, so I guess the code fires after the page is loaded.Which means after the login.
Maybe I should add a timer? I have seen that before, that could be a solution. You have any idea how the code should look like?
I have also added this code to another page in the application, which can only be seen when you are logged-in. Also then user_record_id remains empty alas.

#8

@tim.young Thanks Tim. I’ve just had a use case for this, I just followed your video and used this feature for the first time and it’s super simple but as you say, very powerful. I think of this feature as a bit like Page Variables, but I appreciate technically its not. I can see a lot scope for this - thanks for highlighting and explaining so well :+1: :+1: :+1: