FSWizard Widget

June 13, 2022, 12:40 am by admin

An effort is currently underway to allow FSWizard Widget (FSWidget) to be inserted into the client's web applications.

It is currently possible to add FSWidget in the following ways:

  • IFrame at https://widget.fswizard.com

Adding FSWidget as an IFrame

Code
<iframe width="450" height="500" src="https://widget.fswizard.com"></iframe>

The code above will produce the following result:

Additional parameters

You can send additional query parameters to FSWidget to change the way it looks and operates:

  • injectCSSLink
    Injects an URL to a custom CSS file
  • injectCSSText
    Injects a custom CSS directly without the need for the file
  • numericKeyboard = true
    Displays numeric keyboard for numeric input types within the iframe

 All query parameters must be URL encoded

Here is a sample that sets the default widget text color to red:

Code
<iframe width="350" height="500" src="https://widget.fswizard.com/?injectCSSText=%3Aroot%20%7B--tm-body-color%3A%20red%3B%7D&numericKeyboard=true"></iframe>

Theme CSS Variables

To simplify theming the app you can use the following CSS variables:

Code:DEFAULT LIGHT THEME
:root {
  --tm-body-color:  #000;
  --tm-body-background:  white;
  --tm-body-link:  #2196f3;
  --tm-body-margin: 0;
  --tm-body-padding: 0;
  --tm-body-font-size: 1.4rem;
  --tm-page-header-background: #039be5;
  --tm-page-header-color: #FFF;
  --tm-page-subheader-background: #009688;
  --tm-page-subheader-color: #FFF;
  --tm-table-background: white;
  --tm-table-background-alt: #f4f4f4;
  --tm-table-background-selected: #AECEAF;
  --tm-table-border: 1px solid #dcedf6;
  --tm-table-color: #333;
  --tm-table-header-background: #009688;
  --tm-table-header-color: #fff;
  --tm-canvas-text-color: #000;
  --tm-canvas-background: #FFF;
  --tm-canvas-point-color: #F00;
  --tm-canvas-geometry-color: #00F;
  --tm-gauges-button-font-size: 0.8em;
  --tm-gauges-button-label-color:#d1dbe0;
  --tm-gauges-button-value-color:#FFF;
  --tm-gauges-button-value-font-size:1.25em;
  --tm-gauges-button-unit-color:#d1dbe0;
  --tm-gauges-button-arrow-color: white;
  --tm-gauges-button-arrow-font-size: 0.75em;
  --tm-tab-border: 1px solid #CCCCCC;
  --tm-tab-background:  #FFF;
  --tm-tab-button-padding:  0.75em;
  --tm-tab-button-background:  #dbdbdb url('../img/gray_header_inv.png');
  --tm-tab-button-border-radius:  0;
  --tm-tab-button-border: 1px solid #CCCCCC;
  --tm-tab-button-color: #222222;
  --tm-tab-button-font-weight: bold;
  --tm-tab-button-font-size: 1.25em;
  --tm-tab-button-collapsed-background:  #fafafa url('../img/light_header.png');
  --tm-tab-button-collapsed-border:  1px solid #CCCCCC;
  --tm-tab-button-collapsed-color: #8a8a8a;
  --tm-tab-content-background: white;
  --tm-tab-content-padding:  0px 5px ;
  --tm-tab-content-border:  1px solid #CCCCCC;
  --tm-tab-content-border-radius:  0;
  --tm-input-font-size:  1.25em;
  --tm-input-height:  2em;
  --tm-input-padding:  0 0.25em 0 0.25em;
  --tm-input-border-radius:  0;
  --tm-input-border:  1px solid #dcdcdc;
  --tm-input-background:  white;
  --tm-input-color: black;
  --tm-input-icon-color: black;
  --tm-input-default-background: #6FEB6F;
  --tm-input-default-color:  black;
  --tm-input-editing-color: white;
  --tm-input-editing-background: white;
  --tm-input-selected-color: white;
  --tm-input-selected-background: #296fff;
  --tm-input-disabled-color: black;
  --tm-input-disabled-background: lightgray;
  --tm-range-background: #ccc;
  --tm-range-height: 5px;
  --tm-range-border-radius: 3px;
  --tm-range-shadow: 0px 0px 2px 0px black;
  --tm-range-margin: 10px 5px;
  --tm-range-slider-background: #03A9F4;
  --tm-range-slider-height: 20px;
  --tm-range-slider-width: 20px;
  --tm-range-slider-border-radius: 30px;
  --tm-range-slider-shadow:  0px 0px 2px 0px black;
  --tm-button-primary-background: #03a9f4;
  --tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;
  --tm-input-focus-shadow:  0 0 5px rgba(81, 203, 238, 1);
  --tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);
  --tm-fieldgroup-margin: 0.25em;
  --tm-fieldgroup-padding:  0.25em 0;
  --tm-fieldgroup-background: white;
  --tm-fieldgroup-odd-background: whitesmoke;
  --tm-fieldgroup-error-color: red;
  --tm-dropdown-text-align:  left;
  --tm-dropdown-padding:  0 30px 0 0.25em;
  --tm-dropdown-font-size:  1.25em;
  --tm-dropdown-border-radius:  0;
  --tm-dropdown-border:  1px solid #9cccf2;
  --tm-dropdown-background: white;
  --tm-dropdown-color: black;
  --tm-dropdown-icon:  url(../img/icon_downarrow.png);
  --tm-dropdown-icon-width:  30px;
  --tm-dropdown-icon-color:  #5bd3ff;
  --tm-material-dropdown-border:  1px solid #CCCCCC;
  --tm-material-dropdown-padding: 0.75em;
  --tm-material-dropdown-font-size: 1.25em;
  --tm-toggle-slider-color: rgb(3, 155, 229);
  --tm-toggle-background: rgb(255, 255, 255);
  --tm-toggle-color: black;
  --tm-toggle-selected-color:white;
  --tm-toggle-border: 1px solid #dcdcdc;
  --tm-toggle-border-radius: 0;
}

