Autoplay
Autocomplete
Previous lesson
Complete and Continue
UI Components in Magento 2
Overview of UI Components
What is a UI Component?
Preview
(2:48)
Goals of UI Components
Preview
(2:03)
Examples, benefits, & when to use UI Components
Preview
(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
Locked
(7:21)
Alternate UI Component JSON syntax
Locked
(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)
Conclusion
Next steps for implementing UI Components in Magento
Locked
Course feedback & certificate for the Frontend UI Components course
Locked
Next steps for implementing UI Components in Magento
Lesson content locked
If you're already enrolled,
log in to access this lesson
.
Enroll in Course to Unlock