Skip to content

Component library

Migrating from v1 to v2

Last updated 2 November 2026

How to migrate your codes from v1 to v2 Insites Components.

Examples

Migrating from v1 - Step 1

Step 1: Remove this

<!-- Font Icons -->
<link rel="preload" href="https://components.insites.io/assets/css/insites-font-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://components.insites.io/assets/css/insites-font-icons.css"></noscript>

<!-- Plugin Assets -->
<link rel="preload" href="https://components.insites.io/assets/css/insites-plugins.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://components.insites.io/assets/css/insites-plugins.css"></noscript>
<script src="https://components.insites.io/assets/js/insites-plugins.js" defer></script>

<!-- Components -->
<script src="https://components.insites.io/build/insites.js"></script>

Migrating from v1 - Step 1: Replace code

Replace with These

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">

<!-- Font Icons -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites-font-icons.css">

<!-- Components -->
<link rel="stylesheet" href="https://components.insites.io/v2/latest/css/insites.css" />
<script type="module" src="https://components.insites.io/v2/latest/insites.esm.js"></script>
<script nomodule src="https://components.insites.io/v2/latest/insites.js"></script>

Step 2: Update component tags

  • Update ins-base-table to ins-table.
  • Update ins-datepicker to ins-date-time with mode attribute set to datepicker.
  • Update ins-timepicker to ins-date-time with mode attribute set to timepicker.

Step 3: Update events in event listeners

Component events have been updated to have ins prefix and removed the on prefix to avoid conflict with the native DOM events. Please check v2 component documentation to update your event listeners from v1.

Step 4: Update Component API calls

If you have used a component API and expecting a return, please use async await operation as component APIs are now asynchronous to avoid race condition. See example below:

<script>
  <!-- V1 -->
  function getFiles(){
    let files = insInputFile.getFilesList()
  }

  <!-- V2 -->
  async function getFiles(){
    let files = await insInputFile.getFilesList();
  }
</script>

Step 5: Update Plugins

If your project have used the following plugins directly from insites-plugins.js outside the component, please replace it with a CDN source as some of these plugins are now built in the component or has been replaced.

  • Cropper JS
  • jQuery v1.12.4
  • jQuery UI
  • highcharts JS
  • jquery.timepicker
  • intlTelInput/utils.js
  • intlTelInput/min JS
  • sweetalert v7.26.11
  • toastr JS
  • jQuery Validate JS
  • simpleMDE
  • moment JS v2.24.0
  • Redactor