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)
Updated 5 months ago