Determine the placement of objects in a UIListLayout

I wish to create a system where the player can press an arrow key to advance to the next object in a UIListLayout. But I’m having trouble determining what object comes next within the UIListLayout.

I was assuming there would be an easier way to achieve this without having to compare every UI object’s position and so on. I realize GUI objects have the property of “LayoutOrder.” From what I know, that value has to be set manually and the UIListLayout doesn’t assign it automatically.

So far I’ve tried searching the devforum and looked at the properties of the UIListLayout, yet I haven’t found anything that could be used for my situation. If anyone knows an efficient way to tackle this, let me know!

It looks like you are using a UIGridLayout, I will walk you through this step by step. So, if I am reading this right you want to be able to set the order of the passes? If so, follow these steps:

  1. Set the property “SortOrder” to “LayoutOrder”

  2. In your case, select each frame and put the property “LayoutOrder” to whatever you want. The smaller value will appear first.

Then change every frame’s “LayoutOrder” as shown in step 2 and it should work! Let me know if you have any issues or if this helped!


Say I were to have 50 buttons, would I have to manually set the LayoutOrder of all of them? Or is there an automated way I can do this?

First off, you cannot have 50 gamepasses, but lets assume this is an in-game shop where you could. Yes there is a way you can automate it, and if you want a script for that I could help. But in this case with only 4 passes, it would just be way easier to do it manually. On top of that, doing it manually allows you to show what you want at the top, when if it was automated it would by however the script runs.

Do you think I can have the script for that?

You would just set the LayoutOrder property of each button to a number. But if are only going to have a few gamepasses then it will be much easier to set it manually.

Sure thing! Let me take you through the steps.

  1. Locate the “Run a command” bar at the bottom of studio.

  2. You find how to get to the list of your passes. (Go through parents)

  3. Loop through the passes, I will just give the code for your case that you need to do this. It goes as follows (type this is the “Run a command” bar):

local times = 0

for i,v in pairs(game.StarterGui.ScreenGui.ImageLabel.gamepasses:GetChildren()) do
    if v:IsA("Frame") then
        v.LayoutOrder = times
        times = times+1

Let me know if this works!


how about a while loop that displays those 50 buttons and there you set the layout order?

local stuff = {...}
for i, thing in pairs(stuff) do
    -- Display them in the shop
        thing.LayourOrder = i

or if you want them to be static then you can run a while loop from terminal to set the layout order for you, so it will be the same thing but you don’t do the “display them in shop” code