Photo Thumbnails and a Point Feature Class

[TimHayes1]

I have a Point Feature Class. In the attribute table I have 3 photos.

I want to be able to click on a point, and have the photo thumbnails appear in a way that allows a user to scroll through the thumbnail list of photos and then click on a thumbnail photo for a larger view. 

Is it possible set this up with AGOL WebApp Builder? If so, how would I go about doing it?

[RobertScheitlin__GISP · Accepted solution]

Tim,

   You can do this by setting up the pop-up media for that layer in the webmap.

Here is an example webmap that shows the traffic photo for Louisville, KY:

http://www.arcgis.com/home/item.html?id=18df7255535b41f8ac37e7855222a9ef 

[TimHayes1]

I know how to do this with AGOL, but need some help trying to figure out how to do this with the WebApp Builder. Any ideas?

[RobertScheitlin__GISP]

Tim,

  Popups are configured for layer in the Web Map (AGOL) not in the WAB UI. Unless you are talking about using LL Widget.

[TimHayes1]

Yes, the LL Widget. What do you know? 

[RobertScheitlin__GISP]

Tim,

   Setting up popup media infos is not supported by the LL widgets UI. I am seeing if I can get it working by editing the widget json directly. I will let you know.

[TimHayes1]

Thanks, Robert. Would be nice if you could make it work like you did a similiar thing in Flex.

[TimHayes1]

Have you seen this?

GitHub - magis-nc/esri-webappbuilder-widgets-ePopup: Widget to customize popup behaviour in WebApp B... 

Before I give it a shot, I was wondering if you tried this with the LL.

[RobertScheitlin__GISP]

Tim,

   Here is how you manually configure an Image in a popup for LL Widget (you need to manually edit the config_Local Layer Widget.json):

      {
        "type": "Feature",
        "url": "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",
        "name": "Traffic Cameras",
        "opacity": 1,
        "visible": true,
        "showLabels": false,
        "trackEditByLDAP": false,
        "limitEditByLDAP": false,
        "popup": {
          "title": "{DESCRIPTION}",
          "fieldInfos": [
            {
              "fieldName": "URL",
              "label": "URL",
              "visible": true
            },
            {
              "fieldName": "ONLINE",
              "label": "ONLINE",
              "visible": true
            },
            {
              "fieldName": "DESCRIPTION",
              "label": "DESCRIPTION",
              "visible": true
            },
            {
              "fieldName": "LAST_UPDATED",
              "label": "LAST_UPDATED",
              "visible": true
            }
          ],
          "mediaInfos": [{
            "title": "",
            "caption": "",
            "type": "image",
            "value": {
              "sourceURL": "{URL}",
              "linkURL": "{URL}"
            }
          }]
        },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TimHayes1]

Thanks, Robert. With this wonderful bit of code, I can take it from here. You are awesome!