Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Basic Editor
  • Advanced Editor
  • Additional examples

Was this helpful?

Edit on GitHub
  1. Guides
  2. Controls

Showcase control

PreviousLabel controlNextSNA-dashboard control

Last updated 1 year ago

Was this helpful?

When do you use it?

Add a control to activate for a given field or set of selectors via a list of labels, buttons or a dropdown menu.

Basic Editor

To create a showcase control, follow these steps:

  1. Click the settings icon on the right to open the editor, then click "Add custom control".

  2. In the menu that opens up, change the first dropdown to "Showcase elements by field".

  3. Use the other dropdowns to customize the look and location of your controls

  4. Click Save at the bottom to save your changes

  5. To add multiple controls, repeat steps 1-4 for each control.

Note: The showcase control works with OR logic. This means that if you combine multiple controls on one map, the view will be filtered down to any elements that satisfy at least one of the conditions of the controls. Looking for AND logic (showing only elements that satisfy all of the conditions)? Take a look at our .

Advanced Editor

If you like to get into the nitty-gritty of the advanced editor, you can type out controls directly. The advanced editor also allows for more advanced controls, as explained below.

Example

Showcase by field:

@controls {
  bottom {
    showcase {
      by: "State";
    }
  }
}
@controls {
  bottom {
    showcase {
      option {
        label: "People";
        selector: person;
      }

      option {
        label: "Orgs";
        selector: organization;
      }
    }
  }
}

Supported properties

  • by is the field you'd like to use for showcasing wrapped in double quotes. If you don't include by: field you need to list out each option - see "supported children" guidance below.

  • mode controls how the selection is showcased

    • normal showcase the selection plus any connections between the showcased elements (default)

    • loose showcase the selection plus neighboring elements

    • strict only showcase the selection itself

  • as controls how the control is presented. Do you want a list of labels, buttons, or a dropdown for activating showcase?

    • labels show options as a list of clickable labels

    • buttons show options as a group of buttons

    • dropdown show options as dropdown

  • multiple controls whether more than one value can be selected at a time

    • false allows the reader to only select a single option

    • true allows the reader to select multiple options

    • match-all allows the reader to select multiple options, and only showcases items that match all of the selected options

  • placeholder the text to display when nothing is selected (for as: dropdown only)

  • summary override the summary that's shown for the current selection (for as: dropdown). The summary will be shown regardless of what's selected so there's no need to use placeholder in this case.

  • default defines which field values should be selected by default (for by: "field" only). Use select-all to select everything by default.

Supported children

If you want to use custom selectors to build the showcase, you'll need to list each option out separately. The options are defined by option blocks nested within the control and each option supports the following properties:

  • label the text to display for that option

  • default

    • true value is selected by default

    • false value is unselected by default

Additional examples

Showcase by state and include neighboring elements, allowing multiple states to be selected at the same time:

@controls {
  bottom {
    showcase {
      by: "State";
      mode: loose;
      multiple: true;
    }
  }
}

Showcase by state using a dropdown menu, and include a placeholder with instructions:

@controls {
  bottom {
    showcase {
      by: "State";
      as: dropdown;
      placeholder: "Select a state";
    }
  }
}

Showcase by state and select all states by default:

@controls {
  bottom {
    showcase {
      by: "State";
      default: select-all;
    }
  }
}

Showcase using custom :

to see the full list of properties and values recognized by the showcase control.

selector the to use for the showcase

Check out our controls reference
showcase
Filter control guide
selectors
selector