Introduction to UI Components in Magento 2
Download as PPTX, PDF0 likes923 views
The document discusses various UI components used in Magento, such as pagination, filters, and export buttons, along with their configurations and interactions. It explains the structure of UI component layouts and how to render them using JSON, PHP, and Knockout.js. Additionally, it highlights the extensibility and ease of use of these components, emphasizing the need for research to effectively implement them.
![Preparation (php component)
class ExportButton extends AbstractComponent
{
public function prepare()
{
foreach ($this->getData('config')['options'] as $option) {
$option['url'] = $this->urlBuilder->getUrl($option['url']);
}
parent::prepare();
}
}](https://image.slidesharecdn.com/uckdbh6gsdau685n0u3e-signature-fcbc815ce3c4c167cd8526f577a4b69767a93294d9356d434691a14c18a37a29-poli-160728133724/85/Introduction-to-UI-Components-in-Magento-2-12-320.jpg)
![Behavior (js component)
define([
'uiElement'
], function (Element) {
return Element.extend({
applyOption: function () {
location.href = this.buildUrl(this.getSelectedOption());
}
});
});](https://image.slidesharecdn.com/uckdbh6gsdau685n0u3e-signature-fcbc815ce3c4c167cd8526f577a4b69767a93294d9356d434691a14c18a37a29-poli-160728133724/85/Introduction-to-UI-Components-in-Magento-2-14-320.jpg)
Introduction to UI Components in Magento 2
- 3. Listing Form Filter Pagination MassAction TreeMassAction Column UI-select Multiselect Inline Edit Bookmark Resize Sticky Header Export Uploader
- 4. UI Components dependencies Magento Framework (Defines interfaces, introduces uiComponent layout item) MagentoUi module (Declares predefined UI Components and infrastructure) MagentoCatalog MagentoBraintree Placeholder for your module
- 5. Page Layout UI Component Layout Preprocessing and converting to json (php) Rendering and interaction knockout.js Process of UI Component rendering
- 8. Json {"components": { "sales_order_grid": { "config": {}, "children": { "filters": { "config": {}, ...
- 9. Simple UI Component structure Configuration (definition.xml + instance) PHP class to process and prepare configuration on backend HTML template of component JS component to handle frontend processing and actions
- 10. Example - Export Button
- 11. Configuration (definition.xml) <exportButton class="MagentoUiComponentExportButton"> <argument name="data"> <item name="config"> <item name="component">Magento_Ui/js/grid/export</item> <item name="template">ui/grid/exportButton</item> <item name="displayArea">dataGridActions</item> <item name="options"> <item name="csv"> <item name="value">csv</item> <item name="label">CSV</item> <item name="url">mui/export/gridToCsv</item> </item> </item> </item> </argument> </exportButton>
- 12. Preparation (php component) class ExportButton extends AbstractComponent { public function prepare() { foreach ($this->getData('config')['options'] as $option) { $option['url'] = $this->urlBuilder->getUrl($option['url']); } parent::prepare(); } }
- 13. Template (html) <div> <!-- ko foreach: options --> <span data-bind="text: label"></span> <input type="radio" data-bind="checkedValue: value, checked: $parent.checked"/> <!-- /ko --> <button data-bind="click: applyOption">Export</button> </div>
- 14. Behavior (js component) define([ 'uiElement' ], function (Element) { return Element.extend({ applyOption: function () { location.href = this.buildUrl(this.getSelectedOption()); } }); });
- 15. Extensibility Configuration definition.xml UI Component layout Page layout Data di.xml UI Component layout plugins
- 16. Conclusions Easy to use and adjust Lots of levels for non-conflict extensibility Keeping visualization and interaction together as granular components Require just a bit of research to get started