Formation Magento 2 : Chapitre 5 – Partie B

Création du layout

Avant de créer notre formulaire, nous devons le définir dans un layout :
app/code/Maxime/Jobs/view/adminhtml/layout/jobs_department_edit.xml

Avec ce contenu :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="editor"/>
    <body>
        <referenceContainer name="content">
            <block class="Maxime\Jobs\Block\Adminhtml\Department\Edit" name="jobs_department_edit"/>
        </referenceContainer>
    </body>
</page>

Nous définissons un block à l’intérieur, nous allons maintenant le créer.

Création du block Edit

Créez le fichier suivant :
app/code/Maxime/Jobs/Block/Adminhtml/Department/Edit.php

Avec ceci à l’intérieur:

<?php
namespace Maxime\Jobs\Block\Adminhtml\Department;

use Magento\Backend\Block\Widget\Form\Container;

class Edit extends Container
{
    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry = null;

    /**
     * @param \Magento\Backend\Block\Widget\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        \Magento\Framework\Registry $registry,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        parent::__construct($context, $data);
    }

    /**
     * Department edit block
     *
     * @return void
     */
    protected function _construct()
    {
        $this->_objectId = 'entity_id';
        $this->_blockGroup = 'Maxime_Jobs';
        $this->_controller = 'adminhtml_department';

        parent::_construct();

        if ($this->_isAllowedAction('Maxime_Jobs::department_save')) {
            $this->buttonList->update('save', 'label', __('Save Department'));
            $this->buttonList->add(
                'saveandcontinue',
                [
                    'label' => __('Save and Continue Edit'),
                    'class' => 'save',
                    'data_attribute' => [
                        'mage-init' => [
                            'button' => ['event' => 'saveAndContinueEdit', 'target' => '#edit_form'],
                        ],
                    ]
                ],
                -100
            );
        } else {
            $this->buttonList->remove('save');
        }

    }

    /**
     * Get header with Department name
     *
     * @return \Magento\Framework\Phrase
     */
    public function getHeaderText()
    {
        if ($this->_coreRegistry->registry('jobs_department')->getId()) {
            return __("Edit Department '%1'", $this->escapeHtml($this->_coreRegistry->registry('jobs_department')->getName()));
        } else {
            return __('New Department');
        }
    }

    /**
     * Check permission for passed action
     *
     * @param string $resourceId
     * @return bool
     */
    protected function _isAllowedAction($resourceId)
    {
        return $this->_authorization->isAllowed($resourceId);
    }

    /**
     * Getter of url for "Save and Continue" button
     * tab_id will be replaced by desired by JS later
     *
     * @return string
     */
    protected function _getSaveAndContinueUrl()
    {
        return $this->getUrl('jobs/*/save', ['_current' => true, 'back' => 'edit', 'active_tab' => '']);
    }
}

Le premier construct reste habituel à ce que nous connaissons déjà.
Le deuxième construct ne possède qu’un seul underscore. Il est appelé après le premier (qui possède deux underscores).
A l’intérieur nous affichons ou non le bouton de sauvegarde en fonction des droits de l’utilisateur.
Nous ajoutons aussi un bouton « Save & Continue edit » pour sauvegarder et rester sur le formulaire.

La méthode « getHeaderText » est appelée dans la classe parente dans la méthode « getHeaderHtml ».
Dans l’affichage de la page elle n’est pas utilisée, mais nous la mettons en place quand même.

Enfin, la méthode _getSaveAndContinueUrl permet de rediriger l’utilisateur sur le formulaire d’édition après la sauvegarde.

Dernière étape, création de notre formulaire.

Création du formulaire dans l’admin

Créez le fichier :
app/code/Maxime/Jobs/Block/Adminhtml/Department/Edit/Form.php

Avec le contenu qui suit :

<?php
namespace Maxime\Jobs\Block\Adminhtml\Department\Edit;

use \Magento\Backend\Block\Widget\Form\Generic;

class Form extends Generic
{

    /**
     * @var \Magento\Store\Model\System\Store
     */
    protected $_systemStore;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Framework\Data\FormFactory $formFactory
     * @param \Magento\Store\Model\System\Store $systemStore
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\Data\FormFactory $formFactory,
        \Magento\Store\Model\System\Store $systemStore,
        array $data = []
    ) {
        $this->_systemStore = $systemStore;
        parent::__construct($context, $registry, $formFactory, $data);
    }

    /**
     * Init form
     *
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setId('department_form');
        $this->setTitle(__('Department Information'));
    }

    /**
     * Prepare form
     *
     * @return $this
     */
    protected function _prepareForm()
    {
        /** @var \Maxime\Jobs\Model\Department $model */
        $model = $this->_coreRegistry->registry('jobs_department');

        /** @var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create(
            ['data' => ['id' => 'edit_form', 'action' => $this->getData('action'), 'method' => 'post']]
        );

        $form->setHtmlIdPrefix('department_');

        $fieldset = $form->addFieldset(
            'base_fieldset',
            ['legend' => __('General Information'), 'class' => 'fieldset-wide']
        );

        if ($model->getId()) {
            $fieldset->addField('entity_id', 'hidden', ['name' => 'entity_id']);
        }

        $fieldset->addField(
            'name',
            'text',
            ['name' => 'name', 'label' => __('Department Name'), 'title' => __('Department Name'), 'required' => true]
        );

        $fieldset->addField(
            'description',
            'textarea',
            ['name' => 'description', 'label' => __('Department Description'), 'title' => __('Department Description'), 'required' => true]
        );

        $form->setValues($model->getData());
        $form->setUseContainer(true);
        $this->setForm($form);

        return parent::_prepareForm();
    }
}

Pour résumer, nous créons notre formulaire et créons deux champs :
– Le champ « name » de type text
– Le champ « description » de type textarea

Nous avons également un champ caché content l’ID de l’élément à éditer si nous somme en mode édition.

Vous pouvez maintenant ajouter et éditer des departments comme bon vous semble :

formedition

Continuer la formation
Revenir à la partie précédente
Layout et formulaire dans l’admin Magento 2
Taggé sur :    

4 thoughts on “Layout et formulaire dans l’admin Magento 2

  • 14/04/2016 à 08:45
    Permalink

    Encore merci pour ton tuto !

    J’ai une ptite question notamment au niveau des sources d’informations pour développer ce genre de module. Pour prendre l’exemple du formulaire, je ne vois aucun élément dans la documentation de magento 2 qui permet de reproduire le code que tu nous fournis… Par exemple la méthode addFieldset ou addField ne figure nul part dans la doc, et c’est pareil dans beaucoup d’autres cas.

    A part éplucher le code de Magento, as-tu une source de documentation autre que la doc officielle ? Car la je suis un peu paumé dès que je dois faire quelque qui n’est pas expliqué dans la doc… 🙁

    Merci

    Répondre
    • 14/04/2016 à 08:52
      Permalink

      Rien de tel que de mettre les mains dans le cambouis donc je regarde le code des modules Magento.
      Si tu regardes les classes dont ton objet hérite tu peux regarder leurs méthodes et voir les possibilités fournies pas celles ci

      Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous utilisons des cookies afin de nous assurer de vous proposer la meilleure expérience sur ce site.
Ok