Menu with autorisation to forms

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Menu with autorisation to forms

#1

Postby fronsky » Tue Mar 13, 2018 11:06 pm

Is there a how-to or example available on how to build/set up a menu system with user acces autorisation mechanisme?
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: Menu with autorisation to forms

#2

Postby Jon » Wed Mar 14, 2018 12:33 pm

There's a "Security Logon" downloadable sample on the Resource Hub (Help > Resource Hub from the studio). If you haven't done this before, click on Downloads in the Resource Hub to download the sample into your studio workspace.

If you're starting from scratch, the steps will be:
  • Create database tables to hold user and role information
  • Write an admin form to allow you to add/delete/modify users and roles etc and populate the database tables
  • Write a Logon Service to validate a user/password combination
  • Write a logon form to collect the user's id and password and call the Logon Service to validate it
  • Add role checks to your code e.g. in the case of a menu to show or hide specific menu items
We are currently working on a more advanced Resource Hub sample which does all of the above and more. So you might keep an eye on new additions to the Hub.
0 x

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Re: Menu with autorisation to forms

#3

Postby Segi » Wed Mar 14, 2018 5:55 pm

Fronsky,

I originally did this by creating a shared menu component that I would add to each page where I wanted the menu to appear and use a shared function to fetch the allowed menus for the current user so that each person only sees the menus that they are allowed to see. Each ebase page thats accessed from the menu also does server side validation to make sure that the user can access that page.

I don't know if you're familiar with React but I rewrote the whole thing using React. It loads faster and its much easier to make changes and redeploy. Let me know if you want more info on this.

I then set the main web page that displays my menu using the forms' top jsp
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Menu with autorisation to forms

#4

Postby fronsky » Wed Mar 14, 2018 7:18 pm

Thank you for yr support. I have this running now. Now need to understand how to integrate menu set up and authorisation check with the forms.

Rgds,
Harry
Jon wrote:
Wed Mar 14, 2018 12:33 pm
There's a "Security Logon" downloadable sample on the Resource Hub (Help > Resource Hub from the studio). If you haven't done this before, click on Downloads in the Resource Hub to download the sample into your studio workspace.

If you're starting from scratch, the steps will be:
  • Create database tables to hold user and role information
  • Write an admin form to allow you to add/delete/modify users and roles etc and populate the database tables
  • Write a Logon Service to validate a user/password combination
  • Write a logon form to collect the user's id and password and call the Logon Service to validate it
  • Add role checks to your code e.g. in the case of a menu to show or hide specific menu items
We are currently working on a more advanced Resource Hub sample which does all of the above and more. So you might keep an eye on new additions to the Hub.
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: Menu with autorisation to forms

#5

Postby fronsky » Wed Mar 14, 2018 7:22 pm

Thank you. I will have a look at the documentation how to set up a shared menu component. Can you send me an example how the shared function looks like and where you have made it part of the form page (top jsp?)? I'm sorry, I have no experience with React.

Cheers

Segi wrote:
Wed Mar 14, 2018 5:55 pm
Fronsky,

I originally did this by creating a shared menu component that I would add to each page where I wanted the menu to appear and use a shared function to fetch the allowed menus for the current user so that each person only sees the menus that they are allowed to see. Each ebase page thats accessed from the menu also does server side validation to make sure that the user can access that page.

I don't know if you're familiar with React but I rewrote the whole thing using React. It loads faster and its much easier to make changes and redeploy. Let me know if you want more info on this.

I then set the main web page that displays my menu using the forms' top jsp
0 x

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Re: Menu with autorisation to forms

#6

Postby Segi » Wed Mar 14, 2018 7:38 pm

fronsky,

I was talking about 2 completely different approaches

Original way that I did it:
Create shared component which is the menu structure which you then have to deploy to each form that you want to use it in. The shared function creates the HTML for each menu item based on what the user is allowed to access. Any time you make a change to the structure of the menu in the component, you have to redeploy it to all the components that link to that shared component.

Current way that I am doing it:
The newer way that I am doing it now doesn't involve creating the menu itself in Ebase. Instead, I developed the entire menu as a React application that calls a REST endpoint that I created in Ebase to get the menus that a user is authorized for and builds the entire page dynamically. You need to set the Top jsp of index.html of my React project on each page where I want the menu to appear. When I need to fix or change the menu, I make the changes in the React app and then re-build it. I have a post-build step that copies all of the necessary files to the right location so after it builds, it automatically copies the new files over. That way, I can fix any changes outside of Ebase and recompile my code

You'll still need to develop an admin app that you can use to give and take away permission to an application
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: Menu with autorisation to forms

#7

Postby Jon » Thu Mar 15, 2018 9:25 am

Now need to understand how to integrate menu set up and authorisation check with the forms.
I do it like this (this is just pure Ebase - no React or anything else). This example assumes that the user has already been signed on by calling a Logon Service which has added roles - this example uses a Supervisor role but you can have any number of roles.

Create a part-page component and add your menu to this: give each menu item a unique Item Name as well as a text. Attach a script to the on click event of the menu control with code something like this:

Code: Select all

// check clicked menu item (Item name property)
var selection = controls.portalMenu.selected;
switch (selection)
{
	case "Home":
		form.gotoPage(form.pages.Home);
		break;
	case "Users" :  
                form.gotoPage(form.pages.UserAdmin);
                break;
        // etc
}
To customise the menu i.e. to hide/show items based on roles, you need to run a bit of script code before the menu is presented and I use a bit of a trick to do this: create a new field with any name and click the Event field property (an event field just exists to run scripts - it's not a real field at all). Drag this field onto the page above the menu, then add a script to the Before Control event with code something like this :

Code: Select all

var isSupervisor = system.securityManager.hasRole(ROLE_SUPERVISOR);
controls.MenuItemSupervisor.setHidden(!isSupervisor);
controls.MenuItemUserAdmin.setHidden(!isSupervisor);
Finally in your form, add the part page component to the appropriate position of each page. Once you've set all this up it's then easy to make changes: you edit the component and click the Deploy Changes icon on the toolbar (top-left) and all the changes are deployed to your form(s).

As an aside - it's common to use a header component to contain a menu plus other stuff: logos, a few texts, search etc, and then always add this at the top of every page. And sometimes do a similar thing with a trailer component.
0 x


Who is online

Users browsing this forum: No registered users and 24 guests