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:04)
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

Create the most basic UI Component

Lesson content locked

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

Enroll in Course to Unlock