Problems with Asset Flow - Scroll to an item action

Help from Community
1

Hey all,

I’ve been spending the last 3-4 hours to trying to solve this issue that seems like it should be extremely straight forward. Hoping someone can help me out here. Basically, I’m loading thumbnail photos into an Asset Grid from an Excel spreadsheet. I am also loading high resolution versions of the same photos from the same spreadsheet into an Asset Flow collection. The intent of the design is to allow users to browse through smaller thumbnails and then load a high resolution version of the photo they want into what we typically call a “lightbox” in the web world. Additionally, I want users to be able to swipe back and forth between these full screen images, once they are in light box mode.

To accomplish this, I created an action that takes the name of the thumbnail asset the user selected and puts it into a Global Variable. The next action instructs the Asset Flow collection of the high res images to “Scroll to an item” name. For that, I’m simply telling it to use the asset name that was just logged into the variable. Unfortunately this is not working and I do not understand why. Both of these collections are referencing the exact same spreadsheet, so the names of each row are exactly the same.

In troubleshooting this, I even created a text field that displays whatever the variable is currently set to. I then have the name of the asset being shown in the Asset Flow overlaid on top of the image loaded to verify that the name I’m telling the Asset Flow to scroll to is the same. Even though I know with 100% certainty that the asset name the collection is being told to scroll to exists, it simply will not do it. I even simplified it by creating a button that just tells the asset flow to scroll to that asset name and it still doesn’t work.

This all leaves me to believe that the Asset Flow action to “Scroll to an item” based on the name is broken. Am I missing something here? Would appreciate the help as this simple functionality is critical to the design of a project we’re working to deliver for a client.

3

Hi Brian,

Here is one way to do it:

  • 2x Asset Flow, one with Thumbnails, one with Full Images (hidden by default)
  • when a thumbnail is tapped, hide the Thumbnail Asset Flow, show the Full Image Asset Flow
  • when a big image is tapped, show the Thumbnail Asset Flow, hide the Full Image Asset Flow
  • when an Asset Flow is scrolled to an index, scroll the other to the same index

image

Here is a link to a Sample:
https://data.intuiface.com/KB-Samples/6.6/Community/Community-AssetFlowLightBox.zip (55Mb)

Kind regards,

Alex.

2 Likes
4

Hi Alex,

Thanks for the quick reply and samples. Oddly enough I received two posts from you via email, but only see one here. The post that still shows here unfortunately doesn’t help in my instance as it uses two Asset Flows. Our design calls for a grid of photos for the thumbnail and a single image for the lightbox. The other post you made that’s not visible here, but is in my email did help. Thank you!

After reviewing that sample, I added an Index column to my spreadsheet and I’m now able to correctly map the thumbnails from the Asset Grid to the High-res version in the Asset Flow via Index column. This is really great, thank you.

All said, the one downside is still that I cannot simply use the Scroll to an item functionality. It appears to be broken, are you aware of this? The reason I would much prefer to use Scroll to an item instead of Scroll to an index is because it adds a 2nd numeric tracking column to our spreadsheet which introduces significant room for human error once we hand this project off to the client for updating.

Essentially we have a master sheet of people complete with names, head shots, bios, etc. Each person is assigned an “ID” in the 1st column of this master sheet. On another sheet we have a list of photos that also have this “ID” column. So let’s say the user selects person ID #37 it is programmed to not only load their info from the master sheet, but also applies a filter for ID #37 in the secondary photo sheet. Therefore it may load, say, 3 or 5 photos into the Asset Grid.

So coming full circle to the solution you provided, rather than using an existing column like john_doe_1, john_Doe_3, etc. It requires a new numeric column called Index to mark unique rows in addition to an ID column where you may have 3, 4, or 5 IDs of the same number in a row. While you and I understand the difference, we’re trying to deliver this experience to the client to be as intuitive and easy to update as possible. My concern is this additional numeric column may introduce confusion and could cause them to break the program if say decide to add a new photo to an existing person and try to insert it in between two existing rows so that it’s alphabetically correct.

Of course, we’ll do our best to train them to not do this, but I just wanted to illustrate why the other functionality that looks like it exists would be preferable. Hopefully that makes sense.

Separate to the specific problem in this post, but closely related, I’d like to provide some product improvement feedback. It would be extremely helpful going forward if the various Asset Collections didn’t lock you into different design choices or have different functionality altogether. For example, I often want the ability to “snap” into an index item in an Asset Flow, but I don’t want the visual 3D effect. I want the snapping effect, but all the photos flat. While these asset collections are incredibly powerful for non-developers to do some pretty cool things, they often force you into certain graphical designs. It would be even more powerful if I could modify the asset collection to meet the needs of my design, not the other way around.

Again, thank you very much for your help and rapid response. This solves my problem for now. I’m appreciative. Going forward I would still like to know:

  1. The status of “Scroll to an item” in Asset Flow. Why does this feature not work? Will there be a fix?
  2. Will there be improvements to asset collections that allow more flexibility and don’t force specific design motifs on the user in future updates? Is this on the product road map?

Thanks so much!

5

@Alex Unfortunately, I spoke too soon. It seems using the command “scroll to an index” is working on some of the photo sets, but not others. On some it matches the thumbnail to the full resolution perfectly as expected. On others it will only load the 1st image in the filtered photo group. Sometimes it even loads a photo that isn’t the 1st thumbnail, but maybe the 3rd or 4th. Either way, it’s not matching the right thumbnail to the right full res image.

