Posted on by

Showing an Icon as the Clickable Link for a “Link” Field

I got this question from a user recently, I thought it would make a good example for other users too. The technique I will outline here is pretty simple, and doesn’t require any coding skills.

The scenario is this: you want to give your users a way to post a URL to their record, but because of how you want to display it, you don’t want to give them the ability to set the clickable text to anything they want. Possibly because it could take up too much space, or whatever.

So, instead of the clickable text, you want to show an icon that is clickable, and not require the user to provide the clickable text.

Setting up The Link Field

The easy way to do this is to use your icon HTML as the “default” value for the field. In a link field, the default value will be used as the clickable text if the user does not provide it. It is possible to put simple HTML in the default value, so you can put something like a Dashicon in there. For example, we want to use the “link” dashicon for that, which uses the HTML: <span class=”dashicons dashicons-admin-links”></span>

Put the dashicon HTML in the default value

Now, if there is not clickable text defined in the record, the icon will be clickable with the URL they entered.

Preventing the User From Setting the Clickable Text

The field is presented in the editable record as two inputs: one for the URL and one for the clickable text. An easy way to prevent the user from entering clickable text is to simply hide the input. We can do that with some simple CSS. You can place this CSS rule in the “Custom CSS” setting for Participants Database.

Here is a rule you can use for that:

.link-element input[id$="-text"] {
   display: none;
}

The HTML I used there uses an attribute selector (square brackets) to target the “id” attribute of the input. This is because there is no specific classname for the element, so we target the id attribute. This selector will affect all link type fields, so if you only want this to affect a specific field, you need to look at the HTML source when displaying it to see what your id value is and use that to target the rule instead.

Finding the “id” attribute of the clickable text input

There you have it, very easy.

Leave a Reply
You have to agree to the comment policy.

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

Leave a Reply
You have to agree to the comment policy.

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.