Fundamentals of Magento 2 Development - Part 2 (On-Demand)

Magento Training Migration: Thank you for your interest in registering for a Magento U course during the Magento Training Migration period (June 26 – July 9). Please complete the Course Registration Inquiry Form to begin the process. Once you submit this form, a member of our Customer Engagement team will reach out to you with additional details. If you have any other questions, feel free to email

Free ON-DEMAND Magento Training: Everyone gets free access to all Magento U on-demand premium courses (including this course) through June 30th, 2020 to ensure teams are fully equipped to take their digital operations to the next level. Click HERE to get started now.


This course introduces developers to UiComponents, Grids & Forms on the Magento 2 platform. Fundamentals Part 2 begins with an introduction to the UiComponents, their architecture and configuration, templates and rendering, and JavaScript’s role in UiComponents. The course continues with an introduction to grids and to forms and explains grids and forms, UiComponent XML configuration, data providers, access filters data from custom JS-module and advanced forms.

This course is based on Magento Commerce v2.3.x and Magento Open Source v2.3.x

This is Part 2 of a multi-part Fundamentals of Magento Development course. Parts 3 and 4 will be available in the near future at which time they may be purchased separately.

Target Audience

This course is for Magento developers with 0.5-1 years of experience who want to improve their skills in UiComponent, grids and forms, and their knowledge of JavaScript in UiComponents. The course also covers working with the new architecture, terminology, and core functionality of Magento 2, along with best practices for extending the platform and preparing for this section of the Professional Developer Certification exam. Depending on your level of experience with JavaScript and the Magento 2 platform, you may be able to move through the content at a faster.


Magento development experience and completion of the following courses:

Fundamentals of Magento Development Part 1
JavaScript Development in Magento 2

Learning Objectives

After completing this course, students should be able to identify and explain:

  • UiComponents, their architecture and configuration
  • UiComponent templates and rendering
  • JavaScript’s role in UiComponents
  • Create grids for their custom entities
  • Create forms for their custom entities
  • Customize existing grids
  • Customize existing forms
  • Create advanced form elements and grid filters


1.1 Introduction to UI Components
  • 1.1.1 UiComponents Overview
  • 1.1.2 UiComponent Definition
  • 1.1.3 UiComponent & Block Comparison

1.2 Architecture and Configuration
  • 1.2.1 Architecture
  • 1.2.2 Configuration

1.3 Templates and Rendering
  • 1.3.1 Templates
  • 1.3.2 Rendering

1.4 JavaScript Role in UiComponents
  • 1.4.1 JavaScript in UiComponent Overview
  • 1.4.2 Executing of UiComponents

2.1 Introduction to Grids
  • 2.1.1 Grids Overview
  • 2.1.2 Listing UiComponent
  • 2.1.3 DataSource
  • 2.1.4 Columns
  • 2.1.5 Filters
  • 2.1.6 Mass Actions
  • 2.1.7 Grid Indexer
  • 2.1.8 Paging

2.2 Introduction to Forms
  • 2.2.1 Forms Overview
  • 2.2.2 Form Components
  • 2.2.3 Form Fieldsets
  • 2.2.4 Form Elements