Content Display

Content Display plugins are used to render the sourced and transformed content on the page. Internally they then accept content as a text string or as an array and must follow a Content Transform plugin that provides data in a form the display accepts,

UCP will warn in the edit dialog and provide error information if a display is incompatible with the source or transform.

Current content displays fall broadly into categories:

  1. Displaying text string data.
  2. Displaying array data.
[ Universal Content Puller ]

Content Display Plugins

Content Display Plugins are used to display or otherwise output UCP pulled content.

Functionality can be extended by adding plugin classes for additional Content Display Plugins. Content Display Plugins are simple classes that provide the functionality to output content in different ways. They should inherit from ContentDisplayPluginBase. Details are provided by comments in the code.

Plugins can be added by placing the plugin classes at packages/anyPackageName/src/JtF/UCP/ContentDisplay/Plugins/PluginName or application/src/JtF/UCP/ContentDisplay/Plugins/PluginName. Plugins can also be similarly placed beneath the plugin type's namespace declared in a package controller's AutoloaderRegistries.

[ Universal Content Puller ]

DataPicker

Pick and display items from a flattened data structure

DataPicker is for displaying information about a single item, not a list. The dialog enables items of data to be picked from the transformed source and formatted for display. DataPicker is best used with completely flattened data using 'Flatten with.dot.notation all the way' or 'Take the first item of a list and flatten it all the way'.
Accepts content as an array.

Items of data are picked for display using the item key.in.dot.notation. It is usually easiest to look at data first using the Serialize content display. Make notes about keys required, then swap to this DataPicker content display with your notes about what data to work with. Items of data can then be specified using the keys with dot.notation where multiple dimensions have been flattened.

Items can be taken from the data or entered directly:

  • Enter heading as text
  • From data, specify by key
Items may be formatted using any of the following:
  • Paragraphs
  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Div elements with Paragraph
  • Div elements with auto heading
  • Div elements with h1
  • Div elements with h2
  • Div elements with h3
  • Div elements with h4
  • Div elements with h5
  • Div elements with h6
  • Ordered List
  • Unordered List
  • Unordered List, unstyled
  • Unordered List, inline
  • Definition List
  • Definition List, horizontal
  • Emphasis (usually italic)
  • Strong (usually bold)
  • Small
  • Table, heading top
  • Table, heading left

[ Universal Content Puller ]

JavaScript Data

Insert json data for use by JavaScript.

Render content or data in a way that is convenient for use in JavaScript
Accepts content as any of string or array.

Options for embedding data are:

  • In a data attribute of an empty <div> element
  • In any attribute of an empty <div> element
  • Inline as a data object
  • Inline as data object with a json string
  • In the footer as a data object
  • In the footer as a data object with a json string
The data attribute name will be data-ucp_XXXX. JavaScript data objects will be ucp.data.XXXX. The attribute name can also be XXXX as entered with no prefix. This may be useful where third party scripts are fussy about attribute names for data, but can also be hazardous. Take care!

Optional headings for each dimension of data can be taken from the data or entered directly:
  • None
  • Keys of an associative array
  • Capitalised keys
  • Index 0,1,2
  • Original index, before filters
  • Number 1,2,3
  • Original number, before filters
  • Alphabetical A,B,C
  • First item, eg. the first row in a csv
  • Capitalised first item
  • First child value
  • Capitalised first child
  • Enter headings, one per line
To enter your own item headings, headings must be entered in sequence, one item heading per line.

Within a dimension of the data, filtered items will be omitted from display. Filters may be specified by Heading or Number(1,2,3) specifying an item in the dimension, or specified by Heading or Number(1,2,3) in the next level followed with a double colon '::' to look ahead to an item at the next level.

After the double colon '::', match conditions can be an exact match or use *glob conventions for wildcards. An empty match condition means 'if empty'. When matched, the item is omitted from display.

Examples:
  • 42  - Skip item number 42.
  • 1::  - Skip if the first item below is empty.
  • Description::*wordpress*  - Skip if 'Description' below mentions wordpress.
  • Description::!*concrete5*  - Skip if 'Description' below does not mention concrete5.

[ Universal Content Puller ]

Limited Text

Text only.

