Back to all How-tos

Dynamically Inserting a Hyperlink

In order to dynamically insert or modify a hyperlink in Connect, scripts are required. However, those scripts are very small and simple to understand.

Inserting a new hyperlink

Inserting a hyperlink essentially consists of finding either text or an element, and wrapping them with the <a> element, which creates a link. There are two main ways to do this: with a text placeholder, and with an existing element that has a class or ID.

Using a placeholder

In this example, we assume there is a placeholder called @insertlink@ that we want to convert to a link using some information from the record. A Text script using this @insertlink with the following script will build a link that looks like <a href="http://www.example.com/get_pdf_invoice?uuid=8c33eda8-72af-11e5-8bcf-feff819cdc9f">Click here to download your invoice</a>

results.html('<a href="http://www.example.com/get_pdf_invoice?uuid=' + record.fields.invoice_UUID +
     '">Click here to download your invoice</a>');

You can of course use information from the record for the actual link text:

results.html('<a href="http://www.example.com/get_pdf_invoice?uuid=' + record.fields.invoice_UUID +
     '">Download Invoice#' + record.fields.invoice_number + '</a>');

Wrapping an element with a link

This example assumes that you already have an element containing the text of the link. This can be a <span> element (which you can easily create by selecting the text and choosing Insert, Text, Wrap in span and giving it an ID), for example. So with <span id="get_pdf_link">Download Invoice</span>, and a script with a selector on #get_pdf_link, the following script will create a valid link:

results.before('<a href="http://www.example.com/get_pdf_invoice?uuid=' + record.fields.invoice_UUID + '">');
results.after('</a>');

Modifying an existing hyperlink

It’s easy to insert a hyperlink with Connect. Simply select some text and click on the Insert Hyperlink button in the toolbar. Here, the URL will be static, but making it static is just as trivial as the previous examples (remember to give it an ID or Class, and refer the script to it!)

results.attr("href", 'http://www.example.com/get_pdf_invoice?uuid=' + record.fields.invoice_UUID);

Leave a Reply

Your email address will not be published. Required fields are marked *