How to add note have link to component in form ui

Question

Is there a way to add note with link to form ui component. I have try ui way below but it doesn't work
Ui way

<field name="fieldname">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Field Label</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="notice" xsi:type="string"><![CDATA[<a href="https://yourlink" target="_blank">here</a>]]></item>
            </item>
        </argument>
    </field>

Old way to add note

$this->addField("fieldname", [
    'label'  => __('Field Label'),
    'type'   => 'select',
    'note'   => __('<a href="https://yourlink" target="_blank">here</a>')
    ]);

Is possible to do old way in ui way

Answer 1

I was able to fix my issue by the following. All I wanted was a field with some text and an external link. See below

I created the Field in Vendor\Package\view\adminhtml\ui_component\vendor_package_area_form.xml

    <field name="customer_fullname">
        <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_Package/form/element/my_custom_form_field</item>
                <item name="label" xsi:type="string">Customer</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>

Please note above, I've set in "elementTmpl" my own custom template "Vendor_Package/form/element/customer".

Let's create it in Vendor\Package\view\adminhtml\web\template\form\element\my_custom_form_field.xml

Which will look like

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

Note "value" is the value passed by your data provider field. In my case "customer_fullname". The "customer_edit_link" property is also a field coming from my DataProvider.php file.

If you want to access extra data, you can use Knockoutjs to return it to you. I did by accessing the object "source.data.customer_edit_link".

If you not sure what your Ko object looks like you can download this extension to debug it on Chrome https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en

If you want a plain label with no link, you can simply use the tag below

    <field formElement="input" name="entry_updated_at">
        <settings>
            <label translate="true">Last Updated</label>
            <dataScope>entry_updated_at</dataScope>
            <elementTmpl>ui/form/element/text</elementTmpl>
        </settings>
    </field>

It will print out something like that:

That's it. I hope it helps.

Answer 2

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.