Skip to content
Penn State University Libraries

CMS Manual

Advanced Topics

Top
 

Slideshow

Slideshow

 

This component allows you to load a series of images to be displayed as a slideshow on your page.  To load an image into the Slideshow or Carousel, you must upload the picture to the DAM first.  After the image has been loaded, right click on the image in the CMS and select Open.  From here you can add:

  1. Set the alt-tag (this is done by filling in the title field when opening the image in the DAM)
  2. Link the image to a URL (Use the URL field when opening the image in the DAM)
  3. Add a description or title to the image.

Finally, activate the image. 

 

Adding an Image to the Slideshow

If you are editing the Libraries Homepage Slideshow(Carousel), open the specific home page for your Library and select edit above the componet to add images, then jump to step 3 below.

To add a Slideshow to your page:

  1. On the sidekick, expand the PSUL section, find PSUL 347x222 Slideshow and drag it to the area of your page where you wish it to appear. (For now all you will see is a blue bar.)
  2. Click the Slideshow's Edit button.  A window appears.
  3. Click the Slides tab.
  4. For each slide you want to add:
    1. Drag an image onto the Drop an image area.
    2. Use the Title field to provide a title for the slide.  This will be used for accessibility purposes.
    3. Click Add. (Note: Images can not be re-ordered.  You must remove the slides and place in any new order or leave blank slides as "placeholders" for future images.)
  5. For each slide you want to remove, locate the slide from the dropdown menu and click Remove.
  6. Click OK. The slideshow component then repeatedly displays each in sequence, for a short period of time.

Note: Recommended images dimensions are 347x222px

 

 

 

 

 

Flash

screen shot of the flash element
Flash Component

The Flash component lets you load a Flash movie. You can drag a flash asset from the Content Finder onto the component, or you can use the dialog:

  • Flash movie: The flash movie file. Either drag an asset from the content finder, or click to open a browse window.
  • Size: Dimensions in pixels of the display area holding the movie.
  • Alternative Image: An alternative image to be shown
  • Context menu: Indicates whether the context menu should be shown or hidden.
  • Window Mode: How the window appears, for example opaque, transparent, or as a distinct (solid) window.
  • Background color: A background color selected from the color chart provided.
  • Minimum version: The minimum version of Adobe Flash Player required to run the movie. The default is 9.0.0.
  • Attributes: Any further attributes required.
Top
 

Chart

screen shot of the chart component in CQ
Chart Component

The Chart component lets you add a bar, line, or pie chart. CQ5 creates a chart from the data you provide. You provide data by typing directly into the Data tab or by copying and pasting a spreadsheet.

  • Chart Data: Enter your chart data using the CSV format; the Comma Separated Values format uses commas (“,”) as the field separator.
  • Chart Type: Select from Pie Chart, Line Chart, and Bar Chart.
  • Alternative text: Alternative text that displays instead of the chart.
  • Width: Width of the chart, in pixels.
  • Height: Height of the chart, in pixels.
Top
 

Download

Screen shot of the Download element, example with a pdf
Download Component

The Download component creates a link on the selected web-page to download a specific file. You can either drag an asset from the Content Finder or upload a file.

  • Description: A short description displayed with the download link.
  • File: File available for download on the resulting web-page. Drag an asset from the content finder or click the area to upload the file to be available for download.
Top
 

Forms Components

All forms are located in the Secure -> Forms folder under the University Libraries Home in the CMS.  Inside the Forms directory is a subfolder for each library and department. 

Note: You must first request access from the CMS team before working with Forms.  Also, you will only have access to the forms templates from a location within the Forms folder and you will only have access to the forms components from a forms template.

When you create a forms page, you will choose from one of two page templates specificially for forms, Forms Navigation or Forms Open.

 

The table lists all Forms components that are available from within the Sidekick and when inserting a new component.
Title Purpose PSUL Forms Component Equivalent Element in CQ4
Form The start and end components required for a form definition. Begin form/Submit button
Address Field A complex field allowing the input of an international address. None
Checkbox Group Multiple items organized into a list and preceded by check boxes. Users can select multiple check boxes. Checkbox(es)
Dropdown List Multiple items organized into a drop-down list. The Multi Selectable switch specifies if several elements can be selected from the list. Dropdown menu
Radio Group Multiple items organized into a list preceded by a radio button. Users must select only one radio button. Radio button(s)
Text Field Text field that allows users to enter information. Text field
Top
 

Form

Screen shot of the Form Component window
Form Component

The Form component defines the beginning and end of a new form on a page. Other components can then be placed in between these elements,such as tables, downloads, and so on.

