How is an UI Component initialized in frontend?

ui-component

(Dmitry Fedyuk) #1

1. layout.run()

An example of nodes:

{
	"doormall_shipping": {
		"component": "Doormall_Shipping/main",
		"displayArea": "doormall_shipping"
	},
	"price": {
		"component": "Magento_Tax/js/view/checkout/shipping_method/price",
		"displayArea": "price"
	},
	"delivery-date": {
		"config": {
			"deps": [
				"checkoutProvider"
			]
		},
		"component": "Aheadworks_OneStepCheckout/js/view/delivery-date",
		"displayArea": "delivery-date",
		"provider": "checkoutProvider",
		"children": {
			"delivery-date-fieldset": {
				"component": "uiComponent",
				"displayArea": "delivery-date-fieldset",
				"children": {
					"date": {
						"component": "Aheadworks_OneStepCheckout/js/view/delivery-date/date",
						"config": {
							"customScope": "deliveryDate",
							"template": "Aheadworks_OneStepCheckout/form/field",
							"elementTmpl": "Aheadworks_OneStepCheckout/form/element/date"
						},
						"dataScope": "deliveryDate.date",
						"label": "Delivery Date",
						"provider": "checkoutProvider",
						"sortOrder": "1"
					},
					"time": {
						"component": "Magento_Ui/js/form/element/select",
						"config": {
							"customScope": "deliveryDate",
							"template": "Aheadworks_OneStepCheckout/form/field"
						},
						"dataScope": "deliveryDate.time",
						"label": "Delivery Time",
						"provider": "checkoutProvider",
						"sortOrder": "2"
					}
				}
			}
		}
	}
}

2. layout.iterator()

An example of node:

{
	"component": "Doormall_Shipping/main",
	"displayArea": "doormall_shipping"
}

An example of parent:

{
	"children": {
		"doormall_shipping": {
			"component": "Doormall_Shipping/main",
			"displayArea": "doormall_shipping"
		},
		"price": {
			"component": "Magento_Tax/js/view/checkout/shipping_method/price",
			"displayArea": "price"
		},
		"delivery-date": {
			"config": {
				"deps": [
					"checkoutProvider"
				]
			},
			"component": "Aheadworks_OneStepCheckout/js/view/delivery-date",
			"displayArea": "delivery-date",
			"provider": "checkoutProvider",
			"children": {
				"delivery-date-fieldset": {
					"component": "uiComponent",
					"displayArea": "delivery-date-fieldset",
					"children": {
						"date": {
							"component": "Aheadworks_OneStepCheckout/js/view/delivery-date/date",
							"config": {
								"customScope": "deliveryDate",
								"template": "Aheadworks_OneStepCheckout/form/field",
								"elementTmpl": "Aheadworks_OneStepCheckout/form/element/date"
							},
							"dataScope": "deliveryDate.date",
							"label": "Delivery Date",
							"provider": "checkoutProvider",
							"sortOrder": "1"
						},
						"time": {
							"component": "Magento_Ui/js/form/element/select",
							"config": {
								"customScope": "deliveryDate",
								"template": "Aheadworks_OneStepCheckout/form/field"
							},
							"dataScope": "deliveryDate.time",
							"label": "Delivery Time",
							"provider": "checkoutProvider",
							"sortOrder": "2"
						}
					}
				}
			}
		}
	},
	"component": "Aheadworks_OneStepCheckout/js/view/shipping-method",
	"displayArea": "shippingMethod",
	"sortOrder": "6",
	"extendProvider": true,
	"deps": [
		"checkoutProvider"
	],
	"index": "shippingMethod",
	"name": "checkout.shippingMethod",
	"dataScope": "",
	"parentName": "checkout",
	"parentScope": "",
	"initChildCount": 3
}

3. layout.process()

An example of name: ┬źdoormall_shipping┬╗.

4A. layout.build()

4B. layout.addChild()

4C. layout.manipulate()

4D. layout.initComponent()

5. layout.loadDeps()

6. layout.loadSource()

7. layout.initComponent()

8. element.initialize()


How are UI Components rendered?
How is initialization / configuration metadata set to an UI component?
How is initialization / configuration data set to an UI component?
How to create an UI component dynamically?
(Dmitry Fedyuk) #2

See also: