How to create a customer portal in 11 minutes

How to create a customer portal in 11 minutes

Full Transcript of Video

In this video, I’ll show you how to build a secure customer portal from scratch in just 11 minutes.

For sake of this video, let’s suppose I work for a bicycle manufacturer. I have all of my customer order data in a database table. But, I want to give my customers a way to securely access their order history through a portal. To do this, I need to turn my data into a secure web application, add multi-tenant security, and put it all in a secure portal. I’ll be using our low-code development platform, m-Power, as it simplifies the process.

The first thing I need to do is turn my order data into a web application. Since I just need to give customers a way to access their data, I’ll create a retrieval which pulls data from the database. To start the build process, I need to name my application and select a template. m-Power templates provide the layout and features for every application...but they’re also easily customizable as I’ll show you later. I’ll just need a basic data list for this one.

Now, I need to tell m-Power where my data is. It’s in the order header table, which contains data about all customer orders. I’ll select it and grab most of these fields here. Now, I also want to grab some fields from my customer table. With m-Power, it’s pretty easy. It handles all of the table joins for me. I just need to select my data--which in this case I want to just add some basic data about my customers. That way, I can use it in my order application later on. Now, I just need to tell m-Power how to sort my data and I’m nearly done.

Okay, so one more thing to do before we build. Before the video, I created an app that displays order details. I didn’t show that build process because it’s the exact same thing as what you’re seeing now...just over different data. I’ll add a smartlink to that application so my users can drill down into each order from the app I’m building now. So that’s it! Now we’re in the build step. I’ll just click build here and let m-Power put everything together for me. Now I went through this build process pretty fast because this is a basic application and it’s not the point of this demo...which is to show you how to create a portal. I just need this app for my portal. Okay, so it’s done building now. Let’s check it out.

As you can see, there’s a lot of data here. Let me change the rows here to show you what we’re working with. I have all of my customer orders and my customer information. Over here, you’ll see I have a drill down to order details. Now, I’m going to pretty this up later, but first, I’d after I set up security. so my customers can login and only see their data. Let’s do that now.

Okay, so we have an application that lists orders and a way to login and view that app. Now, let’s tie specific data to some of our users. This is called multi-tenant security or even row-level security. In short, it lets many users access the same application but only see data they’re authorized to see.

To do that, I need to create a security object. This may look just like the last build process...and it is...the only difference is I’m creating a reusable object that I can tie into many applications. It just consists a few fields that bind the username to a customer ID and it’s a really smart way to handle multi-tenant security. Once I build this object, I can include it any application I build so I don’t have to set up multi-tenant security rules over and over.

Once I’m done, I need to go back into my order application and add this security object as a filter. The great part about this is it gets baked into the logic once I rebuild my application. Users can’t bypass the security and see other user data. Okay, now, every time a user accesses this application, it will filter out only the records that username is authorized to see. In this way, I can deliver a single application to all of my customers, but only give them access to their data. Now, if I go back into that application and login as one of my customers, I only see records for that customer ID. If I logout and then login as a different one, I see those records.

Okay, so let’s quickly check out the data in my security object. Before this video, I created a maintainer application over my security table which lets me manage the data. Again...I didn’t show off the build process in this video because the process to build any application in m-Power is the same every time. So, I’ll go into that application and check out the data. As you can see, it’s pretty simple. I have usernames for each customer that are tied to their customer ID. If I want to update or delete any of these, I can. I can even add new users if I want. I’ll add an admin user that has access to everything so one of my internal employees can log in. All I’m doing here is adding data to the same database table that the user security object is built over. It updates in real time so if I add a new user, it reflects in any application using that security object.

Alright, so we have a way to let customers login and view their orders. Let’s do a couple more things. First, I’ll set up a portal menu. A portal menu is basically a secure area where customers can access to all of their applications in one place.

To do this, I’ll go back into my orders application and add it to a menu. I’ll just need to give it a short description and choose an icon. I could do a few more things here but I won’t in this video.

Okay, so now let’s check it out. If I login as one of my customers, I now have a nice portal menu. I can select my order application and view orders specific to that customer. If I log out and log back in as a different customer, I now see different information. So, this is working as it should. The multi-tenant security is filtering out the customer data that’s been assigned to user IDs.

Now one more thing to do. Let’s pretty up this application a bit. I’ll go back into m-Power and open up m-Painter, which is m-Power’s visual editor. If you remember when I started, I mentioned that m-Power templates are very customizable...and this is where I can customize everything. Now there’s a lot I could do in here, like add maps, charts, import other applications, and more. I could even rearrange everything on this screen. But I just want to customize the look and feel a bit. Right now, my table includes order information and some customer information. I want to separate the two. I’m pulling out the customer specific information and putting it at the top of the page. The nice part is m-Painter gives me access to all of the database fields included in this application. I can move them around and place these fields wherever I want. Then I can remove those columns from my table. This cleans up my table and separates the customer info from their order data. I’ll also move this drill down link to my order number. That way, a customer can just click the order to see that order’s details. Let’s save this and go back into my application. Let’s log in and check it out.

It looks a lot better now. As a customer, I can see my information up here, and my orders down here. The table looks a lot cleaner now. Also, if I want to drill into any of my orders, I can now just click the order number which makes a lot more sense. If I want to go back to my portal menu, I click home up here.

In m-Power, I’m creating something called a maintainer application. A maintainer lets you read and write to the database, so it’s good for any application that needs to maintain data. Once I select my data and tell m-Power how to sort, I need to add that security object i created earlier. so each customer can only see their support tickets. I hope that you’re seeing the value of handling multi-tenant security in this way. With that single security object, I can add multi-tenant security to any application which saves a bunch of time.

Okay, so now that it’s built, i’ll quickly add it to the portal menu. It’s the same same process as before. I just need to give it a description and pick an icon for it.

Once it's in the calendar, how will the salesperson know they have a new appointment? Let's add an automatic notification so the salesperson gets the details sent to them. To do that, let's open up m-Power's workflow designer.

Okay, so now that we have 2 more applications, let’s check out the portal menu again. Once I login as a customer, you’ll see 3 application options. If I click on the new ticket application, you’ll see I don’t have any tickets yet so let’s create one. Now, this is just a basic form but we could add way more features if we wanted to. I could add open and closed statuses, email notifications when a ticket is submitted, I could connect this form to my orders table and let the user choose from their order numbers. I won’t do all of that in this video as I’m really trying to highlight the security and portal aspects. Once I click submit I can now see my new ticket is here. If I had more time, I’d add an email notification to this form to alert our support team of a new ticket, but for sake of time I’ll leave it out.

If I logout of this account and log back in to a different one, you’ll see that the security object is working. I can’t see that customer’s support ticket.

Okay, so this all works great. But, what happens if you have a lot more than 3 applications in your portal--as most portals do. It could get overwhelming if displayed on one screen. To help with that, m-Power has something called ‘menu groups’. This lets me group applications by type into a tabbed layout. I’ll create two groups for this portal, and then assign my applications to groups. Now, if I check out my portal again, I have a tabbed interface. My applications with order data appear in one, and my support app in another. I can add as many groups as I want for organization.

Of course, there’s a lot more I can do here. I can add more applications, customize the look and feel, and much more. For sake of time though, I won’t get into all of that in this video. If you’d like to learn more about creating secure portals for your business, visit us at mrc-productivity.com. Thanks for watching!