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 NASA or RSS data, so for a change the source this time is a JSON lookup of an IP record. http://ip-api.com/json/, 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.

    [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] =>
View settings

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
View 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.

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.