Tip 28 : How to auto-assign profiles to portal users

Tip 28 : How to auto-assign profiles to portal users

Hello everyone! 

This tip will talk about our most popular feature—Customer Portals and how you can auto-assign profiles to your portal users.

But before we deep dive into this tip, let's run through some basics:

About Customer Portals

Portals are web pages or applications that serve as gateways designed to provide customers, vendors, and partners with a single point of access to a company's products, services, and knowledge base. 

Portal users are people external to an organization—customers, vendors, business partners, and others—who need to be given access to the organization's applications (like the aforementioned products, services, and knowledge base).

To help you understand this tip better, let's take a scenario from a college.

In the last decade, the education sector has witnessed a massive technological transformation that impacted the teaching-learning process, and changed student's lives. Today, parents are more involved than ever before in their child's academics, and would like to actively track their progress. They prefer real-time information and updates over conventional methods of quarterly grade sheets and parent-teacher conferences.

With the Customer Portal feature in Zoho Creator, one can easily set up standard portals for students, teachers, and parents and assign permissions to automatically let them view a specific set of data based on the user role. In that way, they can log in into their individual profiles and see data relevant to them. 

For example, let’s take a simple scenario where we need to enable parents to check their children's performance throughout the academic year via portal published by the institution. 

Steps:

  1. Create a Student Information form to collect details for the students.
  2. Create a Course form for the academic year.
  3. Create a Student Marks form to record the marks of students.
  4. Create a page called Dashboard for parents to view the student's overall performance for the academic year.
  5. Create a portal Sign-In form where one can log in their credentials to view a student's performance.

Step 1: Create a Student Information form to collect student details.

We'll need the following fields: 

  • Student Name (Name)
  • Student Email (Email )
  • Phone Number (Phone)
  • Date Of Birth (Date)
  • Department (Drop Down)
  • Roll Number (Single Line)




Step 2: Create a Subject form for the academic year.

We'll need the following fields: 
  • Academic Year (Drop Down)
  • Course Name (Single Line)





Step 3: Create a Student Marks form.

We'll need the following fields: 
  • Name of Student (Lookup from Student form )
  • Roll Number (Single Line)
  • Academic Year (Drop Down)
  • Course Name (Drop Down)
  • Marks (Number)




Now let's take a look at how to set up the workflow for the Student Marks form.

1. As we need to validate the course based on the academic year, we need to write a workflow in the On User Input action to auto populate the list of course names for the respective year/semester. Please refer to the below script:

  1. fet = Subjects_for_Academic_Year[Academic_Year == input.Academic_year].Course_Name.getAll();
  2. input.Course_Name:ui.add(fet);

2. Create another workflow to auto populate the roll number when the name of the person is selected from the form:

  1. fet = Student_Information[ID == input.Name_of_the_Student];
  2. input.Roll_Number = fet.Roll_Number;
  3. disable Roll_Number;





3. Create a dashboard to view the student's overall performance for the academic year.

Below are the components used while creating the page (dashboard):

HTML snippets to display the student's basic information
Panels to show the Marks report for the different academic years
A button to exit from the profile




Here's the HTML code that you need to use to display the student's information based on their login.

HTML snippet to display the student's basic information:

  1. <%{  fet=Student_Information[Email=zoho.loginuserid];
  2. %>
  3. <html>
  4. <head>
  5. <style>
  6. h1 {text-align: center;}
  7. </style>
  8. </head>
  9. <body>
  10. <h1>Name | <%=fet.Student_Name%></h1>
  11. <h1>Department | <%=fet.Department%></h1>
  12. <h1>Roll Number | <%=fet.Roll_Number%></h1>
  13. </body>
  14. </html>
  15. <%
  16. }%>

2. Three panels to show the marks obtained by students for the respective year/semester:



3. A button that parents can use to exit from the student's performance dashboard.

We can us the function below for our button. This function will set back the logged-in portal user's permission to "Get Started" so that they'll be navigated to the login form page again.


  1. void Log_out()
  2. {
  3.      emailList = thisapp.portal.loginUserProfile();
  4.      if(emailList == "Student")
  5.         {
  6.        x = thisapp.portal.assignUserInProfile(zoho.loginuserid,"Get Started");
  7.         }
  8. }

So once we're all set, we need to create a Self Portal Sign-In form to see the student's performance by entering their login information.

Please Note: The Self Portal Sign-In form can be a stateless form here, because stateless forms provide a way to navigate or change the permission set without storing the login information for all the portal users who log in to their portal every time. This will avoid consuming unwanted data.

Step 5: Create a Self Portal Sign-In form to show the student's performance after entering their credentials.

Form fields:
  • Enter Your Registration Number (Single Line)
  • Date of Birth (Date field)





Now, we need to create a validation workflow to change the profile if the entered information matches the existing student data. The workflow has to be set in On Submit of the stateless form's button.

  1. fet = Student_Information[Roll_Number == input.Register_Number && Date_of_Birth == input.Date_of_Birth];
  2. if(fet.count() > 0)
  3. {
  4. x=thisapp.portal.assignUserInProfile(zoho.loginuserid,"Student");
  5. openUrl(<Portal/app URL>,"new window");
  6. }
  7. else
  8. {
  9. alert "Please enter the valid details";
  10. }

Customer portal settings

Now, let's modify or set the permissions using the customer portal settings:

As the college cannot set permissions for each individual student in the college, we're initially setting each student's permission as "Get Started". This way, when the portal user is added, the default permission will be "Get Started", which will have access only to the form Self Login. Using Self Login, students and parents can enter their child's credentials to change the permission set based on the credentials we validated under On Button Click of the form.

1. Get Started - Set this up as the default permission when adding a new portal user in the application. Here, we can only give access to the form Self Login so that when the student/parents log in for the first time, they can see only the Self Login form.




2. Student - In this permission set, we can give access to the view Student Mark Details and the Student Performance dashboard to view the marks of the respective student for each academic year.



Please Note : We can set filters for the report All Student Mark Details based on the logged in user's email address, to make sure the portal students can view only their respective academic marks.




Now, let's add a student as a portal user.

1. Here's what it looks like when a student is added into the customer portal for the first time.




2. When the portal users accept the invitation and log in to the application, they'll be directed to the Self Login form where they'll need to enter their login details.






3. Once the student details are entered, the On Click workflow of the Self Login form triggers and changes the portal permission from Get Started to Student, and will display the relevant data in the dashboard where students and parents can see the related data for the academic year.



4. Once the Exit button is clicked, the permission for the respective student will again change from Student to Get Started, and will display the Self Login form. This action is triggered, as we are calling the function in the button action.

And there you have it!

We hope this tip is useful for you. If you have any questions, please add them as comments below and we'll be happy to assist you. 

Also, if you'd like us to write a tip on anything specific for the customer portal, please let us know. We'd be happy to handle it in upcoming tips!