Customized SharePoint List Forms in Power Apps – Ten Pro Tips

Laura Rogers

0 comments

In this ebook, we’re going to take a look at 10 pro tips that can help when you’re dealing with customized SharePoint list forms in Power Apps. The SharePoint list that I’ll be using today as an example, is a simple travel request list that was created as a custom SharePoint list. I’m going to use this throughout all of the demonstrations, as I go through the 10 tips.

Tip 1: Landscape Orientation

The first tip is to set the app’s orientation, and it’s one of the very first things that I do.

  • Go to File -> Settings
  • Screen size + orientation -> Landscape
  • Click Apply at the bottom.

This will give it more real estate, more to work with and the ability to have a bigger form.

Tip 2: Show Created By

One of the common things that we see in online forms and in paper forms, is that it asks for your name at the top of the form. In SharePoint, there is a Created by field in each list and library, so we always know who is the person that created something or last modified something.

If you want your form to have that look of showing the currently logged in person’s name in the Created By field as they are filling out a new form, the trick that I use, is to add the created by field to the form and then add a label to show their name it’s a new form. It just displays the full name of the currently logged-in user.

They can see their name populated in the created by field, and when the form is open to an existing item, the created by will just show the person’s name who created the item.

  • Add the Created By card to the form.
  • Unlock the card.
  • Inside the card, insert a label.
  • Go to the Text property of the label. Type User().FullName
    (see the screenshot above)
  • Go to the Visible property of the same label. Type the name of your form control, in this example, my form is called SharePointForm1. This syntax will ensure that this label will only be visible when the form is a new form (not an existing item). SharePointForm1.Mode=New

Tip 3: Show/Hide Fields

The third concept is the ability to conditionally hide, and show fields in a form. I have a drop-down box called trip type, so in this example, the logic is that I only want the estimated cost field to be displayed if it’s a certain trip type. The best way to start off is by giving your drop-down box a better name instead of just the auto-generated name that it came with. In this example, I’m renaming it cmbPickTripType

  • Click to select the entire estimated cost card and go to the Visible property.
  • cmbPickTripType.Selected.Value=”Conference”
    I only want this to be visible if the trip type is conference. Now I’ll just add another just for fun.
  • If it equals conference or if it equals training. The || represents OR

When I change the trip type to “customer visit”, there is no estimated cost field showing. One more interesting thing I’ll do, is I’m going to go ahead and just unlock the Estimated Cost card and go to the display name of this field. I want it to show the value that I picked in that other combo box. Just concatenate this together.

Tip 4: Required Fields

When it comes to working with required fields in a SharePoint list that is used in Power Apps, my best practice is to not set any of the fields in the list as required. If you do this, keep in mind to be sure that users aren’t going straight to the list and editing it in the datasheet (quick edit) or something like that, because then everything would be out the window and you wouldn’t have any required fields. But, with Power Apps, we can set all of them as not required in the SharePoint list settings, but then just set them required directly in the form control. You don’t have to worry about doing the settings in both places.

  • Go to your list settings in SharePoint.
  • Set all the fields to not required
  • Go to each card, unlock the card.
  • Go to the property called Required, which is a boolean
  • Set it to true, for the fields that you would like to be required, which means that the user has to fill them out before they are able to submit the form.

As you change each of these required properties to true, the little asterisk automatically appears next to them. The cool thing about having this required property is that you can make it conditionally required. For example, with the estimated cost of the conference, I can do something like make it required only if a certain type of trip is selected. Just like I made the estimated cost appear when a certain type of trip is selected, I can also just make it required under certain conditions as well.

Instead of just saying Required = true or false. I’m going to say if the trip type is a certain trip type, then make it required. I’m just going to use the same logic that I used in the visible property. When I change it to conference or training, it is going to be a required field.

Just another little fun tip: If my required logic is the same thing as my visible logic, I can just have it reference the visible property of the card, which is called Estimated Cost_DataCard1 in this example.

Now, as seen in the below screenshot, the required property has the exact same boolean condition as the visible property, so if I ever change the logic that determines when the estimated cost is visible, it will automatically change when it’s a required field.

Tip 5: SharePoint Integration Settings

Tip five to understand the SharePoint integration property. Select this property (on the left) and go over to the advanced tab on the right side of the app.

This is where you’re going to define the actions that you want to happen automatically at that time when the app opens. Take a look at these properties on the right.

  • OnNew is where you define what actions you want to automatically happen when someone clicks the new button in the SharePoint list.
  • OnEdit is for automatic actions that run when someone is editing an existing item.
  • OnView is where you define actions to run when someone clicks to view an existing item
  • OnSave runs when a user clicks the built in save button on the form in the SharePoint list.
  • OnCancel runs when a user clicks the built-in cancel button.

As you can see, you have a lot of built-in actions that are automatically in here, you can optionally add additional things. If you have an app that is more complex, has multiple screens, and you are using a customized list form, here are some suggestions of ways that you might want to configure these properties.

Tip 6: Cascading Drop-Downs

Pro tip six is all about cascading dropdowns. In this example, I have these lists in SharePoint:

Travel requests – Has 2 lookup fields: Division and Department

