Custom component procedure - Fluid Topics

The procedure to configure a Custom component is as follows:

1. Drag and drop the Custom component from the library to the canvas.

2. In the Settings tab, choose when to run the Custom component.

   It is possible to run the component:

   • As soon as the page opens (On creation option).
   • When the component appears for the first time (When first visible option).
   • Every time the component appears (Everytime it becomes visible option).

   The Everytime it becomes visible and When first visible options are well-suited for use in a Modal component.

3. Double-click the component to display an editor with the following panes:

   • An HTML editor
   • A CSS editor
   • A JavaScript editor
   • A preview pane to check results before publishing the component

4. Select the Layout button at the bottom left to display options to change the editor's layout.

5. Select the Inject custom LESS button at the bottom left to apply Less CSS styling as defined in the Theme menu.
6. Select the Run button to update the preview of the Custom component.

7. Save the Custom component as follows:

   1. Select the Save button to save the component.
   2. Select Save and publish to publish the page with the newly configured Custom component.
   3. If desired, select the component on the canvas to display the component shortcut menu, then select the floppy disk icon to save the component as a shared component as follows:

   

   This saves the component for reuse. It is easier to modify a shared Custom component than it is to start with an empty Custom component again next time.