Possible to (1) Set a text element; (2) Container and/or (3) Style/Proprieties via Logic/JS?

Below is a simplified example of what I’d like to be able to do. Is this possible, and if so, any instructions/guidance would be appreciated!

(1) On page 1 user answers some questions
(2) Based on answers to question from page 1, I have logic that determines a number of outputs (e.g. If Box 1=A, show textA, if Box1=B, show textB)

----All easy so far. Here is where I have questions-----

(3) I want page 2 to display different information via inputs from page 1

  • Some of the output is text
  • Some of the output is a hyperlink (e.g. if textA, show Hyperlink to A, if textB, show Hyperlink to B)
  • I’d like to style the output (e.g. if CalcScore < 60, color=Red, else color=Green)

Any examples or guidance on:
(A) How to specify the ID of a text field in Advanced Logic (feathery.fields(“ID string”).value = “some text”; → is accepted as valid JS but doesnt do anything/work)
(B) How to specify the ID of a container in a text field in advanced logic
(C) How to access the style/properties variables of an element in advanced logic (e.g. TextID.style.link.set = “www.something.com”). NOTE: I’m aware of setStyles(), but would (i) love a code example using this (I cant make it work in Advanced Editor), and (2) I dont see the ability to do some thing like set the link for a Text field

Hi Kris,

You can refer to Javascript Rule Builder docs, and an example would be (instead of using (), use [] to wrap your field name):

feathery.fields[“ID string”].value = “some text” 

However, given your use case, instead of dynamically setting links and styles, you can create all the text with different colors / links and conditionally hide/show them based on the input from page 1.

Thank you,
Summer

Hi Summer,

I appreciate the brainstorm/possible different route. That approach may work (I want to think on it more). But, given what I plan/need to do, I still may need to do it in JS code. As such, would appreciate answers on how to do (A), (B) and (C) above if I need to do with code.

Note: for (A) – your answer on using brackets instead of parentheses works IF the field is NOT a text field (not a text ENTRY field, just a text field. eg. ID 02f4b884-2086-4cba-8868-18ebbd0a7868.

Thanks much!

Hi Kris,

From the provided screenshot it looks like you want to set value to a basic text element, instead of a text field (which is a field / box that takes in a user input). For text element you can leverage hidden fields.

In your form, you can input {{your-hidden-field-name}} in your basic text element:

Then in the Logic Rule, set the trigger to be when this step is loaded, and set your hidden field to be your intended text:

if (PreviousFieldName.value === 'A') {
  feathery.fields['conditional-text'].value = "textA"
}

Below is the result:

To access the styling of the text element, you would write in Logic Rule with something like document.querySelector() (Document Object docs) to find the element you want, then change styles. Please note field.setStyles() is used for fields, not text element.

To enable a link on a text element, you can create separate logic rules with the trigger event to be clicking on the text element with the element’s ID, then redirect user to the link. If you want to enable a link on a field, you can refer to Open a Link action here.

Thank you,
Summer