Magento 2 : Add link in Admin UI form

Question

I want to have a downloadable link in my admin form. I want to fetch file name from my table and file is located under Magento_Root/pub/media/ directory. Note: this form is being used for just edit few fields (mainly informative)

• Prince Patel: Let me know if you have any issue.
• Yogesh Agarwal: @PrincePatel, I want to generate link dynamically. My URL would be something like this (demo.magento2.com/admin/career/job/edit/job_id/1) I need to have a PHP class to render anchor link
• Rutvee Sojitra: @YogeshAgarwal Have you get the answer?

Answer 1

in ui_form.xml

<field name="custom_link" sortOrder="20" formElement="input">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="source" xsi:type="string">custom_test</item>
 <item name="elementTmpl" xsi:type="string">Vendor_Module/input.html</item>
 </item>
 </argument>
 <settings>
 <dataType>text</dataType>
 <label translate="true">Custom Url</label>
 <dataScope>my_url</dataScope>
 </settings>
</field>

note following things:

(custom_link) field ID

---

(elementTmpl) template path

---

(my_url) dynamic value will set in Data Provider

---

in app/code/Vendor/Module/view/adminhtml/web/template/input.html

<a data-bind="attr: {href : value}">My Link</a>

In DataProvider.php

foreach ($items as $item) {
 $this->loadedData[$item->getId()] = $item->getData();
 $this->loadedData[$item->getId()]['my_url'] = "https://my_custom_link.com";
}

Replace my_custom_link with your link

You can see the output in the screenshot enter image description here

• laketuna: Is it possible to bind more than one variable to input.html in DataProvider?
• 26vivek: @musicliftsme not sure but you can try return array from the data provider and access it as value.property or value[0]
• Arun Kumar: Dynamic url creation doesn't work for me even custom url not working using dataprovider

Answer 2

You need to create your own field to add download link in Ui form

Add new field in ui form with elementTmpl

<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/download</item>

your_ui_form.xml

<field name="download">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/download</item>
 <item name="label" xsi:type="string">Download Here</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">sampleform</item>
 </item>
 </argument>
</field>

Now create download.html at

app/code/Vendor/Module/web/template/form/element/download.html

Add your custom html like add <a href="download_link"></a> in download.html

• Rutvee Sojitra: how can we pass dynamic file name in app/code/Vendor/Module/web/template/form/element/download.html?
• Adarsh M: What's the purpose of template and elementTmpl?
• Abhilash Acharya: Where to add the file to download?
• 26vivek: @RutveeSojitra please check my answer

Answer 3

For adding anchor link on text using ui component we need to create Dataprovider and use it's value in html template file as following way:-

1] Declare dataprovider and field in Vendor\Module\view\adminhtml\ui_component\module_form.xml

 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Vendor\Module\Model\Quickdetail\DataProvider</argument>
 <argument name="name" xsi:type="string">quickrfq_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
 <argument name="requestFieldName" xsi:type="string">entity_id</argument>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="submit_url" xsi:type="url" path="quickdetail/index/save"/>
 </item>
 </argument>
 </argument>
<field name="product_name">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="elementTmpl" xsi:type="string">Vendor_Module/product-data.html</item>
 <item name="label" xsi:type="string">Product Name</item>
 <item name="dataType" xsi:type="string">text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">entry</item>
 </item>
 </argument>
 </field>

2] Create DataProvider.php file for pass url which we want to show as text link. Here we want product url so we have declared product_url in items loop as following:-

