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, Salisbury U. Enact Agreement for Workforce Development  
            [item.link] => https://www.nasa.gov/centers-and-facilities/wallops/nasa-salisbury-u-enact-agreement-for-workforce-development/
            [item.dc:creator] => Jamie Adkins
            [item.pubDate] => Thu, 28 Mar 2024 19:13:56 +0000
            [item.category.0] => Wallops Flight Facility
            [item.category.1] => Partner with NASA STEM
            [item.category.2] => STEM Engagement at NASA
            [item.guid.text] => https://www.nasa.gov/?p=638320
            [item.guid.isPermaLink] => false
            [item.description] => NASA and Salisbury University (SU) in Maryland signed a collaborative Space Act Agreement Thursday, March 28, 2024, opening new opportunities at the agency’s Wallops Flight Facility in Virginia for students in science, technology, engineering, and mathematics (STEM) fields. The agreement forges a formal partnership to identify research and engineering projects and activities at Wallops designed […]
            [item.content:encoded] => <div id="" class="padding-top-5 padding-bottom-3 width-full maxw-full hds-module hds-module-full wp-block-nasa-blocks-article-intro"><div class="width-full maxw-full article-header"><div class="margin-bottom-2 width-full maxw-full"><p class="label carbon-60 margin-0 margin-bottom-3 padding-0">2 min read</p><h1 class="display-48 margin-bottom-2">Preparations for Next Moonwalk Simulations Underway (and Underwater)</h1></div></div></div>


<p>NASA and Salisbury University (SU) in Maryland signed a collaborative Space Act Agreement Thursday, March 28, 2024, opening new opportunities at the agency’s Wallops Flight Facility in Virginia for students in science, technology, engineering, and mathematics (STEM) fields.</p>


<div 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-fit"><img width="2048" height="1365" src="https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?w=2048" class="attachment-2048x2048 size-2048x2048" alt="Dr. Makenzie Lystrup shakes hands Dr. Carolyn R. Lepre at a table, with Dr. Laurie Couch and Dave Pierce standing behind them." style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg 2400w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=300, 200 300w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=768, 512 768w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=1024, 683 1024w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=1536, 1024 1536w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=2048, 1365 2048w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=400, 267 400w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=600, 400 600w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=900, 600 900w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=1200, 800 1200w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-003.jpg?resize=2000, 1333 2000w" /></figure><figcaption class="hds-caption padding-y-2">NASA’s Goddard Space Flight Center Director Dr. Makenzie Lystrup (right) shakes hands with Salisbury University President Dr. Carolyn R. Lepre during the SU Space Act Agreement signing ceremony held in Salisbury, Md., Thursday, March 28, 2024. Provost and Senior Vice President of Academic Affairs for SU Dr. Laurie Couch (left) and NASA’s Wallops Flight Facility Director David Pierce stand behind them.</figcaption></div><div class="hds-credits">NASA/Jamie Adkins</div></div></div>


<p>The agreement forges a formal partnership to identify research and engineering projects and activities at Wallops designed to provide SU students and professors with experiential, hands-on activities. </p>



<p>“Our success at NASA, now and in the future, depends on a dynamic network of partnerships focused on our mission operations and growing the next generation of innovators,” said Dr. Makenzie Lystrup, center director at NASA’s Goddard Space Flight Center in Greenbelt, Maryland. “NASA’s partnership with Salisbury University expands our workforce development ecosystem and provides students with real-world experience in critical aerospace career fields.” NASA Goddard manages Wallops Flight Facility for the agency.</p>



<p>The agreement also lays a framework for expanding internship opportunities at Wallops, mentoring, technical expertise to faculty, and support for job fairs and other career development programs aimed to expand awareness of careers in the aerospace industry. </p>



<p>“NASA Wallops has long been at the forefront of space exploration, pioneering breakthroughs that have expanded our understanding of the universe and inspired generations of scientists, engineers, and dreamers,” said Dr. Carolyn Ringer Lepre, SU president. “Together, we will leverage our collective expertise, resources, and ingenuity to tackle some of the most pressing challenges facing our world today.” </p>


