Arcade script for formatting website link text color & fit

[AllanCain]

Hello,

I have a table in a dashboard, which has a "Website" field. To show the links, one has to add the following Arcade script to the advanced formatting values section: 

displayText: `<a href=${$datapoint.Website}>${$datapoint.Website}</a>`,

Two things happen: the link shows up as a default blue underlined text, and the "Column sizing" option "Fit to data" is ignored (meaning that the field takes the size of the heading rather than the data within it such as the hyperlink length). 

In the first instance, when one selects a record in the table, the "selection text color" is ignored/over-ruled for the link as it remains blue, making it hard to see. I would ideally like that website text color to change to maybe something like this '#6BAEDB' when the record is selected in the table (for color contrast). However, I a have been unable to get it to work with such terms as "textColor", "linkColor", or "selectionTextColor". Any guidance?

Secondly is there a way to get the column sizing to recognise the hyperlink length?

Thanks 

[SamGatter]

Hiya,

Do you need to display the full URL as the link? Below is using a small link and then showing the URL below it.  

You can customise a link / html further using the styling options.

If you need the links to be functional and also see the contents of them you can use something similar to below - 

function returnUrlButton(website){
  var html = ''
  html += '<a href=' + website + 'target="_blank"; style="background-color: #4CAF50; border: none; color: #fafafa; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px;border-radius:20px; cursor: pointer;"><b>URL Link Text</a>'
  html += '<div style=font-size:10px>' + website + '</div>'
  return html
}

return {
  cells: {
    Website: {
      displayText : returnUrlButton($datapoint.Website),
      textColor: '',
      backgroundColor: '',
      textAlign: 'center',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },
  }
}

The function I have created uses the website value to populate the link. You can then use the html code in the function to customise the link further and also add the website link text below the button. You don't have to use a button format like I have but hopefully this example will assist with your issue. 

My table example looks like this (the URL text below the link is just a placeholder but will be dynamic in your case) - 

This way you can also configure the default selection colour and selection text colour settings to change the colour of the full website link as it's not a link but just plain text in this instance - 

Hope this helps!

Sam