OU Campus Training Part 2________________________________________________________________________________________

To know before you start You will be working in a development directory called Omnidev. You will be publishing your test files to the directory Omnidev on WWW.

OU Campus VocabularyWidget A Widget is a piece of content that has formatting built in and can be placed on one page, several pages, or repeated throughout the site.

Example: Contact Us Widget for page Sidebar.

SnippetA Snippet is pre-built code users can place on a page that structures the content area for you – you can add your own content.

Example: An Accordion Snippet to allow expandable headings for page topics, such as FAQ topics.

AssetAn Asset allows you to create and manage reusable content in one location and place that content on an unlimited number of pages.

Example: An evaluation form that is placed on multiple department pages and the URL changes each semester.

GadgetGadgets are shortcuts to additional tools provided in OU Campus.

Example: Request Help Gadget for submitting a ticket to Web Support.

Before You Begin As you navigate the breadcrumbs for your training files, ignore any links to the left of your training

directory. The training-files-[number] directory is your “root” directory. The root level index.pcf file is the home page for your site. Subsections, such as current-students, also

have an index.pcf page as the “home page” for that subsection.

Exercise: Creating Part 2 Training Pages

1. Open a browser and navigate to your Part 1 training directory (example is www.unco.edu/omnidev/_train/phase1/march15-session1/training-files-01)

2. Click on the Content tab of the Global Navigation Bar3. Click on New and choose Subsection from the resulting choices4. In the New Section modal, type in “current-students” for the Directory Name5. The Friendly Name is Current Students

1

6. The Subsection Index Page Title is Current Students7. Type in “Information and forms for current students in the [insert your department name here]”.8. Type in “forms, information, UNC, [department name]” for keywords9. Click the Create button

Using Widgets A Widget is a piece of content that has formatting built in and can be placed on one page, several

pages or repeated throughout the site. It’s like a little tiny page. You create it first, PUBLISH IT, then choose it on the Page or Subsection.

The order of the Widget in the page parameters determines the placement. Keep the Widget content and structure consistent if it’s on multiple pages. Contact Us Widget is automatically included in your Widget folder. You’ll create the Widget first and then go back into the Page Parameters to “tell” your Page to use it or

go into the _props file to tell your section to use it.

Tip: Remember to turn on the right sidebar in every page that uses a Widget. Remember to publish the widget right away – you can only see the widget as a choice in your

_props file widget selection field if the widget has been published.

Examples of Widgets Bottom Row Widget: www.unco.edu/campuscommons/ - Support call to action at bottom of page Side Contact Widget: www.unco.edu/websupport/

Exercise: Creating a Widget

1. Navigate through pages-list (Content > Pages) to Widget folder2. Select “New” 3. Double click the Contact-Us Widget 4. Name the Widget contact-us-test in “Filename” line5. Leave all other info alone6. Click “Create”7. Click orange “Multiedit” button8. Fill in information 9. Click “Save”10. Click “Publish” button to publish Widget

Exercise: Turning on a Widget in a Subsection and its pages

1. Select _props.pcf file in the Current Students Subsection 2. Check out File (lightbulb should be yellow)3. Select Properties > Parameters4. Navigate to the Widgets folder 5. Select Browse icon to select contact-us-test Widget 6. Once Widget is selected click “Choose File”7. Click “Save”8. Preview the page to see the widget

2

9. Navigate to Current Students/index.pcf and click on the Properties tab (make sure the Page is checked out)

10. Scroll down to the Sidebar Content and turn the Right Sidebar Region on11. Save the Parameters Page12. Navigate to the Current Students/index.pcf page and click on the Preview tab to see the Widget.13. Publish the Page

Summary steps

1. Create the Widget2. Publish the Widget3. Choose the Widget in the Subsections _props file (check out the _props file)4. Turn on the Right Sidebar Region on each Subsection page you want to display the Widget

Props file controls: Section Title is what the breadcrumb displays, such as About Us. Section Sidebar Widget allows a Widget to display on all pages in the Subsection without the need

