Table Field - HTML As Field Type

replied on March 16, 2016

I would hide the input boxes and then use javascript to insert a link after each of the hidden inputs. The CSS would be something like

.HiddenColumn input {display:none}

And the Javascript to load the link would look like:

$(document).ready(function(){
  $('<a href="http://www.google.com">Link</a>').insertAfter($('#Field2(1)'));
});

1 0

View 2 previous replies

replied on October 3, 2016

Hi Scott.

I am interested in trying your solution.

I am not very familiar with java script and was hoping you could assist me.

I have completed the css part, but when I add the java script the link gets created next to the hidden column name.

I am unable to get the link in the the specified row.

htmllink1.jpg (95.24 KB)

| Download

htmllink2.jpg (95.29 KB)

| Download

0 0

replied on October 3, 2016

Short Answer: you are not selecting the correct item to insert the link after. Try the following instead:

$('<a href="http://www.google.com">Link</a>').insertAfter($('#Field11\$1\$'));

If you want to learn a little more about HTML/CSS/JS, try loading a preview of your Form and turning on the Developer Tools (F12 usually). Use the inspector tool to really look at the structure of the HTML. You will notice that the form preview on the CSS/JS tab in Forms shows you the id q11, however that is actually only applied to the <th> element at the head of the table column. Each row of the table is a <tr> element, which is further divided into a <td> element for each column value within that row. Within the <td> for each cell, there is a collection of items, including a <label>, a <div> container, an <input> element, and some other things depending on the field you use. You want to insert the link into the <div> somewhere for the best looking formatting, so I provided some code to insert your link after the input element, which is hidden, but still present on the page. Each input element in a table is given its own unique ID based on the pattern FieldN(i), where N is the same number from the column header id, and i is the row. When including references in this format in your code, you sometimes need to escape the parenthesis, which is why I have the \$ and the \$ in my code.

1 0

replied on October 3, 2016

Thx for the help Scott.

I will have a look at this and see if I can get this right.

0 0

replied on June 13, 2023

I realize this is a very old thread, so this is a long shot, but I'm trying to use this and it's not working the way I believe it should.

First, it appears that it's only looking at one row. How do I get it to do it for all rows, using the value from the hidden cell in each row?

Second, my table is filling from a lookup that's triggered by the input of a date range, so I need this to trigger on a change of the cell values when filled by the lookup. Here's the code I have:

  $(document).on('change', '#q22', function(){
  	$('<a href="https://myserver/laserfiche/docview.aspx?db=MyRepository&amp;id={/dataset/_ExpenseDetails/Receipt}" title="http://MyServer/laserfiche/docview.aspx?db=MyRepository&amp;id={/dataset/_ExpenseDetails/Receipt}" target="_blank">View Receipt</a>').insertAfter($('#Field22\\(1\\)'));
	});

Any help would be much appreciated!

0 0

replied on June 13, 2023

For anyone battling this, I got it to work with the following code:

$(document).ready(function(){
  $(q4).on('change','.HiddenColumn',function(e){
    var field = e.target.id.match(/\d+/g)[0];
    var row = e.target.id.match(/\d+/g)[1];
    var cell = '#Field' + field + '\\(' + row + '\\)'

	$('<a href="https://MyServer/laserfiche/docview.aspx?db=MyRepository&amp;id=' + $(cell).val() + '" target="_blank">View Receipt</a>').insertAfter($(cell));
  });

Where q4 is my table. I changed the server name and repository name to generic values for privacy.

0 0

Question

Question

Table Field - HTML As Field Type

Replies

Sign in to reply to this post.