A Deep Dive into Power Apps – Making Custom Component Configurable

making component configurable
Table of Contents

Contributors

Picture of Vivasoft Team

Vivasoft Team

Tech Stack
0 +
Want to accelerate your software development your company?

It has become a prerequisite for companies to develop custom software products to stay competitive. Vivasoft's technical expertise.

In our previous article, we explored the process of creating a custom component in PowerApps.

 In this article, we will continue our journey into PowerApps by delving deeper into the customization of components. Specifically, we will focus on making components configurable, which allows end-users to customize and adjust various aspects of the component to fit their specific needs. By making components configurable, we can create more flexible and versatile applications in PowerApps. So, let’s continue our exploration of PowerApps and learn how to make components configurable.

Since reusing a component throughout the application is our main goal, we are going to create it with maximum configurability. To enhance the configurability of a component PowerApps provides the concept of custom properties, which will be discussed and implemented later in this article.

 We already have created a Component named “sidebar_component” which has been demonstrated in the last part of the article.

power apps
Fig – 1: Component (sidebar_component)

Currently, this component uses a predefined table as a source which providing name, icon and respective Screen control for each item of the sidebar menu.

Since we want to reuse the component in different screens even in different application, we must need a facility to provide the source from outside of the component. 

Here PowerApps introduces the Custom Property concept in the component. Let’s create a custom property to pass a collection/table as a data source.

Creating Custom Property

To create a custom property, first, we need to click on sidebar_component in the left panel, then from the right panel we can find the “New custom property” button. Clicking on the button we will get a form to fill in the necessary information and set the preferable type for the custom property. 

Since we are going to use it as an input property, we are going to select “Input” under the Property Type option. We already mentioned it will pass a table as source for the gallery, so we are going to select “Table ” under Data type option. We are going to check “Raise OnReset when value changes” so that whenever the table changes the sidebar resets on its own.

powerapps
Fig – 2: Creating Custom Property

By clicking on Create button our custom property (menu_items) will be ready to use.

 

We just created the custom property, now let’s set a value for it to be visible in our component. 

After clicking on the sidebar_component from left panel we can select our menu_items property from property list. Inside right box of property we can set the value for our property. Let’s set the following table as menu_items.

				
					Table(
    {id:1, name:"Home", icon:Icon.Home, screenToNavigate:App.ActiveScreen},
    {id:2, name:"Contacts", icon:Icon.Notebook, screenToNavigate:App.ActiveScreen},
    {id:3, name:"Schedule", icon:Icon.CalendarBlank, screenToNavigate:App.ActiveScreen}
)

				
			

It’s the same table that was provided in the previous part of the article.

Now time to use some color to make it look better. And again we are going to use some custom properties to color it, so that we can control the color from outside of component easily.

Let’s think for a second and try to find out which items need to be colored and if any color should change over activity or event. 

At this basic phase, we may consider 4 colors –

  1. Background color for sidebar
  2. Selected Menu Color
  3. Icon’s fill color
  4. Menu Label color

Though we can use the same color for Menu Icon and Label, we will try to make it much configurable as possible.

So, now we should create 4 Custom Properties for sidebar_component.

Each of those 4 custom property will be of input type and their data type will be Color.

After creating those 4 custom properties let’s rename those to-

  1. default_bg_color
  2. selected_item_color
  3. item_fill
  4. label_color

After renaming let’s set the color for those properties like the below for now to check the effect- 

default_bg_color :RGBA(50,80,195,1)

selected_item_color :RGBA(33, 45, 170, 1)

item_fill :RGBA(255, 255, 255, 1)

label_color :RGBA(255, 255, 255, 1)

Do you notice any changes in the view of the sidebar component?

We can’t notice any changes as we haven’t used any of those properties in our gallery yet.

Let’s use those properties to color the component by setting the following properties of different elements-

				
					Sidebar_component:
	Fill: Self.default_bg_color
sidebar_gallery:
	Fill: Parent.default_bg_color
menu_item_icon:
	Color:sidebar_component.item_fill		
menu_item_label:
	Color:sidebar_component.label_color
				
			

After setting all those properties the changes will be visible like below.

power apps
Fig – 3: Component after using color properties
power apps
Fig – 4: Shape named item_background added

Now let’s insert a shape inside the gallery and rename it to item_background, then set its property like below-

				
					Item_background:
	X : 0
	Y : 0
	Width: Parent.Width
	Height: Parent.TemplateHeight

				
			

We can color this shape (item_background) with selected_item_color and keep it transparent when it’s not selected.

But how will we know which menu item is on our current screen?

Recall, we can provide screen control as the value of screenToNavigatecolumn in the Source Table, which will help us to know the matching screen.

Now we need to know the current screen. Using App.ActiveScreen we can easily access the current screen. So we can set a logical color for item_background like below-

				
					item_background:
Fill: If(App.ActiveScreen = ThisItem.screenToNavigate, sidebar_component.selected_item_coolor, Transparent)
				
			

Notice all our menu item’s backgrounds yet look the same. Why?

Recall, we set screenToNavigate property of the source table to App.ActiveScreen in every row. And we had no other option then, because we did not create any screen at that point. 

When we will send the source table from screens we will send different screen-control as value for different row of the table.

To understand it better let’s create some screens. After creating 3 screens named Screen1, Screen2 and Screen3, let’s insert our recently created custom component (sidebar_component) inside each screen. Then set menu_items property of each component like below-

				
					Table(
    {id:1, name:"Home", icon:Icon.Home, screenToNavigate:Screen1},
    {id:2, name:"Contacts", icon:Icon.Notebook, screenToNavigate:Screen3},
    {id:3, name:"Schedule", icon:Icon.CalendarBlank, screenToNavigate:Screen3}
)
				
			

At this point, our sidebar in a screen will look like the below –

power apps
Fig – 5: After providing screen references in source table

It’s time to navigate from one screen to another using the navigation bar / sidebar we created. 

Set OnSelect property of sidebar_gallery as shown –

				
					sidebar_gallery:
	OnSelect:Navigate(sidebar_gallery.Selected.screenToNavigate);

				
			

It works, but doesn’t it feel like something missing here?

Notice carefully the pointer visual does not change all over the menu item. Let’s add a button and make it transparent to get that feel since you only get pointer visual changed over a button element in PowerApps.

After adding a button and renaming it to menu_item_button, let’s set its property to –

				
					menu_item_button:
	X:0
	Y:0
	Text:""
	Width: Parent.Width
	Height: Parent.TemplateHeight
	BorderThickness:0
	Color:RGBA(255, 255, 255, 0)
	Fill:RGBA(255, 255, 255, 0)
	HoverFill:RGBA(0, 0, 0, 0.1)

				
			

Now it looks better and while hovering over the menu it reacts accordingly.

power apps
Fig – 6: After Adding menu_item_button

Notice the menu appears at the very top of the screen, what if we want it below any point. Let’s make it configurable.

For that we need another custom property, let’s create and rename it to menu_y.

				
					menu_y:
    Property type: Input	
    Data Type: Number

				
			

Let’s set the value of menu_Y  to 80 for Now.

 Now the sidebar will look like below

power apps
Fig – 7: After Adding menu_y property

Our screen looks better but something missing yet.

We need two more components for header and footer portion of the screen. We are going to create those components in the next part of this article.

Tech Stack
0 +
Accelerate Your Software Development Potential with Us
With our innovative solutions and dedicated expertise, success is a guaranteed outcome. Let's accelerate together towards your goals and beyond.
Blogs You May Love

Don’t let understaffing hold you back. Maximize your team’s performance and reach your business goals with the best IT Staff Augmentation