Searchable Name Super graphic

A tutorial to create a 'Name Super' graphic based on Olympic data, which has searchable event information


  • To be able to search for an athlete within a specific olympic sport (Athletics, Badminton, etc.)

  • To be given a list of events the athlete has appeared in, or will appear in

  • To be able to create a NameSuper automatically filled in with the player's name, country and information about selected event

For this tutorial you will be using the 'olympics individual-event-report' schema.

Step 1: Create The Hooks

Using the appropriate schema, create the following hooks:

  1. A top level hook with information about the particular event (for the bottom line of the name super)

  2. A top level List Hook for All Players and within it:

    1. A Hook for Player Key

    2. A Hook for Full Name (could be for example concatenated First and Last)

    3. A Hook for Flag (could be from a lookup by Nationality)

For the purposes of this tutorial, it is assumed you know how to build these Hooks (see Help documentation or further knowledge base articles if not).

Step 2: Make the List Hook Searchable

Your 'All Players' List Hook will be bound to an Item selector control - giving users a drop down list of all athletes so they can select one athlete to be used in the NameSuper graphic. However, when a user searches for a player then creates this NameSuper graphic for the player - you want the All Players drop down list to be automatically selecting the correct player.

To do this, you need to select the All Players list hook, then set it's 'Search Type' property to 'players'

If 'players' isn't an available option, you need to have created at least one Search from the 'Data > Data Providers > Searches' tab

Step 3: Create the Template

  1. Create a new template and select an appropriate NameSuper viz scene to use (this can be extended with scene variants later if you wish)

  2. Add the Following Controls to the Template:

    1. A Document Selector Control bound to your schema, 'olympics individual-event-report'

    2. A Data Item Selector Control bound to your 'All Players' list hook

    3. Set the Id Hook of this control to the Player Key hook

    4. Set the Display Hook of this control to the Full Name hook

  3. A Data Item Control bound to the Player Selector Control, using the Full Name hook

    1. Attach this to the viz control for the top line of the NameSuper

  4. A Data Item Control bound to the Document Selector Control, using the top level event information hook.

    1. Attach this to the viz control for the bottom line of the NameSuper

  5. A Data Item Control Bound to the Player Selector Control, using the Flag hook (associate this to the correct flags image set)

    1. Attach this to the viz control for the image of the NameSuper

  6. Publish this Template and you're good to go! (It needs to be added to the appropriate Template Set too)

Step 4: Allow Users to Explore the Data

The best way to allow users to search for athletes is to give access to the 'Explore' subset. This will allow the user to drill through XMLTeam's data until either the event wanted is reached, or a 'Players Search' is reached. At this point users are now able to search for the athlete required and a list of all matching athletes will be presented. Clicking on the appropriate athlete will then bring up all events the athlete is associated with and clicking one of those events will bring up all available templates using the event's data (one of these should be your new NameSuper, assuming it is published and belongs to this template set and target).

To activate the Explore subset - just tick it in the Template Sets > Subsets tab for the appropriate Template Set