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 sisplay, 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] => NASA to Provide Coverage as Dragon Departs Station with Science
[item.link] => https://www.nasa.gov/news-release/nasa-to-provide-coverage-as-dragon-departs-station-with-science-3/
[item.dc:creator] => Abbey A. Donaldson
[item.pubDate] => Fri, 26 Apr 2024 19:52:19 +0000
[item.category.0] => International Space Station (ISS)
[item.category.1] => ISS Research
[item.category.2] => Missions
[item.guid.text] => https://www.nasa.gov/?post_type=press-release&p=654180
[item.guid.isPermaLink] => false
[item.description] => NASA and its international partners are set to receive scientific research samples and hardware as a SpaceX Dragon cargo spacecraft departs the International Space Station on Sunday, April 28 weather permitting. The agency will provide coverage of undocking and departure beginning at 12:45 p.m. EDT on NASA+, NASA Television, the NASA app, YouTube, and the […]
[item.content:encoded] => <div id="" class="hds-media hds-module wp-block-image"><div class="margin-left-auto margin-right-auto nasa-block-align-inline"><div class="hds-media-wrapper margin-left-auto margin-right-auto"><figure class="hds-media-inner hds-cover-wrapper hds-media-ratio-cover"><a href="https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg"><img width="2048" height="1365" src="https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?w=2048" class="attachment-2048x2048 size-2048x2048" alt="" style="transform: scale(1.2); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg 2048w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=300, 200 300w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=768, 512 768w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=1024, 683 1024w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=1536, 1024 1536w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=400, 267 400w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=600, 400 600w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=900, 600 900w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=1200, 800 1200w, https://www.nasa.gov/wp-content/uploads/2024/04/51231541422-c6a4663ee7-k.jpg?resize=2000, 1333 2000w" /></a></figure><figcaption class="hds-caption padding-y-2">The SpaceX Cargo Dragon resupply ship is pictured approaching the International Space Station carrying over 7,300 pounds of new science, supplies and solar arrays to replenish the Expedition 65 crew. The Cargo Dragon’s nose cone is open revealing its hatch and forward docking cone.</figcaption></div></div></div>
<p>NASA and its international partners are set to receive scientific research samples and hardware as a SpaceX Dragon cargo spacecraft departs the International Space Station on Sunday, April 28 weather permitting.</p>
<p>The agency will provide coverage of undocking and departure beginning at 12:45 p.m. EDT on <a href="https://plus.nasa.gov/scheduled-video/nasas-spacex-30th-commercial-resupply-services-undocking/" rel="noopener">NASA+</a>, NASA Television, the <a href="https://www.nasa.gov/apps/">NASA app</a>, <a href="https://www.youtube.com/@NASA" rel="noopener">YouTube</a>, and the agency’s <a href="https://www.nasa.gov/">website</a>. Learn how to <a href="https://www.nasa.gov/general/how-to-stream-nasa-tv/">stream NASA TV</a> through a variety of platforms including social media.</p>
<p>Dragon will undock from the station’s zenith port of the Harmony module at 1:05 p.m. and fire its thrusters to move a safe distance away from the station after receiving a command from ground controllers at SpaceX in Hawthorne, California.</p>
<p>The spacecraft arrived at the station March 23 and delivered more than 6,000 pounds of research investigations, crew supplies, and station hardware after it <a href="https://www.nasa.gov/news-release/nasa-science-hardware-aboard-spacexs-30th-resupply-launch-to-station/#:~:text=NASA's%20SpaceX%2030th%20commercial%20resupply,Space%20Force%20Station%20in%20Florida.">launched</a> March 21 on a SpaceX Falcon 9 rocket from Launch Complex 39A at NASA Kennedy.</p>
<p>After re-entering Earth’s atmosphere, the spacecraft will splash down off the coast of Florida. NASA will not broadcast the splashdown, but updates will be posted on the agency’s <a href="https://blogs.nasa.gov/spacestation/" rel="noopener">space station</a> blog.</p>
<p>Dragon will carry back to Earth more than 4,100 pounds of supplies and scientific experiments designed to take advantage of the space station’s microgravity environment. Splashing down off the coast of Florida enables quick transportation of the experiments to NASA’s Space Systems Processing Facility at Kennedy Space Center in Florida, allowing researchers to collect data with minimal sample exposure to Earth’s gravity.</p>
<p>Scientific hardware and samples returning to Earth include <a href="https://www.nasa.gov/mission/station/research-explorer/investigation/?#id=8850">Flawless Space Fibers-1</a>, which produced more than seven miles of optical fiber aboard the space station. The investigation tests new hardware and processes for producing high-quality optical fibers in space and drew more than half a mile of fiber in one day, surpassing the previous record of 82 feet for the longest fiber manufactured in space.</p>
<p>Other studies include <a href="https://www.nasa.gov/mission/station/research-explorer/investigation/?#id=9026">GEARS</a> (Genomic Enumeration of Antibiotic Resistance in Space), which surveys the space station for antibiotic-resistant organisms. Genetic analysis could show how these bacteria adapt to space, providing knowledge that informs measures designed to protect astronauts on future long-duration missions.</p>
<p>Also returning on Dragon is <a href="https://www.nasa.gov/mission/station/research-explorer/investigation/?#id=9019">MISSE-18</a><strong> (</strong>Materials International Space Station Experiment-18-NASA), which analyzes how exposure to space affects the performance and durability of specific materials and components. MISSE-18 includes coatings, quantum dots, a lunar regolith simulant composite, and other materials. The samples returning home were exposed to the harsh environment of space for six months.</p>
<p>Additionally, samples from <a href="https://www.nasa.gov/mission/station/research-explorer/investigation/?#id=8362">Immune Cell Activation</a> will return to Earth for analysis. The ESA (European Space Agency) sponsored experiment seeks to understand whether microgravity influences the incorporation of magnetic nanoparticles into immune and melanoma cells. In this experiment, immune cells were modified with nano-vectors that are intended to carry therapeutic agents specifically to their target cells. Results could help develop novel therapeutics targeting central nervous system diseases and skin cancers such as melanoma.</p>
<p>These are just a few of the hundreds of investigations currently being conducted aboard the orbiting laboratory in the areas of biology and biotechnology, physical sciences, and Earth and space science. Advances in these areas will help keep astronauts healthy during long-duration space travel and demonstrate technologies for future human and robotic exploration beyond low Earth orbit to the Moon and Mars through NASA’s <a href="https://www.nasa.gov/specials/artemis/">Artemis</a> campaign.</p>
<p>Get breaking news, images and features from the space station on <a href="https://instagram.com/iss" rel="noopener">Instagram</a>, <a href="https://www.facebook.com/iss" rel="noopener">Facebook</a>, and <a href="https://twitter.com/space_station" rel="noopener">X</a>.</p>
<p>Learn more about the International Space Station at:</p>
<p class="has-text-align-center"><a href="https://www.nasa.gov/international-space-station/"><strong>https://www.nasa.gov/international-space-station/</strong></a></p>
<p class="has-text-align-center">-end-</p>
<p>Josh Finch / Claire O’Shea<br />Headquarters, Washington<br />202-358-1100<br /><a href="mailto:joshua.a.finch@nasa.gov">joshua.a.finch@nasa.gov</a> / <a href="mailto:claire.a.o%E2%80%99shea@nasa.gov">claire.a.o’shea@nasa.gov</a></p>
<p>Sandra Jones<br />Johnson Space Center, Houston<br />281-483-5111<br /><a href="mailto:sandra.p.jones@nasa.gov">sandra.p.jones@nasa.gov</a></p>
<div class="nasa-gb-align-full width-full maxw-full padding-x-3 padding-y-0 article_a hds-module hds-module-full wp-block-nasa-blocks-credits-and-details">
<section class="padding-x-0 padding-top-5 padding-bottom-2 desktop:padding-top-7 desktop:padding-bottom-9">
<div class="grid-row grid-container maxw-widescreen padding-0">
<div class="grid-col-12 desktop:grid-col-2 padding-right-4 margin-bottom-5 desktop:margin-bottom-0">
<div class="padding-top-3 border-top-1px border-color-carbon-black">
<div class="margin-bottom-2">
<h2 class="heading-14">Share</h2>
</div>
<div class="padding-bottom-2">
<ul class="social-icons social-icons-round">
<li class="social-icon social-icon-x">
<a href="https://x.com/intent/tweet?via=NASA&text=NASA%20to%20Provide%20Coverage%20as%20Dragon%20Departs%20Station%20with%20Science&url=https%3A%2F%2Fwww.nasa.gov%2Fnews-release%2Fnasa-to-provide-coverage-as-dragon-departs-station-with-science-3%2F" aria-label="Share on X.">
</a>
</li>
<li class="social-icon social-icon-facebook">
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.nasa.gov%2Fnews-release%2Fnasa-to-provide-coverage-as-dragon-departs-station-with-science-3%2F" aria-label="Share on Facebook.">
</a>
</li>
<li class="social-icon social-icon-linkedin">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.nasa.gov%2Fnews-release%2Fnasa-to-provide-coverage-as-dragon-departs-station-with-science-3%2F" aria-label="Share on LinkedIn.">
</a>
</li>
<li class="social-icon social-icon-rss">
<a href="/feed/" aria-label="Subscribe to RSS feed.">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-col-12 desktop:grid-col-5 padding-right-4 margin-bottom-5 desktop:margin-bottom-0">
<div class="padding-top-3 border-top-1px border-color-carbon-black">
<div class="margin-bottom-2">
<h2 class="heading-14">Details</h2>
</div>
<div class="grid-row margin-bottom-3">
<div class="grid-col-4">
<div class="subheading">Last Updated</div>
</div>
<div class="grid-col-8">Apr 26, 2024</div>
</div>
<div class="grid-row"><div class="grid-col-4"><div class="subheading">Location</div></div><div class="grid-col-8"><a class="hds-location-tag-name" href="https://www.nasa.gov/nasa-headquarters/"><span class="hds-meta-heading">NASA Headquarters</span></a></div></div> </div>
</div>
<div class="grid-col-12 desktop:grid-col-5 padding-right-4 margin-bottom-5 desktop:margin-bottom-0"><div class="padding-top-3 border-top-1px border-color-carbon-black"><div class="margin-bottom-2"><h2 class="heading-14">Related Terms</h2></div><ul class="article-tags"><li class="article-tag"><a href="https://www.nasa.gov/international-space-station/">International Space Station (ISS)</a></li><li class="article-tag"><a href="https://www.nasa.gov/international-space-station/space-station-research-and-technology/">ISS Research</a></li><li class="article-tag"><a href="https://www.nasa.gov/nasa-missions/">Missions</a></li></ul></div></div>
</div>
</section>
</div>
)
)
Looking at the data we make note of the keys:
- item.title
- item.link
- item.enclosure.url
- item.pubDate
- item.description
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.
NASA to Provide Coverage as Dragon Departs Station with Science
Fri, 26 Apr 2024 19:52:19 +0000
NASA and its international partners are set to receive scientific research samples and hardware as a SpaceX Dragon cargo spacecraft departs the International Space Station on Sunday, April 28 weather permitting. The agency will provide coverage of undocking and departure beginning at 12:45 p.m. EDT on NASA+, NASA Television, the NASA app, YouTube, and the […]
Site-Wide Environmental Assessment for Marshall Space Flight Center, Alabama
Fri, 26 Apr 2024 19:45:00 +0000
The National Aeronautics and Space Administration (NASA) has prepared a Draft Environmental Assessment (EA) that analyzes the environmental impacts of implementing continuing and future mission support activities at the Marshall Space Flight Center (MSFC) in Huntsville, Alabama. The EA evaluated the potential environmental effects associated with air quality; climate change and greenhouse gases; land use; […]
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.nasa.gov/rss/dyn/breaking_news.rss"
},
{
"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": "List Selector"
},
{
"name": "ucp_ct_list_selector_ucp_ct_qp_obj",
"value": "qp"
},
{
"name": "ucp_ct_list_selector_ucp_ct_qp_selector",
"value": "channel"
},
{
"name": "ucp_ct_list_selector_ucp_ct_remove_selector",
"value": ""
},
{
"name": "ucp_ct_list_selector_ucp_ct_item_selector",
"value": "item"
},
{
"name": "ucp_ct_list_selector_ucp_ct_rows_offset",
"value": "0"
},
{
"name": "ucp_ct_list_selector_ucp_ct_rows_length",
"value": "10"
},
{
"name": "ucp_ct_list_selector_ucp_ct_flatten",
"value": "list"
},
{
"name": "ucp_ct_list_selector_ucp_ct_flatten_method",
"value": "Arr::dot"
},
{
"name": "ucp_ct_list_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_item_heading[row]",
"value": "pick"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[row]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[row]",
"value": "item.title"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[row]",
"value": "item.link"
},
{
"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_format[col]",
"value": "ph4"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][0]",
"value": "none"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][0]",
"value": "item.pubDate"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][0]",
"value": ""
},
{
"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[col][1]",
"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[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][1]",
"value": "item.description"
},
{
"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": "1"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_heading_comparison[0]",
"value": "not_contains"
},
{
"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": "float-start pull-left"
},
{
"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": "ucp_cd_list_picker_ucp_cd_striped",
"value": "striped"
},
{
"name": "ucp_cd_list_picker_ucp_cd_condensed",
"value": "condensed"
},
{
"name": "ucp_cd_list_picker_ucp_cd_hover",
"value": "hover"
},
{
"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": "cache_permission",
"value": "1"
},
{
"name": "options[CacheBlockOutputLifetime]",
"value": "0"
},
{
"name": "options[sanitize_op]",
"value": "safe"
},
{
"name": "options[autolink]",
"value": "youthweb_n"
},
{
"name": "options[image_render]",
"value": "***image"
},
{
"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[show_exporter]",
"value": "show_exporter"
},
{
"name": "whitelabel",
"value": "off"
}
]
