Add Custom Web Components to Pages

Oracle JET web components, built using Oracle JET Composite Component Architecture (CCA), are reusable pieces of user interface code that can be created or imported to use in your App UI.

There are a variety of web component types supported by Oracle JET and Oracle Component Exchange, details of which are found here, Design Custom Web Components.

You can import web components in two ways, either from a Component Exchange that is associated with your instance, or you can import any created web component from a ZIP archive. Likewise, web components can be published to a Component Exchange to share with other developers, or shared via a ZIP archive. See Publish Web Components to Oracle Component Exchange for details about publishing created components to a Component Exchange.

To view the web components that have been imported to your extension for use in your App UI, expand the global Resources and components nodes in the Navigator:
Description of component-navigator.png follows
Description of the illustration component-navigator.png

A web component must contain the files listed in the following table. It can also contain additional files and folders, for example, a SCSS file (optional file containing Sass variables to generate web component’s CSS) or resources such as translation files. For a more detailed description of the JET web component architecture, see About Web Components in Developing Applications with Oracle JET.

File	Description
`loader.js`	A RequireJS module that defines the web component dependencies for its metadata, View, ViewModel, and CSS. For web components, this name is always `loader.js`.
`component.json`	A web component metadata file that defines its available properties and methods. For web components, this name is always `component.js`.
`view.html`	Contains the View definition for the component and handles presentation of the data.
`viewModel.js`	Defines the public variables and callback methods called at various stages of the component's lifecycle. Also defines public methods in the component's DOM element and the methods defined in the component's metadata. In brief, it implements most of the View’s display logic, expose the methods for helping to maintain the View’s state, updates the model based on the actions on the View, and triggers events on the View.
`styles.css`	Contains the custom styling for this web component.

Note:

Web components are currently not backward-compatible. This must be considered when importing and upgrading web components, and when upgrading your App UI, as you need to ensure that your App UI and the web components it uses are using the same JET version.