How to view your Live Data in Wappler Design View on a secure page

[psweb]

If you want to see your data displayed in design view of Wappler when using security provider enforcer and different levels of security, you can do it the same way as if you were in your web browser, just with a slight difference.

Lets say my site has a login page, and that redirects you to a secure dashboard page, and then my navigation can take me to 3 other secure pages, lets say one of those pages is addProducts.php

I open addProducts.php in design view and see nothing displayed, then i click the eye icon to show like a live preview, I then click the Logout link on my actual design, this takes me to the login page like a browser, i login, navigate to the page matching what i have open, turn off the eyeball, and refresh the design view.
Now i can work on and see all my bindings rendered live while i work on the page.

Hope this helps someone.

[psweb]

Here is a follow up video on the procedure, please use this link as the video has no sound and was a quick throw together and it is unlisted on YouTube, really only intended for people on this community forum.

[brad]

Very clever. Thanks for that tip!

[psweb]

Figured some of the Wapetrans might not have ever tried something as simple as that to get this working. I am sure that might help you along the way even though I think most of us are spending more time than we care to admit in code view. Haha. Shhh don’t tell the Wapoderators I don’t think that was their intention when developing this wonderful app.

[mrbdrm]

that didn’t work since the logout button in my case is on included php file.
clicking on it does nothing.

[psweb]

Mine is also on an included php file and works fine though. I literally use this method on every project I do and all of them have a navigation that is in an include.

[mrbdrm]

what action you have on the logout button?

[psweb]

Here is a screenshot of my actual include file as well as the Server action on the left

The next screenshot shows the page where i am including the includes file as well as all the serverconnect actions just below the head

Hope it helps, if not i also showed the process in my early video tutorials
https://www.learnwappler.com/creating-a-fully-secured-login-system-through-wappler/
https://www.learnwappler.com/developing-a-fully-dynamic-driven-wappler-navigation-with-conditionals/

[mrbdrm]

also if your server connect have unauthorized dynamic event then you cant even see the navbar

[psweb]

Well I start off with a login page, so my admin section of my website is lets say, www.example.com/administration/index.php
When I logout it redirects me to that page, and i can enter my login details which then shows the navigation because i am now logged in as an authenticated user.
If I want to make changes in Wappler to say my www.example.com/administration/add-user.php page, I open the file add-user.php which has my navigation include in it, then i click preview while not logged in and click the logout button, then login, it redirects me to www.example.com/administration/dashboard.php and I just turn off preview mode and refresh the design view and I can see everything available on the add-user.php file that is open.

[psweb]

also if your server connect have unauthorized dynamic event then you cant even see the navbar

My navbars use the security provider enforcer to restrict access to the entire page and not just the navbar component, while my navbar component does have various show and hide navigation elements based upon the security role the user is set.

[mrbdrm]

How can you click on the logout button when there is nothing to click on

[psweb]

With mine there is something to click on, this is my page when not logged in on Wappler design view

I can see all this as a non logged in person because I did not go and restrict every element to only show for a logged in user, instead i use security provider enforcer so if the user is not logged in and goes to that page then they just get redirected to my login page.
I would need to see your code to try and help figure out why you can not see your elements.

[mrbdrm]

Add a preloader and see.

[psweb]

Maybe with a pre-loader it will break the functionality, I will have to test it out and let you know, I have never used a pre-loader for that before

[mrbdrm]

You don’t use preloafers? What do you use then

[psweb]

I just don’t, most of the time i build backend systems, and if the user has to wait a second or 2 for the data to load I just let them wait, I never felt the need that it would take so long that they actually needed a preloader to be honest.
What kind of data amounts are you pulling in that take long enough that the user needs a preloader?

[mrbdrm]

i don’t use it because i have large queries
i just use them to give a quality look and feel to the whole web app. and to give a smooth transitions between pages.
user click on button to go to a page i show the preloader. so you get a fading effect between pages

[psweb]

I see, makes sense, maybe i will start using them myself, just never bothered because I make pretty front end systems that generally do not have security restrictions etc, but backend systems I generally am so worried about functionality that I dont generally bother making them very pretty. haha. Maybe I should rethink that.

[psweb]

This post as described on post 1 unfortunately no longer works since we added the SOUP App Connect icon in Design View. How are others viewing Live Data as though they are a logged in user, as this system i used before no longer works sadly.