# Widgets We've built a flexible widget framework to give superpowers to the [Map Overview](https://docs.kumu.io/overview/user-interfaces/map-editor#side-panel) and the Description field in [profiles](https://docs.kumu.io/guides/profiles). ![image of list of connections belonging to an element](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-12e28b5318b6f04b7a8673e4fd24d2846bff74be%2Flist-widget-element-connections.png?alt=media) With widgets, you can do the following: * [Create lists of elements, connections, loops, or field values](#create-lists-of-elements-connections-loops-or-field-values) * [Embed video](#embed-video) * [Embed audio](#embed-audio) * [Embed documents](#embed-documents) * [Embed slideshows](#embed-slideshows) To use widgets, start editing the Map Overview, or the Description of an element, connection, or loop, and type double square brackets `[[]]`. What you put inside the double square brackets depends on which widget you're using—you can read the rest of this article to learn more about each option. ## Create lists of elements, connections, loops, or field values {% embed url="" %} The list widget allows you to create lists of elements, connections, and loops inside the Map Overview or a Description. #### Basic lists of elements, connections, or loops For a basic list, just type `list/` inside your double square brackets, and then type `elements`, `connections`, or `loops` depending on what you want to list. ``` [[list/elements]] --> Creates a list of all elements [[list/connections]] --> Creates a list of all connections [[list/loops]] --> Creates a list of all loops ``` ![List widget](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-6639799d82ee9db56fd43340ee1b3aa37c8e6a4e%2Flist-loops.png?alt=media) All the items in the list are links—you can hover over a link to [showcase](https://docs.kumu.io/guides/showcase) an item on the map, or you can click a link to jump to the profile for that item. Basic lists can also be sorted by any field in your [profiles](https://docs.kumu.io/guides/profiles). To do so, add `?sort=field-name` after `elements`, `connections`, or `loops`, and replace `field-name` with a [slug](https://docs.kumu.io/guides/slugs) of the field name you want to sort by. ``` [[list/connection?sort=strength]] [[list/element?sort=net-worth]] ``` Add `&desc=true` to the end if you want to sort in descending order: ``` [[list/loop?sort=label&desc=true]] ``` #### More specific lists of elements, connections, or loops To create a list that is more specific that "all elements", for example, you can type `list` and a [selector](https://docs.kumu.io/guides/selectors) in double quotes. ``` [[list "person"]] --> List elements with "Person" in the Type field [[list ":from(person)"]] --> List connections leading from "Person" type elements [[list "['influence'='high']"]] --> List items with "High" in the Influence field. ``` Having trouble writing the right selector for your use case? Feel free to [email support](mailto:support@kumu.io)! Normally, it would be okay to write a selector with double quotes, e.g. `["influence"="high"]`. But inside the list widget, you need to write it with single quotes instead: `['influence'='high']`. `'influence'` and `'high'` are enclosed in single quotes, and the entire selector is enclosed in double quotes. {% hint style="info" %} If you want to list all of an element's connections in it's profile, we wrote [a more detailed article](https://docs.kumu.io/frequently-asked-questions/how-do-i-list-an-elements-connections-in-its-profile) on how to achieve that. {% endhint %} These more specific lists, like basic lists, can also be sorted by any field in your [profiles](https://docs.kumu.io/guides/profiles). To do so, add `?sort=field-name` after `list` and before the selector, and replace `field-name` with a [slug](https://docs.kumu.io/guides/slugs) of the field name you want to sort by. ``` [[list?sort=net-worth "person"]] [[list?sort=strength ":from(person)"]] ``` Add `&desc=true` to the end if you want to sort in descending order: ``` [[list?sort=type&desc=true "['influence'='high']"]] ``` #### Change the showcase behavior for lists of items Kumu's showcase actually has three different "modes" to affect how it works: * `normal` mode showcases the selection plus any connections between the showcased elements (default) * `loose` mode showcases the selection plus neighboring elements * `strict` mode showcases only the selection itself, nothing else By default, hovering over an item in the list widget will showcase that item in `normal` mode. You can override this default behavior by adding `?mode=loose` or `?mode=strict`. For basic lists, add that modifier at the very end: ``` [[list/elements?mode=loose]] ``` For more specific lists, add the modifier after the word `list`: ``` [list?mode=strict ":from(person)"] ``` #### Lists of field values To list all the values of a particular field, type `list` inside your double square brackets, followed by the field name in double quotes. Simply include the field name in quotes in the standard list format. ``` [[list "Level of Influence"]] ``` ![](https://1181816445-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkXSW1nEf49ISqGxYuRfS%2Fuploads%2Fgit-blob-147105defdbf3c634edeaf5e983d7f0f7024d0c6%2Flist-widget-field.jpg?alt=media) When you hover over a field value in the list, Kumu will showcase all elements, connections, and loops that have that field value in their profile. ## Embed video #### Vimeo To embed a Vimeo video, type `vimeo/` inside the double square brackets, followed by the ID if the video you'd like to include: ``` [[vimeo/36519586]] ``` Optionally, you can change the aspect ratio from `hd` (the default) to `sd`: ``` [[vimeo/36519586?aspect=sd]] ``` You can also add a descriptive title: ``` [[vimeo/36519586 "a story for tomorrow by gnarly bay"]] ``` #### YouTube To embed a YouTube video, type `youtube/` inside the double square brackets, followed by the ID if the video you'd like to include. You can find the ID for a given YouTube video within the URL of the video. Just grab the portion after the `?v=` part of the URL. ``` [[youtube/mXiFqI-mekw]] ``` Optionally, you can change the aspect ratio from `hd` (the default) to `sd`: ``` [[youtube/mXiFqI-mekw?aspect=sd]] ``` {% hint style="info" %} **Note:** When embedding a Youtube video, make sure to use the full URL (e.g. ), not the shortened URL (e.g. ), as the shortened URL will [make the embed fail](https://stackoverflow.com/questions/29304336/why-doesnt-my-youtu-be-url-work-for-video-embedding). {% endhint %} ## Embed audio #### Soundcloud To embed audio from Soundcloud, type `soundcloud/` inside your double square brackets, followed by the ID of the audio file: ``` [[soundcloud/313184173]] ``` ## Embed documents ### Scribd To embed documents from Scribd, type `scribd/` inside your double square brackets, followed by the ID of the document: ``` [[scribd/416217686]] ``` The Scribd widget supports a `start_page` option that lets you define which page the embedded document should show first. To set the option, add a `?` after the document ID, then type `start_page=`, and the page number you want to set. ``` [[scribd/416217686?start_page=3]] ``` ## Embed slideshows ### Slideshare To embed a slideshow from Slideshare, type `slideshare/` inside your double square brackets, followed by the ID of the slideshow: ``` [[slideshare/32200030]] ``` Optionally, you can change the aspect ratio from `sd` (the default) to `hd`: ``` [[slideshare/32200030?aspect=hd]] ``` You can also add a descriptive title: ``` [[slideshare/32200030 "Changing behavior through persuasive design"]] ``` ### Speaker Deck To embed a slideshow from Speaker Deck, type `speakerdeck/` inside your double square brackets, followed by the ID of the slideshow: ``` [[speakerdeck/39d28e80a7840130b36006a0b9603b35 "The product is the byproduct"]] ``` Optionally, you can change the aspect ratio from `sd` (the default) to `hd`: ``` [[speakerdeck/39d28e80a7840130b36006a0b9603b35?aspect=hd]] ``` You can also add a descriptive title: ``` [[speakerdeck/39d28e80a7840130b36006a0b9603b35 "The product is the byproduct"]] ``` {% hint style="success" %} Need any other widgets? [Send us an email!](mailto:support@kumu.io) {% endhint %}