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.
To create a new component:
- Navigate to Content > Components.
- Click the green +New button in the top right corner.
- In the popup, enter a name for your component and click Create.
You are now viewing the form elements for your new component.
Both form elements and source are edited for existing components in exactly the same manner as creating a new one. Components must be checked out for you to edit them.
Access the form elements of a component by either:
- In Content > Components, hover over a checked-out component and select Edit > Form Elements.
- While viewing a component, click "Form Elements" in the top toolbar.
To add form elements to a component:
- Either select an element from the left-hand menu or drag-and-drop it into the space on the right.
- When a new element is added, a box pops up where you can configure it. The available elements are:
Each element has two tabs, "Element Settings" and "Advanced." Depending on the element, not all of the fields below are available.
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.
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.
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.
- Once added, elements can be edited by clicking the pencil icon, copied by clicking the two pages icon, or deleted by clicking the "x."
- Once you have finished configuring the elements, click the blue Save button at the bottom of the page.
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.
Access the source code of a component by either:
- In Content > Components, hover over a checked-out component and select Edit > Source.
- While viewing a component, click "Source" in the top toolbar.
To configure the source code of an element and add form elements to it:
- On the left-hand side, choose whether 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.
- In the right-hand window, write the source code that provides the structure of the component. Components are designed to use HTML syntax. Because of how OU Campus works, a component must be valid XML, or else it causes a transformation error on any pages it is placed on.
- Once you have typed out the source code, drag the elements from the left and drop them into the source code, where they are labeled in blue.
When someone fills out the component on the page, the answer for each element is dropped into the source code where the element is placed.
- An element can be added to the source code multiple times. This duplicates the element answer wherever it is placed in the code, not allow for unique answers for each element location.
- Click Save to finish.
Once your component is finished, click the green Launch button to make it available for use on pages. Launching an edited component that already exists on pages may require you to resolve conflicts.
Bear in mind that for a component to work the way you want, additional CSS in your site design files may be required.
Properties are accessed by clicking "Properties" in the top toolbar of a checked-out component. There are three items: component settings, access, and log.
Component settings includes the Name and Tags for the component. You can also select whether the component is available account-wide, or restrict it to certain sites.
Access lets you select which group the component is available to. This restricts who can place the component on a page. However, it does not affect who can enter information into the component once it is on a page