Work with Oracle JET Web Components

Oracle JavaScript Extension Toolkit (JET) Web Components are supported by visual applications at both run time and design time.

About Oracle JET Web Components

You can import Web Components as archives or directly from the Component Exchange associated with your instance. See Web Components in the JET Cookbook for an example of a Web Component.

To view the Web Components that have been imported into your web or mobile app, expand the resource node in the Navigator:



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.

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. The JET version for the current release is listed under Supported Oracle JET Version in What's New in Oracle Visual Builder.

Work with the Component Exchange

The Component Exchange is a repository of components that can be installed in your Visual Builder instance.

Your Visual Builder instance administrator specifies the Component Exchange that is associated with the instance. All developers in the instance are able to use the same set of components. The exchange contains a set of default components that have been provided by Oracle, and any components that other developers have published to your exchange.

The Components tab in the Navigator helps you to install and manage the components that you download from the Component Exchange.



The Components tab has the following tabs for locating and managing components from the exchange:

  • Browse - Use to search the Component Exchange for components that can be installed, to open a component's details page and to install components.

  • Installed - Use to view a list of installed components. The tab displays details about each component, and components are badged to indicate warnings or available updates.

  • Updates - Use to view a list of available updates and to update components to the latest version.

Get Components From the Component Exchange

If your administrator has associated your instance with the Component Exchange, you can use the Components tab in the Navigator to add and manage those components.

To add a component from the Component Exchange:

  1. Open the Components tab in the Navigator.
    Alternatively, in the Components palette in the Designer you can click Get Components in the Options menu, or click the Search Exchange button that is displayed in the palette when you use the palette’s filter field.
  2. Locate the component you want to install and click Install.

    You can click the component in the Components tab to open a tab containing details about the component, including a description and examples of how to use the component.



After you install the component, it's added to your Components palette. You can now drag the new component onto the canvas and use it in your pages.

Update a Component from the Component Exchange

When a newer version of an installed component is available, you can install it in the Updates tab in the Components pane. You'll know an update is available when you see a notification in your browser window or a badge over the Components icon in the Navigator.

To update a component from the Component Exchange:

  1. Open the Components tab in the Navigator.
  2. Open the Updates tab in the Components tab.

    If you installed a component that is part of a pack, the Updates tab displays the name of the pack containing the newer version of your component.



  3. Click Update All to install all updates available for installed components.

    To update an individual component, click the component's name to open its detail page, then click the Update button.



    If the installed component is not compatible with the JET version in your Visual Builder instance, you'll see a notice to that effect.

Uninstall a Component

When you no longer want to use an installed component in your application, you can uninstall it to remove it from your Components palette.

To uninstall a component:
  1. Open the Components tab in the Navigator and locate the component you want to uninstall.

    If you know the name or details about the component you can use the Search field to filter the list of components.

  2. Click the component to open the component's details page.
  3. Click Uninstall Component in the details page.

Import a Web Component Archive

If you want to use a Web Component but it is not available in your Component Exchange, you can import the component as a ZIP archive. For example, if you want to use a component that your team member is currently developing, they can give it to you as an archive so that you can try it in your application.

To import a custom Web Component archive:

  1. Open the application into which you want to import the component.
  2. Open a page in your application in the Page Designer.
  3. Locate the Custom section in the Components palette and click Import Custom Component ( Import Custom Component icon ).
  4. Upload your ZIP archive in the Import CCA Component dialog box. Click Import.

    You can add the ZIP archive by dragging it into the upload area or clicking the area and locating the file on your local system.


    Description of page-designer-component-import.png follows
    Description of the illustration page-designer-component-import.png

The imported Web Component is displayed in the list of components in the Custom category of the Components palette or in the category specified by the component’s metadata. After importing the Web Component, you can position it in your page and configure its properties in the Property Inspector as you would a standard component.


Description of page-designer-component-custom-imported.png follows
Description of the illustration page-designer-component-custom-imported.png

Create a Web Component

Oracle JavaScript Extension Toolkit (JET) Web Components are reusable pieces of user interface code that you can embed as custom HTML elements. You can create a Web Component from a template that comes with Visual Builder.

When you use the Create Component dialog box to create a component, the new component contains the JavaScript, HTML, stylesheet and JSON files required. The files contain sample code to help you get started. After you create the Web Component, you can click the component artifact in the Navigator to edit each of the component’s files.


Description of component-editor.png follows
Description of the illustration component-editor.png

To create a Web Component:

  1. Expand the Resources node of your web or mobile application in the Navigator.
  2. Click Create Component ( Create Component icon ) next to the components node.
  3. Type the ID for the component in the Create Component dialog box. Click Create.
The new Web Component is displayed under the components node in the Navigator.