Skip to content

Tutorial: Custom Configurable Inputs

While a set of input elements are provided out-of-the-box, it is certainly feasible for developers to want to create their own custom input types to better suit the needs of their widgets and/or admin users.

  1. Add a new child block to the widget-form.inputs block in hyva_dashboard_widget.xml. 
    <referenceBlock name="widget-form.inputs">
    <!-- Replace the {{TYPE}} suffix with the custom type name -->
    <block name="input.{{TYPE}}" template="Vendor_Module::path/to/the/input/template.phtml"/>
</referenceBlock>
  2. Create the template file to handle the rendering of the custom input type.
    • The widget type object is available from the block via $block->getData('widget') or $block->getWidget()
    • The widget instance object is available from the block via $block->getData('widget_instance') or $block->getWidgetInstance()
      • The widget instance object will be null when the input is not associated with a particular widget instance
    • The input name is available from the block via $block->getData('input_name') or $block->getInputName() and contains the value specified for the label
    • The input configuration is available from the block via $block->getData('input_config') or $block->getInputConfig()
    • The input ID is available from the block via $block->getData('input_id') or $block->getInputId()
  3. Use the custom input type name when defining the input type in the widget's PHP class. 
    public function get{{Configurable|Display}}Properties(): array
{
    return [
        'foo' => [
            'label' => 'Custom Input Type',
            'input' => [
                'type' => '{{TYPE}}',
            ],
        ],
    ];
}

Input Type Names

When creating a custom input type, the name of the block defined in layout XML must match the pattern input.{{TYPE}} in order for Magento to be able to automatically handle the rendering of the input template.

Dynamic Row Inputs

In some instances it may also be necessary to handle inputs differently when they are rendered as part of a dynamic row input. In these cases the block name used in layout XML should follow the pattern input.dynamic-rows.{{TYPE}}.