Text Field Color Changer - Infigo Designer

You can utilize Infigo Designers JavaScript Wizard to implement a dropdown field to your editor that will change the text color of a certain field. 

In this example we use Black and White as the colors to be selected. You can have many more colors, but you will need to duplicate certain steps again. 

Before creating the script, you will need to add your colors into Infigo Designer > Manage Color. Once you have the colors setup, then you need to create a trigger field off of the canvas. This will be a text field, be sure to make the text field type Text List. Make sure your textlist values are the name of the color (in this example it's Black and White). Then change the description of the User Interface (UI). 

Now, navigate to Infigo Designer > Javascript Management. Next, hit Wizard. 

1. In the Functions tab on the left side, drag the condition to where you see Item

2. Now, drag text equals to where you see Test. 


3. Now, on the right of the wizard, you will see Items. Locate Text Fields > Trigger Field > Get > text value > Text Value. Drag this to Field A. 



4. Now, hover over Field B and the word Text will appear. Click this and type in "White." 


5. In the If Branch, drag over a logical and operator


6. Back to the right pane, drag the text colour for the TEXT field. This is found in Text Fields> TEXT > Set > text value > text colour , drag this to Item


7. You will see Value now for the Field Name and this is where you drag in the color. On the right side, find Colors >  then the color you want for TEXT. Here is White, drag it to Value. 




8. Your screen should now look like this:



9. To add Black, simply complete Steps 1 - 7. You will start Step 1 by dragging the Condition to Item. You can continue to repeat these steps for additional colors. Here is the the Final Output:



When you are all finished, you will see your script here:



You can name the script from the Top Left of the Wizard here:



Be sure to save your template, then re-upload to your site. Your dropdown field will then appear in the editor:

mceclip0.png

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk