Introduction
In this article, we'll explain how to use the Hall of Fame sample experience and customize it with your own content. You can explore a live demo of this experience below or download it from the Examples tab in Composer's Experience's panel.
NOTE: The images and descriptions within this sample were generated using AI.
Above is a web-deployed version of the "Hall of Fame" experience
About the "Hall of Fame" sample experience
This "Hall of Fame" sample experience showcases a basketball player Hall of Fame. Players can be searched by name or filtered using a variety of criteria. Each player can be selected to reveal a bio and statistical achievements.
This experience can be adapted for a variety of use cases, such as showcasing famous alumni or donors for a university or honoring notable historic figures in a museum exhibit. It has been built with a flexible design, permitting you to change colors and button styles without having to change everything within Composer.
How was the experience built?
The experience was built using two scenes: one as a screensaver and the other as the main scene. The latter allows you to search or filter for a specific player. The player list is displayed within an Asset Grid whose contents are retrieved from a Headless CMS (H-CMS) base.
Headless CMS Base - Data structure and content
Within the structure, we utilize different Property Types:
- Text
- Image
- Number
- Date time
You can find out more details on the different Property Types we support here: Base Structure: Property Types
The structure of the H-CMS Base includes the following groups and collections:
-
Settings: This group contains the Hall of Fame logo and the default background used in the Main scene.
- Screensaver Background Images: This collection contains the images used in the screensaver within the Home scene.
-
Filters: This group contains the collections below:
- Position: This collection contains a list of all available positions.
- Induction Years: This collection contains a list of all available induction years.
- Teams: This collection contains a list of teams and a background image for each.
- Search Suggested Player Name: This collection contains player names, along with the corresponding team, position, and induction year.
- Players: This collection contains the full player details, including player name, position, team, description, inducted year, player image, team logo, and more.
"Screensaver Background Images" Collection
The "Screensaver Background Images" collection is used within the "Home" scene. These images are displayed within a Swap Collection used as the background.
"Players" Collection
The "Players" content is used within the "Main Scene" for the Players List, which serves as the main component of this sample experience. The list can be filtered using any of the criteria found in the "Filters" section of the Headless CMS base.
"Search Suggested Player Names" Collection
The "Search Suggested Player Names" collection is used within the "Search a name" submenu at the top right of the main screen. It displays player name suggestions based on the letters typed into the search box. A separate names dataset is used here because one dataset handles filtering, while the other is dedicated to the search functionality.
The Experience
Adapting the Color Palette
If you want to change the colors used throughout the experience, we have designed the experience to use a "Style Sheet XP Layer" that includes all the colors, fonts, and navigation button styles. This makes it easier to customize the experience to your needs without having to modify the individual styles of the assets.
You will find the contents of this layer below the experience.
Browsing Players
Browsing for players can be accomplished by scrolling the Players List, filtering with the various property fields, or searching for a specific player.
The Players List is displayed in an Asset Grid, which you can change to a different collection style if you'd prefer. When a particular player card is tapped, we use the "Set Text" and "Change Image" actions to update the information in the "Player Details" panel that appears.
Filtering a Player
When a menu option at the top is tapped, it displays a submenu built using an Asset Grid bound to the appropriate Filters collection in the Headless CMS base.
When an item in the submenu is tapped, it filters the list of players using the selected item. You will notice that each time a filter option is checked within a submenu, it also adds a filter to the "Suggested Search Player Name" dataset, allowing you to search for a player within the selected filters.
Searching for a Player
The search option was built using a Text Input Asset. After typing one or more letters and then pressing the enter key or the search icon (an Image Button), the "Players" list will be filtered accordingly. Conditional triggers are raised when the search box is empty or if it contains a value, in which case a filter player list will appear as a submenu.
Player Details
The "Player Details" panel is displayed when a player is selected. If a player is selected from the Players list, the information will be retrieved from the Players collection. If the player is selected using the "Search for name" submenu, the player information will be filtered based on the Player Name selected.
How to reuse this experience
The easiest way to reuse this experience is to carry out the following steps:
-
Open the "Hall of Fame" sample experience in Composer. You can download this sample from the "Examples tab" within Composer's Experiences panel.
-
Use 'Save as" to create a copy with a preferred name. For example, "Hall of Fame v2".
-
When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. Select "Duplicate" to create your own copy of the base.
-
You are now set up to customize the content and tailor the experience to your needs.
Comments
0 comments
Article is closed for comments.