Microsoft 365 Community Community Demos, 20 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Power Apps Portals

Description

In this 24-minute citizen developer-focused demo, Hugo Bernier showcases leveraging existing model-driven apps by building portal apps on top of them. In this demo build a portal app for external users with no AAD accounts or access to Power Apps. Create a table, create a portal app, create a portal form, build a portal, set permissions, create a view and see records as external user. In subsequent demos see how to edit records, view and store documents, photos, notes, use chatbots, and rate files. This PnP Community demo is taken from the Microsoft Power Apps community call – April 2022, recorded on April 20, 2022.

Demo Presenter
• Hugo Bernier (Microsoft) | @bernierh

Supporting documents
• Learning Path - Get Started with Power Apps portals | https://docs.microsoft.com/learn/paths/get-started-power-apps-portals/

Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community Blog - https://aka.ms/m365pnp/blog
• Microsoft 365 Platform Community - https://aka.ms/m365pnp

A

My name is hugo bernier, I'm a senior cloud solution architect at microsoft, and I like to call myself the world's laziest developer as well.

A

I was formerly an mvp, and but now my role at microsoft is to help customers who have already bought licenses for the power platform to make the most of the the platform and to use you know the technologies that they already have to the best of their abilities, and you know one of the things that I see all the time is people don't seem to know how to leverage portals, and I think historically, right portals were maybe not uh priced in a way that was appealing to the customers and things like that.

A

But a lot has changed over the last a little while and it's really important to take a look at portals and let me give you some scenarios.

A

The first thing is: let's talk about kind of where the the portals fit right. It's a great way for you to extend the reach of your power platform infrastructure. So all you know, instead of having to build a separate app, you know to be able to, let's say talk to your.

A

uh Maybe your employees that don't have an active directory account, like I'm thinking of, let's say a retailer who have people on the on the floor, uh the store floor right and or the manufacturers who have people on the factory floor who don't necessarily have an email address, but they still need to be able to have access to information or maybe you're, dealing with partners or suppliers, or maybe we're talking about customers or, if you're, a government, agency or municipality.

A

Imagine if you could actually expand the reach of your power apps to your constituents right so that I can go in and and report a pothole in my street or or do things like that, and that's really, where kind of portals come in handy is that it allows you to really create a secure gateway to your database environment and to your your powerapps portals, but extend the reach to way more than you're, just just your employees. Now you can still let your employees use portals and we'll definitely talk about that.

A

uh But you know it's it's more about that power to be able to reach to a whole new audience, and so I for uh for the microsoft 365 conference in vegas a few weeks ago, david chris kent, and I we we built a fictitious company and we called it the uh normal company inc. So this is totally a legit company.

A

They say they totally don't do covert operations, and uh you know they recently expanded their operations and decided to outsource a lot of their missions.

A

I mean services to independent contractors who might need to be able to communicate securely with uh the company with the totally normal company. But of course they don't want to use email, because that's probably not the most secure way to do this.

A

So one of the things that we're going to do is we're going to build a kind of special covert assignment management system uh version, one because one of the things that we want to do when we're building our apps in in the power platform is we want to iterate quickly right the value of being able to work hand in hand or closely with the the business stakeholders and the people who understand the business and to iterate rapidly and say how about this?

A

You know, would you do you like this better and delivering that and then innovating on that and improving on that rapidly? That's really one of the strengths here of the power platform, and we can definitely do that with portals.

A

So today, what we're going to do is we're going to build a quick app. Let's see how we're doing for time, yeah we're going to build an app that's used by the freelancers, so people who are not uh directly employed by the totally normal company.

A

uh They are not employees, they don't have active directory accounts and they don't have access to paraps right and they're not and we're not going to be cr, inviting them as guests to our power apps. We want to create something that is very secure and that doesn't require us to like open our internal network. Now.

A

uh The first thing we're going to do as a as part of this app is we're going to view my covert assignments, I'm going to log in I'm going to be able to see my assignments and then later, what we're going to do and separate sessions we're going to continue adding more functionality. So, first of all, I'm going to be able to go and mark my assignments as completed so, in other words edit. The data. That's in dataverse, I'm going to be able to learn some tips and tricks from the field request some equipment view.

A

