Authorized menu's

[Romano]

Hi all,

Being new to Caspio it is not clear to me how I would display only those menu-options available to a user based on his or her privileges. So far I've looked at some tutorials, created some datapages and all that works wonderfully. But these pages need to be embedded into my html-pages.

1. Am I right to assume that the site menu would be placed in the containing html-pages and not in the Caspio forms?

2. How would I display only the menu-options available to a certain user, based on him/her being logged on or not, and on privileges?

Best regards,

Romano

[bahar_vm]

Hi Romano,

Right the links should be placed in your HTML page not in Caspio.

The links display on your webpage for all users but suppose you have a link for public view and a link for members view, the members link is password protected and only registered users can log in.

Let me know if you have any questions.

Best,

Bahar M.

[Romano]

Hi Bahar,

Thanks for your reply.

So do I understand correctly that all menu options are always visible, but clicking on some of them prompts the user with the login form?

From a user's point of view I don't find this very friendly, don't want to bother users with things they cannot use. Is there no way around this?

Best regards,

Romano

[gautam.shivnani]

Hi Romano,

The other option which I did at work was to keep the Admin module on a separate URL, this made it easier for the kind of application that I wanted to build.

So the user would be having different tabs but with the common login, 1 login in any of the tabs won't prompt the user to enter the Login & Pwd anymore.

Similarly would work for the Admin module.

Regards,

Gautam S

"FOCUS ON SOLUTIONS & NOT ON PROBLEMS"

Gautam S

[Xiang]

Good morning Romano,

 

How are you doing?

 

I think, you can combine two solutions, Create User-Specific Redirect After Login and Create a Floating Navigation Menu.

 

You can create an HTML Page, enter the following code and then embed the DataPage on your web page:

<style>
#menu {
margin:0;
list-style: none;
width: 140px;
text-align: center;
}

#menu li {
font: 90% "Arial", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#menu a {
background: #222;                           /*Standard Color*/
border-bottom: 1px solid #000000;
color: #ccc;
display: block;
margin: 0;
padding: 20px 12px;
text-decoration: none;
}

#menu a:hover {
background: #004400;                    /*Hovered Color*/
color: #fff;
text-shadow:#ffffff 0px 0px 5px;              /*Text Glow*/
padding-bottom: 20px;
}
</style>
<div style="position:fixed; top:0; right:0;">
<ul>
<li id="Link1"><a href="http://google.com">Google</a></li>
<li id="Link2"><a href="https://www.wikipedia.org/">Wiki</a></li>
<li id="Link3"><a href="http://www.w3schools.com/">W3schools</a></li>
<li id="Link4"><a href="http://www.w3schools.com/js/default.asp">W3schools JS</a></li>
<li><a href="https://YourSite/folderlogout" title="Logout">Logout</a></li>
</ul>
</div>

<script>
var link1 = document.getElementById("Link1");
var link2 = document.getElementById("Link2");
var link3 = document.getElementById("Link3");
var link4 = document.getElementById("Link4");

if("[@authfield:Admin]" == "Yes"){
link1.style.display = "none";
link2.style.display = "none";
}
else if ("[@authfield:Manager]" == "Yes"){
link3.style.display = "none";
link4.style.display = "none";
}
else{
link1.style.display = "none";
link2.style.display = "none";
link3.style.display = "none";
link4.style.display = "none";
}
</script>

An Admin user sees Link3 and Link4, a manager user sees Link1 and Link2.

User without roles sees only the Logout link.

 

I'm learning the JavaScript now, so, I'll be grateful, if you tell me if the code works.

 

Have a nice day!