Code:DARK THEME

:root {
  --tm-body-color: #DDD;
  --tm-body-background: #222;
  --tm-body-link:  #2196f3;
  --tm-body-margin: 0;
  --tm-body-padding: 0;
  --tm-body-font-size: 1.4rem;
  --tm-action-color: #607d8b;
  --tm-page-header-background: #333;
  --tm-page-header-color: #FFF;
  --tm-page-subheader-background: #333;
  --tm-page-subheader-color: #FFF;
  --tm-table-background: #333;
  --tm-table-background-alt: #444;
  --tm-table-background-selected: #AECEAF;
  --tm-table-border: 1px solid #525252;
  --tm-table-color: #EEE;
  --tm-table-header-background: #252525;
  --tm-table-header-color: #fff;
  --tm-canvas-text-color: #FFF;
  --tm-canvas-background: #222;
  --tm-canvas-point-color: #F00;
  --tm-canvas-geometry-color: rgb(187, 187, 255);
  --tm-gauges-button-font-size: 0.8em;
  --tm-gauges-button-label-color: #d1dbe0;
  --tm-gauges-button-value-color: #FFF;
  --tm-gauges-button-value-font-size: 1.25em;
  --tm-gauges-button-unit-color: #d1dbe0;
  --tm-gauges-button-arrow-color: white;
  --tm-gauges-button-arrow-font-size: 0.75em;
  --tm-tab-border: 1px solid #666666;
  --tm-tab-background: #222;
  --tm-tab-button-padding: 0.75em;
  --tm-tab-button-background: #333;
  --tm-tab-button-border-radius: 0;
  --tm-tab-button-border: none;
  --tm-tab-button-color: #DDD;
  --tm-tab-button-font-weight: bold;
  --tm-tab-button-font-size: 1.25em;
  --tm-tab-button-collapsed-background: #444;
  --tm-tab-button-collapsed-border: none;
  --tm-tab-button-collapsed-color: #8a8a8a;
  --tm-tab-content-background: #222;
  --tm-tab-content-padding: 0px 5px;
  --tm-tab-content-border: none;
  --tm-tab-content-border-radius: 0;
  --tm-input-font-size: 1.25em;
  --tm-input-height: 2em;
  --tm-input-padding: 0 0.25em 0 0.25em;
  --tm-input-border-radius: 0;
  --tm-input-border: none;
  --tm-input-background: #111;
  --tm-input-color: #e7e7e7;
  --tm-input-icon-color: #FFF;
  --tm-input-default-background: #3a893a;
  --tm-input-default-color: #dcdcdc;
  --tm-input-editing-color: white;
  --tm-input-editing-background: white;
  --tm-input-selected-color: white;
  --tm-input-selected-background: #296fff;
  --tm-input-disabled-color: black;
  --tm-input-disabled-background: #817e7e;
  --tm-range-background: #ccc;
  --tm-range-height: 5px;
  --tm-range-border-radius: 3px;
  --tm-range-shadow: 0px 0px 2px 0px black;
  --tm-range-margin: 10px 5px;
  --tm-range-slider-background: var(--tm-action-color);
  --tm-range-slider-height: 20px;
  --tm-range-slider-width: 20px;
  --tm-range-slider-border-radius: 30px;
  --tm-range-slider-shadow: 0px 0px 2px 0px black;
  --tm-button-primary-background: var(--tm-action-color);
  --tm-input-focus-shadow: 0 0 5px rgba(81, 203, 238, 1);
  --tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);
  --tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;
  --tm-fieldgroup-margin: 0.25em;
  --tm-fieldgroup-padding: 0.25em 0;
  --tm-fieldgroup-background: transparent;
  --tm-fieldgroup-odd-background: #2a2a2a;
  --tm-fieldgroup-error-color: red;
  --tm-dropdown-text-align: left;
  --tm-dropdown-padding: 0 30px 0 0.25em;
  --tm-dropdown-font-size: 1.25em;
  --tm-dropdown-border-radius: 0;
  --tm-dropdown-border: 1px solid #9cccf2;
  --tm-dropdown-background: white;
  --tm-dropdown-color: black;
  --tm-dropdown-icon: url(../img/icon_downarrow.png);
  --tm-dropdown-icon-width: 30px;
  --tm-dropdown-icon-color: #5bd3ff;
  --tm-material-dropdown-border: none;
  --tm-material-dropdown-padding: 0.75em;
  --tm-material-dropdown-font-size: 1.25em;
  --tm-toggle-slider-color: var(--tm-action-color);
  --tm-toggle-background: rgb(255, 255, 255);
  --tm-toggle-color: black;
  --tm-toggle-selected-color: white;
  --tm-toggle-border: 1px solid #dcdcdc;
  --tm-toggle-border-radius: 0;
}

To be continued....