My briefing dossiers actually find seeing files that are stored, associating to record in a secure way and those files might be stored in sharepoint, we're going to upload proof of completion, and that's also going to go to a secure file. I'm going to rate my assignment have a little star system like we have on uber. uh For my uh my contractors submit an extends report. Rsvp the company picnic uh request.

A

You know uh to talk to a field support agent, maybe even talk to a chat, bot and uh request exfiltration, as well as ordering disguises right so pretty much, giving all the tools that someone needs in their field in this case, uh for the agents here to be able to actually do their job and so to do that.

A

What we're going to do is we're going to start by leveraging existing infrastructure that we have so the first key to building successful portal app is to build on top of your model driven app and because you know, portals use, actually your dataverse environment to store things like users, content and things like that. So the first thing that I did here is I built a solution right because we all know building a solution is a great is a great thing to do.

A

It makes it easy for you to deploy your solution, so my first solution I built is called the special covert assignment management system and, uh let's go I've created the table. That's just assignments. Let's go add some columns to that.

A

So the first thing we're going to do is we're going to create a column to keep track of which contractor is assigned to an assignment, and I don't know if there's a better way to describe this, but um you know that's what we're going to do, and uh the one thing we have to understand is when we're dealing with portal users they're, actually contacts they're, not users, because in dataverse a user is really intended to be an employee, a licensed user right, so external participants are still uniquely identified, but they're identified as contacts, and so this is what I'm going to do here is I'm going to create a contractor field?

A

That's going to be pointing to my contacts. If I can find contacts there, you go, I'm going to make this a required field and I'll just put a little description here.

A

You know the one thing: as you know, when you're building a dataverse table, you always want to use the most uh english. Well, not english, but user friendly human, legible names for columns. Don't resist the temptation of creating called names like you would create a database system right, because your users are going to be able to use these names, to build reports and to build forms and to build queries and things like that.

A

All right, uh we're going to add a little bit more fields here, super quickly, uh so we're gonna add a deadline right and it's gonna be a date and time. So it needs to be done by this time, we're also going to add a location. So this is where this mission should be performed and sounds like we're, making lunch and we're also going to go, add some column about whether the mission is accomplished or not, and that's going to be. Yes, no now some of you who are dataverse experts might say: hey wait a minute.

A

You should probably use the the status and status reason. uh I agree with you, but we'll we'll evolve that solution uh quickly around doing that all right. So uh then we'll also go build an app right. So now what we have to remember is in the in the power platform.

A

We want to be able to create an app for internal users, and so for that I'm going to create a model driven app and I'm just gonna call this again. My uh we're gonna call this the uh assignment management system right.

A

So let's just quickly do that.

A

Having issues with my keyboard today, so whatever right, this special grover assignment systems, assignment management um and that's going to be the app that my internal employees are going to be using to manage these assignments and to manage my operatives out there and things like that.

A

We're going to be leveraging a lot of this by the way for our portal right, but it's important. This is something that I see a lot of people having difficulties with. Is it's important to understand the difference between the internal app and the portal app, and what we have to think about is the portal is really just a different channel by which you can connect the data. So here I'm going to add my assignments to my portal into my app.

A

So there you go and we're also going to add my contacts right and we'll use the contacts later, but the contacts obviously are going to be the the operatives that are going to be logging into the portal and I'll just clean up a little bit here. So I'll clean up the operations group, and so now I have kind of an app that I can start using right now.

A

What we'll also do is we'll go to.

A

Create some some forms, so let's go to my tables my assignments and let's go build a form here now. Typically, when you have a model driven app, you have a form that you want to use for at least one main form right that you use for importing the data, and so that's what we're going to do right now, I'm just going to lay out something really quickly here. uh I'm not trying to make this pretty we'll.

A

Definitely innovate improve on that later, but I'm adding all the fields that I need as a a person who's managing these operations. Now here's the trick is that you feed your portal. One things you can do is you can add another form now some people will share forms, you'll use the same form over and over again for both portal users and internal users. I would always recommend create a form, that's dedicated, or at least one form, that's dedicated for your portal.

A

