Components

Components are a form-based type of reusable content used to simplify entering information into complex design elements. When a component is placed on a page, it acts as a form for page editors to enter information into. Then, that information is placed in the source code of the component and added to the page. 

Much like MultiEdit, with Components page editors are restricted to entering specific kinds of content, and the formatting is done "behind-the-scenes." This makes it easier for editors to change the information in design elements with many moving parts, such as slide shows, info cards, and more. Components are like assets in that changing the original item will affect the pages it is placed on, but also like snippets in that they allow for on-page editing. 

Components are not available for use while using the Classic WYSIWYG editor. Only Level 10 users have access to making and editing components.

There are two parts to creating a component: the form elements, made using an editor like LDP Forms; and the source code, which renders the information entered into the form on the page. Once created, the component is launched, making it available for use on pages.

A component can be placed on multiple pages. Additionally, a single component can be placed multiple times on the same page, with each instance storing its own unique content. Components can be added into pages and include files. 

Bear in mind that since components are HTML-based, you may have to set up additional CSS in your resources to style your components the way you want.

Making Components

To make a new component: 

  1. Navigate to Content > Components.
  2. Click the green +New button in the top right corner.
  3. Enter a name for your component and click Create.
  4. You are now viewing the Form Elements. Like making an LDP Form, you can drag and drop various elements to create a form for users to fill out. Each item has “Element Settings” and “Advanced Settings.”
    Form Elements for a Component
  5. Now that you have your form elements selected, it’s time to determine how it will render on a page. Select Source from the components toolbar. 
  6. In the text field, enter the source code into which the answers that editors put into the component’s form fields will be inserted. This can be as simple as <p></p> tags for text to be plugged in to.
    Source Editor for Components
  7. From the “Form Elements” menu on the side, drag elements into the code. When the component is placed on a page and information entered into a field, that information will then be plugged into the source code in that location.
  8. Click the blue Save button at the bottom of the page.

The final step is launching a component. This makes it “live” for use on pages in OU Campus. Unlike publishing a page, this does not push any data to the production server. To launch a component, either:

  • From Components List View, hover over the component and select “Launch.”
  • While editing a component, select the green Launch button at the top of the page.

For more detailed instructions on creating and launching components, including references for all form elements, visit the Creating and Editing Components and Launching Components pages.

Placing Components on Pages

Components are only available for use while editing pages in JustEdit. If you are using the Classic Editor, a component will display as a blue pill and cannot be edited, and is not an option in the toolbar.

To add a component to a page:

  1. Navigate to a page that you would like to insert the component on and open an editable region.
  2. Select “Insert Component” (An atom icon) from the WYSIWYG toolbar. 
  3. From the file chooser, select the component you want and click Insert.

    Component Filechooser
  4. If desired, fill out the component fields. Any required fields must be filled out to place the component on the page.
    Filling Out Component Form
  5. Click Save. The component will now be placed on the page in the editable region, with your answers placed into the code.
    • If the component is set to "Display preview in the WYSIWYG," you will see component content.
    • If it is set to not display a preview, it will appear as a blue pill.
  6. Once you have saved the component, save and publish the page for changes to appear on the live site.

Whether a component previews on a page or displays as a blue pill, clicking on the component brings up two options: to edit the component (pencil icon) or delete it ("X" icon).  

In the source code of the page, the component displays with its component ID, version number, and the form content. Data entered into components is stored in the page, and is affected by page version reverts.

Components List View

Navigating to Content > Components takes you to a list of all components in the site. 

Components List View

 

From this view components can be filtered by name. They can also be sorted by name, last saved date, and last launched date. 

Hovering over a component brings up different menu options, including Edit and Launch. For more information on these, including component access settings, see the Managing Components page.