Set Img using URL

#1

I’m using https://www.countryflags.io/ to populate the flags of the world in a repeater:
OnItemLoad: Set Image to value https://www.countryflags.io/[[item.countrycode]]/flat/64.png

This functions well when I’m just F5ing for previews locally, but it isn’t working on Axure Cloud when I publish the prototype. Upon looking at the source code, it appears as if Axure Cloud is attempting to hook to a location on cloudfront.net, which obscures the already assigned URLs. It must be something done during the publishing process to “self host” otherwise embedded images.

Is there a way around this to get it working?

#2

Hi!

I don’t think there is a reliable way to do this using a URL. However, there is way to display a flag based solely on its country code, no matter how many flags you need. It takes a little setup.

You first have to create a sprite sheet of all desired flags. (The site you referenced doesn’t reveal such a sheet, sadly.) The flags in the sprite sheet below are are arranged left-to-right, top-to-bottom.

image

Next, create a space-delimited string of all two-character country codes in the same order. For the sheet above, it would be:

AD AE AF AG AI AL AM AN AO AQ

It wouldn’t be a huge task if you winnowed the sprite sheet down to flags you actually plan to use.

Here’s a sample with two versions, the second of which is far friendlier to incorporate into a given prototype.

File: flagsprite.rp (268.8 KB)

#3

Thanks, Joe! I didn’t want to go to the effort of downloading all the flags and setting things up when an API was available and functional via preview - We can get there with our imagination and I’ve got a lot on my plate. Sincere thanks for your time here, bud - That’s a really clever solution and I’m sure it’ll help others in the same situation, as it’s a fairly common pattern.

#4

Hi @JimJam

I’d suggest converting the country code variable to a string. Instead of the value for Set image that you have used, try this:

https://www.countryflags.io/[[Item.countrycode.toString()]]/flat/64.png

I’ve done a quick test myself and seems to do the job. Let me know if it works

#5

Thanks for your time, monkey. Unfortunately, while it continues to work in an F5 preview, that fix doesn’t seem to be resolving anything once published via AxShare.

#6

It’s really weird!!!

It worked for me the other day. Today, after reading your reply I’ve made another test from scratch and I wasn´t able to do it again.

Fortunately, I saved the other day file.
flags_Working.rp (69.5 KB)

And this is its URL in Axshare: https://e3p6ue.axshare.com/#id=zlwntg&p=page_1

I can see the flags both via preview and via Axshare.

BUT…

This is the file I made today:
flags_notworking.rp (69.3 KB)

And its Axshare link: https://lk7i88.axshare.com/#id=ccgjnt&p=page_1

I see the flags on preview, but not via Axshare (the cloudfront issue…)

Both files are almost identical, or so they seem to me… but I’m not able to tell which is the “thing” that makes the URL work. Crazy

#7

Ok, here I go again…

It seems that either Axshare or Cloudfront doesn’t like the dot before the ‘png’ extension, which leads to broken image.

I’ve found out that this can be avoided using concat('string') function, so the value in Set Image action must go something like:

https://www.countryflags.io/[[Item.countrycode.concat("/flat/64",".","png")]]

which concatenates in just one string the first part of the URL + country code + “/flat/64” + the dot + extension.

This is the rp file (updated from the previous non-working file):
flags_concat_working.rp (72.2 KB)

And here is the new example in Axshare:
https://aouajy.axshare.com/#id=ccgjnt&p=page_1

I still have no idea which is the difference in the two previous files. Maybe the one working was converted from Axure RP8 (I can’t remember now).

Anyway, I hope this new approach help you, @JimJam

#8

Wow! Looks like you nailed it, bud. I’ll give it a go tomorrow and see if my results match.

closed #9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.