To add a form to your page:

  1. Drag a Form component onto your page.  All you will see are two blue edit bars: Start of Form and End of Form.
  2. On the Start of Form bar, click Edit.
  3. From the Form Start tab, choose the Action Type, "Mail". (See table below for details.) 
  4. If several forms are used on a single page, use the Form Identifier field. The form identifier can uniquely identify the form.
  5. Optional: If validation is required for this form, check the Client Validation checkbox. (This can be achieved in conjunction with the Forms Captcha component.)
  6. Optional: If you would like to load predefined values into the form fields, use the Load Path field. This is an optional field that specifies the path to a node in the repository. When this node has properties that match the field names, then the appropriate fields on the form are preloaded with the value of those properties. If no match exists then the field contains the default value.
  7. Click on the Action Configuaration tab.  These fields depend on which Action Type you choose.  (See table below for details.)
  8. On the End of Form bar, click Edit.  You will see the Form End tab.
  9. Check Show Submit Button.
  10. Optional: If several forms are used on a single page, use the Submit Name field. This field can uniquely identify your submit button.
  11. In the Submit Title field, enter the text you want on the submit button, eg. Submit, Enter, OK, or Send.
  12. Optional: If you'd like a reset button to appear on your form, check Show Reset Button.
  13. In the Reset Title field, enter the text you want on the reset button, eg. Reset or Clear.
  14. Click OK.
  15. Insert other desired forms components between the Start of Form and End of Form bars.
Forms: Mail Action Type
Action Type Description Action Configuration Fields
Mail Sends the form contents to an email address that you specify.
  • From: Enter the email address that the email should come from.  Use UL-webforms@psu.edu if a alias is desired.
  • Mailto: Enter the email address of the person to send the form to.  Only place one email address per field.  Use UL-webforms@lists.psu.edu if a alias is desired.
  • Subject: Enter the subject for the email.
  • RedirectURL: The redirect path points to a page that is invoked when a form is successfully submitted.
  • Thank you Page: The page to be referenced for thanking the visitor for their input.

    Note: For Listservs, you can't use the same Listserv in the To and From address
Top
 

Address Field

The Address Field component allows you to input an international address with the following fields: First Name, Last Name, Street Address 1, Street Address 2, Zip Code, City, and Country.

The component is configured for immediate use. Leaving fields empty will use default settings:

  • Element Name: A unique identifier for the component.
  • Title: A title for the component.
  • Description: A description.
Top
 

Checkbox Group

Sreen shot of the Checkbox Group Component window
Checkbox Group Component

A Checkbox Group allows you to build a list of one of more checkboxes, several of which may be selected at the same time.

  • Element Name: A unique identifier for the component.
  • Title: A title for the component.
  • Description: A description.
  • Items: A list of checkbox items.  Using the + and - buttons you can add or remove items, then position them with the Up and Down buttons.
  • Default Values (optional): A set of values checked by default.
  • Required (optional): Makes the checkbox group required for form submission.
  • Required Message (optional): Text for the error message if the checkbox group is required.
Top
 

Dropdown List

Screen shot of the Dropdown List Component window
Dropdown List Component

A Dropdown List component can be configured with your range of values for selection.

  • Element Name: A unique identifier for the component.
  • Title: A title for the component.
  • Description: A description.
  • Multi Selectable (optional): Allows multiple values to be selected.
  • Items: A list of checkbox items.  Using the + and - buttons you can add or remove items, then position them with the Up and Down buttons.
  • Default Values (optional): A set of values checked by default.
  • Required (optional): Makes the checkbox group required for form submission.
  • Required Message (optional): Text for the error message if the checkbox group is required.
  • Width: Sets the width, in pixels, of the dropdown list.
Top
 

Hidden Field

Top
 

Radio Group

A Radio Group component provides you with a list of one of more radio checkboxes, only one of which may be selected at any particular time.

  • Element Name: A unique identifier for the component.
  • Title: A title for the component.
  • Description: A description.
  • Items: A list of checkbox items.  Using the + and - buttons you can add or remove items, then position them with the Up and Down buttons.
  • Default Value (optional): A value selected by default.
  • Required (optional): Makes the checkbox group required for form submission.
  • Required Message (optional): Text for the error message if the checkbox group is required.
Top
 

Text Field

Screen shot of the Text Component window
Text Component

The Text Field component can be used to configure a text field, of one or more lines, with your own lead in message:

  • Element Name: A unique identifier for the component.
  • Title: A title for the component.
  • Description: A description.
  • Property is a multi value (optional): Allows users to add additional text fields as needed.
  • Only show value: Do not check this.
  • Default Value (optional): A value input by default.
  • Required (optional): Makes the checkbox group required for form submission.
  • Required Message (optional): Text for the error message if the checkbox group is required.
  • Constraint (optional): Validates the user input according to selected format: Date, Email, Name, or Numeric.
  • Constraint Message (optional): Text for the error message if the user input does not match the constraint format.
  • Size: Sets the size, in columns and rows, and width, in pixels, of the field.
Top