External Resource Loading

COMING SOON

What You'll Learn

You'll discover how to efficiently load external resources into your Knack application using built-in methods that prevent duplicate loading and provide clean error handling. This enables you to integrate third-party libraries and custom stylesheets while maintaining optimal performance.

Loading JavaScript Files

Use Knack.loadScript() to load external JavaScript libraries:

👍
Example URLs only.

Loading External Resources In the Classic platform, loading external JS and CSS files was implemented using Lazyload.js. In Next-Gen, we are implementing this feature using JS promises. Example:

Knack.ready().then(async () => {
  await Knack.loadScript('https://example.com/file.js');
  console.log('Loaded!');
  // Your custom code here
});

New Global Knack Methods

Knack.loadScript(url) - Loads a single JavaScript file with duplicate prevention Knack.loadCSS(url) - Loads a single CSS file with duplicate prevention Knack.loadResources({ js: [], css: [] }) — Loads multiple resources optimally

Key Features

Duplicate Prevention: Automatically prevents loading the same resource twice
Sequential JS Loading: JavaScript files load in order to maintain dependencies
Parallel CSS Loading: CSS files load in parallel for better performance
Promise-based: Modern async/await syntax. Await can be omitted when there’s no need to wait for the library to finish loading.
Error Handling: Built-in error handling for failed loads

Examples

Using try/catch is optional. Just in case there’s a need to display an error message if loading the external file fails for some reason.

Example with Multiple Libraries

Knack.ready().then(async () => {
  try {
    await Knack.loadResources({
      css: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.css'],
      js: [
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-moment.min.js'
      ]
    });

    console.log('Chart.js and its adapter are now ready!');

    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{ label: 'Sales', data: [12, 19, 3] }]
      }
    });
  } catch (error) {
    console.error('Failed to load Chart.js libraries:', error);
    document.getElementById('chart-container').innerHTML =
      '<p>Chart could not be loaded. Please refresh the page.</p>';
  }
});

Advanced Example with Multiple Dependencies

Knack.ready().then(async () => {
  try {
    await Knack.loadScript('https://d3js.org/d3.v7.min.js');
    console.log('D3.js loaded successfully');

    await Knack.loadResources({
      css: ['https://cdn.example.com/d3-tooltip.css'],
      js: [
        'https://cdn.example.com/d3-tooltip.js',
        'https://cdn.example.com/d3-legend.js'
      ]
    });

    console.log('All D3 plugins loaded successfully');

    const svg = d3.select('#visualization')
      .append('svg')
      .attr('width', 500)
      .attr('height', 300);

    svg.selectAll('circle')
      .data([10, 20, 30])
      .enter()
      .append('circle')
      .attr('r', d => d)
      .attr('cx', (d, i) => i * 100 + 50)
      .attr('cy', 150);
  } catch (error) {
    console.error('Failed to load D3.js or its plugins:', error);
    document.getElementById('visualization').innerHTML =
      '<p>Visualization could not be loaded.</p>';
  }
});

Example with jQuery

Knack.ready().then(async () => {
  try {
    await Knack.loadScript('https://code.jquery.com/jquery-3.6.0.min.js');
    console.log('jQuery loaded! Version:', $.fn.jquery);

    $(function () {
      $('#my-button').click(function () {
        alert('Button clicked!');
      });
      $('.fade-in').fadeIn(500);
    });
  } catch (error) {
    console.error('Failed to load jQuery:', error);
    document.getElementById('my-button').addEventListener('click', function () {
      alert('Button clicked (fallback)!');
    });
  }
});

Loading CSS Files

Use Knack.loadCSS() to load external stylesheets:

Knack.ready().then(async () => {
  try {
    await Knack.loadCSS('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
    await Knack.loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js');

    await Knack.loadCSS('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    console.log('Inter font loaded');
  } catch (error) {
    console.error('Failed to load CSS:', error);
  }
});