Question

How do I select fields/cells in a table to add a class to?

Forms Layout Designer Laserfiche Cloud

Updated August 29

asked on August 29 • Show version history

Hi all,

I'm trying to write a simple froms page using the new forms objects. I've only worked in jquery on the classic in the past, so am just trying to make something basic.

The idea is to populate a table with the "name" colume from a data query. I can do that OK.
Oncompletion of the lookup, I want add a class to each input field to hide the value.
Have button to select a random number.
After the button has been clicked, the system cycles through each value, adding and removing classes to change its colour, as it pretends to slowly choose a value.
After about 10 seconds of this tension-building charade, the randomly selected value is revealed.

I can't get the basics to work. Selecting a field and turning it a colour doesn't work for me. I can change the colour of a regular text field value though:


alert('a');
LFForm.onLookupDone(function () {
   let fld = LFForm.findFieldsByFieldId(4)[0];
    LFForm.addCSSClasses(fld, "input-highlight");
}, {lookupRuleId: 1});

Also, the "alert" function doesn't seem to work n the new forms designer. I used to rely on alerts when debugging. Is there another way now?

0 0

Replies

replied on August 29

Starting in v11, you can assign classes using Field Rules in the forms designer. These can be based on conditions, or set to "Always." This way, you would be able to target the specific field in the table.

0 0

replied on August 29

Same option applies to cloud as well. Just use the field rule to Add CSS or Remove CSS based on the rules you need.

0 0

replied on August 29

Assuming you wish to use LFFORM rather than field rules, your code looks ok to me with the caveat that alerts do not work in the new forms designer. For debugging you can still use

console.log(a);

It could be that because the alert is being ignored that none of the rest of the code is executing. If it is executing then I would double-check that your CSS is targeting the correct element as the class is added at the top field level. For example using your code as the basis your CSS should look like:

/* to set the label to red */
.input-highlight label { color: red; }
 
/* to set the input text to red */
.input-highlight input { color: red; }

0 0

You are not allowed to follow up in this post.

Question

Question

How do I select fields/cells in a table to add a class to?

Replies

Sign in to reply to this post.