Import the Oracle JET web component into Oracle Visual Builder

Introduction

Oracle Visual Builder is a development tool for creating responsive apps that run in browsers on desktops and mobile devices. You create an app in Oracle Visual Builder by dragging and dropping components on a page.

You can import Oracle JavaScript Extension Toolkit (Oracle JET) components and Oracle JET web components into Oracle Visual Builder. The components that you import are displayed in the Components palette. The web component that you import appears in the Custom section of the Components palette. You can then drag and drop the web component to a page in your app.

Objectives

In this tutorial, you will import the Oracle JET web component into Oracle Visual Builder.

Prerequisites

Task 1: Download the Web Component

Skip this task if you have completed the previous tutorials in this learning path.

Download and save the demo-update-item.zip file provided in the Prerequisites section to a preferred location in your file system.

Task 2: Access Oracle Visual Builder

  1. Sign in to your Oracle Cloud Account.
  2. Enter your identity domain and user credentials. Click Sign In.

Task 3: Import the Web Component into Oracle Visual Builder

  1. Navigate to your Visual Applications home page and select the web app to which you want to add the web component.

  2. In the Components palette, locate the Custom section.

    Components palette

    Description of the illustration empty-custom-section.png

  3. Click the Import Web Component icon Icon for importing a web component icon.

  4. In the Import Web Component dialog, drag and drop the demo-update-item.zip file to the Drag and Drop area.

  5. Click Import.

    The demo-update-item web component appears in the Custom section of the Components palette.

    Imported custom component

    Description of the illustration web-component-custom-section.png

    If you don’t see the web component in the Custom section, refresh the web browser.

    You can now drag and drop the web component to a desired location on a page of your app in Oracle Visual Builder.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.