Carousel/List Control
Carousel/List Control
The Carousel Control accepts structured data to display a series of interactive items, each potentially with multiple panels, forms, images, and detailed content. Each item can include titles, images, descriptions, forms, and buttons with various functions. Below is a comprehensive guide on how to pass data to the Carousel Control and define the behavior of the interactive elements.
1. Carousel Data Structure Overview
The Carousel data is represented as an object containing the following key components:
- template: A string specifying the template to use
carouselorlist. - indicator: A boolean value indicating whether navigation indicators should be shown (e.g., dots or arrows).
- items: An array of objects, where each object represents an item in the carousel.
Each item in the items array can include the following properties:
- title: A string that displays the main title of the item.
- subTitle array An array of html fields, that gets insert into the template.
- images: An array of URL strings pointing to images that are displayed in the item.
- shortDescription: A short text or HTML description providing a brief overview of the item.
- description: A more detailed text or HTML description of the item's content.
- buttons: An array of buttons that provide interactive elements on the item.
- form: An object representing a form with fields, allowing for more complex interactions than a button.
- panels: An array of additional panels for additional views or information related to the item. The
panelsarray can be an empty array if there are no additional views. - hideImageOnMore: When there is a shortDescription and a description, there is a
Show More, clicking theShow Morewith this property set totrue, hide the image - process: Overide the Handel Response, LLM, carousel, both. Example you may want a result to go to the carousel and and the LLM. To answer a question but also include the carousel.
{
"indicator": true,
"items": [
{
"images": [
"https://demo.ai12z.com/wp-content/uploads/2024/08/Tropical-Fruit-Plate.jpeg"
],
"shortDescription": "Assorted fresh island fruits, coconut yogurt.",
"subTitle": [
"Breakfast",
"Price $14.0",
"Nut Allergy friendly",
"Gluten Free"
],
"title": "Tropical Fruit Plate"
},
{
"images": [
"https://demo.ai12z.com/wp-content/uploads/2024/08/Vegetarian-Omelette.jpg"
],
"shortDescription": "Egg whites, grilled vegetables, pineapple, feta cheese.",
"subTitle": [
"Breakfast",
"Price $16.0",
"Nut Allergy friendly",
"Gluten Free"
],
"title": "Vegetarian Omelette"
},
{
"images": [
"https://demo.ai12z.com/wp-content/uploads/2024/08/Quinoa-Breakfast-Bowl.jpg"
],
"shortDescription": "Quinoa, avocado, sautéed spinach, poached egg, light herb dressing.",
"subTitle": [
"Breakfast",
"Price $16.0",
"Nut Allergy friendly",
"Gluten Free"
],
"buttons": [
{
"label": "See website for more info",
"type": "url",
"url": "https://demo.ai12z.com/"
}
],
"title": "Quinoa Breakfast Bowl"
}
],
"panel": [],
"template": "list"
}
2. Example Data Structure having a Form in a Panel
Here’s an example of how to structure the data for the Carousel Control:
{
"formSettings": {
"completeHtml": "Thank you!",
"completeText": "Select Seat and Buy"
},
"indicator": true,
"items": [
{
"availablePerformances": true,
"buttons": [
{
"index": 0,
"label": "Available Performances",
"type": "panel"
}
],
"description": "<h2><strong>Overview</strong></h2><p><strong>Artists</strong><br/>Valentina Peleggi, conductor<br/>Vadim Gluzman, violin<br/>Pacific Symphony</p><p><strong>Program</strong><br/>BARBER: Symphony No. 1<br/>TCHAIKOVSKY: <em>Francesca da Rimini</em><br/>BRAHMS: Violin Concerto</p><p>Preview Talk at 7 p.m. with KUSC midday host Alan Chapman</p><p>Universally recognized among today's top performing artists, Vadim Gluzman breathes new life and passion into the Romantic era of the 19th century violin repertoire. <em>Musical America</em> raved: “He demonstrated his mastery from the start, dominating the platform with his golden tone and command of the long lyrical line. His rich, warm, and generous sound soared above the orchestra.”</p>",
"hideImageOnMore": true,
"images": [
"https://scfta-prod.imgix.net/scfta/events/2024/gluzman-1_marco-borggreve.jpg?format=auto&fit=crop&w=430&h=495&auto=format"
],
"panels": [
{
"buttons": [
{
"index": 0,
"label": "Back",
"type": "panel"
}
],
"form": {
"pages": [
{
"elements": [
{
"html": "<p>Choose a date and time for the event to view available seating options. Seating availability and prices will update based on your selection. Click \"Select Seat and Buy\" to proceed with your purchase.</p>",
"name": "info",
"startWithNewLine": true,
"type": "html"
},
{
"choices": [
{
"text": "November 14, 2024, 08:00 PM",
"value": 28579
},
{
"text": "November 15, 2024, 08:00 PM",
"value": 28580
}
],
"name": "SelectPerformance",
"placeholder": "Select Performance Date and time",
"title": "Select Performance Date and time",
"type": "dropdown"
},
{
"html": "<ol><li>Orchestra (158 seats, $27.00 - $136.00)</li><li>Orchestra Terrace (182 seats, $27.00 - $225.00)</li><li>Terrace (0 seats, $52.00 - $52.00)</li><li>Box (0 seats, $136.00 - $225.00)</li><li>dress Circle (134 seats, $52.00 - $136.00)</li><li>Promenade Circle (64 seats, $27.00 - $105.00)</li><li>Grand Tier (0 seats, $88.00 - $136.00)</li></ol>",
"minWidth": "256px",
"name": "November 14, 2024, 08:00 PM-description",
"startWithNewLine": false,
"type": "html",
"visibleIf": "{SelectPerformance} = 28579",
"width": "63%"
},
{
"html": "<ol><li>Orchestra (144 seats, $27.00 - $136.00)</li><li>Orchestra Terrace (192 seats, $27.00 - $225.00)</li><li>Terrace (0 seats, $52.00 - $52.00)</li><li>Box (0 seats, $136.00 - $225.00)</li><li>dress Circle (122 seats, $52.00 - $136.00)</li><li>Promenade Circle (73 seats, $27.00 - $105.00)</li><li>Grand Tier (0 seats, $88.00 - $136.00)</li></ol>",
"minWidth": "256px",
"name": "November 15, 2024, 08:00 PM-description",
"startWithNewLine": false,
"type": "html",
"visibleIf": "{SelectPerformance} = 28580",
"width": "63%"
}
],
"name": "page1"
}
]
},
"title": "Gluzman Plays Brahms"
}
],
"shortDescription": "Universally recognized among today’s top performing artists, Vadim Gluzman breathes new life and passion into the Romantic era of the 19th century violin repertoire. <em>Musical America</em> raved: “He demonstrated his mastery from the start, dominating the platform with his golden tone and command of the long lyrical line. His rich, warm, and generous sound soared above the orchestra.”",
"subTitle": [
"November 14, 2024 - November 16, 2024",
"Renée and Henry Segerstrom Concert Hall"
],
"title": "Gluzman Plays Brahms"
}
],
"process": "carousel",
"template": "list"
}
3. Code to add to the html page for form submission
Add javascript to the page you insert the ai12z control
<script>
document.addEventListener("DOMContentLoaded", function () {
document
.querySelector("ai12z-cta")
.addEventListener("formSubmitted", (data) => {
console.log("formSubmitted", data);
openUrl(data.detail.SelectPerformance);
});
});
function openUrl(id) {
url = "https://seats.scfta.org/single?id=" + id;
window.open(url, "_blank");
}
</script>