NodeJS show/hide dynamic attribute

Wappler General How To
#1

I’m trying to copy my previously created php project to a new nodejs project and I am experiencing some issues with being able to show/hide elements on my nav bar based on whether or not a user is logged in or not.

In my prior php project, I could create a server connect and then set a condition if the result hasitems in the show/hide dynamic attributes. In nodejs, there is no option for that.

I have gone through various options and can not seem to find anything that would work to show and hide an element based on whether or not the user is logged in.

Does nodejs have a similar to hasitems ?

#2

I have used a session variable for the logged in user. The variable get set to true on a successful login
dmx-on:success="sessionUser.set('loggedin',true)">

and removed the session on a successful logout
<dmx-serverconnect id="scLogout" url="api/users/logout"sessionUser.remove('loggedin')">

After that you can show/hide as in
dmx-show="sessionUser.data.loggedin"

This worked for me although I am sure that there is a more elegant way to achieve the same.

2 Likes
#3

Hey @ben,

Thanks for the quick response. :slight_smile: I can look at your solution and see if I can make that work.

I’ll still need a solution to the show/hide because I have certain things that are shown or hidden based on permissions as well. I’m not sure if sessions can be set for a multiple permissions (I use a three-table permission approach).

#4

This is how I have used it:

junk

The reason why I had to choose the session method is because, if I used the result from a server query, the show/hide action would not be immediate. This is when I use NodeJS with a master template.

The rest of the information, such as user data, comes from the server query.

I would suggest that your application follows the same method, where the query is more complicated to suit your application.

#5

Given that ejs files are rendered server-side you can always check the server session.

dmx-show="<%= $_SESSION.security1Id %>"

Change security1 to whatever name your security provider has.

1 Like
#6

@JonL while I work on implementing ben’s solution, how would you code the hide version? Is it as simple as adding the ! before the <%- $_SESSION.site_securityId %>?

As you might be able to tell, I don’t have a lot of experience with sessions. I tended to avoid them in my php project because there were other ways of doing things.

#7

dmx-hide="<%= !$_SESSION.security1Id %>" and dmx-show="<%= $_SESSION.security1Id %>" are the same.

#8

@ben, I’ve tried for a few hours to try to make it work and have not been able to do it successfully. I have tried searching on the site for assistance, but haven’t found anything on point. I am not familiar with using sessions in Wappler and the information I was able to find was utilizing different session forms, but not the security1Id one.

So if possible, would you be willing to walk me through how to set up the method you used in your video? Some helpful information, my site does not use a login form, it uses the Facebook login server action. The only thing on the login page is the Facebook login button.

@JonL, I did try your solution but with no success. I tried it as posted, with it enclosed in ’ ', and with it enclosed with ( ).

#9

What option I missing exactly?
What query do you have - single or multi results query?
This should work the same way it doesn’t matter what server model are you using.

#10

sigh I really should not work on things when it is after midnight and I have had a long day.

After my patient and understanding friend Teo posted above, I went back and re-looked at my initial attempt at the query based option that I had used in the past. It appears that I had incorrectly setup the query with a condition for the user email to equal the security provider identity instead of the user id. Once corrected, everything works as expected.

I think what threw me off initially was the change in wording. In the past php project, I had used the condition hasitems, but in the nodejs project, the condition is hasValue.

As always, I appreciate the help and support as I learn this new and exciting aspect of Wappler. :slight_smile:

However, if using sessions is a better approach to it, I would be interested in learning more about it.

1 Like
Not able to show or hide elements
#11

Note that .hasItems() is only available for multi-records queries as they return arrays! Single query won’t show .hasItems() as an option as it does not return an array.

1 Like