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.

[https://calculators.symmetry.com/pages/examples/popup.html (https://calculators.symmetry.com/docs/examples/popup.html)

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.

[https://calculators.symmetry.com/docs/examples/popup-native.html (https://calculators.symmetry.com/docs/examples/popup-native.html)