<div 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-fit"><img width="2048" height="1365" src="https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?w=2048" class="attachment-2048x2048 size-2048x2048" alt="Dr. Makenzie Lystrup speaks at a podium. The words "Salisbury University" on a gold plaque on the front of the podium." style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg 2400w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=300, 200 300w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=768, 512 768w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=1024, 683 1024w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=1536, 1024 1536w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=2048, 1365 2048w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=400, 267 400w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=600, 400 600w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=900, 600 900w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=1200, 800 1200w, https://www.nasa.gov/wp-content/uploads/2024/03/20240328-suspaceact-001.jpg?resize=2000, 1333 2000w" /></figure><figcaption class="hds-caption padding-y-2">Dr. Makenzie Lystrup speaks during the Salisbury University Space Act Agreement signing ceremony held in Salisbury, Md., Thursday, March 28, 2024. The agreement will expand internship opportunities at NASA’s Wallops Flight Facility in Virginia, mentoring, technical expertise to faculty, and support for job fairs and other career development programs aimed to expand awareness of careers in the aerospace industry. </figcaption></div><div class="hds-credits">NASA/Jamie Adkins</div></div></div>


<p>Wallops’ conducts upwards of 50 operational science and technology missions worldwide annually launching on orbital and suborbital rockets, scientific balloons, and flying on airborne science platforms. In addition, NASA’s commercial partners like Rocket Lab are increasing launch operations on the facility.  </p>



<p>“Our operations are growing at Wallops underscoring the need for an innovative, skilled workforce to advance our science and technology missions,” said Lystrup. “This agreement is helping us fill a critical workforce need to propel us into the future.”  </p>



<p>For more information on programs at Wallops, visit: </p>



<p><a href="http://www.nasa.gov/wallops" target="_blank" rel="noreferrer noopener">www.nasa.gov/wallops</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%2C%20Salisbury%20U.%20Enact%20Agreement%20for%20Workforce%20Development%C2%A0%C2%A0&url=https%3A%2F%2Fwww.nasa.gov%2Fcenters-and-facilities%2Fwallops%2Fnasa-salisbury-u-enact-agreement-for-workforce-development%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%2Fcenters-and-facilities%2Fwallops%2Fnasa-salisbury-u-enact-agreement-for-workforce-development%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%2Fcenters-and-facilities%2Fwallops%2Fnasa-salisbury-u-enact-agreement-for-workforce-development%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">Mar 28, 2024</div>
				</div>
			<div class="grid-row margin-bottom-3"><div class="grid-col-4"><div class="subheading">Editor</div></div><div class="grid-col-8">Jamie Adkins</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/wallops/">Wallops Flight Facility</a></li><li class="article-tag"><a href="https://www.nasa.gov/learning-resources/partnering-with-nasa-stem-engagement/">Partner with NASA STEM</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>
        )

)
View settings

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 Astronaut Don Pettit to Conduct Science During Fourth Mission

Wed, 27 Mar 2024 19:36:41 +0000

During his fourth mission to the International Space Station, NASA astronaut Don Pettit will serve as a flight engineer and member of the Expedition 71/72 crew. After blasting off to space, Pettit will conduct scientific investigations and technology demonstrations to help prepare crew for future space missions. Pettit will launch on the Roscosmos Soyuz MS-26 […]

The Marshall Star for March 27, 2024

Wed, 27 Mar 2024 19:07:58 +0000

Marshall Hosts 37th Small Business Alliance Meeting By Celine Smith NASA’s Marshall Space Flight Center hosted its 37th Small Business Alliance meeting March 21 at the U.S. Space & Rocket Center’s Davidson Center for Space Exploration. The event brought together hundreds of attendees from 39 states and 21 countries to network and learn about opportunities […]

View settings

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"
  }
]    

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.