Microsoft 365 Community Community Demos, 27 Jun 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Call Demo - Getting started with custom forms in SharePoint build with PowerApps

Description

This community call demo is taken from the SharePoint General SIG community call recording on 27th of June 2019. In this video, Chaks
(Microsoft) demonstrates how to get started with building custom forms using PowerApps in SharePoint.

Presenter - Chaks (Microsoft) - @chakkaradeep

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-27th-of-june-2019/

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

So today, I thought I would start something around how to get started and how to change few things and perform common tasks in custom fonts. So custom forms is the new way. Basically, the modern way of customizing lists forms. We have invested heavily in partnering with my power apps, you know working as one Microsoft. In fact this week we have a customer event here at the meaning. Several customers and we've got awesome feedback as an awesome as a great feedback around custom forms.

A

And you know all this feedback is going to help us make the experience better, provide Richards support. Like I know, there was presence around Hale and I know. There's questions are weak forms. I know there are questions around. It's not really that simple for makers, but things are, you know getting into your backlog. We are looking at all the things that we want to simplify, but in the meantime you know, power axe is really powerful. It's just that. There's some usability issues, maybe maybe you're thinking around how to go about it. Maybe you're thinking around.

A

We have to start so I thought. Let me give some examples and a flow as an: how will you go approach, those problems and how do you really approach customizing the form with various scenarios? So with that clear enough, let me go here and show you how to start with custom forms. So you have a list here. You have several ways to start.

A

You could go to the power apps mint in the command bar and then click customize form or, if you actually click the item and open the item in view here in the panel, you can also click go to power, apps, so I'm going to click, customize forms and, as you might have guessed, this is not available for everyone, a available for people, users that have the ability to manage lists in this case, a list over so I do customized form it's going to load this page, it's going to take three seconds and keep to posting questions in the chat, because it will help me to just look at and while it's loading or you know doing some manipulations I would be able to help you guys as well.

A

So what happens by default? Is it takes all the view all the columns in the view and then puts them in the form here and it kind of gives you a studio band? Now you can see some of the gestures here on the left. You have a preview on the right. You got some fields pane and then there is some property pane on editing. You know some controls as well, but as soon you click the fields and everything disappears right. How convenient.

A

So, let's start from analyzing what is here and and how do we get to that field pain and it start doing things. The the first thing is the SharePoint integration piece here right. So the tree view is something that you're looking at you're going to be scanning there and you're gonna see this SharePoint integration. This is a key piece that is telling power apps that all of the customizations I'm doing in this is actually related to a list form in SharePoint right.

A

So if you click this and then here on the property pane, if you click advanced, you will see some actions defined here which are basically on new on edit or view, and this is giving some. You know indication that this is going to be for the list form and somebody clicks new item and somebody it it's an item or when somebody views an item right and if you click more options, you get more on what happens when you save what happens when you cancel right.

A

So here you can put your own expressions if you're a chrome maker I have to use the term, because sometimes makers doesn't need that you need to write expressions. So if you are a pro makers, you can write some complex expressions here, so you can have employees to you know not save items unless there's something else figure out him, maybe from some other data source right. So that's the basic of how this custom forms is related to the list form host in SharePoint to do all the operations.

A

The other interesting thing here is that the form itself right, so what it does is by default. It builds a screen that is able to be hosted in the list form and then it adds a simple form control and this farm control.

A

If you click on it on the property pin, you can see that it's already associated with the list that, where you wanted to customize the forms and value actually came from, and you can also see here in the properties pane or if you go to the view- and there is a data sources panel that comes up there as well. You can see the research project lists now, if you want to add any other data source, you can always click, add a new source and add it say.

A

For example, you have a another list where you want to bring information and collate both as well. You can do it here as well. So obviously now the real question is how do I these fields in the form? How do I edit a different reorder and do some basic things in the custom form right? So everything is related with this SharePoint form. Now, if you expand this, you will see all of the controls added here, but not as controls, but as data cards, so SharePoint power apps today has this concept of a form.

A

Control is made up of different data cards with which you can customize the elements that go into each data card and that data card is associated with whatever the data mapping that you have in your back-end. So if you look at the title data card, for example, it has something around star visible, which you can see that it says it's required or not, and then you have error message right. So if there's any problem you could display, you could use this label to display an error message.

A

It has the actual control the element in this case. It's naming a static, R value, because that's the thing that you would have to go look at if you want to get what's the value of this title right and then you got the actual key, which is the label for the field that you we just. You know back the SharePoint, the display name of the field, so the first thing you have to do.

A

If you want to really manipulate the fields here, which is really not convenient, I would say, but here is how you could do it click the SharePoint farm and in the property pane. You got this option called edit fields, and that is where the pain comes up. When you click on it and you get the field summary of you know all the things that you have here in your form now once I go here, you can see, I can actually drag and drop.

A

I can rearrange, I can put anywhere I want right, so I can bring the effort at the bottom and boom. It's now changed. I can also say: I. Don't really want this attachments and I'm going to remove it right, quick, so I can remove that back. I, don't really want sign of status. It's not something. I want to show with people actually edit France I can remove that as well right and if I want to add again this, for example, oh, you know I want to add the sign of status back.

