cancel
Showing results for 
Search instead for 
Did you mean: 
yashag2255

Developing an ‘Alphabet’ based slider control in PowerApps

In this article I will show you how to create an alphabet based custom control in PowerApps. We will use the gallery control, the slider control (numeric based) and text label controls to create an alphabet-based slider as a custom component.

We will first look at creating the custom control component and then use it in a canvas app on a contacts list to view the contacts based on the alphabet chosen on the slider.

PCF

To create the components in the PowerApps app studio, we first have to enable ‘Components’ in the experimental features tab from the advanced settings of the app.PCFi1.PNG

The current slider control in PowerApps allows you to configure the slider for numeric values only. We will use this numeric slider in sync with a gallery control and a label control to create the alphabet-based slider control. We will start by creating a few custom properties for this control. These properties will allow the user to make any changes to the slider and view of the current position of the slider.SLIDER2.png

1. This the base component that we will be creating using the new component tab. We will add three controls: 'Text Label', 'Slider' and a 'Gallery' control.

2. This is the Gallery control of a 'Blank Vertical' layout. The width of this gallery is set to '50px' and the height is calculated based on the component height. The gallery items contains all the 26 alphabets (A-Z) and the height of each item is calculated based on operations performed on the component height to keep it in sync with the slider control.

The "Items" property of the gallery control is set to: 

["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

3. This is a Slider control of numeric type. The minimum and maximum values of this slider are set to 1 and 26 respectively corresponding to the index of the alphabets. The "OnChange" and "OnSelect" properties of this control manipulate the visibility of the text label that displays the selected alphabet on the text label when the slider is moved. 

4. This is a Text Label control that will display the alphabet selected on the slider control. Expression used on the 'Text' property of this control is: 

With({Records:["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]},Last(FirstN(Records.Value,26-Slider2.Value+1)).Value)

Explanation: Here we are making use of the newly released "With Function" to reduce complex formulas. Using the With function we are selecting the alphabet based on the slider value and displaying it on the text label. 4

5. Here we have set the custom properties for this component. 

a. Input Property 1: Slider Color: This allows the user to modify the color of the slider point. 

b. Input Property 2: Hover Text Background: This allows the user to configure the background color of the text label where the selected alphabet is being displayed. 

c. Output Property 1: Selected Alphabet: This returns the selected alphabet on the slider control using a text label. 

d. Output Property 2: Alphabet Index: This returns the index (numeric value) of the selected alphabet on the slider control. 

CanvasApp

We will implement the above created custom component on a gallery control that displays the contact names from a SharePoint list. A user has a large amount of contacts in their list and they want to view the contacts staring with a specific alphabet only. Here is how we will display the contacts on the gallery control based on the alphabet selected on the slider. 

SLIDER3.png

6. This is a Gallery control that displays data from a SharePoint List. Expression used on the "Items" property of this control is: 

If(IsBlank(Component1_2.SelectedAlphabet),Sort('My Contact List',Title,Ascending),Sort(Filter('My Contact List',Left(Title,1) in LastN(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],Component1_2.AlphabetIndex)),Title,Ascending))

Explanation: This checks if the 'Selected Alphabet' is empty and if so, it displays the entire data from the SharePoint list. Else, this will display the records based on the selected alphabet on the slider and the records starting with alphabet there on. 

7. This is the component that we created using the PCF and imported it on the screen of the canvas app. SliderControl.gif

In this article I have shown how to use the PowerApps Components Framework and a few already available controls to create an alphabet-based slider control in PowerApps. This component can be used as slider on contact lists, account lists etc. on gallery controls to sort/get the records with the text starting with the alphabet chosen on the slider. Similarly, based on scenarios, the PowerApps Component Framework coupled with the available controls in PowerApps can be used to create customised controls and use them as components across applications.

Attached with this article is the Slider Control Component!

I hope you found this interesting and it helped you. Thank you for reading!