Example - List Picker
In Example - RSS Feed we used the Multi Selector content transform to extract a subset of the feed data, then filtered and shuffled it down to just the data we wanted to display using the Multi Level List content display.
The List Picker content display provides an alternative way of getting to the same kind of result. Rather than extracting a bit more than what we need with Multi Selector content transform and then filtering out what we don't need in the Multi Level List content display , we make all the data available to the display as a 2-dimensional list via the List Selector content transform and then pick the few items we actually want from that in the List Picker content display.
For some types of data and display, its easier to filter out what isn't wanted. For some types of data and display, its easier to pick only what is wanted. In may cases, its a matter of personal preference as to what you are most comfortable working with.
In Detail
The content source is URL configured exactly the same as previously. In the List Selector content transform, the source content type is 'XML / XHTML', the outer selector is 'channel' and the item selector is 'item'. So far, very similar to our previous use of Multi Selector. However, we don't want to end our data there, so at the bottom of the transform we select to Flatten to list with.dot.notation within each item.
Rather than go straight to the display, 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 List Picker because we need to know the keys to pick from.
To avoid cluttering the page, in the below the data has been sliced to just the first item and wrapped in a single element accordion (expander) using Magic Tabs.
RSS - XML Source
Array
(
[0] => Array
(
[item.title] => Discover Why Digital Asset Management Software Is a Must-Have
[item.description] => <p><img src="https://www.concretecms.com/application/files/9717/3410/9098/dam_team.jpeg" alt="image" /></p>This guide addresses the questions: What does DAM entail? Why is digital asset management important? How does DAM help organizations harness their content to build stronger brands and deliver superior customer experiences?
[item.pubDate] => Fri, 13 Dec 2024 16:11:00 +0000
[item.link] => https://www.concretecms.com/about/blog/intranets/digital-asset-management-software-is-a-must-have
[item.guid] => https://www.concretecms.com/about/blog/intranets/digital-asset-management-software-is-a-must-have
[item.slash:comments] =>
)
)
Looking at the data we make note of the keys:
- title
- description
- pubDate
- link
- guid
- slash:comments
We can then use those keys to pick out the data in List Picker. Our example also uses the same Header Extra Content styles to layout and format the feed items.
A nice trick we can do with List Picker is to 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.
Discover Why Digital Asset Management Software Is a Must-Have
Fri, 13 Dec 2024 16:11:00 +0000
What is Git? A Beginner’s Guide to Version Control
Wed, 11 Dec 2024 23:04:00 +0000
Settings as JSON
If you haven't already noticed, many of our example Universal Content Puller blocks have a small View settings button to the top right, where you can view the block settings as JSON data and even copy them to paste into your own UCP blocks using using the Import button in the Support tab of the edit dialog.
As a change from also showing screengrabs of some of the settings, for this example we have used the Export button in the Support tab of the block edit dialog to export the settings from the above UCP block and show them below.
Open the accordion below to view the JSON. You can copy these settings and paste them into your own UCP blocks using the Import button.
Settings as JSON
[
{
"name": "content_source_plugin",
"value": "URL"
},
{
"name": "ucp_cs_u_r_l_ucp_cs_source_url",
"value": "https://www.concretecms.com/rss/blog"
},
{
"name": "ucp_cs_u_r_l_ucp_cs_source_cache_enable",
"value": "on"
},
{
"name": "ucp_cs_u_r_l_ucp_cs_source_cache_duration",
"value": "global"
},
{
"name": "ucp_cs_u_r_l_ucp_cs_source_cache_duration_mins",
"value": "360"
},
{
"name": "content_transform_plugin",
"value": "Multi Selector"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_obj",
"value": "qp"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_selector",
"value": "channel"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_remove_selector",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_sel[0]",
"value": " item"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_sel[1]",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_excl[0]",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_excl[1]",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_fetch[0]",
"value": "0"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_fetch[1]",
"value": "0"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_attrs[0]",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_qp_attrs[1]",
"value": ""
},
{
"name": "ucp_ct_multi_selector_ucp_ct_rows_offset",
"value": "0"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_rows_length",
"value": "25"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_columns_offset",
"value": "0"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_columns_length",
"value": "0"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_flatten",
"value": "list2"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_flatten_method",
"value": "Arr::dot"
},
{
"name": "ucp_ct_multi_selector_ucp_ct_transpose",
"value": "0"
},
{
"name": "content_display_plugin",
"value": "ListPicker"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_format[row]",
"value": "ph3"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_format[col]",
"value": "ph4"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading[row]",
"value": "pick"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][0]",
"value": "none"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][1]",
"value": "none"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[row]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[row]",
"value": "title"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[row]",
"value": "link"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_filter[row]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_shuffle[row]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][0]",
"value": "pubDate"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][1]",
"value": "description"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_level[0]",
"value": "any"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_heading_comparison[0]",
"value": "ignore"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_content_comparison[0]",
"value": "ignore"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_heading_comparison_value[0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_content_comparison_value[0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_classes[0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_context[0]",
"value": "content"
},
{
"name": "ucp_cd_list_picker_ucp_cd_items_to_display",
"value": "2"
},
{
"name": "ucp_cd_list_picker_ucp_cd_paginate_if_more",
"value": "b"
},
{
"name": "ucp_cd_list_picker_ucp_cd_pagination_window",
"value": "0"
},
{
"name": "ucp_cd_list_picker_ucp_cd_orphan_limit",
"value": "0"
},
{
"name": "ucp_cd_list_picker_ucp_cd_block_in_pagination",
"value": ""
},
{
"name": "options[ajax_mode]",
"value": "none"
},
{
"name": "options[ajax_mode_delay]",
"value": "0"
},
{
"name": "options[ajax_mode_proximity]",
"value": "0"
},
{
"name": "options[placeholder_type]",
"value": "marker"
},
{
"name": "options[placeholder_label]",
"value": "Loading..."
},
{
"name": "options[placeholder_height]",
"value": "25"
},
{
"name": "options[placeholder_height_u]",
"value": "vw"
},
{
"name": "options[CacheBlockOutputLifetime]",
"value": 0
},
{
"name": "options[sanitize_op]",
"value": "safe"
},
{
"name": "options[autolink]",
"value": "youthweb"
},
{
"name": "options[image_render]",
"value": "file_manager_detail"
},
{
"name": "options[wrapper_enable]",
"value": "wrap"
},
{
"name": "options[wrapper_element]",
"value": "div"
},
{
"name": "options[wrapper_class]",
"value": "ucp-body example-styled"
},
{
"name": "options[edit_mode_marker]",
"value": ""
},
{
"name": "options[debug]",
"value": "0"
},
{
"name": "options[CacheBlockOutput]",
"value": false
},
{
"name": "options[CacheBlockOutputOnPost]",
"value": false
},
{
"name": "options[CacheBlockOutputForRegisteredUsers]",
"value": false
},
{
"name": "options[use_global_settings]",
"value": false
}
]
