More examples

Customize the examples below any way you need to suit your situation.

Multiple deductions from a url

Setting multiple deductions is easiest when fetching the data from a url. The
following example specifies the url from where the deduction data will be
fetched. The only difference between this example and the previous is
the data-defaults='{"url":"https://calculators.symmetry.com/docs/examples/multiple-deductions.json"}' snippet.

Code same as the previous example replaced with...

...
      <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey" data-defaults='{"url":"https://calculators.symmetry.com/docs/examples/multiple-deductions.json"}'></script>
...

Employee self-service portal

This example is best in environments where the calculator will be displayed after a user has logged into some sort of portal. The employee is known before the calculator widget is loaded and all form values can be fetched from a database and accessed by url via JSON. Also, this example shows you can fetch data from a url and also set style inline at the same time.

Notice the data-defaults property contains a url and a style property. This example switches the default coloring. All labels are white and the background is dark.

Code same as the previous example replaced with...

...
      <script async src="https://calculators.symmetry.com/widget/js/salary.js?key=yourKey" data-defaults='{"url":"https://calculators.symmetry.com/docs/examples/employee-portal.json", "style":{"labels":{"color":"#fff"},"body":{"background-color":"#000"},"headings":{"color":"#fff"},"title":{"color":"#fff","background-color":"#000"},"deductionContainer":{"background-color":"#000"}}}'></script>
...

jQuery UI Popup

Sometimes you might want to embed your calculator in a popup rather than directly on your page. The following is a working example of how this can be accomplished using jQuery UI's Dialog widget.

Native JavaScript Popup

The following example does not use any external libraries. It uses JavaScript's window.open function to display the calculator widget in a popup.