to add it manually to each page. Do not change the Section Resources settings.

Tip: Be sure to check out the _props file to see the Page Parameters – even the _props files have Page Parameters.

Tip: The _props file controls all pages in the subsection. Tip: The Page Parameters control elements on a single page.

AssetsExample of an Asset: A university-wide slogan, such as “Transforming Lives” used for a Capital Campaign, inserted on many page and changed periodically. It can be updated from one file and every page picks up the change.

Assets allow you to create and manage reusable content in one location and place that content on an unlimited number of pages.

Before an asset can be viewed on the page in Preview mode, it must be published. It is important to add tags to assets to allow the assets to be easily found in the asset list. When as Asset is changed, all pages not checked out are automatically republished. Check out pages

must be published manually. When an Asset is created, it can be:

o Locked to just the site you are in.o Restricted to a specific OU Campus group for editing.o Available for use by a specific OU Campus group for inserting into a site.

o Note: Groups are created when the Site is initially built to establish permissions into sites.

3

If an Asset is available for your use, you can see the Edit, Preview, Publish, File choices when you roll over the name in the list of Assets. If you can’t see these choices, the Asset is restricted.

Exercise: Create an Asset

1. Navigate to Content > Assets using the Global Navigation Bar2. Select the green “New” button 3. From the New Asset options modal, select “Web Content”4. Name Asset: [your-name]-training-eval-form (don’t type in the []’s )5. Type in “Training Evaluation Form”6. Add tags of “training asset”7. Leave Access settings

In the future you can restrict this asset to be specific to your group.8. Type in these words: “At the end of your internship, please complete the Fall Semester Evaluation

Form” and highlight the words “please complete the Fall Semester Evaluation Form”9. Click on the insert/edit link icon10. For the purpose of this exercise we will insert www.unco.edu for the “please complete the Fall

Semester Evaluation Form” link URL; it would be a Qualtrics URL in real life11. Click Create12. Click Publish

Exercise: Insert Asset

1. Navigate to Page you want to insert the Asset ona. Open “current students” subsection and select the index.pcf page

2. Click green “Content Region” edit button 3. Select “Insert Asset” icon from the JustEdit Toolbar4. Search for the Name of the Asset: : [your-name]-training-eval-form

4

5. Select the Asset and click “Insert”Remember: The Asset won’t display properly until you have clicked “Save and Exit” icon in the JustEdit Toolbar and published the asset

6. Save and Exit and select “Publish”7. Preview the Page __________________________________________________________________________________

Image Galleries Image Galleries are first created and published as an Asset and then inserted into a Page region. Both Editing and Access to the Image Gallery can be set to a certain Group, this means you could create

an Image Gallery editable and usable only by your department. It is important to use images of the same aspect ratio such as horizontal 2:1, vertical 1:3, etc. for a

quality Image Gallery. Choose all vertical or all horizontal images; don’t mix and match. Remember that each image has a 500K file size limit. Images should be edited outside of OU Campus so they can be optimized for the web to reduce file

size. Images added to the gallery are uploaded from your desktop or other external location, not the OU

Campus images folder, and are automatically saved to a restricted directory on the Production server.

Types of Image GalleriesAfter an Image Gallery Asset has been built, it can be displayed in one of three ways:

1. Sliding images with titles or descriptions2. Sliding images with thumbnails3. Sliding images only, no thumbnails, titles or description

Examples of Galleries: http://www.unco.edu/websupport/webstyleguide/components/galleries.aspx

The type of Image Gallery displayed on the page is set in the Page Parameters. Thumbnail Galleries are best used when you have seven or more images (depending on the width

of the row) since the thumbnails run across the bottom of the Gallery. A Caption or Image Slider Gallery is best used when you have two to five images with or without

descriptions. You can choose either thumbnails or captions, not both.

Exercise: Create Image Gallery

1. Navigate to Content > Assets using the Global Navigation Bar 2. Select the green “New” button 3. Select “Image Gallery” from the Asset Options modal 1. Name the Asset: “training-gallery-your name”4. Add Description and Tags 5. Leave Access Settings as they are