Divisions – Has the name of the divisions.

Departments – Each department has a lookup to the division that that department is in.

The goal is for cascading dropdown is, when a division is selected from a drop-down, it will automatically filter the list of departments to only show the departments in that division.

These are just lookup fields, so in the Power App, they’re both automatically just showing all the items in that list.

  • Rename the division combo box. Call it cmbPickDivision
  • Unlock the department card and select it.
  • On the properties tab, click depends on and this the setting used to create the cascading dropdown effect.
  • Before configuring the depends on setting, create a new data connection, to connect to that full list of Departments, and have the ability to filter it. For the data connection, select SharePoint, select your specific SharePoint site, and select the departments list.
    Note: Remember that any Power App can have multiple lists and libraries as data connections, and they don’t even have to be in the same site.
  • Go back to the depends on setting for the departments combo box. The Parent control is cmbPickDivision, and the Value of that. For Matching field, select the Departments list, and Division Lookup.
  • One more thing! Those values need to match, so go to the Items property of the departments combo box. Add the .Value to the end of ‘Division Lookup’, so it looks like this next screenshot. Now the 2 pieces of data match, they’re both “value”.
    Any time you’re using DependsOn setting, the value in one data source needs to match what you’re filtering by in the second one.
  • Go to the properties of this Department combo box. Click edit next to Fields.
  • Make sure both options here are set to Title, which is in this case, it’s the name of the Department.

Testing out the cascading drop-down, notice that when the division “Information Technology” is selected, the Department drop-down is then filtered to only show choices of the departments in the IT division.

Tip 7: Columns & Rows / Wrapping Cards

In my example travel request form, it’s time to make it look a bit nicer. I’ll select the form control, and in the Properties panel on the right, change it to 2 columns. Now the fields wrap across to just two columns of whatever order you had already put them in. Cards can also be rearranged, and they will stay lined up in those 2 columns, as long as Snap to columns is turned on. Turn Snap to columns off, in order to change cards to have varying widths throughout the form.

Notice that now I’ve dragged the destination and description to be wider fields, and dragged a few things around to rearrange and re-size.

Now here’s the big trick when it comes to getting these columns and rows to look the way you want and to not drive you insane. There are a couple of settings that it’s important to know about. The X and Y axes for cards work differently than they do in the rest of the app. In most places in the app, X and Y are measured in pixels. Here in the form control, the X and Y of the cards, are numbered like a grid of rows and columns.

In the above example, the Created By card is selected. It is in the first row, and the first column, so it’s X=0 and Y=0. They start at zero.

X is the column number

Y is the row number

You can configure all of the rows and columns of your cards just by using the X and Y properties on each card. This is especially useful when dealing with a very large form with 50 fields or so. This method is going to help you tightly control what shows where. To me, that this is the best tip, out of all ten.

Tip 8: Separators

Another fun thing to do to make your form look a little nicer and a little more professional is to give it the appearance of sections. This is done by adding a rectangle shape and using it as a divider line.

  • Go to the card where you would like to add a divider above it. Unlock the card.
  • Insert a rectangle shape inside of the card. Rename it recDivider.
  • Select the rectangle, change the Height to 3.
  • Go to the Width property, set it to Parent.Width
  • Set the X to 0, and set Y to 0
  • Select the rectangle and copy it.
  • Go to another card, unlock it, and paste the rectangle.
  • Select this second recangle. Since it gets an X and Y of 40 by default, change the X and Y to reference that first rectangle. X = recDivider.X, and Y = recDivider.Y
  • Copy this second rectangle, go to another card, unlock it, and paste the rectangle. Do this on all of the cards where you’d like a divider line It’s perfectly aligned!
    Tip: If you have a row where the card doesn’t go all the way to the full width of the screen, you can change the property called WidthFit to true.

Tip 9: Embedding an App in SharePoint

Tip #9 is embedding on a page in SharePoint. Any canvas app can be embedded on a SharePoint page, it’s just a little trickier to do it with an app that is a customized list form.

  • Save your app.
  • Publish your app.
  • In order to embed the app, you’ll need the app ID.
    Note: There is an extra setting in your app’s advanced settings, a feature called enable app embedding experience. It will change the background of the hosting canvas to white so that you don’t have any kind of awkward rectangle around your app. It is optional, but you might want to try out.
  • Click See all versions.
  • Go to Details and this will show the app ID.
  • Copy it.
  • Go to any page in SharePoint. Add a Power Apps Web Part.
  • Paste the app ID in the web part settings on the right.

Tip 10: Standalone App Versus Customized List Form

Pro tip ten is to know the difference between a standalone app, and a customize SharePoint list form. This is a decision to be made every time you are starting to create a new app.

Everything that I’ve shown you in all these other tips in my examples have just had just been a very simple customized list form, however, I don’t recommend customized list forms.

Everything else that I showed in all of these other tips still applies, except for number 5, SharePoint integration settings. I highly recommend just using standalone apps, for every single app that you create.

Here are a few different reasons:

My blog posts:

POWER APPS STANDALONE APP VERSUS CUSTOMIZED LIST FORM

POWER APPS AS A FRONT END

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}