Passing data from a phtml file to a custom admin UI component JS file in Magento 2
In this article, I will show you how to pass data from a phtml file to a custom admin UI component js file. I will also show you how to pass the entity (in our example - cart rule) data to the js file, and how to use that data together with the data passed from the phtml file, to manipulate the behavior of a custom component.
In the following example, we are going to create a new field in the cart rule form. The new field is a checkbox. That checkbox will be visible if the simple action of the cart rule is “Percent Discount”. Otherwise, it will be invisible.
Note: In this article, I am using Myvendor_Mymodule as the sample module name. I am also assuming that you’ve created a basic foundation for your sample module (ie: you’ve created the module.xml and the registration.php files).
Step 1: creating the sales_rule_form.xml to add the new field
Create the file file app/code/Myvendor/Mymodule/view/adminhtml/ui_component/sales_rule_form.xml with the following content:
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="actions">
<field name="my_custom_checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">boolean</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">sales_rule</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="number">1</item>
<item name="false" xsi:type="number">0</item>
</item>
<item name="default" xsi:type="number">0</item>
<item name="label" xsi:type="string" translate="true">My Custom Checkbox</item>
<item name="sortOrder" xsi:type="number">140</item>
<item name="component" xsi:type="string">Myvendor_Mymodule/js/components/my-custom-checkbox</item>
<item name="imports" xsi:type="array">
<item name="setSimpleAction" xsi:type="string">${$.provider}:data.simple_action</item>
</item>
</item>
</argument>
</field>
</fieldset>
</form>
That file adds our custom checkbox field in the cart rule form. The custom field name is “My Custom Checkbox”.
You can also see that we’ve added the following line inside “imports” - ${$.provider}:data.simple_action
Step 2: creating the custom UI component JS file
Now we will create the js component file for our custom checkbox. (In sales_rule_form.xml file it is defined to be Myvendor_Mymodule/js/components/my-custom-checkbox).
Create the file app/code/Myvendor/Mymodule/view/adminhtml/web/js/components/my-custom-checkbox.js with the following content:
define([
'Magento_Ui/js/form/element/single-checkbox',
Myvendor_Mymodule/js/model/allowed-simple-actions'
], function (Element, AllowedSimpleActions) {
'use strict';
return Element.extend({
isInSupportedActionArray: function(action){
return (typeof AllowedSimpleActions.getConfig() != 'undefined')
&& (typeof AllowedSimpleActions.getConfig().listOfAllowedActions != 'undefined')
&& (AllowedSimpleActions.getConfig().listOfAllowedActions.indexOf(action) == -1);
},
setSimpleAction: function (value){
this.simpleAction = value;
this.visible(this.isInSupportedActionArray(this.simpleAction));
},
initConfig: function (config) {
this._super();
return this;
}
});
});
This is the component js file. Note that we’ve extended the class from Magento_Ui/js/form/element/single-checkbox because our custom component is a checkbox.
The Myvendor_Mymodule/js/model/allowed-simple-actions is a model JS file that will get the values from the phtml file.
The function setSimpleAction is triggered every time that the cart rule action changes. You can see that the function makes the custom checbox visible if and only if it is in the listOfAllowedActions array. We are receiving this array from the model js file that we are going to create in the next step.
Step 3: creating the model js file
Create the file app/code/Myvendor/Mymodule/view/adminhtml/web/js/model/allowed-simple-actions.js with the following content:
define([
], function () {
'use strict';
return {
"Myvendor_Mymodule/js/model/allowed-simple-actions": function(config){
this.setConfig(config);
},
config: {},
setConfig: function (config) {
this.config = config;
},
getConfig: function(){
return this.config;
}
}
});
Step 4: creating the phtml file
Now we will create the phtml file that will transfer the data to our model file from the previous step.
Create the file app/code/Myvendor/Mymodule/view/adminhtml/templates/allowed-simple-actions-init.phtml with the following content:
<?php
/**
* @var \Myvendor\Mymodule\Helper\Data $apHelper
*/
$helper = $this->helper(‘Myvendor\Mymodule\Helper\Data');
?>
<script type="text/x-magento-init">
{
"*": {
"Myvendor_Mymodule/js/model/allowed-simple-actions": {
"listOfAllowedActions": "<?php echo str_replace("\"", "\\\"", json_encode(array_keys($helper->getListOfAllowedActions()))) ?>" }
}
}
</script>
You can see that Myvendor_Mymodule/js/model/allowed-simple-actions indicates our model from step 3. It receives the array listOfAllowedActions that is receiving its values from the helper that we are going to create in the next step.
Step 5: creating the helper file
Now we will create a helper file that will implement the function getListOfAllowedActions that we call in our phtml file.
Create the file app/code/Myvendor/Mymodule/Helper/Data.php with the following content:
<?php
namespace Myvendor\Mymodule\Helper;
use Magento\Framework\App\Helper\AbstractHelper;
class Data extends AbstractHelper{
public function getListOfAllowedActions(){
return [‘by_percent’];
}
}
The result
After following the steps above, you should see a new checkbox “My Custom Checkbox” in the cart price rule screen. It will only be visible when the simple action of the cart rule is “Percent Discount”. If you select any other action, the checkbox should disappear.
Summing up
When working with adminhtml UI components in Magento 2 you may need more data to be able to manipulate the component in the way you want. Passing some data through a phtml file to your component is a great way to achieve that goal. This is exactly what I demonstrated in this tutorial. I hope that it was helpful for you!