Jump to content

Show Hyperlink Based on a Field Value


Recommended Posts

Hi guys! Just want to share this simple JS solution on how to display your desired hyperlink based on the value of your other field.

In this solution, I'm using a Report DataPage and I would like to display the Google link when the Name field is equal to 'Jet' and the YouTube link if the Name field has other values. I just added an HTML block and input this code. First, I created 2 'a href' tags for the links and their ID as well. It is important to include the unique ID of your table in creating their IDs. Then, I added a simple if else statement JS to set the condition and result.

<a id="youtube[@field:RID]" href="https://www.youtube.com">Youtube</a>
<a id="google[@field:RID]" href="https://www.google.com">Google</a>

<script>
if("[@field:Name]" == "Jet") {
document.getElementById("youtube[@field:RID]").style.display = "none";
}
else {
document.getElementById("google[@field:RID]").style.display = "none";
}
</script>

Here is a sample result:

image.thumb.png.d9aada33b7afcb136b8b987a5f7abf2d.png

Link to comment
Share on other sites

  • 3 weeks later...

Hi there~ I have a similar workflow as yours but I applied a different approach using a calculated field and CSS.

First, I added a calculated field and insert this formula. Put 'block' if you want to display the hyperlink for that specific name value and 'none' if it should be hidden.

CASE WHEN '[@field:Name]' = 'Jet' THEN 'block'
WHEN '[@field:Name]' = 'John' THEN 'none'
ELSE 'none' END

You may add more conditions if you want.

Then, add an HTML block and insert the CSS snippet below. Kindly change the calculated field parameter if it is not your Calculated Field 1, then insert your desired URL in the right position. After that, specify the name of your hyperlink. This HTML block will show the hyperlink that you can click.

<div id='link' style="display:[@calcfield:1]"><a href="Your_URL">Hyperlink_Name</a></div>

Notice that the future value of the calculated field will be the value of the display element. Thus, it will show or hide the hyperlink based on its value.

Lastly, you may just hide the calculated field since it will also be shown in the DataPage. :) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...