Display text below table field based on variable

asked on May 8, 2020

This will likely be fairly complicated, but I'm hopeful a knowledgeable person can help me out.

First of all, I'd like to clarify that adding text below a field based on a variable using the built-in tools does not work. Adding this dataset, for example, or any of a number of others I've attempted, causes no text to display:

I'm trying to save real estate on my Task table by taking the Remarks line, which is populated by lookup, and moving it to the "Text below field" area on the Task title:

I've been trying to figure out some Javascript that would make that work, but have come up blank so far. Does anyone have any suggestions for me?

Using Laserfiche Forms Professional Version 10.4.3.198

0 0

replied on May 11, 2020 • Show version history

Hi Sean,

Adding the variable to the text below the field would work if you are filling it in in a previous tasks. You cannot fill the text for something on the same form, since at the time opening it, the variable does not have a value.

As for using JavaScript, this should give you a good overview: (in my examples, q10 is the Remarks column and q8 is the Task column)

You can do an 'on change' event listener on the Remarks column ("[data-col=q10] input" should find them), that then takes the ID of the field ("Field10(3)" = q10, row 3) and finds the ID of which text element to change ("FieldBelowHelp8(3)" = q8, row 3).

0 0

View 2 previous replies

replied on May 11, 2020

Hi Jim,

That makes sense about the variable. Since this is the first Form in the process, that obviously won't be an option for me, but thanks for explaining how it's supposed to work.

In regards to your answer, I've tried doing what you're describing before I even posted this, but can't seem to capture the data value on a row-by-row basis (since I can't hard-code any specific row numbers). How do I go about getting those row values?

0 0

replied on May 11, 2020

This should work:

$(document).ready(function(){
  $('[data-col="q5"]').each(function() {
    changeTableHelptext($(this));
  });
});
$(document).on("change", '[data-col="q5"]', function() {
  changeTableHelptext($(this));
});
function changeTableHelptext(element) {
  var field = $(element).find("input")[0];
  var val = $(field).val();
  var id = field.id;
  var row = id.substring(id.indexOf("(")+1, id.indexOf(")"));
  
  $('[id="FieldBelowHelp2(' + row + ')"]').text(val).change();
}

Change the q5 on lines 2 and 6 with whatever your remarks column ID is, and the number of "FieldBelowHelp2" on the second-to-last line to your Task column ID number.

1 0

replied on May 13, 2020

This works really well! So first of all, thank you! I'm glad there are people on here that are much more clever than I am with the javascript.

The only problem I'm running across is if the value is empty (not all Remarks have values in them) there's an awkward bit of text that says "Add text here." anyone know of any way around that?

0 0

SELECTED ANSWER

replied on May 14, 2020

Add these lines:

$(document).on("click", "#q3", function() {
  $('[data-col="q5"]').each(function() { changeTableHelptext($(this)); })
});
$(document).on("lookupcomplete", function() {
  $('[data-col="q5"]').each(function() { changeTableHelptext($(this)); })
});

Change the "q3" in line 1 to the ID of the "Add Task" button. (And q5 as you did before to the remarks column.)

These will ensure it updates all lines when either a lookup is complete, or a new row is manually added.

1 0

replied on May 14, 2020

This combined with your earlier answer is perfect! Thanks Jim!

1 0

Question

Question

Display text below table field based on variable

Answer

Replies

Sign in to reply to this post.