Add a Component Using Code Completion

You can edit a page's HTML directly 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 the code editor.
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. You can also drag components from the Components palette and drop them directly into valid places in the code editor.

   For example, when you start typing <oj- in the editor, the code completion window displays a list of component tags that match the text you type:
   
   Description of the illustration page-designer-code-view.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 select to 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 you want to insert 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.