How I can convert my form into a singe column one and place a WYSIWYG editor?

Question

For an admin form I have implemented the following form:

File app/code/MageGuide/FirstModule/view/adminhtml/ui_component/add_blogpost.xml

<?xml version="1.0"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">customer_form.customer_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Customer Information</item>
        <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
    </argument>
    <settings>
        <buttons>
            <button name="save" class="Magento\Customer\Block\Adminhtml\Edit\SaveButton"/>
            <button name="back" class="Magento\Customer\Block\Adminhtml\Edit\BackButton"/>
        </buttons>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>add_blogpost.blogpost_data_source</dep>
        </deps>
    </settings>
    <fieldset name="blogpost">
        <settings>
            <label translate="true">Blog Post</label>
        </settings>
        <field name="blog_post_id" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blogpost_data_source</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <visible>false</visible>
            </settings>
        </field>
        <field name="title" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blogpost_data_source</item>
                </item>
            </argument>
            <settings>
                <label>Title</label>
                <dataType>text</dataType>
                <visible>true</visible>
            </settings>
        </field>
        <field name="content" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blogpost_data_source</item>
                </item>
            </argument>
            <settings>
                <label>Content</label>
                <dataType>textarea</dataType>
                <visible>true</visible>
            </settings>
        </field>
    </fieldset>

    <dataSource name="blogpost_data_source">
        <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>
        </argument>
        <dataProvider
            class="MageGuide\FirstModule\Model\BlogPost\DataProvider"
            name="blogpost_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>blog_post_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
</form>

The uiComponent is loaded like this:

File app/code/MageGuide/FirstModule/view/adminhtml/layout/adminblogposts_blogpostform_index.xml:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            Add BLogpost
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="add_blogpost"/>
        </referenceContainer>
    </body>
</page>

And I use the following controller (app/code/MageGuide/FirstModule/Controller/Adminhtml/BlogpostForm/Index.php):

<?php

namespace MageGuide\FirstModule\Controller\Adminhtml\BlogpostForm;

use Magento\Backend\App\Action;

class Index extends Action
{
    /** @var \Magento\Framework\View\Result\PageFactory  */
    protected $resultPageFactory;
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }
    /**
     *
     * @return \Magento\Framework\View\Result\Page
     */
    public function execute()
    {
        return $this->resultPageFactory->create();
    }

    protected function _isAllowed()
    {
        return true;
    }
}

The form is displayed like this:

And I want the side bat with the tabs where Customer Information is shown to be removed whereas each column label to be ontop. Finally I want the content to be a WYSIWYG editor instead of a text field.

Is there a way to do this?

In other words I want theese things to happen:

Edit 1

I tried to change my layout as:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-layout-1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            Add BLogpost
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="add_blogpost"/>
        </referenceContainer>
    </body>
</page>

And the result was a gray screen:

If I remove the layout I get a spinner that spins forever:

Do I need to modify the src/app/code/MageGuide/FirstModule/view/adminhtml/ui_component/add_blogpost.xml as well? If yes how?

Syed Hassan Zamir · Accepted Answer · 2023-09-05 09:42:59Z

Step 1

In yours layout file remove layout="admin-2columns-left" or change it to layout="1column"

<?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">
    <head>
        <title>
            Add BLogpost
        </title>
    </head>

    <body>
        <referenceContainer name="content">
            <uiComponent name="add_blogpost"/>
        </referenceContainer>
    </body>
</page>

Step 2

To add Wyswig add the following field in your fieldset

    <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>

Tried that I get a spinner that spins forever. I edited my question as well. — Dimitrios Desyllas, Commented Sep 5, 2023 at 9:41
Please run setup:di:compile command and then reload the page and check for errors in inspecting the page — Syed Hassan Zamir, Commented Sep 5, 2023 at 9:44
In the end I found a way: magento.stackexchange.com/a/369574/113388 — Dimitrios Desyllas, Commented Sep 5, 2023 at 9:54

Dimitrios Desyllas · Accepted Answer · 2023-09-05 09:53:41Z

For the WYSIYG editor look what @Syed Hassan Zamir said. But for the single column omce you remove the layout from the app/code/MageGuide/FirstModule/view/adminhtml/layout/adminblogposts_blogpostform_index.xml, also set the following:

        <layout>
            <navContainerName>content</navContainerName>
            <type>tabs</type>
        </layout>

At the file ./app/code/MageGuide/FirstModule/view/adminhtml/ui_component/add_blogpost.xml as well to remove the infinite spinner.

Stack Exchange Network

How I can convert my form into a singe column one and place a WYSIWYG editor?

Edit 1

2 Answers 2

Your Answer

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

Hot Network Questions

How I can convert my form into a singe column one and place a WYSIWYG editor?

Edit 1

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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