JavaScript Component SDK

Creating your own JavaScript Components
for Omnis Studio 10/11 and later

  
  
  

Omnis Software Ltd

May 2023

About This Manual

This manual describes how you can create your own JavaScript components to interface with Omnis Studio.

The manual is split into three main sections:

There are two parts to developing a component for the JavaScript Client. The C++ Design Component that is loaded in Omnis Studio and the JavaScript file which is loaded in the client browser.

The C++ part is referred to as the Component, while the JavaScript part is referred to as the Control.

Creating a JavaScript Client control & component requires an understanding of Omnis Studio, C++ and JavaScript. Experience of creating standard Omnis External Components is also beneficial, though not essential.

C++ Design Component

The Omnis design component determines the Omnis properties, methods and events that are used to manage the state and behavior of a browser based control instance from within the Omnis server code. It also provides a design view of the control for layout within a remote form which is used to generate the HTML template for rendering the control in the client browser.

The design component is constructed using the Omnis external component library interface with additional functionality specific to designing for JavaScript. Therefore, to find details of the structures, messages and functions provided by the component library please refer to the Omnis Studio External Components document.

The jsGeneric example shows the basic framework for a JavaScript external component. The three main generic source files provided with this example can be used as templates and edited for your own component.

JavaScript Control

As well as having a C++ design component, your control must also have a JavaScript implementation. This is the substantive part of the runtime component, and where the majority of your development effort will be focused.

The C++ part of your code should create a bare skeleton for your JavaScript control, in its innerHTML() method. The JavaScript control is initially created with this structure, and you should build this up into your complex control.

More information can be found in the Fundamentals section.