adding a widget to your form

There are times when you want to add a widget/chart or any kind of an external logic into your form. In this scenario you will have to get this external widget to interact with your form fields, whether they are filled manually by the users or populated from salesforce.

To do so, you will have to use a very simple technique:

1- add a HTML widget into your form

2- use the window.parent.ftGetValueByID('FIELD ID')) function.

Following is an example to show the exact steps of how to add a gadget to your form. In this example we will show a gauge widget on your form that will respond to a FormTitan slider field.
View a live form example

Try it for yourself - Let's go:

1- Create new form

2- Add slider element


3- Drag an HTML element

4- paste your widget code in the HTML element:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div id="gauge_div" style="width:280px; height: 140px;"></div>

<script>

google.charts.load('current', {'packages':['gauge']});

   google.charts.setOnLoadCallback(drawGauge);

   var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,

     redFrom: 250, redTo: 280, minorTicks: 5};

   var gauge;

   function drawGauge() {

     gaugeData = new google.visualization.DataTable();

     gaugeData.addColumn('number', 'Speed');

           gaugeData.addRows(2);

     gaugeData.setCell(0, 0, 50);

     gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));

     gauge.draw(gaugeData, gaugeOptions);

   }

setInterval(function() {

gaugeData.setValue(0, 0, window.parent.ftGetValueByID('FIELD ID'));

     gauge.draw(gaugeData, gaugeOptions);

}, 1000);

</script>

 

5- Replace the FIELD ID with the actual field id of your slider (OR any other field that you are using)
6- you will then see the widget appear in your HTML element, on canvas
Simply resize the HTML element and move it to the right of the Slider field.


7- Select the slider and change its Max number to 200


8- Select the HTML element and remove its border 
go to : ''Properties'' panel > 'Element' tab > 'Style' option > 'Border' category > Border style = None

9- Save the form and publish it as URL

Enjoy!