Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Magento 2 UI Components Overview

233 views

Published on

Flexible UI rendering in Magento 2 is possible due to the usage of UI components. By utilizing them, you configure every page of your eCommerce website. Find a brief description of basic Magento 2 UI components in document.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Magento 2 UI Components Overview

  1. 1. Overview of UI components - Magento 2 Developer Documentation Visit Us: www.eglobeits.com
  2. 2. Magento 2 UI Components Basic Components ● Listing component ● Form component 1. Breadcrumbs 2. Pagination 3. Buttons 4. Popups 5. Drop-downs 6. Ratings 7. Forms 8. Sections 9. Icons 10. layout 11. Tabs and accordions 12. Tables 13. Loaders 14. Tooltips 15.Messages 16. Actions-toolbar
  3. 3. Magento 2 UI Library Magento UI Library Magento UI library is located under `/lib/web/` folder ➢ Lib ➢ Web ➢ css ➢ Fonts ➢ Images ➢ Jquery UI library provides the ability to customize and reuse the user interface elements and properties.
  4. 4. Liberation Scans ● simple and flexible UI rendering. ● standard module and can be found under MagentoUI namespace. ● providing/supporting interactions of JavaScript components and server ● Vendor ● Magento ● Module-ui –View ●Base ●ui_component ●Etc ●Definition.xml (UI components base declaration) ●Templates ●Container ●Export ●Form ●Default.xhtml (<uiComponent/> rendering html) ●Listing ●Default.xhtml ●Web ●Js ●Templates ●Form ●Element ●Button.html ●Input.html The actual rendering of the interface element in the browser is handled by KnockoutJS.
  5. 5. Definition.xml <form class="MagentoUiComponentForm"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/form</item> </item> <item name="template" xsi:type="string">templates/form/default</item> </argument> </form>
  6. 6. Magento 1 -Adding Product Editing form to a Page <adminhtml_catalog_product_new> <update handle="editor"/> <reference name="content"> <block type="adminhtml/catalog_product_edit" name="product_edit"></block> </reference> <reference name="left"> <block type="adminhtml/catalog_product_edit_tabs" name="product_tabs"></block> </reference> <reference name="js"> <block type="adminhtml/catalog_product_edit_js" template="catalog/product/js.phtml" name="catalog_product_js"></block> <block type="core/template" template="catalog/wysiwyg/js.phtml"/> </reference> </adminhtml_catalog_product_new>
  7. 7. <editor> <reference name="head"> <action method="setCanLoadExtJs"><flag>1</flag></action> <action method="addJs"><script>mage/adminhtml/variables.js</script></action> <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action> <action method="addJs"><script>lib/flex.js</script></action> <action method="addJs"><script>lib/FABridge.js</script></action> <action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action> <action method="addJs"><script>mage/adminhtml/browser.js</script></action> <action method="addJs"><script>prototype/window.js</script></action> <action method="addItem"> <type>js_css</type><name>prototype/windows/themes/default.css</name> </action> <action method="addCss"> <name>lib/prototype/windows/themes/magento.css</name> </action> </reference> </editor> Magento 2 -adding product editing form to a page <uiComponent name="product_form"/>
  8. 8. Add New Tab in product edit page in Magento 2 admin Code / [namespace] / [your module] / View/ui_components / product_form.xml <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="product.packages"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Product Package</item> <item name="sortOrder" xsi:type="number">200</item> </item> </argument>
  9. 9. <field name="customFieldName"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item> <item name="prefixName" xsi:type="string">customFieldName</item> <item name="label" xsi:type="string" translate="true">Package Label</item> <item name="component" xsi:type="string">Magento_Catalog/js/form/element/input</item> <item name="template" xsi:type="string">Magento_Catalog/form/element/input</item> </item> </argument> </field> </fieldset> </form>
  10. 10. Default.xhtml <div data-role="spinner" data-component="{{getName()}}.areas" class="admin__data-grid-loading-mask"> <div class="spinner"> <span/><span/><span/><span/><span/><span/><span/><span/> </div> </div> <div data-bind="scope: '{{getName()}}.areas'" class="entry-edit form-inline"> <!-- ko template: getTemplate() --><!-- /ko --> </div>
  11. 11. Thank You

×