<!DOCTYPE html>
<html>
<!--
 * 
 * Copyright © 2012 All Rights Reserved, http://simpletrees.co.uk
 * 
 * NOTICE:  All information contained herein is, and remains the property 
 * of Simple Trees Ltd and its suppliers, if any. The intellectual and 
 * technical concepts contained herein are proprietary to Simple Trees Ltd 
 * and its suppliers and may be covered by UK, EU and Foreign Patents, 
 * patents in process, and are protected by copyright law. Dissemination of 
 * this information or reproduction of this material is strictly forbidden
 * unless prior written permission is obtained from Simple Trees Ltd. 
 *
 * This version of the product and all associated intellectual/technical
 * concepts are intended for demo purposes only and not for resale.
 *
 * Contact conor@simpletrees.com for license agreements or more details.
 *
-->
<head>
    <title> </title>
    <link href="../css/fonts.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/configpages.css" rel="stylesheet" />
</head>
<body style="height: 100%; margin: 0">

	<div>
		<h2>Traffic Lights Quick Guide</h2>
		<h4>To add a Traffic Lights control follow these steps. For the purpose of this example we will use the Rating picklist as per the Opportunity entity.</h4>
		<h4>1. In a new or existing solution add the Opportunity entity and customize the main form</h4>
		<img src="01CustOpp.png" />
		<p>&nbsp;</p>
		<h4>2. Click on insert and choose Web Resource</h4>
		<img src="02InsWR.png" />
		<p>&nbsp;</p>
		<h4>3. Choose the Traffic Lights web resource, enter a webresource name, and type in the picklist field name into the data field</h4>
		<img src="03WRDets.png" />
		<p>&nbsp;</p>
		<h4>4. The best formatting to use for the Traffic Lights is 3 rows, but I generally span it across the entire form as well. I also generally turn off scrolling</h4>
		<img src="04WRForm.png" />
		<p>&nbsp;</p>
		<h4>5. If you want 2 way communication add the javascript library to the form</h4>
		<img src="05JS.png" />
		<p>&nbsp;</p>
		<h4>6. Finally, add the refreshTrafficLights function to the onchange of your picklist and pass in the name of the Traffic Light web resource you wish to update</h4>
		<h4>Note: The quotes are important, or CRM won't like you very much. Also, you don't have to type in the full webresource name if you don't want to. The library will prepend WebResource_ for you.</h4>
		<img src="06JS.png" />
		<p>&nbsp;</p>
	</div>
</body>