Work in Code View

You use the Code mode in the Page Designer to edit a page’s HTML source.

The code editor provides code completion to add Oracle JET components to your page, especially if they're not included in the Components palette. You can also drag components from the Components palette and drop them directly into valid places in the code editor. It's also possible to use standard HTML5 tags to extend functionality.

To add a component to a page in Code view:

1. Open the page in the Page Designer.
2. Click Code to open the page in Code view.
3. Insert your cursor in the code where you want to add the component.
4. Start typing the tag for the component you want to add and use the editor’s code completion to help you add the tag for the component.

   For example, when you start typing <oj in the editor, the code completion window appears with a list of component tags that match the text you type:
   
   Description of the illustration page-designer-component-add-codemode.png
   

5. Select the component in the list. Press Enter on your keyboard to add the tag.

Tip:

Add a component using the code editor's right-click menu, where you can insert a component before, inside, or after an existing component. You can then choose from a list of components, identical to what's shown in the Components palette. If the component you're working with has multiple slots, selecting Insert Component will give you the option of dropping the component into a particular slot, as shown here for a button component:

Description of the illustration code-editor-component-slots.jpg

Once the component tag is added to the HTML code, you can define its properties using code completion. Alternatively, use the Properties pane in Design mode.