A

So if you click Add field, you actually see all of the field types here that has been brought from the list, so you can search quickly for sign-off and then add it back right. So now that will get added here.

A

So let's remove that I really don't want it here for this form, and the other thing you can also do is that when you look at the SharePoint form in your property pane, one of the key things to really understand here is that as soon as you click anything in the form, the property paint changes to that context right pretty simple, but you have to click on the form or use the tree view to click on the form to get back to the farm properties.

A

In here you can. You can see that there is a several options here. You can have a vertical layout. You can have kind of the horizontal layout. If you want simple layouts here, you can also choose how many columns you want especially important if you are going with the horizontal layout and also there is a default mode. So this is the farm mode. So if I say in it, what happens is becomes the edit mode. Now, since we came from SharePoint, it takes a default.

A

The first item that is then a SharePoint to show you an example of how the Edit form would look like as a preview mode. Here you can always click the play button to also preview in power apps, but this is not the actual preview of the form how it looks and SharePoint right so I'm going to click the form again and now what I have done is I've set the default mode to you. It really doesn't matter.

A

Consider this as something a maker would decide to see how the farm looks in new edit and other modes, but when it comes to SharePoint, if you have seen here in the SharePoint integration piece, if you go to advanced, you can see what happens on you.

A

We actually call the forum modes directly and open the forum in that particular mode, so it doesn't really matter that if you set the default for the SharePoint forum to be edit or do it actually is also handled in the runtime to open the right thing, but the cool thing here is that no, your the new forum or you can do some specific things that you want to do for new forum right. So, for example, this title is empty.

A

Maybe I want to put some text that I can I can enter here, for people can see what they actually can can do right. So if you come here in the properties pane when you select the actual text control for the title field, there is some options here in the properties, and one of them is hint text. So here I can say.

A

A

Title right, then there you go so now you get. Actually you don't need the course.

A

So now you get the placeholder text for the title, so you can actually do these things for specific control sets. Now. One of the key thing is for the date control right, so you do want to say some default value for tape with the new form opens up. So you can do that here as well, but it's a little bit tricky and this is where the usability piece comes into the picture right. You go here and you look at the properties in the property pain. It's like well, I.

A

Don't have the option to set default values; they don't have the option to do some more stuff. With review the date control, we can actually click advanced. There are lots of other properties here that are not available in the properties tab. So some of the things are. If you go look at the data for the take control and expand more options, you can see there are lots of options here right.

A

So the first one is format, so you can say I, don't like the format and look yet so I'm, just going to say a date-time format dot. You know.

A

Let's say long date, time.

A

Right so it will show Monday December 31st 2001, so you can change the format here. You have that opportunity here and something else that is really I, find it very kind of very useful. One is start here: every calendar you pick. Sometimes it's like set to 1999 1901 right, I, really hate that. So with the start, your option I can actually set this to 2016 or you know, I, don't know 1982 or 2018 right. So the user can stop the calendar from that stop year and India as well.

A

You don't want to end it in 2050. Maybe your solution is only valid for the next three years, so you can simply use expressions as well, which is today plus three right so from today, and you get the ear and then you add three years to that. That would mean whenever the form opens three years from now is a calendar day that you want to show right. So those are some we, you know good good options to to actually look at now.

A

One of the things you can see here is that I want to change the default date value to be. Today's date, but you can see it's actually grayed out, I, can't really change things here. So one of the things you see here is this: property cannot be edited while they control this wok. So I really don't know how this lock and unlock happens with forms, but one of the things I know is that users really don't like this right.

A

It's like hey I'm at the farm, I'm editing it can you please let me do with the things I want to. So one of the things to remember is that when you are editing with controls today, what you have to do is you have to go, select a control and then go to the advanced and then unlock to change the properties, so click that lock button further control that you're editing and this is per control and actually per data car. So that's something you have to do for every data car control in your form.

A

I know this is really not an ideal experience, but this is also something they've been looking at to improve. You know have ability for users to do a lot of stuff here very quickly. So now you can see that I got a lot of stuff here enabled and then, if I actually go to the date, I actually have default date here, so in the default date. What I can do is now I can write expressions right, so I can say if SharePoint now we can write it here.

A

If you feel this is really small, you can also see that as I started typing, the expression I got it here in this expression board, where you can actually get more with here right. So if I all I want to do is if SharePoint form one dot mode right is equal to farm mode, which is what I'm looking at is new right.

A

So if the farm more is new, then I want the default date to be today right, otherwise, I want whatever it is getting from its parent, meaning that from the data source, if you click Edit, there's already a date on it. So you click view. This is already a date on it. So I want that to be the default. If it's not a new form right. So now you can see it has already reflected here in my control right. So this is how we can work around with setting default dates. Are you know?

A

This applies to any any other field here right so, depending on the farm mode, you want to do or you want to set certain values to that particular field.

A

