In Magento 2 how can we add the WYSIWYG editor with the text area field with the form ui component xml file? To add the text area i am using the following code in xml file.
<field name="detail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">sample_shop</item>
<item name="label" xsi:type="string">Detail</item>
</item>
</argument>
</field>
In your ui component form xml file add the field like this.
<field name="detail">
<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">wysiwyg</item>
<item name="source" xsi:type="string">sample_shop</item>
<item name="label" xsi:type="string">Detail</item>
<item name="template" xsi:type="string">ui/form/field</item>
<item name="wysiwyg" xsi:type="boolean">true</item>
<item name="dataScope" xsi:type="string">detail</item>
<item name="sortOrder" xsi:type="number">50</item>
<item name="rows" xsi:type="number">8</item>
</item>
</argument>
</field>
From Magento 2.2, below could work too. And it has better readability and usability.
<field name="content" formElement="wysiwyg">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">block</item>
</item>
</argument>
<settings>
<additionalClasses>
<class name="admin__field-wide">true</class>
</additionalClasses>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<label/>
<dataScope>content</dataScope>
</settings>
<formElements>
<wysiwyg>
<settings>
<wysiwyg>true</wysiwyg>
</settings>
</wysiwyg>
</formElements>
</field>
Related
I tried to add a value in my UI form which is in xml type but I didn't succeed with the methods I found.
For example: this is my code
<field name="client_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">ClientId</item>
<item name="value" xsi:type="string" translate="true">Module\Core\DataObjects</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">smartbusiness</item>
<item name="dataScope" xsi:type="string">client_id</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
<item name="min_text_length" xsi:type="number">10</item>
<item name="max_text_length" xsi:type="number">250</item>
<item name="no-whitespace" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
And in my custom class I have that
<?php
namespace Module\Core\DataObjects;
use Module\Core\Model\SettingsFactory;
use Magento\Framework\App\ObjectManager;
class SettingsData
{
protected array $setting = [];
public function __construct()
{
$objectManager = ObjectManager::getInstance();
$modelFactory = $objectManager->get(SettingsFactory::class);
$collection = $modelFactory->create()->getCollection();
$collection->getSelect()->limit(1);
if ($collection->getSize()) {
$this->setting = $collection->getData()[0];
}
}
public function getData()
{
return $this->getClientId();
}
}
Any ideas how I could try?
I also tried to put class="Name of my class" in value, but it didn't work
I tried the above method + to attach the class name in the class attribute
Step 1:- Create a ui_form in
view/adminhtml/ui_component/sunarc_demo_type_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">
<!--main part of the grid-->
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<!--Define where to find the data sources-->
<item name="provider" xsi:type="string">sunarc_demo_type_form.sunarc_demo_type_form_data_source</item>
<item name="deps" xsi:type="string">sunarc_demo_type_form.sunarc_demo_type_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Add Dummy Data</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
</item>
<!-- <item name="buttons" xsi:type="array">
<item name="back" xsi:type="string">Sunarc\Enquiry\Block\Adminhtml\Type\Edit\BackButton</item>
<item name="reset" xsi:type="string">Sunarc\Enquiry\Block\Adminhtml\Type\Edit\ResetButton</item>
<item name="save" xsi:type="string">Sunarc\Enquiry\Block\Adminhtml\Type\Edit\SaveButton</item> -->
<!-- </item> -->
</argument>
<dataSource name="sunarc_demo_type_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Sunarc\Demo\Model\Ui\DataProvider</argument>
<argument name="name" xsi:type="string">sunarc_demo_type_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
<item name="submit_url" xsi:type="url" path="*/*/save"/>
</item>
</argument>
</dataSource>
<fieldset name="demo">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Add/Edit Type</item>
</item>
</argument>
<!-- This field represents form id and is hidden -->
<field name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">type</item>
</item>
</argument>
</field>
<field name="demo_data">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Demo Data</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">type</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
</settings>
</field>
<!-- IF YOU WANT TO SHOW STATIC VALUE -->
<field name="text_example" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="default" xsi:type="string">SAMPLE TEXT HERE</item>
</item>
</argument>
<settings>
<label translate="true">SAMPLE TEXT</label>
<visible>true</visible>
<disabled>false</disabled>
<elementTmpl>ui/form/element/text</elementTmpl>
</settings>
</field>
</fieldset>
</form>
Step 2:- Create a DataSource File in Model/Ui/DataProvider.php
<?php
namespace Sunarc\Demo\Model\Ui;
use Sunarc\Demo\Model\ResourceModel\Demo\CollectionFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
protected $loadedData;
/**
* #param string $name
* #param string $primaryFieldName
* #param string $requestFieldName
* #param CollectionFactory $typeCollectionFactory
* #param array $meta
* #param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $typeCollectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $typeCollectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* Get data
*
* #return array
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();
foreach ($items as $item) {
$this->loadedData[$item->getData('entity_id')]['demo']['demo_data'] = $item->getData('demo_data');
}
return $this->loadedData;
// return [];
}
}
Click Here to check the input
I'm trying to make an anchor link in the product grid view.
I have tried this using UI component, below are the detailed view
xml code:
<column name="column_name" class="Vendor\Module\Ui\Component\Listing\Column\link">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Label</item>
<item name="sortOrder" xsi:type="number">50</item>
</item>
</argument>
</column>
datasource code:
$html = ''. __('Label').'';
$item[$this->getData('name')] = $html;
Getting html like this: Label
I want 'Label' with the anchor link.
I have a magento store with different store view. I want to show Tax/Vat field on checkout but it will mandatory for Italy only.
What i have done:
After selection store view, from customer->customer configuration i have set Show VAT number on Storefront YES
and Show VAT Number set Required.
In checkout page VAT field is showing but required validation not working.
I have tried overwrite with jQuery but didnt succeed. I guess adding attribute in knockjs might be a option but i am really dont know. Can any one help me out. I am stuck.
magento version 2.2.5
I got an alternative solution.
update checkout_index_index.xml
Check closely this line for vat_id <item name="required-entry" xsi:type="boolean">true</item>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="vat_id" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
It works for me.
NB: But i am sure most of the cases set VAT ID required at checkout it should be done configuring from admin.
I can not understand why the error
Could not save the brand: Notice: Array to string conversion in C:\OpenServer\domains\localhost\2016\mercury_61189_222_007\vendor\magento\zendframework1\library\Zend\Db\Statement\Pdo.php on line 228
on the idea of all done right, here is the code of the module
<field name="website_id_2">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Magento\Store\Model\ResourceModel\Website\Collection</item>
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Website 2</item>
<item name="formElement" xsi:type="string">multiselect</item>
<item name="source" xsi:type="string">page</item>
<item name="dataScope" xsi:type="string">website_id_2</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
Can someone know the nuances?
I decided my question.
It was necessary for the save function to execute () to write 2 lines to preserve the array
$data['website_id_2']=implode(',',$data['website_id_2']);
$model->setData($data)->setId($this->getRequest()->getParam('id'));
Im having problem on integrating header mini cart into my custom theme. Below are the screenshots of the issue. Any help is much appreciated. Thanks in advance :)
Screenshots:
Below is the default.xml code.
<referenceContainer name="header.container">
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="top-header">
<!-- top links with cart -->
<container name="topcartoptions" label="Top Cart Options" htmlTag="div" htmlClass="top-cart-options text-right" before="-">
<block class="Magento\Cms\Block\Block" name="block-top-links">
<arguments>
<argument name="block_id" xsi:type="string">block-top-links</argument>
</arguments>
</block>
</container>
<!-- top menu -->
<container name="mainnavigation" label="Main Navigation" htmlTag="div" htmlClass="main-navigation" after="topcartoptions">
<container name="main-navigation-container" label="Main Navigation" htmlTag="div" htmlClass="container">
<container name="main-navigation-container-row" label="Main Navigation" htmlTag="div" htmlClass="row">
<container name="main-nav-row-bootstrap-class" htmlTag="div" htmlClass="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<block class="Magento\Cms\Block\Block" name="block-main-nav">
<arguments>
<argument name="block_id" xsi:type="string">block-main-nav</argument>
</arguments>
</block>
</container>
</container>
</container>
</container>
<block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart" as="minicart" after="logo" template="cart/minicart.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="types" xsi:type="array"/>
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
</item>
<item name="children" xsi:type="array">
<item name="subtotal.container" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="displayArea" xsi:type="string">subtotalContainer</item>
</item>
<item name="children" xsi:type="array">
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
</item>
</item>
</item>
</item>
<item name="extra_info" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="displayArea" xsi:type="string">extraInfo</item>
</item>
</item>
<item name="promotion" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="displayArea" xsi:type="string">promotion</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
<container name="minicart.addons" label="Mini-cart promotion block"/>
</block>
</container>
</referenceContainer>