Referencing Wijmo in Your Applications

Wijmo, an extensive set of JavaScript UI controls, is available through all popular media used by modern-day developers, that is, npm, CDN, and downloadable zip. Even if you choose to install from npm, or reference from CDN, we recommend downloading the Wijmo Dev Kit as well. In addition to packages, it contains hundreds of samples, source code, reference apps, and much more.

The minimal set of files required by any Wijmo application is:

• wijmo.css: Contains the CSS rules used for styling all Wijmo controls.

• wijmo.js: Contains the Wijmo infrastructure including the Globalize, Event, Control, and CollectionView classes.

In addition to these, include one or more additional files, depending on which components you use:

• wijmo.grid.js: Contains the FlexGrid control.

• wijmo.chart.js: Contains the FlexChart and FlexPie controls.

• wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, and Calendar controls.

• wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and BulletGraph.

• wijmo.nav.js: Contains navigation controls, including TabPanel, and TreeView.

• wijmo.culture.[CultureName].js: Contains culture-specific files used to develop applications in languages other than American English.

• wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the Wijmo controls. Use any of these files instead of wijmo.css.

Wijmo package includes interop modules that allow you to use the controls as native components for the most popular JavaScript frameworks:

• wijmo.angular2.js: Contains components that encapsulate Wijmo controls in Angular applications.

• wijmo.react.js: Contains components that encapsulate Wijmo controls in React applications.

• wijmo.vue2.js: Contains components that encapsulate Wijmo controls in Vue 2.x and Vue 3.x applications.

Download from Website

For local deployment of Wijmo files, download the Wijmo Dev kit and choose one of the two options available – one is to deploy them on a local server and other is to deploy within the project. When you choose to deploy the Wijmo files on a local server, use link or script tags to specify the file location as shown in Using CDN section. To deploy the Wijmo files within the project, copy the downloaded files to a folder within your application.

Say, you choose to place the Wijmo script files in a folder called "scripts/vendor," and the css files in a folder called "styles." Then, you can add the following lines to your HTML pages to deploy the Wijmo files locally within the project.

<!-- Wijmo styles and core (required) --> 
<link href="styles/wijmo.min.css" rel="stylesheet"/> 
<!-- optionally use a custom theme instead of wijmo.min.css 
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/> --> 
<script src="scripts/vendor/controls/wijmo.min.js"></script> 
<!-- Wijmo controls (optional, include the controls you need) --> 
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.input.min.js"></script> 
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script> 
<!-- Wijmo custom culture (optional, include the culture you want) --> 
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js"></script> 
<!-- apply your Wijmo licenseKey (optional) --> 
<script> wijmo.setLicenseKey(**'your license key goes here...'**); </script>

type=note

Note:

The snippet above also provides the code for setting license key to remove the evaluation watermark. Skip this code if you are still in evaluation mode and are yet to purchase a key.

Using CDN

To deploy Wijmo files using CDN, you can reference the CDN links to packages directly in your HTML pages. However, the order of these references is important; Wijmo.js package being the first to reference always. After this, include control modules, control extensions, and interop modules such as wijmo.angular in the order of mention.

The following code demonstrates how you can deploy Wijmo build using CDN. However, note that the version “5.latest” always picks up the latest released Wijmo package every time. So, we recommend not to use “5.latest” for the production purposes and replace it with the version number you have tested your application with.

<!-- Wijmo styles and core (required) --> 
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> 
<!-- optionally use a custom theme instead of wijmo.min.css 
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/> --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script> 
<!-- Wijmo controls (optional, include the controls you need) --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script> 
<!-- Wijmo custom culture (optional, include the culture you want) --> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script> 
<!-- apply your Wijmo licenseKey (optional) --> 
<script> wijmo.setLicenseKey(**'your license key goes here...'**); </script>

type=note

Note:

• The snippet above also provides the code for setting license key to remove the evaluation watermark. Skip this code if you are still in evaluation mode and are yet to purchase a key.

• The order of the references is important. The wijmo.js module must be the first, followed by the control modules, control extensions. Interop modules such as wijmo.angular should be included last.