So here I always like to call them portal right when I can type portal form yeah and then the one thing I'm going to do is I'm going to hide the fields that the users don't need to see right in the portals, for example, the users don't need to see the owner, I'm going to hide it we'll talk about later, but you know it's a required field, so I can't really remove it from the form. Quite yet uh the contractor. It's always going to be me as the current logged in user.

A

So I don't really need to see that as well and then maybe we can clean this up a little bit and kind of create a little section here for whether the mission is completed or not. um Let's just get forward on that, because we want to get to the portal right all right. So now I've got my solution. That's built.

A

I got my app and if I launch my app this is the app internally that uh that I'm going to use actually I'm going to skip forward here, I'm going to go to portals right away because we're running out of time.

A

So, let's build a portal: now the portal is going to be built like we did a model driven app or like we did a canvas app a portal again, it's just a front end on top of that data.

A

So I'm going to call my portal here, uh normal company assignment, maybe dev here and then, when you build your portals, you want to give it a unique address. Now later, you'll have the ability to go change the url for your portal, but right now what we want to do is we want to make sure that we have at least something that allows us to work with that portal quickly.

A

Now this is the part where uh it will tell you portal provisioning is in progress. This is the opportunity to go. Make yourself. Some coffee uh go yeah, you know, go get your stuff from the microwave, um because it's going to take a little bit of time, because what it's doing behind the scenes is, it's actually completely. Creating a database schema in your dataverse to support things like pages navigation users, portal users, and things like that now. Luckily, I was able to record this and fast forward this for you.

A

So now this is kind of the out of box portal right that gets created and out of the box, you get pages and subpages and you get the ability for you to uh to be able to sign in and do things like that. It's kind of boring right, let's actually do a little bit more of that.

A

So the first thing I can do uh is I can actually go and edit the portal. So now you do that through the the context menu, the three dots and you go. Click on edit- and here I get the page- and this is like a what you see is what you get experience.

A

So the great thing about that is there's different sections that we can go through and I'll quickly go through, but we'll come back a later session, we're going to cover the other sections. So we have you know the page navigation. I've got the theming that allows me to change quickly, the color scheme for the the portal. I got some templates some permissions and I can even build some pwas for portal. uh Portable web apps right, which is very cool, but let's start with just editing the content of the page itself.

A

So let's do that so anywhere. Where you see text, if it's created the placeholder text, I can actually just go edit it as what you see is what you get experience right. So here I'm going to call this. The normal uh company company yeah there you go now. One of the things that you'll see later is that we we, the portal, uses uh reusable snippets. So there's parts where maybe the company name is probably not something we want to go and replace everywhere right.

A

We probably want to have point the central place where the company name is used and that's something that we'll cover a later time. But here I can go to a section and I can completely edit the section here. So let me just go through my uh section and because this is a totally legit corporation that doesn't do covert operations, uh we're just going to put some nice. You know generic corporate uh imagery here uh and then we just say we get the job done right now.

A

You'll notice that the color scheme is not quite there yet and we'll we'll come back and fix that, but the idea here is that I should be able to focus on the content, the structure without worrying about things like cascading style sheets and javascript and html right, because again, this is supposed to be a maker platform all right. So, let's fast forward a little bit because we want to get to the good stuff.

A

So I can change the color scheme here and then uh let's actually go to create a page here, so I'm going to create a page that is called my assignment and uh the page I'm actually going to mark it as not anonymous. So that means that for me to get to this page, I need to actually log.

A

In now the out of the box portal actually allows you to register to redeem an invitation, so you can associate an existing contact to a link you can connect to azure id or you can register through a custom email address. So I'm just going to quickly kind of register myself here as a user. Obviously, in a real world scenario, I probably wouldn't want my agents to be able to register themselves on the flight like this, but this is just for to set up the demo, okay, so register, and I can provide additional information here now.

A

The one thing we could do here is: we could absolutely customize that profile experience here. So I wanted to capture you know: what's your area of specialty as a contractor, let's capture a field that does that for now, I'm just going to fast forward on that all right. Now again, let's talk about that authentication experience, because if you think about it again, I don't really want anybody to just go into my super secret system.

A

So this is where I can go to the settings the portal and I can actually override the authentication settings, and here I have the ability to pick from a whole bunch of authentication providers, and I can actually change some settings like things like whether I want to allow people to register.

A

