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:
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.
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:
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:
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.
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:
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:
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.
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.
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.
Serialize, but paginated first.
Useful as a diagnostic, when you are not sure of the format of content pulled or transform applied and there are many data items. Each item in a list of complex data is serialized into a textual format. The consequent list can then be paginated, so making it easier to review serialized data for each list item. HTML is typically escaped. Output can be formatted with preformat or nl2br.
Accepts content as any of string or array.
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:
Displays a table of data as a chart.
Displays tabular data as a chart. Select the type of chart, which columns and rows to display, how they are formatted.
Chart types available are:
Displays just the key for a chart from table data.
Sometimes the built in Chart From Table key is not enough. Use a second UCP block with this content display for greater control over generating the key for a chart.
Data selection for the Key is the same as for the Chart From Table content display.
Accepts content as an array.
Display pulled content using a selected element.
Select a Concrete CMS element and use it to display data provided from the Content Transform. All the usual options for ajax, sanitizing and cacheing can be applied.
Accepts content as any of string or array.
Data from the transform is passed to a Concrete CMS element. Whilst Universal Content Puller Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format transformed content then select your element in the edit dialog. Universal Content Puller Elements will then use your element to build the Element display.
Paginate and display a pulled list using a selected element.
Select a Concrete CMS element and use it to display each item in a list of data provided from the Content Transform. All the usual options for pagination, ajax, sanitizing and cacheing can be applied.
Accepts content as an array.
Data from the transform is passed to a Concrete CMS element. Whilst Universal Content Puller Elements provides some basic elements, these are mainly for demonstration purposes. It is up to you, as a site developer, to code your own element to format transformed content then select your element in the edit dialog. Universal Content Puller Elements will then use your element to build the Element List display.
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.