Magento 2 WYSIWYG field in custom admin form

Question

I'm trying to add some fiels dynamically with Ui interface in a custom admin form.

in order_ticket_form.xml

<?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="message" class="Bileamara\SalesOrderGrid\Ui\Component\Form\Fieldset\Ticket\Message">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Add Message in Every Language</item>
 <item name="sortOrder" xsi:type="number">20</item>
 </item>
 </argument>
 </fieldset>
</form>

and Bileamara\SalesOrderGrid\Ui\Component\Form\Fieldset\Ticket\Message

<?php 
namespace Bileamara\SalesOrderGrid\Ui\Component\Form\Fieldset\Ticket;
use Magento\Framework\View\Element\UiComponent\ContextInterface; 
use Magento\Framework\View\Element\UiComponentInterface; 
use Magento\Ui\Component\Form\FieldFactory; 
use Magento\Ui\Component\Form\Fieldset as BaseFieldset;
use Magento\Store\Model\System\Store as SystemStore;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
class Message extends BaseFieldset 
{
 /**
 * @var FieldFactory
 */
 private $fieldFactory;
 protected $systemStore;
 public function __construct(
 WysiwygConfig $wysiwygConfig,
 SystemStore $systemStore,
 ContextInterface $context,
 array $components = [],
 array $data = [],
 FieldFactory $fieldFactory)
 {
 parent::__construct($context, $components, $data);
 $this->_wysiwygConfig = $wysiwygConfig;
 $this->systemStore = $systemStore;
 $this->fieldFactory = $fieldFactory;
 }
 /**
 * Get components
 *
 * @return UiComponentInterface[]
 */
 public function getChildComponents()
 { 
 $wysiwygConfig = $this->_wysiwygConfig->getConfig([
 'hidden' => 0
 ]);
 $storeCollection = $this->systemStore->getStoreCollection();
 foreach ($storeCollection as $store) { 
 $fields['message_'.$store->getCode()] = [
 'formElement' => 'wysiwyg',
 'label' => $store->getName(),
 'wysiwyg' => true,
 'required' => true,
 'config' => $wysiwygConfig,
 ];
 }
 foreach ($fields as $name => $fieldConfig) {
 $fieldInstance = $this->fieldFactory->create();
 $fieldInstance->setData(
 [
 'config' => $fieldConfig,
 'name' => $name,
 ]
 );
 $fieldInstance->prepare();
 $this->addComponent($name, $fieldInstance);
 }
 return parent::getChildComponents();
 }
}

Now I got the fields enter image description here

but:

• editor is hidden and should be visible
• label is missing
• there is no space betwin fields

I need to set field id different from name, somting like

• id => message_en
• name => message[en]

because i need message result in an array.

Any help?

Answer 1

I needed to add 'template' => 'ui/form/field' in field configuration so now the code is

public function getChildComponents()
{
 $stores = $this->storeManager->getStores();
 uasort(
 $stores,
 function (\Magento\Store\Model\Store $storeA, \Magento\Store\Model\Store $storeB) {
 return $storeA->getSortOrder() <=> $storeB->getSortOrder();
 } 
 );
 foreach ($stores as $store) { 
 $fields['message_'.$store->getCode()] = [
 'formElement' => 'wysiwyg',
 'label' => $store->getName().'_'.$store->getSortOrder(),
 'wysiwyg' => true,
 'wysiwygConfigData' => [
 'hidden' => false,
 'add_widgets' => false, 
 'add_variables' => false,
 ],
 'validation' => ['required-entry' => true],
 'template' => 'ui/form/field'
 ];
 }
 foreach ($fields as $name => $fieldConfig) {
 $fieldInstance = $this->fieldFactory->create();
 $fieldInstance->setData(
 [
 'config' => $fieldConfig,
 'name' => $name,
 ]
 );
 $fieldInstance->prepare();
 $this->addComponent($name, $fieldInstance);
 }
 return parent::getChildComponents();
}

Still wonder if there is any chance to group fields like address field in order form, something like message[en]

Answer 2

Use this code.....its work for me for creating editor in custom ui form

<field name="content" sortOrder="10" formElement="wysiwyg" template="ui/form/field">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">page</item>
 <item name="wysiwygConfigData" xsi:type="array">
 <item name="is_pagebuilder_enabled" xsi:type="boolean">false</item>
 <item name="toggle_button" xsi:type="boolean">true</item>
 <item name="height" xsi:type="string">200px</item>
 <item name="add_variables" xsi:type="boolean">true</item>
 <item name="add_widgets" xsi:type="boolean">true</item>
 <item name="add_images" xsi:type="boolean">true</item>
 <item name="add_directives" xsi:type="boolean">true</item>
 </item>
 </item>
 </argument>
 <settings>
 <label translate="true">Contents</label>
 <dataScope>content</dataScope>
 </settings>
 <formElements>
 <wysiwyg>
 <settings>
 <rows>5</rows>
 <wysiwyg>true</wysiwyg>
 </settings>
 </wysiwyg>
 </formElements>
 </field>