The content is reduced to plain text with all html tags stripped, then optionally limited in length. Further opptions add ellipses when text is truncated.
Accepts content as a string.

[ Universal Content Puller ]

ListPicker

Pick data items from a flattened array and display it as a 2-level list or table

ListPicker works the opposite way round to MultiLevelList and Table. Accepted array data is referred to as outer list items (rows) and inner list items (columns). The dialog then enables inner items to be picked from the data and formatted for display. ListPicker is best used with flattened data using 'Flatten to list with.dot.notation within each item'.
Accepts content as an array.

Inner list items are picked for display using the item key.in.dot.notation. It is usually easiest to look at data first using the Serialize content display. Make notes about keys required, then swap to this ListPicker content display with your notes about what data to work with. Inner list items can then be specified using the keys with dot.notation where multiple dimensions have been flattened. Headings for outer list items and inner list items are either entered directly or picked from inner item values in a similar way.

Special keys recognised are {{outer_key}} to use the key of the outer list, and {{outer_value}} to use the value of the outer list.

Each level of list may be formatted in any of the following, with optional headings for each item:

  • Paragraphs
  • Paragraphs with auto heading
  • Paragraphs with h1 for heading
  • Paragraphs with h2 for heading
  • Paragraphs with h3 for heading
  • Paragraphs with h4 for heading
  • Paragraphs with h5 for heading
  • Paragraphs with h6 for heading
  • div elements with Paragraph for heading
  • div elements with auto heading
  • div elements with h1 for heading
  • div elements with h2 for heading
  • div elements with h3 for heading
  • div elements with h4 for heading
  • div elements with h5 for heading
  • div elements with h6 for heading
  • Ordered List
  • Unordered List
  • Unordered List, unstyled
  • Unordered List, inline
  • Definition List
  • Definition List, horizontal
  • Emphasis (usually italic)
  • Strong (usually bold)
  • Small
  • Table, heading top
  • Table, heading left
  • Table rows, next level must be columns
  • Table columns, previous level must be rows
The list types Table rows and Table columns should be used in pairs. Using them in any other way will result in broken HTML.

Headings for rows or columns can be taken from the data or entered directly:
  • None
  • Index 0,1,2
  • Original index, before filters
  • Number 1,2,3
  • Original number, before filters
  • Alphabetical A,B,C
  • Enter headings, one per line
  • Specify by key
To enter your own row or column headings, headings must be entered in sequence, one item heading per line.

The outer list may be filtered by inner item heading, outer item number (1,2,3) or inner item match condition to exclude outer list items from display. Plain numbers or headings identify outer items to exclude. The outer list may also be filtered by identifying inner list items followed by a double colon (such as 3::). Following that, empty means "if the inner item is empty", or a string means "if the inner item matches the string". Filter strings support *glob matching and are negated if they begin with a !.

There is no need to filter inner items because you only pick those you want to display. If you don't specify any inner items, nothing gets displayed!

The outer list may be resequenced by listing Headings or Numbers(1,2,3) in the order they will be displayed. After listed items have been displayed, remaining items will be displayed in their original sequence.

Shuffling of the outer list is applied after filters and uses numbering of the filtered items (not the original items)

Inner items can be specified for display in any sequence. Inner items not specified will not be diplayed.

[ Universal Content Puller ]

Multi Level List

One or more levels of list, to any nesting depth.

Given an array of data with any number of dimensions, display it as nested lists or tables.
Accepts content as an array.

Each level of list may be formatted in any of the following, with optional headings for each item:

  • Paragraphs
  • Paragraphs with auto heading
  • Paragraphs with h1 for heading
  • Paragraphs with h2 for heading
  • Paragraphs with h3 for heading
  • Paragraphs with h4 for heading
  • Paragraphs with h5 for heading
  • Paragraphs with h6 for heading
  • div elements with Paragraph for heading
  • div elements with auto heading
  • div elements with h1 for heading
  • div elements with h2 for heading
  • div elements with h3 for heading
  • div elements with h4 for heading
  • div elements with h5 for heading
  • div elements with h6 for heading
  • Ordered List
  • Unordered List
  • Unordered List, unstyled
  • Unordered List, inline
  • Definition List
  • Definition List, horizontal
  • Emphasis (usually italic)
  • Strong (usually bold)
  • Small
  • Table, heading top
  • Table, heading left
  • Table rows, next level must be columns
  • Table columns, previous level must be rows
