Skip to content

Latest commit

 

History

History
44 lines (39 loc) · 1.78 KB

File metadata and controls

44 lines (39 loc) · 1.78 KB

Using UI Components Inside Widgets

What are the benefits?

  • You can use UI components inside widgets instead of limited functionality of widgets.
  • You don't need to worry about data storage as the data is automatically stored inside the widgets.
  • Easy to configure.

Example

You can see an example of a widget with most of the available UI components. The widget is called "Example Widget with UI Components".

How to use it?

  • Create app/code/Vendor/Module/etc/widget.xml file inside your module.
    • Create a widget class that will extend from Grasch\AdminUi\Block\Widget\AbstractWidget.
    • You have to add only one parameter block with class Grasch\AdminUi\Block\Adminhtml\Widget\Ui\Components.
    • namespace is the name of your form.xml file.
       <parameters>
              <parameter name="component_data" xsi:type="block">
                  <block class="Grasch\AdminUi\Block\Adminhtml\Widget\Ui\Components">
                      <data>
                          <item name="namespace" xsi:type="string">widget_example_form</item>
                      </data>
                  </block>
              </parameter>
          </parameters>
  • Create app/code/Vendor/Module/view/adminhtml/ui_component/form.xml file inside your module. Add the UI Components that you need here.
    • Use this class Grasch\AdminUi\DataProvider\Widget\DataProvider as dataProvider for your form.
  • Get data from a widget.
    /**
     * @return string
     */
    protected function _toHtml(): string
    {
        $data = $this->getData('component_data');
        print_r($data);
    
        return '';
    }