3

I have a custom widget with various parameters. Is it possible to style or add grouping, headings, fieldsets, basically anything to give some space and separation to the numerous parameters?

My widget.xml looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="MyNamespace_about_us_page" class="MyNamespace\CMS\Block\Widget\AboutPage">
        <label translate="true">MyNamespace About Us Page</label>
        <description translate="true">Widget for customizing the About page</description>
        <parameters>
            <parameter name="top_image" xsi:type="block" visible="true" sort_order="10">
                <label translate="true">Top Image</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

             <!--##### GROUP 1-->
            <parameter name="group_1_header" xsi:type="text" visible="true" sort_order="21">
                <label translate="true">Group 1 Header</label>
            </parameter>
            <parameter name="group_1_japanese_header" xsi:type="text" visible="true" sort_order="22">
                <label translate="true">Group 1 Subheader</label>
            </parameter>
            <parameter name="group_1_body" xsi:type="text" visible="true" sort_order="23">
                <label translate="true">Group 1 Body</label>
            </parameter>

            <!--# Images-->
            <parameter name="group_1_image_1" xsi:type="block" visible="true" sort_order="30">
                <label translate="true">Group 1 Image 1</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="group_1_image_2" xsi:type="block" visible="true" sort_order="31">
                <label translate="true">Group 1 Image 2</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

            <parameter name="group_1_image_3" xsi:type="block" visible="true" sort_order="32">
                <label translate="true">Group 1 Image 3</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

            <!--##### Group 2-->
            <parameter name="group_2_header" xsi:type="text" visible="true" sort_order="40">
                <label translate="true">Group 2 Header</label>
            </parameter>
            <parameter name="group_2_japanese_header" xsi:type="text" visible="true" sort_order="41">
                <label translate="true">Group 2 Subheader</label>
            </parameter>
            <parameter name="group_2_body" xsi:type="text" visible="true" sort_order="42">
                <label translate="true">Group 2 Body</label>
            </parameter>

            <!--# Images-->
            <parameter name="group_2_image_1" xsi:type="block" visible="true" sort_order="50">
                <label translate="true">Group 2 Image 1</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

            <parameter name="group_2_image_2" xsi:type="block" visible="true" sort_order="51">
                <label translate="true">Group 2 Image 2</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

            <!--##### Group 3-->
            <parameter name="group_3_header" xsi:type="text" visible="true" sort_order="60">
                <label translate="true">Group 3 Header</label>
            </parameter>
            <parameter name="group_3_japanese_header" xsi:type="text" visible="true" sort_order="61">
                <label translate="true">Group 3 Subheader</label>
            </parameter>
            <parameter name="group_3_body" xsi:type="text" visible="true" sort_order="61">
                <label translate="true">Group 3 Body</label>
            </parameter>

            <!--# Images-->
            <parameter name="group_3_image_1" xsi:type="block" visible="true" sort_order="70">
                <label translate="true">Group 3 Image 1</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>

            <parameter name="group_3_image_2" xsi:type="block" visible="true" sort_order="71">
                <label translate="true">Group 3 Image 2</label>
                <block class="MyNamespace\ThreeUp\Block\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
        </parameters>
    </widget>
</widgets>
1
  • 2
    Wow, the magento 2 community support is really lacking, as is the documentation :( – Shawn Northrop Dec 8 '17 at 20:59
0

This may be a hack but it seems to work OK. You can do headings and separators using comments, like this:

<parameter name="field" xsi:type="text" required="true" sort_order="5">
    <label>Sample field</label>
    <description><![CDATA[<hr style="margin:40px 0;" /><h1>Heading for field group below</h1>]]></description>
</parameter>
<!-- "a new group" -->
<parameter name="another_field" xsi:type="text" required="false" sort_order="10">
    <label>A field in a new group</label>
</parameter>

Basically a <description> is displayed below the actual field in widget editor form and you can put any HTML there, as long as it's wrapped in <![CDATA[]]>, so it's not treated as a part of widget definition XML.

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.