In the future you can restrict this Image Gallery to be specific to your group. 6. Leave Gallery Options as is and select Create

5

7. Click Add buttons to select all three images from desktop-OU Campus Images folder to add to gallery (or drag and drop from your desktop)

8. Add a Description to each image, leave Title and Caption 9. Click “Create”, then Publish the Image Gallery

Exercise: Insert Gallery

1. Navigate to the page you want to insert the Image Gallery and edit the Page Parameters a. Open current-students/index.pcf page, click on the Properties-Parameters in the Page Action

toolbar and turn on Content Row 2, one columnb. Under Gallery Type, choose Image Gallery (with captions, no thumbnails)

2. Save the Parameters3. Click on the Edit button in the Page Action toolbar4. Click on the Content Region in the second row5. Add the Heading “UNC students are full of Bear Pride”, highlight the phrase and select Heading 2 from

the paragraph dropdown in the toolbar6. Move your cursor below the Heading you just created 7. Select Insert Asset icon from the JustEdit Toolbar8. Search for “training-gallery-your name”9. Select the Gallery and click Insert

Remember: The Image Gallery won’t display properly until you have clicked ‘Save and Exit’ icon in the JustEdit Toolbar

10. Save and Exit, and click Preview11. To view the Thumbnails Choice:

a. Click on the Page Parameters for the Current Students pageb. Scroll down the Parameters Page and choose Image Gallery with thumbnailsc. Click Saved. Preview page

6

Tip: There are many ways to structure the Image Gallery, view the Web Style Guide at www.unco.edu/websupport/webstyleguide to view options.

Tip: Three, four or right sidebar columns are too narrow to display Galleries in a quality way. Note there is a fourth Image Gallery choice of Content Slider in the Snippets choices; this Gallery has

attached descriptions to the left of the image that change as each image slides through.

Video Video can be inserted into the page the same as an image can. You only need the URL, not the embed code The video image will adjust to the width of the container (row or column)

Exercise: Insert a YouTube video

1. Click on the first editable region in your current/index.pcf page

2. Click on the insert video button t in the JustEdit toolbar 3. In the resulting modal, paste the URL of a YouTube video you want to display.

a. We will use https://www.youtube.com/watch?v=IUp4eTjlT5E 4. Leave all other information alone5. Save the page6. Preview the Page.

____________________________________________________________________________________________

SnippetsSnippets are another type of editable content in OU Campus. Snippets can be placed into any editable region inside OU Campus, and when inserted, the Snippet code becomes part of the page’s HTML.

Examples of Snippets: http://www.unco.edu/websupport/webstyleguide/components/snippets.aspx.

When you insert a Snippet, it creates a table with cells for entering content. The table is stripped away when you save the page, it is just a convenient way to enter content. The phrase “Press enter to add more content” does not show up in the page, it is a placeholder to

allow you to enter content under the Snippet if needed. The phrase should not be deleted. To add content above an inserted Snippet, place your cursor to the left of the Snippet table and hit the

up arrow. Nothing in the blue parts of the table show up on the page when it is saved. To delete a Snippet, right click and choose delete table. To delete a row or column, select all of the area (it turns blue) and right click, delete row or column. To add a row, place your cursor in the last cell and hit the tab key. Do not delete or move the “Press enter to add more content” statement

Tip: For more details, visit the Web Style Guide.

7

Example of Accordion Snippet: http://www.unco.edu/campuscommons/faq/

Exercise: Inserting an Accordion Snippet

1. Navigate to pages-list (Content > Pages)2. Select the current-students/index.pcf page 3. Click the Content Region edit button4. Delete the placeholder text and keep your cursor in that space5. Click on the Snippet icon in the JustEdit Toolbar

6. Select a Snippet from the Snippets list on the left For this exercise select “Accordion” (which is most commonly used for FAQs)

7. Click blue “insert” button 8. Enter content in appropriate fields

a. For this exercise Under Title type “Topic 1”, “Topic 2” , leave the other rows as isb. Under Content put “Answer to Topic 1”, “Answer to Topic 2”, leave the other rows as is

