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 Finds New Homes for Artemis Generation of ‘Moon Trees’ Across US
[item.link] => https://www.nasa.gov/news-release/nasa-finds-new-homes-for-artemis-generation-of-moon-trees-across-us/
[item.dc:creator] => Lauren E. Low
[item.pubDate] => Thu, 25 Apr 2024 18:47:31 +0000
[item.category.0] => Artemis 1
[item.category.1] => Astronauts
[item.category.2] => Learning Resources
[item.category.3] => STEM Engagement at NASA
[item.guid.text] => https://www.nasa.gov/?post_type=press-release&p=653651
[item.guid.isPermaLink] => false
[item.description] => After careful review of hundreds of applications, NASA has selected organizations from across the country to receive ‘Moon Tree’ seedlings that flew around the Moon on the agency’s Artemis I mission in 2022, to plant in their communities. Notifications to selected institutions will be made in phases, with the first beginning this spring, followed by […]
[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/moon-tree1.jpg"><img width="1536" height="2048" src="https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?w=1536" class="attachment-2048x2048 size-2048x2048" alt="" style="transform: scale(1); transform-origin: 38% 26%; object-position: 38% 26%; object-fit: cover;" srcset="https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg 2268w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=225, 300 225w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=768, 1024 768w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=1152, 1536 1152w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=1536, 2048 1536w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=300, 400 300w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=450, 600 450w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=675, 900 675w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=900, 1200 900w, https://www.nasa.gov/wp-content/uploads/2024/04/moon-tree1.jpg?resize=1500, 2000 1500w" /></a></figure><figcaption class="hds-caption padding-y-2">Photo of a Loblolly Pine Artemis I Moon Tree during a tree dedication ceremony at the North Carolina Governor’s mansion on Wednesday, April 24, 2024. </figcaption></div><div class="hds-credits">Credits: NASA/OLIA</div></div></div>
<p>After careful review of hundreds of applications, NASA has selected organizations from across the country to receive ‘Moon Tree’ seedlings that flew around the Moon on the agency’s Artemis I mission in 2022, to plant in their communities. Notifications to selected institutions will be made in phases, with the first beginning this spring, followed by notifications in fall 2024, spring 2025, and fall 2025.</p>
<p>NASA chose institutions based on criteria that evaluated their suitability to care for the various tree species and their ability to maximize educational opportunities around the life and growth of the tree in their communities.</p>
<p>“A new era of Moon trees will one day stand tall in communities across America,” said NASA Administrator Bill Nelson. “NASA is bringing the spirit of exploration back down to Earth because space belongs to everyone. The Artemis Generation will carry forth these seedlings that will be fertile ground for creativity, inspiration, and discovery for years to come.”</p>
<p>To commemorate the Artemis I Moon Trees, Artemis II NASA astronaut Christina Koch visited her home state of North Carolina and participated in a tree dedication ceremony at the Governor’s Mansion on April 24. She will be honored by her alma mater White Oak High School, one of many Moon Tree recipients, on Thursday. Since returning to Earth, the tree seeds have been germinating under the care of the USDA (United States Department of Agriculture) Forest Service, as NASA’s Office of STEM Engagement’s <a href="https://www.nasa.gov/learning-resources/for-educators/">Next Generation STEM</a> project and the agency’s Office of Strategic Infrastructure’s Logistics Management division worked to identify their new homes.</p>
<p>“Together, NASA and the Forest Service will deliver a piece of science history to communities across our nation,” said Mike Kincaid, associate administrator, NASA’s Office of STEM Engagement. “Through this partnership, future explorers, scientists, and environmentalists will have the opportunity to nurture and be inspired by these Artemis artifacts in the community where they live, work, and learn.”</p>
<p>The Artemis I Moon Trees, rooted in the legacy of the original Moon Trees flown by NASA astronaut Stuart Roosa during Apollo 14, journeyed 270,000 miles from Earth <a href="https://www.nasa.gov/learning-resources/nasa-usda-forest-service-fly-next-generation-of-moon-tree-seeds-on-artemis-i/">aboard</a> the Orion spacecraft. A diverse array of tree species, including sycamores, sweetgums, Douglas firs, loblolly pines, and giant sequoias, were flown around the surface of the Moon. The first batch of seedlings will ship to almost 50 institutions across 48 contiguous U.S. states.</p>
<p>“What an incredible journey these future Moon Trees have already been on, and we’re excited for them to begin the final journey to permanent homes on campuses and institutions across the country,” said Forest Service Chief Randy Moore. “We hope these trees will stand for centuries to come for the public’s enjoyment, inspiring future generations of scientists and land stewards.” </p>
<p>Moon Tree recipients will be invited to share their efforts to engage with the public and K-12 learners at quarterly virtual gatherings beginning in summer 2024. Information on educational resources and activities available to educators to share the story and science of Moon Trees with their students can be found <a href="https://www.nasa.gov/nasa-stem-artemis-moon-trees/">online</a>.</p>
<p>Next Gen STEM is a project within <a href="https://stem.nasa.gov/" rel="noopener">NASA’s Office of STEM Engagement</a>, which develops unique resources and experiences to spark student interest in science, technology, engineering, and math, and build a skilled and diverse next generation workforce.</p>
<p>For the latest NASA STEM events, activities, and news, visit:</p>
<p class="has-text-align-center"><a href="https://stem.nasa.gov/" rel="noopener">https://stem.nasa.gov/</a></p>
<p class="has-text-align-center">-end-</p>
<p>Gerelle Dodson<br />Headquarters, Washington<br />202-358-4637<br /><a href="mailto:gerelle.q.dodson@nasa.gov">gerelle.q.dodson@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%20Finds%20New%20Homes%20for%20Artemis%20Generation%20of%20%E2%80%98Moon%20Trees%E2%80%99%20Across%20US&url=https%3A%2F%2Fwww.nasa.gov%2Fnews-release%2Fnasa-finds-new-homes-for-artemis-generation-of-moon-trees-across-us%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-finds-new-homes-for-artemis-generation-of-moon-trees-across-us%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-finds-new-homes-for-artemis-generation-of-moon-trees-across-us%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 25, 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/mission/artemis-i/">Artemis 1</a></li><li class="article-tag"><a href="https://www.nasa.gov/humans-in-space/astronauts/">Astronauts</a></li><li class="article-tag"><a href="https://www.nasa.gov/learning-resources/">Learning Resources</a></li><li class="article-tag"><a href="https://www.nasa.gov/learning-resources/stem-engagement-at-nasa/">STEM Engagement at NASA</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.
Navigating the Moon with Art
Thu, 25 Apr 2024 16:37:12 +0000
An artist uses an airbrush to recreate the lunar surface on one of the four models comprising the LOLA, or Lunar Orbit and Landing Approach, simulator in this November 12, 1964, photo. Project LOLA was a simulator built at Langley to study problems related to landing on the lunar surface. In “Spaceflight Revolution: NASA Langley […]
Johnson Unveils Modern Four Nine Team Conference Center
Thu, 25 Apr 2024 15:30:48 +0000
On April 10, 2024, Johnson Space Center celebrated the opening of the Four Nine Team conference center housed in building 419. The event marked the unveiling of a dynamic hub for Johnson employees, whether for team brainstorms, meetings with offsite companies, or remote work for those not typically onsite. During the open house, selected vendors […]
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"
}
]
