# Tutorials

- [Videos](https://docs.avonnicomponents.com/flow/tutorials/videos.md)
- [Projects](https://docs.avonnicomponents.com/flow/tutorials/projects.md): Projects give you hands-on practice with Avonni Components via step-by-step instructions. You'll gain new skills — and confidence — faster than you thought possible.
- [Account Management](https://docs.avonnicomponents.com/flow/tutorials/projects/account-management.md)
- [Activity Scorecard](https://docs.avonnicomponents.com/flow/tutorials/projects/activity-scorecard.md)
- [Advanced related list](https://docs.avonnicomponents.com/flow/tutorials/projects/advanced-related-list.md)
- [Building a Dynamic Map](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-dynamic-map.md)
- [Building a map with instant account insights](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-map-with-instant-account-insights.md)
- [Building a Marketing Campaign Calendar](https://docs.avonnicomponents.com/flow/tutorials/projects/building-a-marketing-campaign-calendar.md)
- [Business Quote with vertical progress indicator](https://docs.avonnicomponents.com/flow/tutorials/projects/business-quote-with-vertical-progress-indicator.md)
- [Creating Navigational Screen Flows in Router Mode](https://docs.avonnicomponents.com/flow/tutorials/projects/creating-navigational-screen-flows-in-router-mode.md)
- [Extra Baggage Selection using Reactive Components](https://docs.avonnicomponents.com/flow/tutorials/projects/extra-baggage-selection-using-reactive-components.md)
- [Interactive Contact List](https://docs.avonnicomponents.com/flow/tutorials/projects/interactive-contact-list.md)
- [Implementing a bulk edit on the Data Table](https://docs.avonnicomponents.com/flow/tutorials/projects/implementing-a-bulk-edit-on-the-data-table.md)
- [Left-Side Vertical Navigation](https://docs.avonnicomponents.com/flow/tutorials/projects/left-side-vertical-navigation.md)
- [Loan Summary](https://docs.avonnicomponents.com/flow/tutorials/projects/loan-summary.md)
- [Product showcase](https://docs.avonnicomponents.com/flow/tutorials/projects/product-showcase.md): Learn the basics of the Avonni Flow Screen Components library with this example.
- [Video Playlist Component](https://docs.avonnicomponents.com/flow/tutorials/projects/video-playlist-component.md)
- [Create a Clickable Map with Details information](https://docs.avonnicomponents.com/flow/tutorials/projects/create-a-clickable-map-with-details-information.md)
- [Today's Accounts to Visit](https://docs.avonnicomponents.com/flow/tutorials/projects/todays-accounts-to-visit.md)
- [User Activity Report](https://docs.avonnicomponents.com/flow/tutorials/projects/user-activity-report.md)
- [Components](https://docs.avonnicomponents.com/flow/tutorials/components.md)
- [Alert](https://docs.avonnicomponents.com/flow/tutorials/components/alert.md)
- [Create a custom branding alert](https://docs.avonnicomponents.com/flow/tutorials/components/alert/create-a-custom-branding-alert.md)
- [Create an error alert dismissible](https://docs.avonnicomponents.com/flow/tutorials/components/alert/create-an-error-alert-dismissible.md)
- [Avatar](https://docs.avonnicomponents.com/flow/tutorials/components/avatar.md)
- [Create an avatar with actions](https://docs.avonnicomponents.com/flow/tutorials/components/avatar/create-an-avatar-with-actions.md)
- [Create an avatar with details](https://docs.avonnicomponents.com/flow/tutorials/components/avatar/create-an-avatar-with-details.md)
- [Avatar Group](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group.md)
- [Display a list of contacts related to an account](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-contacts-related-to-an-account.md)
- [Display a list of sharing users related to the record](https://docs.avonnicomponents.com/flow/tutorials/components/avatar-group/display-a-list-of-sharing-users-related-to-the-record.md)
- [Barcode](https://docs.avonnicomponents.com/flow/tutorials/components/barcode.md)
- [Generating and Displaying Barcodes for Product Codes](https://docs.avonnicomponents.com/flow/tutorials/components/barcode/generating-and-displaying-barcodes-for-product-codes.md)
- [Biometrics](https://docs.avonnicomponents.com/flow/tutorials/components/biometrics.md)
- [101 Tutorial](https://docs.avonnicomponents.com/flow/tutorials/components/biometrics/101-tutorial.md)
- [Button](https://docs.avonnicomponents.com/flow/tutorials/components/button.md)
- [Customizing Flow Navigation Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button/customizing-flow-navigation-buttons.md)
- [How to Add a "Cancel and Close" Button](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-add-a-cancel-and-close-button.md)
- [How to Open Flows from Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-open-flows-from-buttons.md)
- [Button Groups](https://docs.avonnicomponents.com/flow/tutorials/components/button-groups.md)
- [Identifying Clicked Buttons](https://docs.avonnicomponents.com/flow/tutorials/components/button-groups/identifying-clicked-buttons.md)
- [Button Menu](https://docs.avonnicomponents.com/flow/tutorials/components/button-menu.md)
- [How to change dynamically Avonni Button Menu Icons](https://docs.avonnicomponents.com/flow/tutorials/components/button-menu/how-to-change-dynamically-avonni-button-menu-icons.md)
- [Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar.md)
- [Calendar 101 Tutorial](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/calendar-101-tutorial.md)
- [How to Connect Multiple Data Sources to the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-connect-multiple-data-sources-to-the-avonni-calendar.md)
- [How to Customize Time Spans](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-customize-time-spans.md)
- [How to Customize the Right-Click Menu](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-customize-the-right-click-menu.md)
- [How to Add an Edit Action to Events](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-an-edit-action-to-events.md)
- [How to Add a New Event Button to the Avonni Calendar Header](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-a-new-event-button-to-the-avonni-calendar-header.md)
- [How to Create Events by Dragging in the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-create-events-by-dragging-in-the-avonni-calendar.md)
- [How to Reschedule Events with Drag and Drop](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-reschedule-events-with-drag-and-drop.md)
- [How to Color-Code Calendar Entries in the Avonni Calendar](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-color-code-calendar-entries-in-the-avonni-calendar.md)
- [Using a variable Data Source](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/using-a-variable-data-source.md)
- [Using a Query Data Source](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/using-a-query-data-source.md)
- [Carousel](https://docs.avonnicomponents.com/flow/tutorials/components/carousel.md)
- [Build a Related Products Carousel](https://docs.avonnicomponents.com/flow/tutorials/components/carousel/build-a-related-products-carousel.md)
- [Combobox](https://docs.avonnicomponents.com/flow/tutorials/components/combobox.md)
- [Implement Dependent Picklists in Comboboxes](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/implement-dependent-picklists-in-comboboxes.md)
- [How to Dynamically Enable/Disable Dependent Comboboxes](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/how-to-dynamically-enable-disable-dependent-comboboxes.md)
- [Filter Data Tables with Multi-Select Comboboxes](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/filter-data-tables-with-multi-select-comboboxes.md)
- [CSV Parser](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser.md)
- [101 Tutorial](https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/101-tutorial.md)
- [Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table.md)
- [Adding Filters](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/adding-filters.md)
- [How to add Images onthe Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md)
- [Creating Row Actions](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/creating-row-actions.md)
- [Displaying a Record as a QR Code](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md)
- [Displaying Record Name field as a link](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md)
- [Learn the Basics](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/learn-the-basics.md)
- [Making a field editable](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/making-a-field-editable.md)
- [Setting Up Data Export](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/setting-up-data-export.md)
- [Tips and Tricks](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks.md)
- [Activate infinite scrolling](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/activate-infinite-scrolling.md)
- [Creating an action from a button or a link](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/creating-an-action-from-a-button-or-a-link.md)
- [Customizing the Badge Color using a formula](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md)
- [How to Grayscale Header Actions Dynamically in Avonni Data Table](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-grayscale-header-actions-dynamically-in-avonni-data-table.md)
- [How to Conditionally Color Cells](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md)
- [Enabling auto-refresh on the Data Table when pressing a button](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/enabling-auto-refresh-on-the-data-table-when-pressing-a-button.md)
- [Handling formula text field](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/handling-formula-text-field.md)
- [How to set column visibity](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/how-to-set-column-visibity.md)
- [Passing multiple record IDs to another flow](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/passing-multiple-record-ids-to-another-flow.md)
- [Data Table Editor](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/data-table-editor.md)
- [Date Picker](https://docs.avonnicomponents.com/flow/tutorials/components/date-picker.md)
- [Display a date picker with Marked Dates from a Get Records](https://docs.avonnicomponents.com/flow/tutorials/components/date-picker/display-a-date-picker-with-marked-dates-from-a-get-records.md)
- [Date Time Picker](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker.md)
- [How to create Collection Variables for StartDateTime and EndDateTime](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker/how-to-create-collection-variables-for-startdatetime-and-enddatetime.md)
- [How to Block Out Times](https://docs.avonnicomponents.com/flow/tutorials/components/date-time-picker/how-to-block-out-times.md)
- [Delay Interaction](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction.md)
- [Creating a Confetti Celebration on the Final Screen](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction/creating-a-confetti-celebration-on-the-final-screen.md)
- [Launch a flow dialog without a screen](https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction/launch-a-flow-dialog-without-a-screen.md)
- [Dual Listbox](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox.md)
- [Display contacts with custom icons](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/display-contacts-with-custom-icons.md)
- [Accounts list group by industry](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/accounts-list-group-by-industry.md)
- [Expandable Section](https://docs.avonnicomponents.com/flow/tutorials/components/expandable-section.md)
- [Create Dynamic Expandable Sections](https://docs.avonnicomponents.com/flow/tutorials/components/expandable-section/create-dynamic-expandable-sections.md)
- [Header](https://docs.avonnicomponents.com/flow/tutorials/components/header.md)
- [Building Engaging Card Headers](https://docs.avonnicomponents.com/flow/tutorials/components/header/building-engaging-card-headers.md)
- [Crafting a Profile Header](https://docs.avonnicomponents.com/flow/tutorials/components/header/crafting-a-profile-header.md)
- [Adding Action Buttons to Headers](https://docs.avonnicomponents.com/flow/tutorials/components/header/adding-action-buttons-to-headers.md)
- [Adding a Background Image to Your Header](https://docs.avonnicomponents.com/flow/tutorials/components/header/adding-a-background-image-to-your-header.md)
- [Input Pen](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen.md)
- [Add the custom Toolbar](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/add-the-custom-toolbar.md)
- [How to Store Input Pen Drawings as Attachments in Salesforce](https://docs.avonnicomponents.com/flow/tutorials/components/input-pen/how-to-store-input-pen-drawings-as-attachments-in-salesforce.md)
- [Kanban](https://docs.avonnicomponents.com/flow/tutorials/components/kanban.md)
- [Introduction](https://docs.avonnicomponents.com/flow/tutorials/components/kanban/introduction.md)
- [List](https://docs.avonnicomponents.com/flow/tutorials/components/list.md)
- [Create a grid list with images](https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-grid-list-with-images.md)
- [Create a sortable list](https://docs.avonnicomponents.com/flow/tutorials/components/list/create-a-sortable-list.md)
- [How to Reorder Items and Update Records](https://docs.avonnicomponents.com/flow/tutorials/components/list/how-to-reorder-items-and-update-records.md)
- [Vertical List with Actions](https://docs.avonnicomponents.com/flow/tutorials/components/list/vertical-list-with-actions.md)
- [Navigation](https://docs.avonnicomponents.com/flow/tutorials/components/navigation.md)
- [Building a Navigation Menu with Related Records](https://docs.avonnicomponents.com/flow/tutorials/components/navigation/building-a-navigation-menu-with-related-records.md)
- [Map](https://docs.avonnicomponents.com/flow/tutorials/components/map.md)
- [Customize the Map Marker](https://docs.avonnicomponents.com/flow/tutorials/components/map/customize-the-map-marker.md)
- [Metric](https://docs.avonnicomponents.com/flow/tutorials/components/metric.md)
- [Introduction](https://docs.avonnicomponents.com/flow/tutorials/components/metric/introduction.md)
- [Microphone](https://docs.avonnicomponents.com/flow/tutorials/components/microphone.md)
- [Save the Microphone recording file as an attached on a record](https://docs.avonnicomponents.com/flow/tutorials/components/microphone/save-the-microphone-recording-file-as-an-attached-on-a-record.md)
- [Progress Indicator](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator.md)
- [Creating a Universal Dynamic Progress Step Collection](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/creating-a-universal-dynamic-progress-step-collection.md)
- [How to Change the Appearance of Your Progress Indicator using a variable](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/how-to-change-the-appearance-of-your-progress-indicator-using-a-variable.md)
- [Error Handling](https://docs.avonnicomponents.com/flow/tutorials/components/progress-indicator/error-handling.md)
- [QR Code](https://docs.avonnicomponents.com/flow/tutorials/components/qr-code.md)
- [Generate a QR Code from a record field](https://docs.avonnicomponents.com/flow/tutorials/components/qr-code/generate-a-qr-code-from-a-record-field.md)
- [Record Detail](https://docs.avonnicomponents.com/flow/tutorials/components/record-detail.md)
- [Using the Record Detail with Reactive Screens](https://docs.avonnicomponents.com/flow/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens.md)
- [Scoped Notification](https://docs.avonnicomponents.com/flow/tutorials/components/scoped-notification.md)
- [Display message based on a value](https://docs.avonnicomponents.com/flow/tutorials/components/scoped-notification/display-message-based-on-a-value.md)
- [Tabs](https://docs.avonnicomponents.com/flow/tutorials/components/tabs.md)
- [Text Area](https://docs.avonnicomponents.com/flow/tutorials/components/text-area.md)
- [TextArea issue with max length when clicking on the next button](https://docs.avonnicomponents.com/flow/tutorials/components/text-area/textarea-issue-with-max-length-when-clicking-on-the-next-button.md)
- [Tree](https://docs.avonnicomponents.com/flow/tutorials/components/tree.md)
- [Build a Tree View with Dynamic Record Details](https://docs.avonnicomponents.com/flow/tutorials/components/tree/build-a-tree-view-with-dynamic-record-details.md)
- [Timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline.md)
- [Assigning multiple source collection to the Timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/assigning-multiple-source-collection-to-the-timeline.md)
- [Customizing Date Format in the Timeline Component using Luxon](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/customizing-date-format-in-the-timeline-component-using-luxon.md)
- [Create a horizontal activity timeline](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/create-a-horizontal-activity-timeline.md)
- [Display Tasks](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/display-tasks.md)
- [Perform actions on selected tasks](https://docs.avonnicomponents.com/flow/tutorials/components/timeline/perform-actions-on-selected-tasks.md)
- [Vertical Visual Picker](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker.md)
- [Adding sub-items](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker/adding-sub-items.md)
- [Display a list of online contacts](https://docs.avonnicomponents.com/flow/tutorials/components/vertical-visual-picker/display-a-list-of-online-contacts.md)
- [Interactions](https://docs.avonnicomponents.com/flow/tutorials/interactions.md)
- [Enabling auto-refresh for queries after the Flow Dialog ends](https://docs.avonnicomponents.com/flow/tutorials/interactions/enabling-auto-refresh-for-queries-after-the-flow-dialog-ends.md)
- [How to create an interaction to navigate to an object](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-navigate-to-an-object.md)
- [How to create an interaction to a record page](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-a-record-page.md)
- [How to create an interaction to open another flow](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-create-an-interaction-to-open-another-flow.md)
- [How to pass an Input Variable from One Flow to Another](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-pass-an-input-variable-from-one-flow-to-another.md)
- [Expression Syntax in Interactions](https://docs.avonnicomponents.com/flow/tutorials/interactions/expression-syntax-in-interactions.md)
- [How to setup an Open Flow Panel interaction](https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-setup-an-open-flow-panel-interaction.md)
- [Reactive Query Tutorials](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials.md)
- [How to make Data Tables Reactive](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-make-data-tables-reactive.md)
- [Build a reactive Data Table Using Dependent Picklists](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/build-a-reactive-data-table-using-dependent-picklists.md)
- [Building a Dynamic Metrics Dashboard with the Data Table](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/building-a-dynamic-metrics-dashboard-with-the-data-table.md)
- [How to build a reactive 'Quarterly Opportunity Tracker' component](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-build-a-reactive-quarterly-opportunity-tracker-component.md)
- [How to Create a Combobox-Filtered Data Table](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/how-to-create-a-combobox-filtered-data-table.md)
- [Create a Dynamically Linked Account-Contact View](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/create-a-dynamically-linked-account-contact-view.md)
- [Troubleshooting](https://docs.avonnicomponents.com/flow/tutorials/reactive-query-tutorials/troubleshooting.md)
- [Tips and Tricks](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks.md)
- [Create a link to the record using the href attribute](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/create-a-link-to-the-record-using-the-href-attribute.md)
- [Create a variable and use it in a component property](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/create-a-variable-and-use-it-in-a-component-property.md)
- [Hide Standard Header and Footer in a flow](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/hide-standard-header-and-footer-in-a-flow.md)
- [How to pass your current RecordID in your screen flow](https://docs.avonnicomponents.com/flow/tutorials/tips-and-tricks/how-to-pass-your-current-recordid-in-your-screen-flow.md): How to do it from a Lightning Page or a Quick Action
- [Platform Events](https://docs.avonnicomponents.com/flow/tutorials/platform-events.md): Real-Time Communication for Seamless Flows
- [Configuration tutorial](https://docs.avonnicomponents.com/flow/tutorials/platform-events/configuration-tutorial.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
