Configure the Panel component for a modern look in Power Apps

Don’t we all (secretly) trying to make a Power Apps app that doesn’t look like a Power Apps? 😅 Well, the Panel component is one of many modern components offered in the Creator Kit. As the name suggest, it’s a component that can be placed on the right or the left hand side of your application, and truly makes a difference visually.

Download the Creator Kit

As mentioned earlier, the panel is part of the Creator Kit. So you need to download and import it in your desired environment before you can benefit from it.

Once imported into the environment, open your app (or create a new one) and insert the component.

It will then appear under Library components and you can click on it to add to your screen.

Component basics

The Panel component offers a few basic settings that you can configure quickly:

• Title
• Subtitle
• Position (left or right)
• Size
• Theme / colors

Other settings are expected to be a little more than just an on/off situation 😉

• Content
• Cancel & OK buttons
• When to open the panel

Scenario

In our scenario, we’re going to submit a annual leave request. Therefore, we’re going to open the panel when clicking on a New button in the app (as well as Edit or View), fill a form, and submit that request. When submitted, the panel will automatically close.

So let’s go!

Configure the basics

All the submitted requests will go into a SharePoint list called Requests in my Leave Requests Demo site.

On top of our component, I’ve also added the following controls to my app:

• Header
• Toolbar (to create/edit/delete requests)
• Table (to show the requests)

⚠️ Please note that at the time of writing this post, those 3 controls are in Preview. Hopefully they’ll be GA soon! ⚠️

Add a Form

Now let’s add a form into that beautiful panel. Insert a Form control and connect it to the Requests list.

We want this form to have identical behaviours to the Panel. Meaning almost the same dimensions and being visible only when it’s visible.

So let’s change the following properties of the Form control:

• Height = PanelDemo.ContentHeight
• Width = PanelDemo.ContentWidth
• X = PanelDemo.ContentX
• Y = PanelDemo.ContentY
• Visible = locShowPanel
• FormMode = New (for now)

Those will make sure the form is nicely inside the panel, but we can adjust the position & the cards individually to look better 🙂

Finally, let’s change the “Ok” button to “Submit“. It makes more sense! Select the component, and change the Buttons property:

Now let’s configure opening/closing with the correct Form Mode.

• When we select an item in the Table control, we want the Toolbar (menu) to enable the buttons
• When we select an action (New, Edit, or View), we want to open it with the selected request in the correct form mode
• When we click on Cancel (or the X on the top right), we want to close the panel

Select the Form, and on the Item property, enter:

TableRequests.Selected

Select the Toolbar control, and in the OnSelect property, enter the following:

Switch(
    Self.Selected.ItemKey,
    "new",
    NewForm(FormRequests); UpdateContext({locShowPanel:true}), 
    "edit",
    EditForm(FormRequests); UpdateContext({locShowPanel:true}),
    "view",
    ViewForm(FormRequests); UpdateContext({locShowPanel:true})
)

Still in the Toolbar, on the Items property, enter:

Table(
    {
        ItemKey: "new",
        ItemDisplayName: "New",
        ItemIconName: "Add",
        ItemAppearance: "Primary",
        ItemIconStyle: "Regular",
        ItemTooltip: "Add new request"
    },
    {
        ItemKey: "edit",
        ItemDisplayName: "Edit",
        ItemIconName: "Edit",
        ItemDisabled: IsBlank(TableRequests.Selected.'Leave Type'),
        ItemAppearance: "Subtle",
        ItemIconStyle: "Regular"
    },
        {
        ItemKey: "view",
        ItemDisplayName: "View",
        ItemIconName: "Eye",
        ItemDisabled: IsBlank(TableRequests.Selected.'Leave Type'),
        ItemAppearance: "Subtle",
        ItemIconStyle: "Filled"
    },
    {
        ItemKey: "delete",
        ItemDisplayName: "Delete",
        ItemIconName: "Delete",
        ItemDisabled: IsBlank(TableRequests.Selected.'Leave Type'),
        ItemAppearance: "Subtle",
        ItemIconStyle: "Filled"
    }
)

Note that the ItemDisabled formula will allow for the buttons to be enabled when a request is selected, otherwise it will be disabled (“Leave Type” is a mandatory column in my SharePoint list)

Next, select the Panel component, and enter the following in their respective properties:

• Visible = locShowPanel
• OnCloseSelect = UpdateContext({locShowPanel: false});

For the OnButtonSelect property, enter the following (for now):

If(Self.SelectedButton.Label = "Cancel", UpdateContext({locShowPanel: false}));

Housekeeping

A little bit of housekeeping before we finally submit a new request 😉

• The Submit button should not be enabled or not visible when we click on View
• Therefore, the Cancel button should become “Primary“
• We can also be fancy, and change Submit to Update when we click on the Edit button

Select the component, and modify the Buttons property to:

• The Request Status & Approval Comments fields should not be visible when creating a New request OR should be disabled when Editing a request

Select the Request Status DataCard, and:

Visible property:

If(FormRequests.Mode = FormMode.New, false, true)

DisplayMode property:

If(FormRequests.Mode = FormMode.Edit || FormRequests.Mode = FormMode.View, DisplayMode.Disabled)

Repeat the same for the Approval Comments DataCard 😉

Create a new request

Update the following formula, and we’re good to go!

Thanks for making it to the end! 🙂