urlInput component

The urlInput component implements the <urlInput> form field.

Configuration options

Option	Description	Type	Default
`component`	The path to the component’s .js file in terms of RequireJS.	String	`Magento_Ui/js/form/element/url-input`
`template`	The path to the general field `.html` template.	String	`ui/form/element/url-input`
`class`	The path to the component class.	Object	`Magento\Ui\Component\Form\Element\UrlInput`
`settingTemplate`	The path to the template to display an additional link setting. Example: Display in the new tab.	String	`ui/form/element/urlInput/setting`
`typeSelectorTemplate`	The path to the template to display link types.	String	`ui/form/element/urlInput/typeSelector`
`isDisplayAdditionalSettings`	The setting to define the display of an additional setting.	Boolean	`true`
`urlTypes`	Contains the required attribute class that specifies the array of configurations for every URL type.
`settingValue`	The default value for the checkbox. Open in a new tab.	Boolean

Examples

Configure component

By default, you can use Magento\Ui\Model\UrlInput\LinksConfigProvider, which provides text input for URLs. LinksConfigProvider is composite and you can add new options to the di.xml file.

<type name="Magento\Ui\Model\UrlInput\LinksConfigProvider">
    <arguments>
        <argument name="linksConfiguration" xsi:type="array">
            <item name="default" xsi:type="string">Magento\Ui\Model\UrlInput\DefaultLink</item>
        </argument>
    </arguments>
</type>

The option class implements \Magento\Ui\Model\UrlInput\ConfigInterface and provides the child component configuration:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
 
declare(strict_types=1);
 
namespace Magento\Ui\Model\UrlInput;
 
 
class MyLink implements ConfigInterface
{
 
    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        return [
            'label' => __('Select'),
            'component' => 'Magento_Ui/js/form/element/select',
            'template' => 'ui/form/element/select',
            'sortOrder' => 10,
            'options' => [
                [
                    'value' => 1,
                    'label' => 'hello'
                ],
                [
                    'value' => 2,
                    'label' => 'hello2'
                ]
            ],
            'validation' => [
                //'blacklist-url'=> //Add regexp to blacklist your URL here
                //Add custom validation rule here
                //validation.addRule
            ],
        ];
    }
}

Magento provides the ability to use two link types by default:

Magento\Catalog\Ui\Component\UrlInput\Category for category
Magento\Catalog\Ui\Component\UrlInput\Product for product

Edit this page on GitHub

Give us feedback