Creating and Editing Components
Creating a component is a two-step process. First, you must build the form that users will be entering information into when the component is placed on a page. Second, you must create the source code into which the user information will be inserted. This source code is what will format the information on the page itself.
Creating a New Component
- Navigate to Content > Components.
This will take you to Components List View.
- Click the green +New button in the top right corner.
- In the modal that pops up, enter a name for your component and click Create.
- Alternatively, if you are editing an existing component, find it in the list and either click its name or hover and click Edit.
- You are now viewing the Form Elements for that component.
Both Form Elements and Source can be edited for existing components in exactly the same manner as creating a new one. When editing a component, you check it out in the same manner as you do a page, to ensure no other users can make changes to it while you work.
- To add form elements to the component, either select them from the left-hand menu or click and drag them into the space on the right.
- When a new element is added, a modal will pop up. From here you can configure the
element. The modal contains two tabs, "Element Settings" and "Advanced," as well as
a preview of what the element will look like in a component.
For a full list of the elements and their functions, as well as a guide to the tabs, see the Components Form Elements page.
- While in this view, elements can be:
- edited by clicking the pencil icon
- copied by clicking the two pages icon
- deleted by clicking the "x"
- Once you have finished configuring the elements, click the blue Save button at the bottom of the page. You will then be taken back to Preview.
- In the right-hand window, add 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 will cause 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 will be labelled in blue. When a user fills out the component on the page, the information entered for each element will be dropped into the source code where the element was placed.
- An element can be added to the source code multiple times. This will duplicate the information entered into the element to wherever it is placed in the code, not allow for unique answers for each element location.
- On the left-hand side, you can also choose whether your component code is rendered as HTML and previewed on the page. If your component is not HTML-only, this is not recommended. Components that don't preview display as a blue pill with the component name instead.
- When finished, click the blue Save button at the bottom of the page to save your changes.
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. For more information on launching components, visit the Launching Components page.
You can also edit the Properties and view the Versions for a component.
Under the Properties for a 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 which users can place the component on a page, but doesn't affect who can edit the component on a page.
Log shows a history of when the component was created, as well as each time it was saved and launched, and which user performed each action. Log items can be filtered and sorted by date, action, and user.
A version of the component is created each time it is launched. A version can also be manually created via the "Save Version" button in the top toolbar. Versions can be filtered and sorted by version number, date, the user who created the version, and any version description.