Skip to main content
Data driven links

Integrations are often accomplished with javascript and dynamic links. This article shows how to pass data to locations-specific links.

Michael Fatica avatar
Written by Michael Fatica
Updated over a week ago

Each location in the results is rendered with a series of Field Templates. Each Field Template has access to the entire result object, search for states and URL parameters. See the Field Templates documentation for details and reference.

Sometimes, our customers need to pass specific variables to a javascript function or create links dynamically based on data in the result. A simple example would be to create a link with the result name added as a URL parameter:

https://example.com?locationName=Mike's Example

Dynamic Links

Links of this type can be added directly to the MetaLocator result card. The simplest way is to add a Text or Button field to the results card as shown below:

You can also modify an existing field, such as the system Link field. This approach is better if the link itself is coming from the data.

Regardless of the field you start with, the HTML markup for a dynamic link will be materially the same:

<a href="https://example.com?locationName={{name}}"  target="_blank"  data-toggle="tooltip" data-placement="top" title="" class="ml_label ml_button ml_button  ">{{name}}</a>

The code above can be inserted into the Field Template of any field. Below, we've inserted that into a Button field added to the results card.

The variable {{name}} will be replaced dynamically with the name of the location in the URL Parameter (shown below in the lower left) and the displayed name of the button.

Dynamic Javascript

Calls to javascript functions can be authored in a similar way as described above. In the below example, the javascript function receives parameter values defined by data in MetaLocator:

<a href="#" onclick="javascript:doSomething({{id}},'{{esc name}}','{{customfieldvalue}}');" target="_blank"  data-toggle="tooltip" data-placement="top" title="" class="ml_label ml_button ml_button  ">{{name}}</a>

The esc function in the name reference above replaces single & double quotes to avoid quotes within the data breaking the format of the javascript function call.

Did this answer your question?