0

I want to show-hide wood type on the basis of change of type field.

Here is my _prepareForm code:-

 $model = $this->_coreRegistry->registry('current_model');

    $isElementDisabled = !$this->_isAllowedAction('Krisha_Visualizer::content');
    $form = $this->_formFactory->create();

    $form->setHtmlIdPrefix('content_');
    $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Visualizer Content Information')]);
    if ($model->getId()) {
        $fieldset->addField('visualizer_id', 'hidden', ['name' => 'id']);
    }
    $fieldset->addField(
        'name',
        'text',
        [
            'name' => 'post[name]',
            'label' => __('Name'),
            'title' => __('Name'),
            'required' => true,
            'disabled' =>  $isElementDisabled
        ]
    );
    $fieldset->addField(
        'is_active',
        'select',
        [
            'label' => __('Status'),
            'title' => __('Visualizer Status'),
            'name' => 'post[is_active]',
            'required' => true,
            'options' => $model->getAvailableStatuses(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('is_active', $isElementDisabled ? '0' : '1');
    }

    $fieldset->addField(
        'type',
        'select',
        [
            'label' => __('Type'),
            'title' => __('Visualizer type'),
            'name' => 'post[type]',
            'required' => true,
            'options' => $model->getAvailableTypes(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('type', $isElementDisabled ? '0' : '1');
    }

    $fieldset->addField(
        'wood_type',
        'select',
        [
            'label' => __('Wood Type'),
            'title' => __('Visualizer Wood type'),
            'name' => 'post[wood_type]',
            'required' => true,
            'options' => $model->getAvailableWoodTypes(),
            'disabled' => $isElementDisabled
        ]
    );
    if (!$model->getId()) {
        $model->setData('wood_type', $isElementDisabled ? '0' : '1');
    }


    $fieldset->addField(
        'small_image',
        'image',
        [
            'title' => __('Small Image'),
            'label' => __('Small Image'),
            'name' => 'post[small_image]',
            'note' => __('Allow image type: jpg, jpeg, gif, png'),
        ]
    );

    $fieldset->addField(
        'main_image',
        'image',
        [
            'title' => __('Main Image'),
            'label' => __('Main Image'),
            'name' => 'post[main_image]',
            'note' => __('Allow image type: jpg, jpeg, gif, png'),
        ]
    );


    $this->_eventManager->dispatch('krisha_visualizer_content_edit_tab_main_prepare_form', ['form' => $form]);
    $form->setValues($model->getData());
    $this->setForm($form);

    return parent::_prepareForm(); 

Thank you

1

Overview:

  1. Add JS script that will handle the disabling logic doc: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html
  2. Use jQuery to handle 'type' field's 'change' event

In details:

  1. Add script to your page's .phtml:
<?php

/** @var $block \Magento\<%your_module%>\Block\Adminhtml\<%your_block_name%> */
?>

    {
        "*": {
            "<%your_module%>/js/hideOnChange": {
                "field": "wood_type"
                "dependantOnField": "type"
                "valuesToHideOn": <?php echo $block-><%method_name%>()); ?>
            }
        }
    }



here <%method_name%> is the method of block which will return values of 'type', on which 'wood_type' must be hidden.

  1. $fieldset->addField('type', ..) means that html element with id='type' will be generated. So code in the <%your_module%>/../js/hideOnChange.js file:


define([
    'jquery',
    'underscore'
], function ($, _) {
    'use strict';

    var valuesToHideOn = this.valuesToHideOn,
        field = $('#' + this.field),
        dependantOnField = $('#' + this.dependantOnField);

    dependantOnField.on('change.type', function () {
        _.contains(valuesToHideOn, $(this).val()) ?
            field.addClass('hidden') :
            field.removeClass('hidden');

    });
});


0

I think the UI Components itself allows you to do a lot of basic stuff, but if you really need some logic behind it, you can use form modifiers as described in the Dev Docs: http://devdocs.magento.com/guides/v2.1/howdoi/customize_product.html

Create your own modifier and do what you need in the modifyMeta method. To remove items just unset them from the $meta array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.