Viewing of externally hosted images in Appian Interface

Assuming that the images hosted in the target system are accessible via a SafeURI (http, https, ftp), you can use a!webImage as shown in this tutorial - https://docs.appian.com/suite/help/20.2/cards-as-list-items-pattern.html.

The local!houses variable in the tutorial is the equivalent of your JSON data.

I'm trying the a!webImage but some how the images are not rendering in the UI, all other images from the web are loading in the a!webImage component. Even the URI I'm trying to render is also working when I load in the browser. Pls suggest what went wrong

/*  INTERFACE CODE  *?

{
  a!localVariables(
    local!allCountriesList : rule!Tst_FullCountryInfoAllCountries(),
    local!selectedCountry: null,
    {
      a!sectionLayout(
        label: "Countries Information",
        contents: {
          a!dropdownField(
            label: "Select the Country",
            labelPosition: "ABOVE",
            placeholder: "--- Select a Value ---",
            choiceLabels: local!allCountriesList.sName,
            choiceValues: local!allCountriesList.sISOCode,
            value: local!selectedCountry.sISOCode,
            saveInto: {
              a!save(
                local!selectedCountry,
                index(
                  local!allCountriesList,
                  wherecontains(
                    save!value,
                    local!allCountriesList["sISOCode"]
                  )
                )
              
              )
            },
            searchDisplay: "AUTO",
            validations: {}
          ),
          a!imageField(
            label: "Country Flag",
            labelPosition: "ABOVE",
            images: {
              a!webImage(
                source: local!selectedCountry.sCountryFlag,
                altText: "image not found"
              )
            },
            size: "MEDIUM",
            isThumbnail: false,
            style: "STANDARD",
            showWhen: if(a!isNotNullOrEmpty(local!selectedCountry), true(), false())
          )
        }
        
      )
    }
  )

}

/*  VALUE OF selectedCountry  */

	
[sISOCode=AI, sName=Anguilla, sCapitalCity=The Valley, sPhoneCode=264, sContinentCode=AM, sCurrencyISOCode=CAD, sCountryFlag=http://www.oorsprong.org/WebSamples.CountryInfo/Flags/Anguilla.jpg, Languages=]

I'm trying the a!webImage but some how the images are not rendering in the UI, all other images from the web are loading in the a!webImage component. Even the URI I'm trying to render is also working when I load in the browser. Pls suggest what went wrong

/*  INTERFACE CODE  *?

{
  a!localVariables(
    local!allCountriesList : rule!Tst_FullCountryInfoAllCountries(),
    local!selectedCountry: null,
    {
      a!sectionLayout(
        label: "Countries Information",
        contents: {
          a!dropdownField(
            label: "Select the Country",
            labelPosition: "ABOVE",
            placeholder: "--- Select a Value ---",
            choiceLabels: local!allCountriesList.sName,
            choiceValues: local!allCountriesList.sISOCode,
            value: local!selectedCountry.sISOCode,
            saveInto: {
              a!save(
                local!selectedCountry,
                index(
                  local!allCountriesList,
                  wherecontains(
                    save!value,
                    local!allCountriesList["sISOCode"]
                  )
                )
              
              )
            },
            searchDisplay: "AUTO",
            validations: {}
          ),
          a!imageField(
            label: "Country Flag",
            labelPosition: "ABOVE",
            images: {
              a!webImage(
                source: local!selectedCountry.sCountryFlag,
                altText: "image not found"
              )
            },
            size: "MEDIUM",
            isThumbnail: false,
            style: "STANDARD",
            showWhen: if(a!isNotNullOrEmpty(local!selectedCountry), true(), false())
          )
        }
        
      )
    }
  )

}

/*  VALUE OF selectedCountry  */

	
[sISOCode=AI, sName=Anguilla, sCapitalCity=The Valley, sPhoneCode=264, sContinentCode=AM, sCurrencyISOCode=CAD, sCountryFlag=http://www.oorsprong.org/WebSamples.CountryInfo/Flags/Anguilla.jpg, Languages=]

Works for me.

Maybe it is because your local variable "selectedCountry" is a list. Try fetch the first item from that list.

Dear Stefan, 

I tried your suggestion, but no luck, I even tried hardcoding the URI in a new interface as you did, still I'm not getting the image. Is there any limitation with community edition in loading URLs ?? tried with other URLs, they are working fine..

One thing what is noticed is that the working URL is on HTTPS protocol where as the not working one is on HTTP, is there anywhere we need to configure to allow Appian to make connections over HTTP ?? 

On a side note, I'm able successfully integrate a SOAP API which is connected over HTTP

Not Working

Working

Hm ... your example with HTTP works for me. That image is not loaded by Appian and then sent to the browser, but directly loaded by the browser. Could it be that you have some local limitation that prohibits non-encrypted HTTP?