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.
Overview of UI components - Magento 2 Developer Documentation
Visit Us: www.eglobeits.com
Magento 2 UI Components
Basic Components
● Listing component
● Form component
1. Breadcrumbs 2. Pagination
3. Buttons 4. P...
Magento 2 UI Library
Magento UI Library
Magento UI library is located under `/lib/web/` folder
➢ Lib
➢ Web
➢ css
➢ Fonts
➢...
Liberation Scans
● simple and flexible UI rendering.
● standard module and can be found under MagentoUI namespace.
● provi...
Definition.xml
<form class="MagentoUiComponentForm">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:ty...
Magento 1 -Adding Product Editing form to a Page
<adminhtml_catalog_product_new>
<update handle="editor"/>
<reference name...
<editor>
<reference name="head">
<action method="setCanLoadExtJs"><flag>1</flag></action>
<action method="addJs"><script>m...
Add New Tab in product edit page in Magento 2 admin
Code / [namespace] / [your module] / View/ui_components / product_form...
<field name="customFieldName">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="d...
Default.xhtml
<div data-role="spinner" data-component="{{getName()}}.areas" class="admin__data-grid-loading-mask">
<div cl...
Thank You
Upcoming SlideShare
Loading in …5
×

Magento 2 UI Components Overview

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

×