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

Import an external property value into a UI Component

Lesson content locked

If you're already enrolled, log in to access this lesson.

Enroll in Course to Unlock