It looks like it's taking longer register login with an external user id and password or require an email address to be unique right. So we'll skip that for now and we're going to and the thing is, as you can see as I'm uh here, I'm going to go and disable some features.

A

So, for example, here I'm going to say I don't want to have azure active directory enabled my users are not going to be employees of the system, so I can actually just go here, disable that authentication and when I go back to the portal and refresh we're going to see that the page, the sign-in page is actually changing accordingly.

A

Come on all right, let's fast forward on that, so when I go sign in active directory is not coming, it should not show up right, so we can continue to expand this, but let's get to uh the juicy bits now, okay, so I've got my portal, I'm going to go to edit it again now I'm going to go to because remember this portal or goal is for me to see my my assignments and portals shouldn't. Allow everyone to see everything. That's in my dataverse environment. So I can go to my table.

A

Permissions here and you'll see that by default I have permission to just provide feedback. What I'm going to do is I'm going to add a new permission and I always like to call my permissions in a very you know. Self-Documented way, so I want to be able to view and uh update my assignments, because remember I'm going to be able to mark my assignment assignments as completed I'm going to pick the table, which is called assignments.

A

So if I look for that assignments, there you go and then the access type global access would mean everyone has access to every record.

A

uh We've got contact access, which is my records where I'm associated to it, and then we've got things like account, access where I can actually view the records that are associated to me and my company. um So here I'm picking the relationship that says that this assignment is associated to me as a contractor, I'm going to say I want to be able to read and write.

A

I could also do things like append and append 2, which we'll need later, when we're adding notes and attachments, and things like that, and then I'll say this is only for people who are authenticated right. I mean it wouldn't make sense to uh to have something like this. That's not authenticated all right, we're almost there. So once I've got this, I can actually go and let's just go, create some assignments here and uh let's actually, what I'm going to do is I've got a whole bunch of assignments.

A

I've created and I've created for different people right. So I've got three assignments that are assigned to me and then what I can do now is. I can actually go to my assignments page and the part that I that I skipped here I'll come back to it is. I was able to actually drop my assignments list directly on the page, where I can see that. So let me show you that I've got two minutes. I can make this happen.

A

uh So if I go to my uh one more cool there, you go. So if I go to my assignments now come on, you can make it happen all right there. You go okay, so I've got my assignments table here. That's created, I've got my solution, that's built, and I got all my objects that are set up now.

A

If I created a view that allows me to view more details about the assignment the cool thing about that is when I build the view, I'm able to take advantage again of all that work that I've done in my in my dataverse environment and put that into my portal right. So this is not like a separate system. This is just a separate channel that gives me access into my database environment all right.

A

So if I fast forward on this I'll, add some columns here so uh when it's completed, whether it's completed and stuff for that do that quickly and then, when I go and refresh my page- and I say I want to show my portal assignments instead of my active assignments, and I save that and I browse to the website, what we should see is now I have come on, don't make me a liar there. You go. I now have my updated assignments now that was super quick right. We did that in I mean behind the scenes.

A

I did this in less than an hour from nothing uh next time. Next steps when we meet again we're going to uh show you how to start editing the records add logic to validate that people are not putting that data, but also we're going to do things like store documents, store pictures. You know the ability to have notes even use things like chatbot and things like that. So if you want to get started with using powerapps portals, you can go to this url here and I do have a slide on licensing.

A

If you want to take a screenshot of that, and we will definitely make this presentation available with no fast forward awesome. That's it for me today thanks everyone.

B

Thanks hugo, you answered the only question that popped up in the chat that was out there, that's cool. I like how you use the the video to do it that way, leave nothing to chance great idea.

B

So you said it took less than an hour for you to stand that whole thing up brand it and make all those different pages put all that functionality in there. That was on your slide, decks.

A

Yeah, in fact, when I, when I work with customers I'll often do this live with them in the space of an hour workshop. We're like okay, let's build this right, but again it's about leveraging the work you've done with the model driven apps. That's really don't reinvent the wheel, leverage, what you've got focus on the value-added stuff and that's where you're going to be able to deliver value quickly.

B

Yeah, that makes sense it's a great story, get somebody started in one hour and then they can just start building on top of what you gave them right, absolutely fantastic, awesome, looking forward to seeing the next part of your presentation there. Thank you. Thank you.