Component API's

Dynamic Components — JavaScript API

WebCore dynamic components allow you to retrieve pre-rendered HTML or structured JSON from a data table and inject it into any page without a full page reload. Two endpoints are available depending on your use case.

Endpoint Reference

Both endpoints accept the same URL structure. Choose based on the response format you need.

URL Structure

The endpoint URL follows this pattern:

/components/getjsn/{componentName}/{dataTable}/0/{paramKey}={paramValue}?usecache=Y

The getjsn Response Object

When using /components/getjsn/, the server returns a JSON object. The most commonly used properties are:

Example 1 — Calling a List Component

This example loads the news-main component filtered by year and injects the rendered HTML into a target element. It mirrors the getnewsroom() pattern from wc-news.js.

// Get the data table name from a hidden input on the page
let dtb = $('#ftbl').val();
dtb = dtb.replace('/', '~');   // Replace slash with tilde for URL safety

var year = 2024;

var uri = "/components/getjsn/news-main/" + dtb + "/0/yr=" + year + "?usecache=Y";

loadjsn(uri, function(obj) {
    if (obj != null) {
        $('#pnNews').html(obj.vw);   // Inject rendered HTML into the target panel
    }
});

Example 2 — Calling a Detail Component

This example loads a single article using the news-item component. After rendering, it also updates the page title and subtitle from the response metadata — matching the showArticle() pattern in wc-news.js.

// Read the article ID from the query string
var articleId = getQueryParam('article-id');

let dtb = $('#ftbl').val();
dtb = dtb.replace('/', '~');

var uri = "/components/getjsn/news-item/" + dtb + "/0/article-id=" + articleId + "?usecache=Y";

loadjsn(uri, function(obj) {
    if (obj != null) {

        // 1. Inject the rendered component HTML
        $('#pnNews').html(obj.vw);

        // 2. Optionally update the page heading from metadata
        if (obj.fragmentTable.PageTitle != "") {
            $('#title').html(obj.fragmentTable.PageTitle);
            document.title = obj.fragmentTable.PageTitle;
        }

        if (obj.fragmentTable.PageSubTitle != "") {
            $('#subtitle').html("<h4>" + obj.fragmentTable.PageSubTitle + "</h4>");
        }

        if (obj.fragmentTable.PageSubTitle2 != "") {
            $('#ssubtitle').html(obj.fragmentTable.PageSubTitle2);
        }
    }
});

Reading URL Query Parameters

WebCore includes a getQueryParam(name) utility to read values from the current page URL. This is used to decide which component call to make on page load.

$(document).ready(function () {

    // Check if a specific article was requested
    var articleId = getQueryParam('article-id');

    if (articleId != null) {
        // Load single article detail view
        loadArticle(articleId);
        return false;
    }

    // Otherwise load the list, defaulting to the current year
    var year = getQueryParam('yr');
    if (year == null) {
        year = new Date().getFullYear();
    }

    loadNewsList(year);

});

Component Output Caching

Appending ?usecache=Y to the component URL instructs the server to cache the rendered HTML output. Subsequent calls with the same parameters are served from cache rather than re-rendering the component and querying the database.

/components/getjsn/news-main/
  mytable/0/yr=2024?usecache=Y

/components/getjsn/news-main/
  mytable/0/yr=2024

Data Table Name Encoding

If your data table name contains a forward slash (/), you must replace it with a tilde (~) before constructing the URL. This avoids URL path conflicts.

// Read table name from the page (e.g. "docs/newsroom")
let dtb = $('#ftbl').val();

// Encode: "docs/newsroom" → "docs~newsroom"
dtb = dtb.replace('/', '~');

var uri = "/components/getjsn/news-main/" + dtb + "/0/yr=2024?usecache=Y";

Quick Reference