I really don’t get it. I have a linear 1-75 Index in my first column of the spreadsheet. Each row contains a column listing a thumbnail and high res version of the same image. When Intuiface adds a filter for the called upon persons ID, it loads the correct thumbnails. Everything works up until this point. However, when it comes to "scrolling to the appropriate index number in a filtered photo set it only works on some of the filtered photo sets. I can even verify that it loads the high resolution set correctly, because I can advance forward and backward in the high resolution set after it loads the incorrect matched image.

I can not seem to find any logical reason why this command “scroll to index” correctly matches some of the photo groups and not others. Any ideas?

6

Before replying, I’m re-posting what I’ve done initially as it may be useful, I thought I didn’t understand your issue properly, that’s why I deleted it.

Hi Brian,

I’ve set up a small experience to achieve what you want.

The way it works:

  • an Excel file containing for each row: an index, a path to full quality image (4K) and a path to a thumbnail image (low res)
  • in the scene we have:
    • first Asset Grid displaying the thumbnails, using Excel as Data feed
    • second Asset Grid (hidden at start), also using Excel as Data feed, displaying the 4K image full screen
  • when thumbnail is tapped, we move the second Asset Grid to the index of the thumbnail and show it
  • on the full image, I’ve set up:
    • a close button that hides the Full Image Asset Grid
    • 2 invisible buttons to intercept taps on left/right part of the image in order to do Backward/Forward on both Asset Grids

It may sound complex but don’t worry, it takes 10 minutes to build considering I already had the Excel file ready.

Side-note: we have to use the index trick in the Excel file because the Asset Grid interface asset doesn’t expose his index. If you use for instance an Asset Flow or a Swap Collection, you will be able to use the two collections (Thumb and Full) indexes and bind them on to the other.

You can download the sample here:
https://data.intuiface.com/KB-Samples/6.6/Community/Community-DoubleAssetGrid.zip

Kind regards,

Alex.

7

Actually, the feature works :grin:
As stated in the Help Center, it scrolls to an item based on his name property.
If you have an Asset Flow with static elements inside, each will have a name and you will be able to use this action.

image
image1917×999 92.6 KB

When you use a data feed, there are no named items, just a Template populated by a Data feed, for instance Excel. The “Scroll to an item” action won’t work as it makes no sense, usually we use a “Scroll to an index”. I’m gonna ask my colleagues in charge of the Help Center to give more details about that.

Considering we released the Swap Collection with a lot of new behavior few months ago added to the current Asset Grid, Flow, Carousel, Helix, Ken Burns etc, I doubt there will be an update soon. With current proposal we cover already a lot of use cases :confused:

As your project seems pretty specific, I recommend you to open a ticket on our Support.

Also, if you have a yearly paid license, don’t forget you’re entitled to a Free 1:1 30mins Consulting Session with someone of our Customer Success Manager team.

Regards,

Alex.

2 Likes
8

Eureka! I finally figured it out. Turns out Asset Grid observes the objective index in the spreadsheet and Asset Flow assigns itself a relative index based on the order of each photo. Incredibly confusing, but once I figured that out I was able to fix. I’ve uploaded a video that shows the specific example I was working on and how I solved it for feedback.

Video: Intuiface: Asset Grid to Asset Flow Fix on Vimeo

Having all the terminology mean the same thing would be very helpful form a user perspective. Having all the asset collections function the same would be as well, especially if they use the same terminology “Index”. It shouldn’t mean one is relative and one isn’t.

1 Like
9

Hi Brian,

After watching the video, I’m a little bit surprised.
If you filter your Excel to have only the media of one person, you end up with a list of records.

That list of records, when put in a collection like an Asset Flow will have an index automatically generated.

When it comes to the Asset Grid Asset, as told before, in this message above:

we have to use the index trick in the Excel file because the Asset Grid interface asset doesn’t expose his index

This means you can’t get the current index from an Asset Grid. That’s why you have to fake it by putting it in an Excel and use it when you want to pass it between 2 Asset Grid, as I did in the sample here. I’ve called it index in Excel for a better understanding.

In my first exemple, between 2 Asset Flows, here, I’m using the exposed index and make them communicate between each others.

What you’re trying to achieve is to communicate indexes between an Asset Grid (and a “fake” index you build internally in Excel) and an Asset Flow with is real index computed by Intuiface. That’s the reason they behave differently and you struggled to make it work. Because once filtered, your fake Asset Grid index doesn’t start at 1 anymore.

Hope it makes sense for you and you understand better now. Happy you found a workaround to make it work :wink:

Regards,

Alex.

1 Like
10

Yes, I understand that now, I made a video on it. :laughing: I think at this point my main point is to provide product feedback from a user point of view. The task was pretty straightforward: Load this item from this spreadsheet into this collection and when the user clicks it load the same item in another collection. The only reason it wasn’t simple was a difference in how each collection type treats the Index.

Ideally, all asset collections would just function the same way and thus eliminating the opportunity for confusion. If that’s not feasible then, support article would be great as that’s usually my first stop when trying to do something in Intuiface. Perhaps even a tooltip when hovering over “Scroll to an index” that says “Index is based on relative positioning” or something to that effect would help.

The reason I think this is important as the functionality mimics a very familiar user experience from the web and mobile devices and thus may be valuable knowledge for others. When we’re designing interactive experiences, we don’t want to re-invent the wheel on familiar interactions. This is because we want users to approach a touch screen or video wall and have it respond to their instinctual interaction tendencies that are near hard-wired from their mobile device and web use.

Think of the iPhone photos app or Facebook for example. You start by viewing a large grid of photos that you can scroll through and when you pick one, you get a lightbox or full-screen image that you can then swipe forwards and backward through the collection.

All said I appreciate the support through troubleshooting this. I just don’t want to see good feedback get missed. Thanks!