Present URLs as clickable links

[markh-de]

Hi,

When handing out BoMs to the assembly house, I like to add purchase URLs for each part, which lead to sites such as findchips.com or octopart.com, for the purchaser to easily check and compare up-to-date stock and pricing information.

It would be very convenient if the iBOM would present URLs as clickable HTML links.

For example, this could be implemented with

1. auto-detecting whole property values as links (i.e. the property value must start with "http://", "https://", or "file://"),
2. auto-detecting links in property values (i.e. only a part of the value is a link), or
3. treating whole property values as links if a checkbox "Link" (column to be added) is ticked in the "Fields" table of the configuration dialog window.

I think the first method would be easiest to implement and would be sufficient for most use cases.

Thank you for your consideration and for this great tool!

Mark

[ddkaiser]

I would find this useful. (And agree the first method would be sufficient for most use cases.)

I would also find this useful for links for datasheet PDF's. I add datasheet URL's to nearly every part. While that is definitively useful when doing layout, it could also sometimes be of use during assembly, if someone needed to reference a part's various permutations for identity marking (orientation, revision, etc.)

[qu1ck]

It's possible to achieve using custom js. Someone already did the work: #82 (comment)

[markh-de]

Thanks for the pointer!

The approach of using a custom callback (as in #82) basically works in that clickable links are added.
However, (at least) two problems arise:

1.

Manipulating all table rows renders the table header actions unusable (column sorting, column visibility settings, double-click actions). I came up with a simplified version that addresses this issue by only handling tbody elements and also leaving cells untouched that contain child nodes (such as checkboxes):

function add_href_links() {
  var urlRegex = /^((?:https?|file):\/\/.*$)/;
  var tbody = document.getElementById("bombody");
  for (let row of tbody.rows) {
    for (let cell of row.cells) {
      if (!cell.childElementCount) {
        cell.innerHTML = cell.innerHTML.replace(urlRegex, function (url) {
          return '<a href="' + url + '" target="_blank">' + url + '</a>';
        });
      }
    }
  }
}

EventHandler.registerCallback(IBOM_EVENT_TYPES.BOM_BODY_CHANGE_EVENT, add_href_links);

This can be fixed in user.js.

2.

The function saveBomTable() does not export the links, because now each modified cell (that contains a link) includes another node (a), which must be handled explicitly.

This needs to be fixed in util.js, function saveBomTable(output):

        } else if (node.nodeName == "MARK") {

must be changed to

        } else if ((node.nodeName == "MARK") || (node.nodeName == "A")) {

If we would implement the link-feature and fix both issues in the mainline code, users could benefit without the hassle of having to add custom code (also updating the addon would be much easier, obviously).

Where would one place the urlify function and the BOM_BODY_CHANGE_EVENT callback registration, if implemented in mainline code? If you can give me a hint, I could prepare a PR.

Thanks for your help!
Mark

[qu1ck]

The reason I didn't want to include url-ify function in base code is that it doesn't play nice with the filter highlighting.

If you want to mainline it you should look into integrating it into populateBomBody() and highlightFilter() in ibom.js. Callbacks system is only intended for user scripts, don't use it for built in functionality.

If you can make highlighting work inside and outside of urls (I would accept if it doesn't work on the "border") I'll be happy to merge it.