# Tutorials

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