Skip to main content

OC Client API & Advanced Usage

This page documents the JavaScript API exposed by the OC browser client and shows how to leverage advanced features such as global parameters, headers, custom templates and actions.

Core API methods

oc.addStylesToHead(styles)

Inject CSS into the page head.

oc.addStylesToHead(".banner { background: teal; }");

oc.build(options)

Return an <oc-component> tag string you can inject in HTML.

const html = oc.build({
baseUrl: "//registry.com",
name: "user-profile",
version: "~1.x.x",
parameters: { userId: 42 },
});

oc.ready(callback)

Execute code once the client has finished boot-strapping:

oc.ready(function () {
console.log("Client ready");
});

oc.renderUnloadedComponents()

Scan the DOM for unloaded components and render them. Useful after injecting HTML dynamically.

oc.renderNestedComponent(element, callback)

Render a single component tag in isolation.

oc.getData / oc.getAction

Fetch data or trigger an action without rendering:

oc.getData(
{
baseUrl: "//registry.com",
name: "user-data",
version: "1.0.0",
parameters: { userId: 42 },
},
console.log
);

Global configuration helpers

Parameters & Headers

var oc = {
conf: {
globalParameters: { locale: "en-US" },
globalHeaders: function () {
return { Authorization: "Bearer " + getToken() };
},
},
};

Retry strategy

var oc = { conf: { retryInterval: 3000, retryLimit: 5 } };

Registering additional templates

oc.registerTemplates([
{
type: "vue-template",
externals: [
{
global: "Vue",
url: "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js",
},
],
},
]);

Complete in-browser example

<div id="dynamic"></div>

<script>
oc.cmd.push(function (oc) {
const html = oc.build({
baseUrl: "//registry.com",
name: "hello-world",
version: "1.0.0",
parameters: { name: "John" },
});

document.getElementById("dynamic").innerHTML = html;
oc.renderUnloadedComponents();
});
</script>

Continue reading: