By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

Skip to Content

Create and Edit Components

Creating a component is a two-step process. First, build a form that asks for content from the page editor. Second, create the source code into which the content is inserted. This source code is what formats the content on the website page. Only Level 10 users can create and launch components.

This video was recorded in OU Campus v10. While the interface may have a slightly different look, the platform functionalities did not drastically change in the OU Campus 11 release.

To create a new component:

  1. Navigate to Content > Components.
  2. Click +New.
  3. In the "Name" box, enter a name for your component.
  4. Click Create.

You are now viewing the form elements for your new component.

Form ElementsLink to this section

Create and edit form elements, as follows:

  1. In the elements toolbar, click a basic or advanced element.

    Short Text: Creates a one-line text field for content.

    Long Text: Creates a multi-line text field for content.

    Email: Creates a field for text that automatically requires a valid email address.

    Checkboxes: Provides a list of choices from which multiple options can be selected.

    Radio Buttons: Provides a list of choices from which one option can be selected.

    Drop-Down: Provides a dropdown list from which one option can be selected.

    Multi-Select: Provides a list of choices from which multiple options can be selected using Ctrl+Click.

    Date/Time: Provides a date- and/or time-picker.

    Instructional Text: Write instructions to the editors filling out the component. This element isn't displayed on the page and exists only within the component form.

    Source Editor: Provides a source code editor to enter code into.

    WYSIWYG Editor: Provides a mini-WYSIWYG editor to enter and format text in.

    File Chooser: Editors can select a path to a file or page. An external link can also be pasted in.

    Image Chooser: Editors can select an image.

    Asset Chooser: Editors can select an asset (plain text, web content, or source code only).

    Tag Chooser: Provides a field to type tags into.

  2. In the "New" box, enter information in the form elements fields, as follows:

    Label (required): Provide a name for the element indicating its function (e.g. Image, Email Address, Description, etc.).

    Helper Text: Provide instructions to the user filling out the component.

    Placeholder Text: For text-based elements, provide example text in the field.

    Required Field: Indicate whether filling out the element is required or not.

    Minimum Length: For text-based elements, determine the minimum number of characters an editor must provide.

    Maximum Length: For text-based elements, determine the maximum number of characters an editor can provide.

    Items: For elements with preset answers (checkboxes, radio buttons, drop-down, and multi-select), enter each answer as a separate item. Items can be:

    • reordered by clicking and dragging the arrows on the side
    • pre-selected by checking the box on the left
    • deleted by clicking the "x" on the right
    • added by clicking the green +Add button

    Format: For the Date/Time element, choose between "Date and Time," "Date Only," and "Time Only."

    Mini-WYSIWYG: The Instructional Text element provides a mini-WYSIWYG editor for writing instructions to the user.

    For the "Advanced" tab to be available, the element must have a defined label. Additionally, any element that requires items (such as radio buttons or drop-down) must have at least one item. Source and mini-WYSIWYG elements don't have an "Advanced" tab.

    Display Name/Value: For elements with items (such as radio buttons or drop-down), pair the name of the item that the page editor sees with the value that is inserted into the component code when that item is selected.

    Validate with Regular Expression: For text-based elements, choose whether text entered into the field will be validated by regex. If "Yes" is selected, set the regex and error message.

    Rows: For the Long Text element, set the number of rows for the text field.

    Default Date: For the Date/Time element, set the default date that will be entered.

    Default Time: For the Date/Time element, set the default time that will be entered.

    Toolbar: For the WYSIWYG Editor element, select a custom toolbar to be used.

    Starting Location: For the File and Image Chooser elements, define the folder where the file chooser will open in.

    Available File Types: For the File and Image Chooser elements, define a file type to limit the user choices by entering its extension (e.g. png, jpg). If this field is used, any file types not specified will be excluded. For the Asset Chooser element, select the type of asset from the dropdown menu.

    Locked to Path?: For the File and Image Chooser elements, select whether users choosing a file will be able to navigate above the current folder or not.

    Default Server for Files: For the File and Image Chooser elements, select whether the file chooser will look in the staging or production server by default.

    Available Assets by Tag: For the Asset Chooser element, restrict the assets available to users by adding one or more tags.

    Fixed Tags: For the Tag Chooser, set fixed tags that will be applied no matter what.

    Filtered Tags: For the Tag Chooser, set tags or a collection from which users will be able to apply tags.

    *Availability based on element type

  3. Click Save.

Next, create the source code into which the form content is inserted.

Source CodeLink to this section

Want to make a component but don't know how to write source code? Build out the design of what you want your component to look like in the WYSIWYG Editor first. Then, copy the source code of that element and paste it into the component.

Create and edit source code, as follows:

  1. Click "Source" tab.
  2. In the source toolbar, select a radio button to "Display preview in the WYSIWYG."
    • If "Yes," the component preview is rendered on the page. This is intended for HTML-only components.
    • If "No," the component displays as a blue placeholder.
  3. In the source editor, write the HTML code to structure the component.
    • A component must be valid XML to prevent transformation errors on pages it is placed on.
    • Additional CSS in your site design files may be required.
  4. Drag form elements from the source toolbar to the source editor.
    • Adding an element multiple times does not allow for unique content, rather it duplicates the element content in each location.
      The components Source tab with toolbar and editor.
      Form elements placed in the source editor.
  5. Edit the settings for the component in the "Properties" tab.
  6. Click Save.
  7. Click Launch to make the component available for use on pages.

 Link to this section