web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / how to use a side gall...
Power Apps
Answered

how to use a side gallery or slider to filter the main gallery alphabetically

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

I have a contact app based on SharePoint Contact list.  On my screen I am wanting a side slider (or gallery) of the alphabet to allow the Main galley to be filtered by first letter of Full Name. I want to make it like the contact list on your phone.

This is my screen: ( currently using a Side Gallery but would like to use slider but cannot figure out how to use slider instead of gallery of Alphabet.)

 

 

2019-08-22 07_38_39-ContactsApp.png

On Visable property:

Create collection for gallery or slider: ClearCollect(ContactOrder, {Letter:"A", Number:1}, {Letter:"B", Number:2}, {Letter:"C", Number:3},{Letter:"D", Number:4}, {Letter:"E", Number:5},{Letter:"F", Number:6},{Letter:"G", Number:7},{Letter:"H", Number:8},{Letter:"I", Number:9},{Letter:"J", Number:10},{Letter:"K", Number:11},{Letter:"L", Number:12},{Letter:"M", Number:13},{Letter:"N", Number:14},{Letter:"0", Number:15},{Letter:"P", Number:16},{Letter:"Q", Number:17},{Letter:"R", Number:18},{Letter:"S", Number:19},{Letter:"T", Number:20},{Letter:"U", Number:21},{Letter:"V", Number:22},{Letter:"W", Number:23},{Letter:"X", Number:24},{Letter:"Y", Number:25},{Letter:"Z", Number:26})

 

Side Gallery (Currently):

Items: 

ContactOrder

 

OnSelect:

Set(SearchLetter,ThisItem.Letter)

 

Main Gallery (Currently):

Items: 

Filter('SharePoint Contact List',StartsWith('Full Name',SearchLetter))

{'Full Name' is a text field}

 

Issues/Questions: 

If stay with the gallery:

1.  If no Letter is selected nothing shows, It needs to see to show all items in list on start and have a button/letter that can reset the Main gallery back to show all.

 

Or

 

To  get slider working.

1. I would like it to be on a slider to make for easier use on phone but I would need the slider to display the letter instead of the number.

 

Any idea's on how to fix these?

Categories:
I have the same question (0)
  • yashag2255 Profile Picture
    24,769 Super User 2024 Season 1 on at

    Hi @Anonymous 

     

    Adding alphabets to slider is not possible currently in powerapps.
     
    If you wish to display all results when nothing selected, you can modify your expression as:
     
    If(IsBlank(SearchLetter),'SharePoint Contact List',Filter('SharePoint Contact List',StartsWith('Full Name',SearchLetter)))
     
    Hope this Helps!

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!
  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    @yashag2255 Thank you that solved the issue on Start but, after a user selects a letter and then wants to go back to view all, how do I reset the Main gallery view to the on start view?

     

  • yashag2255 Profile Picture
    24,769 Super User 2024 Season 1 on at

    Hi @Anonymous 

     

    You can set the Screen OnVisible property to: Set(SearchLetter,Blank())
     
    Use this expression wherever you want to reset the selected alphabet.
     
    Hope this Helps!

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!
  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    @yashag2255 

     

    That helps but what I really want is to add an "All" at the top of the side gallery and have when it is selected for it to set(SearchLetter, Blank())?

     

    How can I add to collection where only the "All" sets the above formula?

  • Verified answer
    yashag2255 Profile Picture
    24,769 Super User 2024 Season 1 on at

    Hey @Anonymous 

     

    If you wish to do so, you expression can be changed to:
     
    Collection:  ClearCollect(ContactOrder, {Letter:"All", Number:0},{Letter:"A", Number:1}, {Letter:"B", Number:2}, {Letter:"C", Number:3},{Letter:"D", Number:4}, {Letter:"E", Number:5},{Letter:"F", Number:6},{Letter:"G", Number:7},{Letter:"H", Number:8},{Letter:"I", Number:9},{Letter:"J", Number:10},{Letter:"K", Number:11},{Letter:"L", Number:12},{Letter:"M", Number:13},{Letter:"N", Number:14},{Letter:"0", Number:15},{Letter:"P", Number:16},{Letter:"Q", Number:17},{Letter:"R", Number:18},{Letter:"S", Number:19},{Letter:"T", Number:20},{Letter:"U", Number:21},{Letter:"V", Number:22},{Letter:"W", Number:23},{Letter:"X", Number:24},{Letter:"Y", Number:25},{Letter:"Z", Number:26})
     
    Main Gallery -> Items -> If(SearchLetter = "All",'SharePoint Contact List',Filter('SharePoint Contact List',StartsWith('Full Name',SearchLetter)))
     
    Whereever, you wish to reset to select all values, expression:
    Set(SearchLetter,"All")
     
    Hope this Helps!

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!
  • yashag2255 Profile Picture
    24,769 Super User 2024 Season 1 on at

    Hey @Anonymous 

     

    I came up with a workaround to achieve this. You can create such a slider with the Powerapps Component Framework. Please refer: https://powerusers.microsoft.com/t5/PowerApps-Community-Blog/Developing-an-Alphabet-based-slider-control-in-PowerApps/ba-p/348116

    I have attached the component along with this blog, you can download it and import it as a component in your existing application.
     
    Hope this Helps!

    If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Valantis Profile Picture

Valantis 392

#2
WarrenBelz Profile Picture

WarrenBelz 364 Most Valuable Professional

#3
Kalathiya Profile Picture

Kalathiya 271 Super User 2026 Season 1

Last 30 days Overall leaderboard