Log in

Courses

UI Components in Magento 2 artwork

UI Components in Magento 2

Build complex user interfaces in Magento by learning its most difficult concept to understand, UI Components.

Last updated 1 week ago

This is a premium course

Only available to enrolled or University students.
Join today to unlock all lessons in this course.

Enroll now

There are 39 lessons in this course:

Overview

Understand UI components in Magento
2:45

Understand UI components

Understand the goals of UI components in Magento
2:01

Understand the goals of UI components 2

Understand UI component examples, benefits, and use cases in Magento
2:53

Understand UI component examples, benefits, and use cases

Define custom module requirements in Magento
3:07

Define custom module requirements

Basics

Create a module and prepare for JavaScript development in Magento
6:20

Create a module and prepare for JavaScript development 2

Add a block template to the layout in Magento
3:56

Add a block template to the layout 3

Style a block template in Magento
4:09

Style a block template 6

Create a basic UI component in Magento
7:19

Create a basic UI component 7

Use alternate UI component JSON syntax in Magento
4:21

Use alternate UI component JSON syntax

Understand uiClass, uiElement, uiCollection, and uiComponent in Magento
5:11

Understand uiClass, uiElement, uiCollection, and uiComponent

Understand UI component initialization in Magento
2:40

Understand UI component initialization

Use the UI component defaults property in Magento
1:59

Use the UI component defaults property

Bind UI component data to Knockout.js in Magento
3:10

Bind UI component data to Knockout.js

Create a Knockout.js template in Magento
6:08

Create a Knockout.js template

Use UI component property fallbacks and overrides in Magento
2:43

Use UI component property fallbacks and overrides 2

Managing data

Debug UI components with uiRegistry in Magento
3:28

Debug UI components with uiRegistry

Get, set, and remove UI component properties in Magento
2:22

Get, set, and remove UI component properties 2

Use view model functions for separation of concerns in Magento
4:43

Use view model functions for separation of concerns 2

Understand Knockout observables, tracks, and reactivity in Magento
5:43

Understand Knockout observables, tracks, and reactivity 2

Update a UI component with model data in Magento
9:13

Update a UI component with model data 9

Use Underscore helper functions in Magento
4:17

Use Underscore helper functions 7

Subscribe to Knockout observables in Magento
3:13

Subscribe to Knockout observables 6

Access UI component properties with template literals in Magento
5:55

Access UI component properties with template literals 7

Create computed properties with Knockout in Magento
7:13

Create computed properties with Knockout 5

Downloadable archive of Free Shipping Promo module 16

Extending & overriding

Add or override UI component methods in Magento
8:40

Add or override UI component methods

Override an existing UI component template in Magento
4:23

Override an existing UI component template 6

Override a UI component template with static path mapping in Magento
4:06

Override a UI component template with static path mapping 5

Component communication

Create and render a child UI component in Magento
11:32

Create and render a child UI component 4

Create and render UI component regions and children in Magento
5:57

Create and render UI component regions and children 2

Filter and query UI components in Magento
3:01

Filter and query UI components 2

Import an external property value into a UI component in Magento
7:29

Import an external property value into a UI component

Listen for changes to UI component properties in Magento
3:02

Listen for changes to UI component properties

Export a property value to another UI component in Magento
8:04

Export a property value to another UI component 2

Change the load order of UI components in Magento
4:38

Change the load order of UI components 6

Implement dynamic UI component properties in Magento
3:09

Implement dynamic UI component properties

Downloadable archive of Checkout Messages module 10

Advanced concepts

Use a dynamic config value in a UI component in Magento
9:47

Use a dynamic config value in a UI component 9

Conclusion

Understand the next steps for implementing UI components