public function getData()
{
 $baseurl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
 if (isset($this->loadedData)) {
 return $this->loadedData;
 }
 $items = $this->collection->getItems();
 /* @var \Magento\Cms\Model\Block $block /
 foreach ($items as $block) {
 $this->loadedData[$block->getId()] = $block->getData();
 $this->loadedData[$block->getId()]['product_url'] = $this->urlBuilder->getUrl('catalog/product/edit', ['id' => $block->getProductId()]);
 $temp = $block->getData();
 $img = [];
 $img[0]['name'] = $temp['prd'];
 $img[0]['url'] = $baseurl.$temp['prd'];
 $temp['prd'] = $img;
 }
 
 $data = $this->dataPersistor->get('quickdetail');
 
 if (!empty($data)) {
 $block = $this->collection->getNewEmptyItem();
 $block->setData($data);
 $this->loadedData[$block->getId()] = $block->getData();
 $this->dataPersistor->clear('quickdetail');
 }
 
 if (empty($this->loadedData)) {
 return $this->loadedData;
 } else {
 if ($block->getData('prd') != null) {
 $t2[$block->getId()] = $temp;
 return $t2;
 } else {
 return $this->loadedData;
 }
 }
}

3] Create template file Vendor/Module/view/adminhtml/web/template/product-data.html and create anchor link with dynamic label based on declared field name in ui_component xml file:-

<a data-bind="attr: {href : source.data.product_url, target : '_blank'}, html: value "></a>

Hope it works. Thanks.

Answer 4

You can use a modifier class of custom UI form-like products. please use the below code.

My custom UI form name is given below

importui_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">importui_form.importui_form_data_source</item>
 <item name="deps" xsi:type="string">importui_form.importui_form_data_source</item>
 </item>
 <item name="label" xsi:type="string" translate="true">General Information</item>
 <item name="config" xsi:type="array">
 <item name="dataScope" xsi:type="string">data</item>
 <item name="namespace" xsi:type="string">importui_form</item>
 </item>
 <item name="spinner" xsi:type="string">general_information</item>
 <item name="template" xsi:type="string">templates/form/collapsible</item>
 </argument>
 <dataSource name="importui_form_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">VendorName\ModuleName\Model\ImportDataProvider</argument>
 <argument name="name" xsi:type="string">importui_form_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">id</argument>
 <argument name="requestFieldName" xsi:type="string">id</argument>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="submit_url" xsi:type="url" path="*/*/save"/>
 </item>
 </argument>
 </argument>
 <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>
 </dataSource>
</form>

Once your UI form is ready, you must add your data provider file. and add Magento\Ui\DataProvider\Modifier\PoolInterface to the data provider class. because this file is mainly responsible for updating the form field and showing data in the form.

app/code/VendorName/ModuleName/Model

ImportDataProvider.php

<?php
namespace VendorName\ModuleName\Model;
use VendorName\ModuleName\Model\ResourceModel\ImportProfile\CollectionFactory; // This my custom colelction file you can replace your class
use Magento\Ui\DataProvider\AbstractDataProvider;
use Magento\Ui\DataProvider\Modifier\ModifierInterface;
use Magento\Ui\DataProvider\Modifier\PoolInterface;
class ImportDataProvider extends AbstractDataProvider
{
 private $pool;
 public function __construct(
 $name,
 $primaryFieldName,
 $requestFieldName,
 CollectionFactory $collectionFactory,
 PoolInterface $pool,
 array $meta = [],
 array $data = []
 ) {
 parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
 $this->collection = $collectionFactory->create();
 $this->pool = $pool;
 }
 public function getData()
 {
 /** @var ModifierInterface $modifier */
 foreach ($this->pool->getModifiersInstances() as $modifier) {
 $this->data = $modifier->modifyData($this->data);
 }
 $items = $this->collection->getItems();
 foreach ($items as $importProfile) {
 $this->data[$importProfile->getId()] = $importProfile->getData();
 }
 return $this->data;
 }
 public function getMeta()
 {
 $meta = parent::getMeta();
 /** @var ModifierInterface $modifier */
 foreach ($this->pool->getModifiersInstances() as $modifier) {
 $meta = $modifier->modifyMeta($meta);
 }
 return $meta;
 }
}

app/code/VendorName/ModuleName/etc/adminhtml

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
 <virtualType name="VendorName\ModuleName\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
 <arguments>
 <argument name="modifiers" xsi:type="array">
 <item name="AddLinkField" xsi:type="array">
 <item name="class" xsi:type="string">VendorName\ModuleName\Ui\DataProvider\ImportForm\Modifier\AddLinkField</item>
 <item name="sortOrder" xsi:type="number">10</item>
 </item>
 </argument>
 </arguments>
 </virtualType>
 <type name="VendorName\ModuleName\Model\ImportDataProvider">
 <arguments>
 <argument name="pool" xsi:type="object">VendorName\ModuleName\Ui\DataProvider\Product\Form\Modifier\Pool</argument>
 </arguments>
 </type>
</config>

app/code/VendorName/ModuleName/Ui/DataProvider/ImportForm/Modifier

AddLinkField.php

<?php
namespace VendorName\ModuleName\Ui\DataProvider\ImportForm\Modifier;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Framework\UrlInterface;
use Magento\Ui\Component\Container;
use Magento\Ui\Component\Form\Fieldset;
use Magento\Ui\Component\Form\Element\DataType\Number;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Element\MultiSelect;
use Magento\Ui\Component\Form\Field;
class AddLinkField extends AbstractModifier
{
 const CUSTOM_FIELDSET_INDEX = 'custom_fieldset';
 const CONTAINER_HEADER_NAME = 'custom_fieldset_content_header';
 const FIELD_NAME_TEXT = 'title';
 /**
 * @var \Magento\Catalog\Model\Locator\LocatorInterface
 */
 protected $locator;
 /**
 * @var ArrayManager
 */
 protected $arrayManager;
 /**
 * @var UrlInterface
 */
 protected $urlBuilder;
 /**
 * @var array
 */
 protected $meta = [];
 /**
 * @param LocatorInterface $locator
 * @param ArrayManager $arrayManager
 * @param UrlInterface $urlBuilder
 */
 public function __construct(
 LocatorInterface $locator,
 ArrayManager $arrayManager,
 UrlInterface $urlBuilder
 ) {
 $this->locator = $locator;
 $this->arrayManager = $arrayManager;
 $this->urlBuilder = $urlBuilder;
 }
 /**
 * Data modifier, does nothing in our example.
 *
 * @param array $data
 * @return array
 */
 public function modifyData(array $data)
 {
 return $data;
 }
 /**
 * Meta-data modifier: adds ours fieldset
 *
 * @param array $meta
 * @return array
 */
 public function modifyMeta(array $meta)
 {
 $this->meta = $meta;
 $this->addCustomFieldset();
 return $this->meta;
 }
 /**
 * Merge existing meta-data with our meta-data (do not overwrite it!)
 *
 * @return void
 */
 protected function addCustomFieldset()
 {
 $this->meta = array_merge_recursive(
 $this->meta,
 [
 static::CUSTOM_FIELDSET_INDEX => $this->getFieldsetConfig(),
 ]
 );
 }
 /**
 * Declare ours fieldset config
 *
 * @return array
 */
 protected function getFieldsetConfig()
 {
 return [
 'arguments' => [
 'data' => [
 'config' => [
 'label' => __('Fieldset Title'),
 'componentType' => Fieldset::NAME,
 'provider' => 'importui_form_data_source', // your UI form data source name
 'ns' => 'importui_form', // your UI form name
 'collapsible' => true,
 'sortOrder' => 10,
 'opened' => true,
 ],
 ],
 ],
 'children' => [
 static::CONTAINER_HEADER_NAME => $this->getHeaderContainerConfig(10),
 static::FIELD_NAME_TEXT => $this->getTextFieldConfig(20)
 ],
 ];
 }
 /**
 * Get config for header container
 *
 * @param int $sortOrder
 * @return array
 */
 protected function getHeaderContainerConfig($sortOrder)
 {
 return [
 'arguments' => [
 'data' => [
 'config' => [
 'label' => null,
 'formElement' => Container::NAME,
 'componentType' => Container::NAME,
 'template' => 'ui/form/components/complex',
 'sortOrder' => $sortOrder,
 'content' => __('You can write any text here'),
 ],
 ],
 ],
 'children' => [],
 ];
 }
 /**
 * Example text field config
 *
 * @param $sortOrder
 * @return array
 */
 protected function getTextFieldConfig($sortOrder)
 {
 // You can update This Method to get a dynamic URL and Add into additionalInfo 
 return [
 'arguments' => [
 'data' => [
 'config' => [
 'label' => __('Example Text Field'),
 'formElement' => Field::NAME,
 'componentType' => Input::NAME,
 'dataScope' => static::FIELD_NAME_TEXT,
 'dataType' => Number::NAME,
 'additionalInfo' => "<span style='color:green'>Your store URL will be like:</span> <a href='https://xyzshop.domain.com'>https://xyzshop.domain.com</a>",
 'sortOrder' => $sortOrder,
 ],
 ],
 ],
 ];
 }
}

After creating and updating the above files run the below command:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

Reference Product Customize using a modifier class