9. Click “Save and exit” in the JustEdit Toolbar; notice how content is automatically formatted10. Click Publish to publish page

Exercise: Putting a Snippet in a Snippet

1. Click on the editable content region in the current-students.pcf page and position your cursor on the left side of the page

2. Select Insert Snippet icon from the JustEdit toolbar 3. From list of Snippets select “Two Columns” option 4. Click Insert 5. Highlight “Insert Content Here” text in Left Content column and press delete/backspace on your

keyboard6. Click Insert Snippet icon again 7. Select “Equalized Panel” option8. Add text

a. For the purpose of this exercise type: “This is longer content”, hit “enter” twice to create paragraph spaces, type “This is longer content” again

9. Repeat steps 4-6 in Right Content column10. Add text

a. For the purpose of this exercise put: “This is shorter content” – just once11. Click Save and Exit icon in the JustEdit toolbar

Note: How the tables are automatically formatted on the page and no longer display as a table

8

Tip: To delete a Snippet, click into table in edit mode, right click and choose delete table. You can also delete an individual column or row this way.

Tip: To view all snippets, visit http://www.unco.edu/websupport/webstyleguide/components/snippets.aspx.

GadgetsA gadget is a little program that provides additional functionality or quick access to functionality within OU Campus.

You can choose which Gadgets to show or hide on your Dashboard or Gadgets sidebar; some Gadgets are context-specific, meaning that they will only appear when viewing a page or inside an editable region.

Exercise: Choosing a new Gadget

1. Click on Content>Pages to open the index page on the root of your Site2. Open the Gadgets window by clicking on the small plug icon in the upper right side of your OU Campus

window

3. Click on the gear icon next to word Gadgets to open the list of available Gadgets – the modal is called Manage Sidebar

4. Scroll to the bottom of the list and check the box next to the Page Parameters Gadget5. Click on Save

9

Open Gadget

6. Click the down arrow next to word Page Parameters at the bottom of your Gadgets list. 7. Notice you can change and save Page Parameters from this Gadget Window

a. Note: the Page must be checked out to you to see the Page Parameters8. Close the Gadget panel

TablesUse only for tabular data with an X and Y axis and intersecting data.

Example:

This is a true table Fall Spring Summer

Freshman x x x

Sophomore x x x

Junior x x x

Senior x x x

You can request access to this function by submitting a ticket at help.unco.edu > Website Assistance.

_____________________________________________________________________________________

Dashboard The OU Campus Dashboard provides a location within the CMS where you can access user-specific

messaging and gadgets. Your Dashboard can be customized by choosing which gadgets to show or hide in the view.

Overview The Dashboard link on the Global Navigation bar and the Overview link both take you to the main

Dashboard page.

Workflow The Workflow list view shows content that you have sent to another user for approval or content that

has been sent to you for approval. These messages are separate from other messages (which can be viewed in Inbox and Sent). Content

moving through an approval process can be tracked using this screen.Inbox

The Inbox displays messages from other users as well as automated messages associated with scheduled actions, such as a notification of scheduled publish or notification of page expiration.

10

The Inbox Gadget is also shown on the Dashboard and includes how many new messages are in the Inbox. The Inbox includes a linked list of messages and the functionality to compose a message.

Analytics Analytics will be added to your dashboard when the site is moved to the production server

Tip: The panels in the Dashboard can be dragged to a different order by clicking on the gray bar of the panel and moving the panel.

Tip: The email sent to your Outlook account is a Do-Not-Reply email and serves as a notice to log in to OU Campus for a specified activity.

Exercise: Configure your Dashboard and Send Email

1. Click on the Dashboard link on the Global Navigation bar2. Review the default options on your Dashboard3. Click on the gear icon, Configure Dashboard link on the upper right of your screen4. Select and deselect choices from the Dashboard Configuration modal5. Hit Save6. Click on the gray bar on one of your Dashboard panels and move the panel to a different position on

