Work With Custom Web Components

Oracle JET web components are reusable pieces of UI that can be composed of multiple component types. Web components that you create can be used in your app or they can be uploaded to the Oracle Component Exchange to share with other developers.

There's a variety of supported web component types (as described in Design Custom Web Components). For an example of a web component, see Web Components in the JET Cookbook.

You can import web components in two ways: as a ZIP archive or directly from the Component Exchange associated with your instance. Likewise, web components can be published to a Component Exchange to share with other developers, or shared via a ZIP archive.

To view the web components that have been imported into your web (or mobile) app, expand the Resources node in the Navigator:

Description of component-navigator.png follows

Description of the illustration component-navigator.png

A web component must contain the following files. It may also contain additional files and folders, for example, a SCSS file 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. The naming convention for web components requires that the name of the file is `loader.js`.
`component.json`	A web component metadata file that defines its available properties and methods. The naming convention for web components requires that the name of the file is `component.js`.
`view.html`	The view for the web component
`viewModel.js`	Describes the ViewModel for the web component where methods defined in the web component metadata are defined
`styles.css`	Contains the custom styling for this web component

Note:

Web components are currently not backward-compatible. When importing web components, and when upgrading web components or your app, you need to ensure that your application and all web components that you use in your application are using the same version of JET.