Summary

Are you developing apps in Power Apps? Have you heard of Creator Kit? https://aka.ms/CreatorKit If yes, great. If you have not heard of it I highly recommend you check that out. I will put some video references at the end of this post.

This post will share my learning on the ExpandMenu canvas component from the Creator Kit.

The Creator Kit has canvas components and PCF Controls. Please note, the Power Apps Component Framework (PCF) Controls are the code component. You may run into DLP issues blocking set by your company admins to deploy code components. If you are a pro developer the source is located here for your study.

Please note that there is a new experimental feature used i.e. “Behavior formula for components“. You will need to turn on this new feature in your environment.

ExapandMenu Inner Working

Input, Output, and Behavior properties.

All components have input and output properties. The input properties are to pass to the component and the output is for getting values from the component. Additionally, there is now new behavior property, think of behavior properties as events being raised by the component.

Input Properties

The input properties are for passing the values to the ExpandMenu Component. Note: there is a DefaultExpandValue property, it has the “Raise OnReset” event flag as turned on. This means the Component’s OnReset method will run whenever this property is set, it will then set the variable “IsOpen” to its value.

Components UI Controls

The following are the UI controls. The imgExpanButton acts as a hamburger image. The gaExpandMenu is the vertical galley with the Items values bounded as the list of menu items.

imgExpandButton

When a user clicks on the Hamburger image, the OnSelect event fires. It sets the Component level variable “IsOpen”. The IsOpen variable is tied to the Component’s IsExpanded output property. Also, it makes a call to the “OnExpandSelect” behavior property.

Notice the image is an SVG Path with the Theme color value.

Attribute	Value
Image	“data:image/svg+xml,” &  EncodeUrl(     “<svg xmlns=’http://www.w3.org/2000/svg&#8217; xmlns:xlink=’http://www.w3.org/1999/xlink&#8217; version=’1.1′ viewBox=’-10 0 2068 2048′>   <g transform=’matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)’>    <path fill='” & ExpandMenu.Theme.palette.neutralPrimary & “‘ d=’M2048 1408h-2048v128h2048v-128v0zM2048 384h-2048v128h2048v-128v0zM2048 897h-2048v127h2048v-127v0z’ />   </g>   </svg>” )
OnSelect	/* Toggle IsOpen Variable. It is local to the component. Also, call the OnExpandSelect event. */ Set(IsOpen,!IsOpen); ExpandMenu.OnExpandSelect()
Height	46
Width	46

glExpandMenu

Attribute	Value
Items	ExpandMenu.Items
Height	ExpandMenu.Height
Width	221
OnSelect	/* If a screen is present and a navigation flag is not disabled then navigate to the screen. Also, raise the OnButtonSelect Event */ If(!IsBlank(ThisItem.Screen) &&     ExpandMenu.IsNavigationEnabled,   Navigate(ThisItem.Screen)); //Raise the OnButtonSelect event ExpandMenu.OnButtonSelect();

rectHighHighLight

Attribute	Value
X, Y	5,10
Width, Height	3,20

imgIcon

It first checks Icon Name is present in the table hash. If not found it uses whatever is passed.
If present then it builds the using SVG path with theme color values.

Attribute	Value
Image	If(IsBlank(ExpandMenu.GetMenuIconPath(ThisItem.Icon)), ThisItem.Icon, “data:image/svg+xml,” &  EncodeUrl(     “<svg xmlns=’http://www.w3.org/2000/svg&#8217; xmlns:xlink=’http://www.w3.org/1999/xlink&#8217; version=’1.1′ viewBox=’-10 0 ” & 2068 & ” 2048′>   <g transform=’matrix(1 0 0 -1 0 2048),rotate(0, 2068,1024)’>    <path fill='” & ExpandMenu.Theme.palette.neutralPrimary & “‘ d='” & ExpandMenu.GetMenuIconPath(ThisItem.Icon) & “‘ />   </g> </svg>” ))
X,Y	14,12
Width,Height	16,16

lblLabel

Note the left padding is applied to skip the icon on the left of the label.

Attribute	Value
Text	ThisItem.Label
ToolTip	ThisItem.ToolTip
Width, Height	Parent.Width,40
PaddingLeft	46

Use Component on the screen

Add a screen and add the following.

Width:	If(Self.IsExpanded, 200, 46)
Items:	Table(         {Icon:”PowerApps”, Label: “Power Apps”, Screen:scrExpandMenu},         {Icon: “PowerBILogo”, Label: “Power BI”, Screen:scrAutoWidthLabel},         {Icon: “PowerAutomateLogo”, Label: “Power Automate”, Screen:scrBreadcrumb},         {Icon: “Dataverse”, Label:”Dataverse”, Screen:scrCommandBar}    )

Legend

Earlier in the post, I added references to #1, #2, and #3. I kept it at the end to refer it back as it is a large code piece.

#1	Table( { Icon: “PowerApps”, Label: “Power Apps”, Screen:App.ActiveScreen, Tooltip:”Power Apps Tooltip” } )
#2	{ palette: { themePrimary: “#0078d4”, themeLighterAlt: “#eff6fc”, themeLighter: “#deecf9”, themeLight: “#c7e0f4”, themeTertiary: “#71afe5”, themeSecondary: “#2b88d8”, themeDarkAlt: “#106ebe”, themeDark: “#005a9e”, themeDarker: “#004578”, neutralLighterAlt: “#faf9f8”, neutralLighter: “#f3f2f1”, neutralLight: “#edebe9”, neutralQuaternaryAlt: “#e1dfdd”, neutralQuaternary: “#d0d0d0”, neutralTertiaryAlt: “#c8c6c4”, neutralTertiary: “#a19f9d”, neutralSecondary: “#605e5c”, neutralPrimaryAlt: “#3b3a39”, neutralPrimary: “#323130”, neutralDark: “#201f1e”, black: “#000000”, white: “#ffffff” } }
#3	LookUp( Table(         {             Name: “SizeLegacy”,             Code: “E2B2”,             Path: “some code for SVG PATH”         },         {             Name: “PageLink”,             Code: “E302”,             Path: “some other code for SVG PATH”         }      ) , Name=IconName).Path

Summary

This post may help you when you look at the Expand Menu component code and try to use the same pattern for your own new control. Keep it as clean as possible like this control.

You can look at this video for the Creator Kit Overview.

Please let me know your feedback.