Example - Data Picker

The Data Picker content display is for displaying information about a single item, not a list. It can be paired with any content source and content transform that combine to return an array of data and used to pick out elements of data from that array.

In Detail

By now you may be getting a bit tired of RSS feeds, so for a change the source this time is a JSON lookup of an IP record. http://ip-api.com/json/140.82.112.3, an IP service that returns a JSON record for an IP address.

The content transform is then Table from JSON with the flatten option 'Flatten with.dot.notation all the way'.

Rather than go straight to the display, it is again useful to first have a quick look at the data available using the Serialize content display or the Preview button on the display tab to review the incoming data to the display. This is generally a useful intermediary stage when viewing complex data and becomes essential with Data Picker because we need to know the keys to pick from.

Array
(
    [status] => success
    [country] => United States
    [countryCode] => US
    [region] => CA
    [regionName] => California
    [city] => San Francisco
    [zip] => 94107
    [lat] => 37.7823
    [lon] => -122.391
    [timezone] => America/Los_Angeles
    [isp] => GitHub, Inc.
    [org] => GitHub, Inc.
    [as] => AS36459 GitHub, Inc.
    [query] => 140.82.112.3
)

View settings

Export settings

The JSON data shows the settings used to configure this Universal Content Puller block. These settings may be copied and pasted into the Import dialog on the Support section of the Universal Content Puller block edit. The settings may need some modification to work on other sites because system paths and ids will be different.

Looking at the data we make note of the keys:

org
query (the ip address)
city
regionName
zip
latitude
longitude

We can then use those keys to pick out the data in Data Picker.

As with List Picker, Data Picker can assign an item as a link behind another item, so rather than just having the full URL text as a link, we can link to it directly from the title and from the image.

Within Data Picker, every picked item can be individually formatted and text elements inserted to use as headings, such as the Latitude and Longitude headings below.

GitHub, Inc.

San Francisco
California
94107

Latitude: 37.7823
Longitude: -122.391

View settings

Export settings

It is worth pointing out that not every IP address will actually work as a URL. It all depends on how the IP is configured. Fortunately GitHub's IP address does link nicely to GitHub, so our example source is a little contrived.

The same technique can be used for more complex sources and is especially useful for displaying and formatting data that follows a non-trivial pattern.