What To Use To Display 2 Photos?


#1

I’m trying to display an interior and exterior photo when the user swipes.

The photos are called via an api call On Create of the page.

Should be able to swipe from left to right or visa versa and the images continue to rotate in sequence no matter how many images present (usually 2 or 3).


#2

If it’s dynamic data, you’ll want to use dynamic views to do it. Depending on how you want it to look and feel will depend on the element to use. Things like listviews, and card decks and such will help with dynamic data on the Android side. Things like Tableviews and Collectionviews are the types of things to look into on the iOS side.


#3

I set it up with a Card Deck, Card View, and then an image view inside of the Card View.

It asks me to bind a data source but i’m calling the images from page variables brought onto the page by the previous page.

Should I be using a horizontal scroll view instead?

I’m trying to display an exterior photo, plus interior photo, when the user swipes left/right, with the exterior photo being the default photo displayed on page load.


#4

Hi @justincrabbe The issue you’ll have here is dynamic elements are filled with dynamic incoming data. So things like card views, tables, etc… these get populated from a list of incoming data since we’re not really setup for creating arrays of internal data in the platform so when you want to fill things that have a dynamic view count based on the amount of data populating it like card views, lists, collection views etc… you need to match up dynamic data with those dynamic elements.

So if you want to display photos from a previous view, make an API call with the previous views object Id or something so that your backend delivers a list of photos or photo urls for instance, then you can load something like a card view up with the dynamic data.


#5

So I did that and called the object using the unique ID.

I setup the Card Deck with 1 Card View + 2 Image Views overlapping each other (0px top bottom edge to edge) similar to how instagram shows a list of side swiping images.

image

I can see the response coming back from the api so that’s working.

Then On Load I set the two image views to the two image URL’s coming back from the response (Interior and Exterior photo) but for some reason all I get are blank white boxes for the images.

Am I missing something?

What about the settings ‘on swipe left’ and ‘on swipe right’? Do I not need to do anything with these?

image


#6

Is this the same issue as the other forum post you created? Just want to make sure I’m not trying to help solve the same problem in 2 places.

Also, in that final image… Are you giving it a url string to go retrieve the image? I’m just wondering since App_dropsource_exterior_image_text doesn’t sound like a url would live there but I could be wrong.


#7

@wade yes two different issues, in this case I’m trying to setup a Card Deck with Card Views.

Yes the string (text) contains a complete URL to an image in the database and it works OK in the app elsewhere just can’t figure out why it’s not loading here inside of the Card Deck.

What about the settings ‘on swipe left’ and ‘on swipe right’? Do I not need to do anything with these?

I can see text bound to a text view on the page just fine, and I’ve set the On Load event to display an image from an image URL, but that doesn’t want to change for some reason.

Build ID: 1151524111273509844

If you auto cred login click the 3 dot dropdown menu in the top app bar, click ‘Shuttles’ and it will take you to the page with the card deck + card view + image view i’m referring too where the image won’t load but text views do load.

URL of image file is good.


#8

Hi @justincrabbe… I took a look inside here. It looks like since this build you’ve shifted to a dynamic list instead. I see you’ve connected your GETShuttles response datasource to the list and it looks like the next step would be the List Tile “On Load” event is where you’ll begin to Load Image From URL and choose the url string that’s coming in from the API response.

We talk about that as well in the Photo Save App tutorial if you want a show&tell reference.

I’m not sure what was happening with the logic in the card deck since it’s been since removed but let’s get your dynamic list tiles to work since you’re moving that direction. Overall though, both are dynamic elements and are built/managed in the very same way.

Just for reference to card deck context as well… those Swipe events are just triggers you can run operations when swiping. They aren’t really a spot where you would deal with the management of the cell itself. That might be a spot where you need to adjust the UI back to a different state when the user swipes for instance… or perhaps depending on the swipe, you might have wanted to make an API request. Think like Tinder for instance… If you Swiped left on a potential connection, you would want to make an API call to add a users id to the “not interested” array in their account, or something like that. A swipe gesture in that situation delineates a user’s choice and a great spot to update the backend.


#9

Thanks for this.

I’m not sure you’re seeing the same thing as I am but I have a test page created with the Card Deck and Card views:

I put a text element below it just to be sure that the swiping actions change the text view and the text is called with the same data set as the image URL.

I have an on-load event to load the image URL as well:

It will load the title (text element) below the image fine, and it swipes through all of them, but it will not load any of the images.

Here is my hierarchy:

image


#10

That all looks like it is the way it should be. Next I wonder about the URL to the image then. Perhaps the URL is not correct maybe? Like does it have a full https://www.examplelink.com/thisimage/12345


#11

Yeah I checked that also and it’s all fine.

Same structure elsewhere inside of the app as well.

The URL for the image calls correct and i can see it inside the response in the web view activity monitor.

The linking is correct to the correct response field too.


#12

Alright… more clues here. I’m going to document here. @Nate I’m gonna need some engineering eyes on this 1.

The app is indeed attempting to load image from URL, but the error (I think is telling me) the URL is null so it fails.

Nate, I’m checking in CardView1 RIGHT BEFORE it’s going to attempt to retrieve the image, CardView1 is Null here and that’s why the TRY function is failing down to the NullPointerException

Where I am confused here is that when I look at the response data that’s populating CardDeck1 is connected fine…

Where I’m confused is that, the Response is coming back, triggering the 200 and I can see Image_url_text coming in and directly after being assigned to CardDeck1. This all seems right.

@nate_frechette Could you help me see what’s wrong then with this. It seems like it’s all on the up and up. I even tested all the image URL’s coming back in a browser and all the images load just fine in a window.

PROJECT INFO:
Build : 1151524111273509844
Project : TODO (1060546886982412978)
Branch : 1060546887263788094

Run App in Web Simulator, auto-login will take you flights screen, tap … burger menu and then tap shuttles, this screen shows the name of the plane BUT doesn’t show the image. This page is called ADSTESTING.


#13

@wade can we get an update on this if possible from two weeks ago?


#14

@justincrabbe, thanks for bringing this back up. I am reaching out to engineering for follow up and will reply with more input ASAP.