As you might have guessed I am using a IFrame which updates color according to the value of the “Priority” field. These are the simple steps to accomplish the task:
1. Create the color bars:
For each color, create a anew web resource of type HTML. You can use the following example that I used for the red color:
Make sure to paste the HTML code in the “Source” tab and not the “Rich Text” tab. Save and publish your web resources. Take note of the URL for each of your color bars.
2. Add the color bar to the entity form:
Navigate to your entity and customize the form to include an IFrame:
In the URL field you can enter the URL for any of the web resources we created in step1. For now, the bar will not be visible in the form by default. Take note of the name of the IFrame (in this example it is “IFRAME_COLOR”. Now save and publish your form.
3. Add script to update the IFrame according to the priority selected:
Now you just need a client script that will do two things:
You will most likely need to modify a few things like the URL to the HTML web resources and the prioritycode values (1,2,3,4, etc). Now save and publish your JS web resource.
4. Bind the script to the form
Now register your function for the Form onLoad event and the priority field onChange event. To do this, go to the form customization and click on “Form Properties” and add the web resource to the form library. Make sure you register an event for both Form.onLoad and Priority.onChange:
Save and publish the form.
Now each time you update the priority, the corresponding color should be automatically displayed in the form IFrame!