the screen7. Click on the Inbox link below your User Name.8. Click on the green Compose button on the top right of your screen9. Send yourself a test email10. Notice the email now appears in your Inbox11. Click on your Sent link in the Mailbox panel of your Inbox, notice the test email

Workflow OU Campus includes options for approval of pages, images and assets before they can be published. A person can require approval to publish in one site and be a web author (can publish) in a different

site. To request permission to be a Contributor (must have approval), the Existing OU Campus Site Access

form to submit is on www.unco.edu/websupport - OU Campus Self Help – Getting Started – Request Access

Tip: OU Campus users that can edit content but not publish are called Contributors.

Contributor Your permissions may require edits to content, images, assets or other items to be submitted to an

approver in order for the content to be published. When this is the case, the Publish button on the page will be replaced with the Submit button. You can include a message to the approver along with the submission. These messages, along with a

link to the content, appear in the approver's Workflow list view. You can check the box in the message submission to also send an email to the Approver’s UNC email

inbox.

11

Tip: Messages not attached to approvals that are sent to the user's account will not be found in the Workflow. They are available in the Inbox.

Approver Your permissions may require you to approve certain pages created or edited by a Contributor. Once a page is sent to you for approval, it is checked out to you. You can Publish or Decline the Page. Declining page allows the Contributor to check it out again to work on it. The pathname to Pages sent to you for approval, along with the messages attached, appear in the

Workflow panel of your Dashboard.

12

ReportsOverviewReports are a convenient way to check certain aspects of your pages that are important to the overall quality of your Site.

Note: Until your Site is moved out of the Omnidev test directory, you will see all activity of users. You can sort the reports by User or filter by Site directory (i.e. nursing to see your data).

Required Actions

Required Actions has two list views: Broken Pages and Out of Sync Pages, which display any broken dependencies for the site on and pages out of sync across all sites.

Out of Sync Pages can be published so the links on the Production pages are correct.

13

Checked Out Content

The Checked Out Content report provides a list of pages, files, and assets that are currently checked out.

From the displayed list of files, it is possible to preview any page by clicking the preview button, or check-in any page by clicking the glowing light bulb next to the appropriate page.

Tip: You can check in content via this report.

Pending Approvals

The Pending Approvals report provides a list of pages that are currently awaiting approval.

From the displayed list of files, you can preview any page by clicking the preview button, or check in any page by clicking the glowing light bulb next to the appropriate page.

Checking in a page that is pending approval overrides the approval of that page, but does not publish it. This gives the original author the ability to continue revising the page or publish it using a different approval process.

Scheduled Actions

The Scheduled Actions report provides a list of pages with a scheduled action. For example, items may be scheduled to automatically be published, expired, or set up to send an alert.

Tip: If you have scheduled a Page to be published at a later time, you can reschedule it via this report.

Recent Saves The Recent Saves report displays a list of content that has been recently saved and includes

information about the type of save that was performed. The content listing includes linked file names to preview the content. The report is paginated so you can navigate through the list of pages in manageable chunks and can

export the report to CSV. Recent Publishes

The Recent Publishes displays a list of content that has been recently published and includes information about the type of publish that was performed.

The content listing includes linked file names to preview the content. The report is paginated so you can navigate through the list of pages in manageable chunks and can export the report to CSV.

Future Training TopicsBlogs and MashupsAre still in development.

14

Profile PagesWe will offer short training sessions or individual sessions for faculty who need to create profile pages.

FormsWe will offer short training sessions or individual sessions for web authors who need this option.

WorkflowWe will offer short training sessions on Workflow for those web authors who will be approving pages.

Getting helpIf you need access to the Table function, please submit a ticket through help.unco.edu> ticket description>Web Assistance or use the Request Help option in your Gadget list.

Workflow requests can be sent though the Approver/Editor section of the OU Campus Access form at http://www.unco.edu/websupport/resources/ou-campus/forms/existing-site-access.aspx.

Check out the Web Style Guide at http://www.unco.edu/websupport/webstyleguide/ for more information on the structure options for your pages, including a preview of all Snippets.

15