Insites Docs Web Components Web Components OverviewMigrating from v1 to v2

Migrating from v1 to v2

Last updated on August 02, 2024.

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

Step 1: Remove this

 

Code Snippet

<!-- 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>
Replace with These

 

Code Snippet

<!-- 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 has 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:
 

Code Snippet

<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 of 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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.