Add a Component to a Page

You add a component to a page usually by dragging it from the Components palette in the Page Designer and dropping it onto the canvas or in Structure view. After the component is added to the page, you can set its properties and apply styling.

The Components palette contains an extensive list of Oracle JET components that you can add to your page, including dynamic components. Because dynamic components help you develop UIs that dynamically change what's displayed to users based on your own rules, working with them also involves layouts and display logic. See Add Dynamic Components to Pages.

Visual Builder also gives you access to Redwood resources based on the Oracle standard for user experience. If you create a page using a Redwood pattern, the components of that pattern become available to you in the page's Components palette. You also have access to individual Redwood components that provide a rich user experience—from single UI elements, such as a button, to complex modules connected to backend services, such as a form—but you must install them from the Component Exchange before you can use them in your page.

Note:

If you'd like to use the next generation of JET components, known as Core Pack components, you can opt to show them in the Components palette under an Early Access category. Core Pack components provide new implementations that can improve performance, but do not support theming. If you use these components in your app's pages, you cannot theme your app. The only way to apply themes then is to roll back Core Pack component usage to Legacy components and re-implement your application. Be aware of this limitation before using Core Pack components in your app's pages.

If you want to use Redwood components in your page, follow these steps:
1. Explore the Redwood component library and take note of what you'd like to use in your page.
2. Open the Components tab () in the Navigator.
3. Select the Browse tab and search for the component you want to use. For example, you might use "redwood input phone" to look for the Input Phone Number component:
  
  Description of the illustration redwood-browse.png
  
  You can double-click the component to open it in the canvas area and learn more about it.
4. Click Install (or Install Component in the canvas).
  
  Once you install a component, it will become available to you in your page's Components palette. Simply filter to find the component.
Open the page you want to work with in the Page Designer.

When the page opens in the Page Designer, you'll see a canvas used to display the page’s layout, a Components palette containing a list of components, and a Structure view that displays a structural view of the page’s components. You'll work primarily with these, though you can switch to the Data palette to display data in components suggested by Visual Builder.
Drag the component from the Components palette and drop it into position on the canvas or in the Structure view. It is sometimes easier to locate, select, and position components in the Structure view:

Description of the illustration page-designer-component-add-designmode.png

Elements in the Components palette are organized by type. For each type, there are some rules that determine where they can be used on the canvas, as well as the types of pages where they can be placed. An error message will be displayed if you try to place a component on the canvas where the component is not allowed.

Tip:
You can also add a component by clicking Insert Component in the context menu. This option is available when you right-click anywhere on the canvas and in Structure view, both with and without a component selected. It's most useful in Structure view, especially in complex layouts, to help you position the component exactly where you want to add it. When you choose this option on a selected component, you'll be able to add a component before, inside, or after the selected one. If the selected component has multiple slots, you will have the option to drop the component into a particular slot as shown here:

Description of the illustration insert-component-structure-view.png

After adding the component, you can define its behavior by editing properties that show in the Properties pane when the component is selected. Component properties are organized in tabs in the Properties pane. The component type will determine the tabs that show.

Component Properties	Description
General	Contains the most important properties of the selected component, such as layout and style. The slot value of a component inside a parent component's slot also shows here. Select the sub-component added to a slot (for example, a button's icon) and change its slot value to move it from the `startIcon` slot to the `endIcon` slot. This way, you can modify the slots of dropped components without accessing the HTML code. The slot used by the sub-component is also visible in the sub-component's All tab and can be modified there (for example, to bind it to a variable).
Data	Contains properties that are expected to be bound to data. The General tab and All tab also contain properties that can be bound to variables and expressions. See Bind a Component to Data.
Events	Used to bind a component’s events to trigger action chains that define its behavior (for example, to open a URL when a button is clicked). See Start an Action Chain From a Component.
All	Contains more advanced component properties and shows all properties, including custom properties. Custom properties are those not defined in component metadata, for example, `data-`* attributes, and can be added by clicking + next to General Attributes.
Quick Starts	Contains a list of Quick Start wizards available for the component. When you add a collection component such as a table or list, this tab contains a list of wizards to help you add some actions that are typically associated with the component, such as mapping the collection to data and adding Create and Detail pages.