Autoplay
Autocomplete
Previous lesson
Complete and Continue
Frontend UI Components in Magento 2
Overview of UI Components
What is a UI Component?
Preview
2:48
Goals of UI Components
Locked
2:03
Examples, benefits, & when to use UI Components
Locked
2:56
Custom module requirements
Preview
3:09
Basics of UI Components
Create a module & prep for JavaScript development
Locked
6:23
Add a block template to the layout
Locked
3:58
Style a block template
Locked
4:11
Create the most basic UI Component
Preview
7:21
Alternate UI Component JSON syntax
Preview
4:23
uiClass vs uiElement vs uiCollection vs uiComponent
Locked
5:13
UI Component initialization
Locked
2:42
UI Component defaults property
Locked
2:02
Binding data from UI Components to KnockoutJS
Locked
3:13
Create a KnockoutJS template
Locked
6:10
Fallbacks & overrides of UI Component properties
Locked
2:45
Managing data within UI Components
Debug UI Components with uiRegistry
Locked
3:31
Get, set & remove UI Component properties
Locked
2:24
Use ViewModel functions for separation of concerns
Locked
4:45
Understand Knockout observables, tracks & reactivity
Locked
5:45
Update UI Component with model data
Locked
9:16
Use Underscore helper functions
Locked
4:20
Subscribe to Knockout observables
Locked
3:16
Access UI Component properties with template literals
Locked
5:57
Create computed properties with Knockout
Locked
7:15
Downloadable archive of Free Shipping Promo module
Locked
Extending & overriding UI Components
Add or override UI Component methods
Locked
8:43
Override an existing UI Component template
Locked
4:26
Override a UI Component template with static path mapping
Locked
4:08
Communication between UI Components
Create and render a child UI Component
Locked
11:34
Create and render UI Component regions & children
Locked
6:00
Filter and query UI Components
Locked
3:03
Import an external property value into a UI Component
Locked
7:31
Listen for changes of UI Component properties
Locked
3:05
Export a property value to another UI Component
Locked
8:06
Change load ordering of UI Components
Locked
4:40
Implement UI Component dynamic properties
Locked
3:12
Downloadable archive of Checkout Messages module
Locked
Advanced Concepts
Use a dynamic config value in a UI component
Locked
9:49
Completion
Course feedback & certificate for the Frontend UI Components course
Locked
Create a module & prep for JavaScript development
Lesson content locked
If you're already enrolled,
log in to access this lesson
.
Enroll in Course to Unlock