Asset Grid - Item In Focus


#1

In my opinion, there is a big gap in the functionality of the Asset Grid. It REALLY needs the “Item In Focus” property for us to bind to.

There is already the ability for the Asset Grid to “Scroll To” as an action…so I assume it has the knowledge of it’s own index somewhere in the code?. There’s lots of times I’ve needed to make things happen according to the Asset Grid’s index property. It’s been an especially big thorn for a current project :slight_smile:


#2

Hi, Alex. Here’s the problem: there is no such thing as focus in the Asset Grid. For example, if at any given time in my 100 item asset grid I can see three rows of seven items, which item has focus? In fact, the best answer is all 21 have focus.

(If I use “Scroll to” for an item at the end of a row, that item will appear on the far right. Does it have “focus”? Yes and no.)

So the best possible trigger for the asset grid is “becomes visible”. Back to that 100 item asset grid with three rows of seven items. If the item I care about shows up in the bottom right corner, it’s still “visible” and would thus trigger “becomes visible”. Would that satisfy you? If not, what exactly would you want to be possible?

-Geoff


#3

Hey @geoff, I agree it is a bit awkward for the “in focus” part of the asset grid for those reasons. It can already “Scroll To” in the asset grid meaning that there already is a built in focus. From playing around - it looks like it tries to put the focus in the top left whenever possible.

What I’m trying to do involves primary and secondary navigation using Excel. When I scroll the Asset Grid, I need another collection which is pulling from the same spreadsheet to Scroll To the same item. Binding to the Asset Grid’s index in focus would be helpful.

Regarding the arbitrary Focus of the Asset Grid: I guess it’d be cool if there was a way to ‘set’ the positioning of the focus in the Asset Grid properties. I was thinking maybe a box outline that could be dragged and dropped on where the focus should be when the grid is clicked into. Or Even if the property was to set the index number of what the focus should stay at. So for example, if you have a single line of 3 items, you would set item #2 as the focused position. (In this case, the 2nd item would still be the 2nd item of the index, but the #2 position would be considered the focus). or if you had a Grid of 3 x 3, you could set #5 as the focus position, since that would be the middle item. Just brainstorming.


#4

I suggest creating a Wish List item with a detailed description of what you want to achieve, including a scenario to make it crystal clear

In out most recent major release - 5.6.0 - we introduced the “Scroll offset” property so you could track an asset grid scroll based on manual manipulation. This literal approach was created, in part, because there is no narrow definition of ‘focus’ for asset grids. The wrinkle you introduce - using an IA - complicates it in a way that may have ramifications I don’t have the know-how to anticipate.


#5

Yah, the scroll offset is a neat feature for sure. I can see some great uses for that in the future, most likely with the linear converter.

But what I’m describing isn’t for an IA actually. When you click Properties on the Asset grid, it would have two new properties. “Item in Focus” and something like “Focus Position”. Focus position would just be the index number of the item that holds the focus spot. So if you did the 3x3 grid and set #5 as the Focus position…it would be like telling the asset grid that the center item is the item in focus. If it was a grid of 1x3, and I set Focus position as the 3rd item in the list, then the item in focus would be the right most item. (It would not change the index at all, it would simply designate the position…like putting an invisible looking glass at that position. Of course, if the user changes the shape of the asset grid, they’d need to consider changing their Focus position…but that’s up to the user then.)

I agree with you though, it’s not 100% bullet proof idea, and it very well may cause other issues I don’t foresee. But maybe it’s something that can spark an idea for your programming staff.


#6

Hi Alex,

Would you mine sharing more detailed information about the project you are working on? Here or in a private thread on support.
I’d like to see if the new scroll offset property isn’t enough to solve your issue.

Thanks

Seb


#7

Hey Seb,
The project involves an asset grid that tells another collection to scroll. Without a focus to bind to, other collections can really only tell the Asset grid to scroll to something…but an Asset grid can’t tell another collection to scroll to. I thought of using the scroll offset - and you can probably get creative by multiplying the item width by the number of items and adding in the item spacing…but it’s not super clean and may not match up perfectly if anything changes. I’ve been able to work around this dilemma by using the other collections, like the asset flow. But sometimes a design looks better with the flat style of the asset grid.

It’s not my intention to try to force a feature that may not work well. It’d just be cool if there was an elegant way to do it. But I don’t currently have any project where the success is hinged upon the Asset Grid :slight_smile:


#8

That’s the solution I had in mind and it works quite well and easily. I bound the index of my asset flow to the scroll offset of the asset grid using the following custom script: Math.floor(INPUT / (300 + 15)) +1

  • 300 is the item width of the asset grid
  • 15 is the item spacing
  • +1 is because index starts at one
  • Math.floor() returns the lower integer of the division.


#9

Wow, cool @Seb. You’re a genius.
I guess I’m going to need to learn some Javascript! Much appreciated as always.


#10

Hi There! I’m looking to do the exact same thing with the Asset flow: When asset flow (thumbnails) index equals a value, display the matching index item’s image, title, description and price in a separate collection shown above the thumbnails. Only one excel sheet is used. Can you please assist?


#11

Hi @Devin,
In your case, I would actually only have one collection - the thumbnails. Then create a hidden group with standard assets for image, title, description and price…no binding required. Then set a trigger on your asset flow - when index is changed then ‘set’ the image, title, description and price. When you set them, bind the value that is set to the excel feed of your collection. Or instead of ‘when index is changed’ you could have a button inside your asset flow to set those items and ‘show’ those results.

This method tends to run smoother than having two collections and there’s not need to do any sorting or index matching.


#12

I agree with @AlexB advice except I would either use a Show more button trigger or a Moved into focus on your template root to call all the required actions to fill your placeholder.

Check this webinar recording at ~15’.

Seb