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.

Let’s create a component

1. Create a new canvas component cmp_SplitButton and add the following custom properties to it

   property	type	default
   splitButtonHeight	Number	40
   splitButtonWidth	Number	196
   primaryColor	Color	ColorValue("#1e6091")
   secondaryColor	Color	ColorValue("#168aad")
   textColor	Color	White
   buttonText	Text	"open"
   Onchange	Behavior(Text)	(needs boolean parameter called option)
   Onselect	Behavior(Boolean)	true

2. Add a button btn_main to the component
3. 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.
4. Now let’s refer to our custom properties:

   property	value
   BorderColor	Self.Fill
   Color	cmp_SplitButton.textColor
   Fill	cmp_SplitButton.primaryColor
   Height	cmp_SplitButton.splitButtonHeight
   HoverBorderColor	cmp_SplitButton.secondaryColor
   HoverColor	Self.Color
   HoverFill	cmp_SplitButton.secondaryColor
   PressedBorderColor	cmp_SplitButton.secondaryColor
   PressedColor	Self.Color
   PressedFill	cmp_SplitButton.secondaryColor
   Radius	0
   Width	cmp_SplitButton.splitButtonWidth-36

5. Add a dropdown control drp_options to the component and refer as follows to our custom properties:

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

6. Set the Items property to any array that you like - I used ["open in SharePoint", "open in Teams", "send as an email"]
7. 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

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.

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!