Reference

Basic Info

The Reference component allows you to easily reuse content across multiple pages without having to update it each location. When content is updated in the original component, all references are automatically updated as well.

Example

The above content is referenced from the Component Tutorials landing page.

Tutorial

  1. Navigate to and open your page.
  2. Add the Reference component.
  3. A new Reference component without content will appear on the page as a placeholder icon with an arrow.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. An edit window will appear so you can locate the component you want to reference on your page.
  6. In the Reference field, click the down arrow.
  7. A new window will appear containing a site hierarchy similar to the left-hand Navigation Pane of the Site Admin. Locate the page that contains the component you want to reference by clicking on the +/- icons to expand the navigation tree.
  8. Click once on the page you want to reference so that it's highlighted in green.
  9. Small previews of the available components that can be referenced will appear on the right-hand side of the window.
  10. Click on the preview of the component you want to reference so that it's highlighted in red.
  11. Click Select.
  12. Click OK.

^ Back to top

Create a Hidden Reference Page

When using the Reference component it is important to know where the original version of your content is located. This will make it easier to update content, reference on other pages, and prevent accidental component deletion.

If your department has several references that are used often, we recommend creating a hidden page where all of your referenced content can live. This way when you need to update or reference content, you only have to go to a single page.

  1. Create a new page.
  2. Hide the page in navigation.
  3. Add components to your page to reference.
    1. Note: Do not relocate content on your page into different column spaces after they have been referenced, this will cause the reference to break and layout errors to occur on any pages referencing your content.
    2. Note: Do not reference another reference as they are difficult to manage and may cause errors in the layout display.
  4. Activate your page.

^ Back to top

Update Broken References

Broken references cause layout problems with the page footer. A partial version of the footer may appear on the side of the page or the footer may no longer extend to the full width of your browser window. If you notice either of these things occurring to the footer while on one of your pages, then your page contains at least one broken reference that needs to be updated or deleted.

Broken references may occur for any number of reasons:

  • The referenced component no longer exists on the original page;
  • The referenced component has changed locations within the original page;
  • The page containing the referenced component is no longer active; or
  • The page containing the referenced component no longer exists.

^ Back to top

Screenshots

Select paragraph directory list

Select a component to reference by first clicking the down arrow in the Reference edit window. Then navigate to the page containing the component you want to reference using the "Select paragraph" option, just as you would locate a page in Site Admin.

Selecting content to reference

After you've selected your page, previews of available components to reference will appear on the right-hand side of the component. Click once on the preview for the component you want to reference and then click "Select."

Example of a page with a broken reference

Pages that contain broken references will also have footers that appear distorted. If a partial footer appears on the side of the page or if the footer does not extend to full width of your browser window, then the page you're viewing contains broken references.