Table of content

Magento 2 Certified Professional Developer Guide

Section 6: Developing with Adminhtml

6.1 Describe common structure/architecture

Describe the difference between Adminhtml and frontend. What additional tools and requirements exist in the admin?

Adminhtml and frontend are areas. Frontend displays the website to a user, while adminhtml is the website admin panel, aimed at those who manage it. In adminhtml, you can create / modify / delete objects and categories, manage orders and customers, configure the website, etc.

To log in to the admin panel, you need to know its basic URL (for example, https://www.website.com/admin_1pf3534g/) and then pass authentication.

Controller actions and blocks in adminhtml are located in the Adminhtml subfolder of Controller and Block folders respectively.

Controller actions and blocks in adminhtml inherit the classes, different from those inherited by actions and blocks in frontend.

In adminhtml:

Block inherits Magento\Backend\Block\Template

Action inherits Magento\Backend\App\AbstractAction

In frontend:

Block inherits Magento\Framework\View\Element\Template

Action inherits Magento\Framework\App\Action\Action

UI Components

Adminhtml components in the module view folder can contain an additional ui_component directory. The directory contains UI Components that speed up and simplify development, as well as minimize code duplicates. UI Components are also used in the out-of-the-box frontend in Checkout, but UI Components configuration is written in layout xml files, not in ui components xml files.

ui component file name matches the ui component name (except for the .xml suffix), that can be added into layout using the following instructions:

<uiComponent name="notification_area" aclResource="Magento_AdminNotification::show_list"/>

Magento 2 Certified Professional Developer Guide Screenshot 44

Ui_component folder contains one or several XML declarations for grids or forms.

Standard UI components come in two types:

  • Basic
  • Secondary

Basic components include form elements and listings.

Magento 2 Certified Professional Developer Guide Screenshot 45

On the screenshot, you can see .xml file for template definition. It contains a link to the listing basic component connection, aimed at displaying grids, lists and fragments. Sorting, search and dividing into pages is added to the built-in functions, which are very helpful for new components and modules development.

Below is the list of extensions for the basic components listing:

  • Filters
  • Pagination
  • Tabs
  • Buttons and their functional load
  • Tables
  • Multiselectors
  • Loaders
  • Editors
  • Headings

These are secondary components that serve as additional elements for expanding the basic components. Using them is not obligatory, but it is a good practice for a developer, for they will:

  • Create a unified and clear interface
  • Simplify and speed up the development process
  • Create a simple and intellectually clear environment for support and expansion.

UI_Components enhances development, support and Magento interface expansion, allowing the components to work independently and with no loss to operation speed.

To connect Ui components to your module, located in the admin part of the interface, Magento uses a specialized xml file:

<module_dir>/view/adminhtml/ui_component/<ui_component_name>.xml.

Magento 2 Certified Professional Developer Guide Screenshot 46

Then, depending on Magento version (we use Magento 2.2 for demonstration), we set up the necessary components in xml configuration:

Magento 2 Certified Professional Developer Guide Screenshot 47

Configuration file has access to ListingToolbar component, introduced Magento 2.1 version. It is located in the area of Magento_Ui/grid names and is related to listing classes components. Listing Toolbar contains a number of additional components, configured directly in configuration file.

For example, Bookmark is responsible for displaying and saving the positions of all current elements, forms and buttons states in the component. It also accounts for saving and comparing information through the database, directly in ui_bookmark table.

Columns Control is responsible for displaying and hiding active list columns.

Filters component receives the information about the required secondary elements; in this case, it is an element of select form.

Magento 2 Certified Professional Developer Guide Screenshot 48

Using <argument name=”class”> attribute, we rewrite the standard element class into the one we need.

Using <argument name=”data”><item name =”name”> attribute, we set the available parameters at the selection list.

All components contain information about the current state and receive users’ values. For example, Columns Control receives the parameters on the minimal or maximal number of the displayed columns.

Afterward, XML configuration files are united into a single one, then into json and are passed into the client like this. Each configuration file of a single ui component, that includes the set parameters in a parent XML, overrides them as new ones.

As you can see, UI components library is the main instrument for the Mangento admin area, and a considerable part of the store’s admin panel is built with it:

Magento 2 Certified Professional Developer Guide Screenshot 49

Obtaining UI components skills allows to significantly speed up development and expansion of Magento store interface, as well as to unify its structure for creating a more intuitive area for further support and development.

6.2 Define form and grid widgets

Define form structure, form templates, grids, grid containers, and elements. What steps are needed to display a grid or form?

Form

Contains modified fields of a certain entity. To create a form, you need to:

  1. Create form xml file of ui component configuration: <module_dir>/view/<area>/ui_component/<ui_component_name>.xml
  2. Create DataProvider class in the module and define this class in XML configuration file of UI component.
  3. Add a set of fields (the Fieldset component with the component of the Field) for entity or to implement the upload of meta info in the DataProvide
  4. Add UI component в layout: <uiComponent name=”<ui_component_name>”/>
Grid

Contains the list of entities, filters, bookmarks, paging, columns controls. Allows to search entity, modify list sorting, hide and add columns, change their order. To create a grid, you need to:

  1. Create listing xml file of UI component configuration: <module_dir>/view/<area>/ui_component/<ui_component_name>.xml
  2. Set DataSource
  3. Add filter, columns, toolbar, …
  4. Add ui component into layout: <uiComponent name=”<ui_component_name>”/>

Describe the grid and form workflow. How is data provided to the grid or form?

At the server:

  1. Layout loads UI component
  2. XML files of UI component are searched in each enabled module (<module_dir>/view/<area>/ui_component/<ui_component_name>.xml)
  3. All found files of UI components are merged in a single configuration object
  4. Configuration and definition.xml are merged. Objects from definition.xml have lower priority than single configuration object, received in the previous step
  5. The received configuration is transformed into JSON and embedded into the page with Magento\Ui\TemplateEngine\Xhtml\Result class

As a result, we get the following code:

At the client side:

  1. RequireJS loads Magento_Ui/js/core/app and passes configuration as a parameter
  2. Magento_Ui/js/core/app calls Magento_Ui/js/core/renderer/layout and passes it the configuration
  3. layout.js creates instances of UI components and applies the configuration to it
  4. HTML template rendering with knockout.js and binding of the component to the template is performed

The data for grid and form is loaded with the help of DataProvider. The difference lies in the moment of information upload.

For the form component, the data of an entity are passed inside the current page’s html code in the <script type = “text / x-magento-init”> … </script> tag.

For the grid component, the data is loaded through an additional ajax request for the controller action mui / index / render, processed by the \ Magento \ Ui \ Controller \ Adminhtml \ Index \ Render class for adminhtml area and \ Magento \ Ui \ Controller \ Index \ Render for frontend area .

How can this process be customized or extended?

You can change the form data the following ways:

  1. Create a custom DataProvider and specify it in xml file of UI compoment.
  2. Create a plugin for DataProvider::getData() method
  3. Create Modifier class and set it in di.xml, if this DataProvider support Modifiers (for example, like \Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider)

“Describe how to create a simple form and grid for a custom entity. Given a specific entity with different types of fields (text, dropdown, image, file, date, and so on) how would you create a grid and a form?”

Let us consider the examine of a form. It includes text, textarea, select, multiselect, image. The data is loaded via the Vendor\Module\Model\MyEntity\DataProvider class.

Result:

Magento 2 Certified Professional Developer Guide Screenshot 50

Let us consider the grid. As DataProvider, Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider is used. The collection for grid is set in di.xml:

UI component GRID file:

Result:

Magento 2 Certified Professional Developer Guide Screenshot 51

6.3 Define system configuration XML and configuration scope

Define basic terms and elements of system configuration XML, including scopes. How would you add a new system configuration option?

Magento 2 allows to extend the system configuration with modules and integrate the custom module configuration into the Magento 2 system menu.

To add such custom configurations, use <module_dir>/etc/adminhtml/system.xml file.

This xml code allows to add a new line into Magento 2 configuration menu

Magento 2 Certified Professional Developer Guide Screenshot 52

Then

This code adds a new section and assigns it to custom_tab tab. Here, we can use any tab from the existing ones.

showInDefault=”1″, showInWebsite=”1″ and showInStore=”1″ parameters set the set the scope where our section will be displayed.

Setting Default Value

To set default value for any of the custom settings, create a <module_dir>/etc/config.xml file.

What is the difference in this process for different option types (secret, file)?

Simple Text Field

Yes/No Dropdown

Dropdown With The Custom Source model

And our custom model can look like this:

<module_dir>/Model/Config/Source/Custom.php

File Upload

Dependent Field

<validate>validate-no-empty</validate> validates that the field is not empty when the configuration is saved.

depends tag allows to display this field only if at yesno_dropdown the Yes value was selected.

Textarea

Secret Field

type=”obscure” hides field’s value from the frontend, but the information from it will still be saved as plain text. Setting Magento\Config\Model\Config\Backend\Encrypted as a backend model allows to encrypt the data in the database.

Most of the source models are located in app/code/Magento/Config/Model/Config/Source and backend models are located in app/code/Magento/Config/Model/Config/Backend.

Describe system configuration data retrieval. How do you access system configuration options programmatically?

To access system configuration options programmatically, create a class. Inside it, create a method for obtaining the value of the needed configuration and determine the constant that contains the path to the configuration value. Example:

<module_dir>/Helper/Config.php

If your configuration values are encrypted and stored in the database, set backend_model in etc/config.xml file so that scopeConfig->getValue would return the decrypted configuration values. Example:

6.4 Utilize ACL to set menu items and permissions

Describe how to set up a menu item and permissions. How would you add a new menu item in a given tab?

Magento 2 allows to customize and add new points to backend menu.

To add new menu, use the following file

<module_dir>/etc/adminhtml/menu.xml

where

  • id – record identifier; should be unique. {Vendor_Module}::{menu_description}.
  • title – displayed title
  • module – sets the module that module item belongs to in Vendor_Module format.
  • sortOrder – sets the position of a menu item. The options with smaller values will be displayed higher.
  • parent – id of other menu item. Defines the menu as embedded.
  • action – url pages, which the menu item refers to.
  • resource – sets ACL rule, necessary for viewing a certain menu item.

How would you add a new tab in the Admin menu?

The process of adding a new tab is similar to adding a new item, but the item, responsible for a new tab, does not contain a parent item.

<module_dir>/etc/adminhtml/menu.xml

How do menu items relate to ACL permissions?

To restrict access to a certain menu item with a certain ACL rule, insert it in the resource parameter during the menu configuration:

Describe how to check for permissions in the permissions management tree structures. How would you add a new user with a given set of permissions?

Magento 2 allows to separate the Admin Users permissions and create admin users groups with a variety of permissions.

Defining ACL

Use <module_dir>/etc/acl.xml file to create a new ACL rule.

where,

  • id – resource identifier. Applied in menu and actions configuration for identifying the resource. It should be unique and set in the following format: Vendor_Module::resource_name.
  • title – resource title
  • sortOrder – resource order in resource tree

System section > Permissions > User Roles contains all the available roles and their permissions.

System section > Permissions > All Users allows to create new users or modify the current users, as well as assign user roles.

How can you do that programmatically?

To restrict permissions to actions with ACL, override _isAllowed method or ADMIN_RESOURCE constant in the class of this action.

or

const ADMIN_RESOURCE = 'Vendor_Module::acl2';

To create user role, use classes Magento\Authorization\Model\RoleFactory and Magento\Authorization\Model\RulesFactory

To create a user, create a class Magento\User\Model\UserFactory:

Tatiana-Buchkova

Partner With Us

Let us know more about your project. Contact us and let’s grow your business.

Get started