# Alphabetical arrangement on the experience

**URL:** <https://forums.losant.com/t/alphabetical-arrangement-on-the-experience/5009>\
**Category:** Help\
**Tags:** experience, device\
**Created:** [March 31, 2023, 5:32pm UTC](https://forums.losant.com/t/alphabetical-arrangement-on-the-experience/5009 "2023-03-31T17:32:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anthony\_Dicamillo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Anthony\_Dicamillo](https://forums.losant.com/u/Anthony_Dicamillo)\
**Post date:** [March 31, 2023, 5:32pm UTC](https://forums.losant.com/t/alphabetical-arrangement-on-the-experience/5009/1 "2023-03-31T17:32:02Z")

</div>

Hello,

I have an experience where a customer can log in and see a list of their devices on the left side of the scree. This was an import of one of the templates from a while back. In the machine list i would like to list the devices in alphabetical order. I am not strong on the html coding side but i know how to navigate around so any help would be appreciated.

Here is how the experience looks now:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/9/9afaa80cc466291427c1f57603435633ad6c24c1.png)

Here is the component that i THINK i need to update to make this work:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/5/5d0c7a1360658764c9de4d8b5dbf11db8866e58d.png)

---

<div class="post-metadata">

**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\
**Post date:** [March 31, 2023, 6:11pm UTC](https://forums.losant.com/t/alphabetical-arrangement-on-the-experience/5009/2 "2023-03-31T18:11:14Z")

</div>

That looks like it’s probably the right component. I see the template is looping over `pageData.selectedGroup.devices`, which looks like an array of device objects.

I recommend changing the workflow to sort that array instead of changing anything in this template. You can do this by adding an [Array Node](https://docs.losant.com/workflows/logic/array/) to your workflow and using the **Sort By** operator. Since it looks like you want the list sorted by the `friendlyName` tag, you’ll need to set the **Value Path** to `tags.friendlyName.[0]`.