Luise Freese

How to build a split button component for Power Apps

tl;dr

Less controls mean less user confusion and better performance - This blog post guides you through the creation of a simple yet effective split button component.

splitbutton walkthrough

Let’s create a component

  1. Create a new canvas component cmp_SplitButton and add the following custom properties to it
    propertytypedefault
    splitButtonHeightNumber40
    splitButtonWidthNumber196
    primaryColorColorColorValue("#1e6091")
    secondaryColorColorColorValue("#168aad")
    textColorColorWhite
    buttonTextText"open"
    OnchangeBehavior(Text)(needs boolean parameter called option)
    OnselectBehavior(Boolean)true

custom properties

  1. Add a button btn_main to the component
  2. Set its OnSelect property to cmp_SplitButton.Onselect() - this will make sure that when we later call that function we will return a true so that we can determine in our app if that button was selected.
  3. Now let’s refer to our custom properties:
    propertyvalue
    BorderColorSelf.Fill
    Colorcmp_SplitButton.textColor
    Fillcmp_SplitButton.primaryColor
    Heightcmp_SplitButton.splitButtonHeight
    HoverBorderColorcmp_SplitButton.secondaryColor
    HoverColorSelf.Color
    HoverFillcmp_SplitButton.secondaryColor
    PressedBorderColorcmp_SplitButton.secondaryColor
    PressedColorSelf.Color
    PressedFillcmp_SplitButton.secondaryColor
    Radius0
    Widthcmp_SplitButton.splitButtonWidth-36
  4. Add a dropdown control drp_options to the component and refer as follows to our custom properties:
propertyvalue
BorderColorcmp_SplitButton.primaryColor
ChevronBackgroundcmp_SplitButton.primaryColor
ChevronFillcmp_SplitButton.textColor
ChevronHoverBackgroundcmp_SplitButton.secondaryColor
ChevronHoverFillcmp_SplitButton.textColor
HoverBorderColorcmp_SplitButton.secondaryColor
Colorcmp_SplitButton.secondaryColor
FillWhite
Heightcmp_SplitButton.splitButtonHeight+2
HoverBorderColorcmp_SplitButton.secondaryColor
HoverColorcmp_SplitButton.textColor
HoverFillcmp_SplitButton.secondaryColor
PressedBorderColorcmp_SplitButton.secondaryColor
PressedColorcmp_SplitButton.textColor
PressedFillcmp_SplitButton.secondaryColor
SelectionColorcmp_SplitButton.textColor
SelectionFillcmp_SplitButton.secondaryColor
Widthcmp_SplitButton.splitButtonWidth+2

I know, that is a tedious task, but trust me, the result looks good.

  1. Set the Items property to any array that you like - I used ["open in SharePoint", "open in Teams", "send as an email"]
  2. Now let’s take of functionality of the dropdown - set the OnChange property to cmp_SplitButton.Onchange(drp_options.SelectedText.Value).

Add Functionality to your component

Depending on your use case, you will want to at least

  1. determine, if the button has been selected (to then perform other actions)
  2. determine, which value has been selected in the dropdown.

To achieve this,

  1. Add your component to the app
  2. Set the Onselect (custom) property to UpdateContext({loc_isButtonClicked:true}) - which saves a True value in local variable to determine if that button was clicked.
  3. Set the Onchange (custom) property to UpdateContext({loc_selectedOption: option}) - this way you set a local variable to the Selected Text of your dropdown

variables

Why is this better than a dropdown menu and a separate button?

We aim to deliver clean, consistent, and intuitive user experiences - and in cases where we want users to perform a main action or where its likely that one action is the most important action on a screen, we want to make that obvious to them. However sometimes, there are similar actions that can be performed as well - and then such a split button comes in handy. This design pattern is a great way to reduce visual clutter and provide a good user experience.

splitbutton

Feedback and what’s next?

I am curious - do you use split buttons as well? What are your use cases>? Let me know on twitter :-) If you found this blog post useful, please also subscribe to my newsletter - news coming about every 2 months, I promise to not spam you!

You May Also Like