So that's the kind of view around how you work with the controls, the data cards and things like that. Now you can do a lot more right, so you can actually go to the owner, and this is a data car and you can see that you still have your unlock. So we do the unlock, but I want to add more stuff to it. I want to add a picture, so I can actually show the owner picture besides the control right. So to do that.

A

What we have to think about is: where are we adding this picture right? We are going to add it with the control which is bound to the owner, so here I have the owner writer right. So if I go back to my form and now I set my default Motors edit, you can actually see there is a order associated here right so inside this data, cart, I want the image control because the image control needs to be bound to this user. So if you see here in my tree view.

A

Here's my owner data card I can go insert and I can basically add an image right. So now that image is added inside the data card here and obviously I can I can change the size. So what I'm gonna do is I'm going to minimize that, since this is inside the data card, I can actually control everything here.

A

Right at this point, I'm just like making sure everything works, I can also expand this a little bit. So there is some spacing there and I can select this control right. The image and I can easily now say that this image, which you can see here in the properties, is none right now. I can add an image file right.

A

So let me add an image file here which I downloaded, which is a blank profile image right and as soon as I do that I get a blank profile image and you can see how it actually changed here now I'm using my assets that I have in custom form in my computer that I uploaded and I'm using it here to point to that particular image control. But this is not the experience I want I actually want the value of the user that is selected to be part of the black picture.

A

Maybe this is something I want to do when I actually open a new form just like how we set the default day right. So what do we do now? We have to go write expressions. We don't have an expression builder, yet in power apps, so we got to go and get dirty with our Excel like expressions in power apps right. So what I'm gonna do here is I'm gonna, make sure that I have the name for this, so that is Dana card value, seven right!

A

So that's the control that has my name of the owner and the details of the person selector. So I'm going to click my image here and I'm going to say: if we reuse some functions is black right, and that is so. As you type, you will actually get the intellisense white data card value, seven right, dark selected right. So if that is blank, I want to show the black profile picture right.

A

If not, I want to go to the data card value, seven dot, Selleck right and then you can see I actually get every intelligence of the property of the person control from SharePoint. So I can display picture right now. I close the.

A

Yeah there you go all right, close the thing, and now we can see I actually got the image of the picture, but it's also now, if I go to this farm and change the default mode to new, you can see. I got the black picture right and if you actually want to test this, you can actually go find. You know a user here, Nestor and now the image is now change. The next mistress and I actually delete this. You can actually see it goes back to black. So that's pretty simple right.

A

If you know exactly how to go. Do this thing now, this has become something that he can repeat everywhere in your project and, and you actually know how to go. Do this thing right. The other thing I always find is. It will complain about hey. This is quiet I, don't like it I want to make it something wrong right. So all you need to do here is go to this border radius and let's say we put 15 right and then.

A

There you go so 15, maybe.

B

A

And now, if I go back to my farm.

A

It it you can see that it's actually round, so you can control those things too in here in your properties, with that image control, specifically so and getting again, if you want to add more things to this farm right. So, for example, you click the farm, you saw it, it feels and when you click add fields, everything here was from SharePoint. What, if you add, wanted to add your custom fields or something that is part of the farm?

A

Let's say you just wanted to add a header to the farm right, so you can do that the two ways you can basically shrink this form and then add your controls here in the canvas right. But I don't really like that approach, because then I'm building something that is not part of the form so I go to the form.

A

It feels and there's an option to add a custom car when you click the dot-dot-dot made it and you click that you actually get now a custom car so now, I can push that custom car to the top right. I can basically here come back here. Make sure and selecting the data card insert a label right and I can here say.

A

Beautiful custom form.

A

I can do some things, I can go here. I can fill the color to be a team color and then I can select the theme for the text color. As you know, white I can move around in the data. Cart make it something that I can fit to the screen. I can reduce the size for that as well. I can even go ahead and say well, I will put the center align text and boom now I actually have a form that will here with some custom controls, and you can put any control here.

A

You know it could also be something else coming from other data cells right. So now all I need to do if I want to push this form to SharePoint. This is you can go to the file you can save and publish or if you just want to click black back to SharePoint you'll, have the option to save and publish your changes so now that I can do that and I? Actually, you know, will get the power. Apps will publish this and open the list and just to make sure things are good. You do another refresh.

A

And now I click new. It will actually load the custom farm with all the stuff that we actually made, including the default date and and the default image that I have put here. When you don't have anybody selected here right and if you actually click you can see that it's actually giving you the.

B

A

Form, if you in it all, you can see it's still actually using that image and if you see the day and then actually click here, it is using the configurations we said 2018 and then 2022 three years from now, I don't have to deal with the 1901 2000 or one dates right. So that's great! So that's the basics of getting started. I will do some more demos as we come of our summer vacation, so I'll go deeper into how we can do some other scenarios in custom flops.

B

Excellent Thank You Jax. Thank you very much, really really useful stuff for getting this shown and recorded I say getting started model as well, because I think every every now and then we forget about the fact that there's always new people coming in and then they don't know how to get started on on these technologies.