The list types Table rows and Table columns should be used in pairs. Using them in any other way will result in broken HTML.

Optional headings for each dimension of data can be taken from the data or entered directly:
  • None
  • Keys of an associative array
  • Capitalised keys
  • Index 0,1,2
  • Original index, before filters
  • Number 1,2,3
  • Original number, before filters
  • Alphabetical A,B,C
  • First item, eg. the first row in a csv
  • Capitalised first item
  • First child value
  • Capitalised first child
  • Enter headings, one per line
To enter your own item headings, headings must be entered in sequence, one item heading per line.

Within a dimension of the data, filtered items will be omitted from display. Filters may be specified by Heading or Number(1,2,3) specifying an item in the dimension, or specified by Heading or Number(1,2,3) in the next level followed with a double colon '::' to look ahead to an item at the next level.

After the double colon '::', match conditions can be an exact match or use *glob conventions for wildcards. An empty match condition means 'if empty'. When matched, the item is omitted from display.

Examples:
  • 42  - Skip item number 42.
  • 1::  - Skip if the first item below is empty.
  • Description::*wordpress*  - Skip if 'Description' below mentions wordpress.
  • Description::!*concrete5*  - Skip if 'Description' below does not mention concrete5.

Within a dimension of the data, items may be resequenced by listing their Heading or Number(1,2,3) in the order they will be displayed. After listed items have been displayed, remaining items will be displayed in their original sequence.

Shuffle is applied after filters and uses numbering of the filtered items (not the original data items)

[ Universal Content Puller ]

Paragraphs With Heading

A series of <p> Paragraphs with a <h> heading at the top.

Given a simple list, present it as a series of paragraphs with a heading at the top. Choose which item is the heading and how to format the heading.
Accepts content as an array.

[ Universal Content Puller ]

Plain

Just output the content provided.

Nothing fancy. The content provided is assumed to be HTML or text that can be directly output.
Accepts content as a string.

[ Universal Content Puller ]

Serialize

Displays any kind of content as text.

Useful as a diagnostic, when you are not sure of the format of content pulled or transform applied. Complex data is serialized into a textual format. HTML is typically escaped. Output can be formatted with preformat or nl2br.
Accepts content as any of string or array.

[ Universal Content Puller ]

Table

A table of rows and columns

Given an array of data with two dimensions, display it as a table.
Accepts content as an array.

Headings for rows or columns can be taken from the data or entered directly:

  • None
  • Keys of an associative array
  • Capitalised keys
  • Index 0,1,2
  • Original index, before filters
  • Number 1,2,3
  • Original number, before filters
  • Alphabetical A,B,C
  • First column
  • Capitalised first column
  • Enter headings, one per line
To enter your own row or column headings, headings must be entered in sequence, one item heading per line.

Rows may be filtered by row heading, row number (1,2,3) or column match condition to exclude rows from display. Plain row numbers or row headings identify rows to exclude. Rows may also be filtered using column numbers or column headings followed by a double colon (such as 3::). Following that, empty means "if the column is empty", or a string means "if the column matches the string". Filter strings support *glob matching and are negated if they begin with a !.

Columns can be filtered by specifying a column heading or column number (1,2,3) to exclude a column from display. Filtered columns may still be used in row filters.

Examples:
  • 42  - Skip row or column number 42.
  • 1::  - Skip if column 1 in the row is empty.
  • Description::*wordpress*  - Skip if the 'Description' column mentions wordpress.
  • Description::!*concrete5*  - Skip if the 'Description' column does not mention concrete5.

Rows may be resequenced by listing their Heading or Number(1,2,3) in the order they will be displayed. After listed rows have been displayed, remaining rows will be displayed in their original sequence.

Row shuffle is applied after filters and uses numbering of the filtered rows (not the original rows)

Columns may be resequenced by listing their Heading or Number(1,2,3) in the order they will be displayed. After listed columns have been displayed, remaining columns will be displayed in their original sequence.

Column shuffle is applied after filters and uses numbering of the filtered rows (not the original columns)

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.