Add a Component Using Code Completion

Edit a page's HTML in the Page Designer's Code view, where you can use code completion to add components to the page. 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 by using the code editor's right-click (or context) 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 in the context menu 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.