General Overview

This College Portal Administration guide is intended for college administrators who want to:

• Configure their college's theme (logo, name, background image and colors)

• Configure their college's portal communication and messaging

Getting There

Tenant Admin Tab

The Tenant Admin tab (as shown below) is the landing page for the college portal administrator following login. 

[ screen shot of landing page ]

Behind the scenes, the CCC MyPath portal serves as the large container for each college's portal. Within each college portal the college administrator configures the look and feel and content on the Tenant Admin tab. Each of the panels in the Tenant Admin tab represent configuration "services" that are available to all colleges for this purpose. 

The college portal's end user, currently only students, sees a different view of the college's portal when they log in. The image below is an example of the college students' portal view. 

[ screen shot of student end-user home page ]

Authenticating with College IdP

In order to be included in the California Community College Portal, your college or district needs to have an Identity Provider (IdP) set up. Your individual account must be associated as a Tenant Admin in the portal. If your college/district does not have an IdP, please contact the California Community Colleges Technology Center to discuss your options. 

Portal Basics

A portal is a web site that acts as a container for consolidating information and/or services from a variety of sources so that they appear as one cohesive site. The CCC MyPath portal contains individual and unique college or district portals within it. Each individual college portal contains built-in portlets within it for managing their portal. This includes the ability to create new portlets that display information or services to the college end- users.

Plainly put, portlets are:

• Web applications that accept client requests and respond with information

• Designed for uniformity • Displayed to appear as one web page in the context of the portal

An example of portlets includes the advisor cards (Explore Careers, Choose A College, Apply For College, Pay For College) that display within each unique college or district portal, as in the image above. The advisor cards are a built-in feature in the CCC portal that provide student-tailored information via links in each card.

College administrators and students both log in to their college/district portal via single sign on (SSO). Only the college administrator and its students (to whom it gives access via IdP authentication credentials) can access the college/district portal page. The required login credentials and authentication are explained in more detail in Authenticating With College IdP. 

Multi-Tenancy Features

Each college/district portal is contained by the larger CCC MyPath portal. Administrative access to each portal is restricted to the college portal administrator for that college. From a software application point of view, the CCC MyPath portal is one application that serves every college/district. In technical terms, each college or district portal is called a "tenant" of the CCC MyPath portal. As such, the larger portal supports what is referred to as "multi-tenancy." 

Portal multi-tenancy means the following universal features are available for each individual college or district portal: 

• A dedicated portion of the CCC MyPath portal

• Access to portal data (portlets) and basic functionality (login, searching, etc.)

• Portal page configuration (controlling what displays and how it looks)

• Portal page user management (i.e. which authenticated users see what)

• Software updates to the portal are applied for all college/district portals at once

Delegated Administration

Each college/district portal is contained by the larger CCC MyPath portal. Administrative access to each college/district portal is restricted to the college portal administrator for that college. As a college portal administrator, you have access to the following functions: 

• Administration

• Tenant Portal Administration

  • Manage Portlets

  • Manage this Skin

  • Manage Content Header Images

  • Manage Public Documents

• Fragment Administration

• Advisor Card Administration

• Admin Messaging Log

• Survey Administration

• Additional portlet access

  • App Launchers

  • Content Portlets

  • Navigation Menu 

Supported Roles and Source

Your "role" in the Portal is determined by your Identity Service Provider (IdP). Each college/district portal's administrator will define those roles as part of setting up their IdP. When first integrating with the CCC MyPath portal, your college/district will most likely include an IdP role for the college portal administrator and students. Later, your college/district may want to add one or more college staff IdP roles.  See Authenticating with College IdP.

Basic Portal User Experience

The basic portal user experience depends on your role when you log into the college portal. The common portal experience includes searching, navigation, and linking to content. The college administrators customize the look and feel and content of their portal and configure which portlets display to students.

College students log in to a college portal and interact with each of the portlets. 

General Portal Navigation

These portal navigation items are the same no matter if you're the college portal admin or a student:

• Log into the portal. A header bar displays that includes the CCC MyPath logo next to a search bar.

• Enter a search term in the Search bar and click the Search icon retrieve search results. An auto-suggest feature displays common search options beneath the search window as you type. See Searching the Portal for details.

• Click the CCC MyPath logo in the upper left corner from anywhere in the portal to return focus to the home screen.

• Scroll down the page to see more items. 

College Students

The portal acts as a "one-stop shop" for college students in terms of a hub for their college information. College students log in to the college's portal to:

• Get information they need for college success.

• Interact with recommended topics based on specific needs and interests, such a college directory, course catalog, or information on salaries for different graduates of specific programs. These topics may display as:

  • Static content portlets

  • App Launcher portlets

  • Advisor Card portlets

  • Surveys o Messaging via portal messaging, email or SMS

College Portal Administrators

The college portal administrator is the initial college user of the college portal. The portal administrator configures the look and feel and the content. The college portal administrator logs in and sees the same header bar and search bar as a student user. 

[ screen shot of student end-user homepage ]

However, the college portal administrator also sees:

• Clickable tabs right of the search bar that let the administrator navigate through configuration portlets:

  • Tenant Admin tab o Survey Admin tab

• Any number of administration panels when you scroll down the page, used for creating:

  • Static content portlets

  • App Launcher portlets

  • Advisor Card portlets 

Searching the Portal

The Portal includes a universal Search bar at the top of the screen. Searches include auto-complete functionality so that suggested search options appear beneath the Search bar as you type. 

To perform a search:

1. Click in the Search Bar and start typing your search term. 
   [ screen shot of

2. Select one of the displayed search suggestions to retrieve that search item. 

[ screen shot of Search input page ]

Configuring Your College Theme

You can configure your college portal's display by:

• Changing the background image and colors.

• Branding it with your logo or a custom image.

• Branding it with your college’s custom content.

Use one of the anchor links below to go through the steps of configuring your college theme.

• Updating the College Header Background/Text Colors and Nav Menu Color

• Updating the College Portal Background Image

• Updating the College Logo Image and Content

Updating the College Header Background/Text Colors and Nav Menu Color

Use the following steps to configure your college colors and background image.

1. Navigate to Tenant Admin tab -> Tenant Portal Administration panel -> Manage This Skin link to open the College Skin configuration screen.

2. If you know the HEX color code, enter it into the Tenant Badge Header Background Color field and proceed to step 6. If you do not know the HEX color code you want to use proceed to step 3.

3. Click the Tenant Badge Header Background Color field label text, or its associated color box, to open the colors palette. 

Updating the College Portal Background Image

1. Navigate to Tenant Admin tab -> Tenant Portal Administration panel -> Manage This Skin link to open the College Skin configuration screen.

2. To update your college portal's background image, click the Upload Image link next to the Tenant Background Image URL field to open the Attachments dialog box. 

3. Enter the optional file name and source information in the Filename and Source fields, if desired.

4. Click Select File to open your operating system's file browser, and navigate to and select the image file you want to use as your college portal's background. The selected file name displays beneath the Select File button (collegeBackground.png in the example image above). Suggested image size is 350px high and a minimum of 1170px wide.

5. Click Upload to upload the image. The Attachments dialog box closes automatically once the file uploads successfully.

6. Click Save to save all your changes, close the Manage This Skin screen, and return to the Tenant Admin tab with your new background image displayed.

[ screen shot of Tenant Background Image URL ] < placed between number 3 and number 4 above.

Editing the College Portal Background Image Transparency Level 

Colleges can add a mask to their Background Image and control the transparency level percentage.

1. Navigate to Tenant Admin tab -> Tenant Portal Administration panel -> Manage This Skin link to open the College Skin configuration screen.

2. Place the cursor over the Tenant Background Image Mask Opacity Level field and a number picker is displayed. 

3. Click either the up arrow to increase the transparency level or down arrow to decrease it.

4. Click Save to save your changes. 

[ screen shot of the mask opacity level indicator with highlight box ]

Updating the College Logo Image and Content 

Changing the college logo image and content can be done through a content editor. Use the following steps to add or update the college logo in your college portal:

1. Navigate to Tenant Admin tab -> Tenant Portal Administration panel -> Manage Portlets link.

2. Select the Edit button corresponding to the logo (Demonstration College Logo).

3. Click the Save and Configure button at the bottom of the page to see the Content Editor screen.

4. Delete the current logo (if a logo is present) by either clicking on the right side of the logo and hitting your keyboard's backspace key or by selecting the logo image and hitting the Delete key. 

5. Click the image icon in the toolbar to open the Image Properties dialog box. 

6. Click the Upload tab.

7. Click the Choose File button to navigate and select a logo image from your local computer. Once selected, click the Send it to the Server button to send the logo image to the portal server and display the Image Info tab. 

8. Populate the Alternative Text field with text describing the image.

9. Click OK to save your new logo and return to the Content Editor screen with your new logo displayed.

10. Click anywhere in the text field and edit the current content you want to display.

11. Use the editing tools inside the Content Editor screen to select the font size, color, format etc.

12. Click the Save icon to save your logo, close the Content Editor screen, and return to the Tenant Admin tab. 

[ see all screen shots in this section and add where required ]

Content Management

The college portal administrator manages the content of their college's portal by creating portlets using a variety of built-in portlet tools. The portlets you can create include:

• Static content portlets

• App Launchers

• Surveys (with smart forms)

• Advisor cards (with notifications)

Content Management Overview

The college portal administrator manages content by creating specific portlets and then adding or removing them for specified user groups, applying portlet expiration dates, etc. The steps to do all of this are included within the instructions for creating each of the different portlets currently available, including:

• Static Content & Registering Portlets

• App Launchers

• Surveys

• Advisor Cards 

Portlet Basics

Anything that you create or configure to display inside your college portal is considered a portlet. A portlet is basically a "container" for the thing you are creating or configuring to display.

College portal administrators determine which groups can have access to any given portlet as well as configuring active and inactive date ranges for portlets, also known as the portlet lifecycle.

[ Suggest adding a graphical element here (generic) to help visualize a “portlet” ]

Portlet Lifecycle

The lifecycle for any portlet can be defined by the college administrator by selecting the options in the Lifecycle Management and optional Automatic Expiration sections. You control the status and display of any and all portlets for your college. 

[ screen shot of Lifecycle Management with Automatic Expiration screen ]

Use the following steps to manage Portlet Lifecycle Management for existing portlets:

1. Navigate to Tenant Admin tab-> Portal Administration panel-> Manage portlets link to display the Portlet Registry screen.

2. When you click the Edit link for a portlet the Edit Portlet screen will be displayed.

3. Scroll down to the Lifecycle Management section and click the Option radio button that corresponds to the portlet state of Created, Approved, Published, Expired or Maintenance as needed. 

4. If you want to set an optional expiration date for the portlet (only available when Approved or Published is selected), scroll down to the Automatic Expiration (optional) section and click in the Setting field to display a pop-up calendar where you can choose an expiration date. 

5. After selecting the expiration date, drop-down list will be displayed so you can select the time (hour, minutes, and period of the day (AM or PM)) the portlet will expire. 

[ add all the screen shots in this section as needed ]

See:

• Adding Static Content & Registering Portlets

• Adding App Launchers

• Adding Surveys

• Adding Advisor Cards 

Adding Static Content & Registering Portlets

Static content portlets contain simple content. Use the following steps to create a content portlet that you can add to your portal:

1. Navigate to Tenant Admin tab -> Tenant Portal Administration panel -> Manage portlets link to display the Portlet Registry screen.

2. Click the Register New Portlet button to display the Register New Portlet screen. 

3. Select the Advanced CMS radio button and click the Continue button to display the Summary Information and Controls field groups.

4. Edit the value in the Portlet Title field to create the title for your content portlet. 

5. Optional Step: Enter a value in the Portlet Description field. This is an optional field but the value you enter here can be used when searching for a portlet.

6. Click the Advanced Options link to expand and display the Principals and Categories configuration field group. 

Optional steps for editing the principals associated with the portlet. The default principals and their permissions are:

• College Administrators with Browse and Subscribe.

• College Fragment Owners with Browse and Subscribe.

• College Members with Browse and Subscribe. 
  

7. Under the Principals and Categories section again, click the Edit Principals button to display the Select People and Groups screen. 

8. Click the Add to Selection button for each group that you want to access this content portlet or the Remove from Selection button to remove access for the corresponding group or groups. 

9. Click Save when done to save your changes and return to the Register New Portlet screen. 

10. Select the appropriate checkbox permissions for each principal. 

[ add the two screen shots for this section ]

SUBSCRIBE grants ability to use, render, run, exercise the content.

BROWSE grants ability to find the content in the user’s search.

• Granting SUBSCRIBE and BROWSE yields a typical experience. Users can search and find the portlet, add it to their layout, and launch it.

• Granting SUBSCRIBE but not BROWSE grants ability to use portlet but suppresses it from searches. Useful for a portlet you want students to use, such as the Nav Menu, but not find in their searches.

• Granting BROWSE but not SUBSCRIBE grants ability to find the content, read about it, but not launch it or add it to your layout. This was intended to facilitate support and assistance use cases. Academic advisors might need to find, read about, see screenshots of, know the URL of, a portlet that summarizes a user's enrolled courses, say, even though those advisors do not themselves have courses.

• Denying both BROWSE and SUBSCRIBE makes the content totally unavailable to the user.

11. Click the Advanced Options link to expand and display the Principals and Categories configuration field group.

12. Under the Principals and Categories section again, click the Edit Categories button to display the Select Categories screen. 

[ screen shot ]

13. Click the Add to Selection button for each of the categories in which you want the content portlet to be associated with or the Remove from Selection button to remove the corresponding category from the content portlet. 

[ screen shot ]

14. Click Save when done to save your changes and return to the Register New Portlet screen.

15. Click the Advanced Options link to expand and display the Display Settings field group.

16. Scroll down to view the Display Settings field group, click the Chrome Style drop-down list and select no-chrome.  

[ screen shot ]

17. Scroll down to the Lifecycle Management field group and select the Published radio button. 

[ screen shot ]

18. Click Save and Configure to save your content portlet and display the Edit Portlet Configuration content Editor screen. 

19. Enter and format the content you want to display in the portlet. If you are familiar with HTML, CSS, or Javascript, you may edit the portlet's code by clicking the Source button. To embed a video in your new content portlet, see:

• Embed a Video into a Content Portlet

• Embed a Video with the OzPlayer Interface 

[ screen shot ]

20. Click the Save icon to save your configuration and return to the Portlet Registry screen with your new content portlet displayed in the list of portlets. 

[ screen shot ]

21. Click the Manage DLM Fragments link to open the Fragment Administration screen. 

[ screen shot ]

22. To add your new content portlet to a tab, see: Adding Content to a Tab. 

Embed a Video into a Content Portlet 

Tenant Admins can embed videos hosted by other services into content portlets using the iframely proxy service which supports YouTube and over 1800 other content provides. Before you embed a YouTube video into a content portlet, you must get the code from YouTube.

1. Go to YouTube and locate the video you want to embed into your content portlet.

2. Click the Share link below the video. 

3. Click the Embed link to display the HTML code for embedding the video.

4. Click the SHOW MORE link to expand the video options.

5. From the Video size drop-down list, select the size that will be displayed in the content portlet. 

6. Optional Step: Unselect the Show suggested videos when the video finishes checkbox. 

7. Copy the code from the form field and paste it in a text document. Once you have the code for you YouTube video, you can now embed the video into your content portlet.

8. Return to MyPath, click in the editor, and position the cursor where you want the video to be positioned. 

9. Click the iFrame icon to open the iFrame Properties dialog box. 

10. Copy the width from the YouTube code collected in step 7 and paste it in the Width field.

11. Copy the height from the YouTube code collected in step 7 and paste it in the Height field.

12. Copy the URL from the YouTube code collected in step 7 and paste it in the URL field. 

13. Click the OK button. 

[ screen shots ]

14. Click the Save icon to save your configuration and return to the Portlet Registry screen with your new content portlet displayed in the list of portlets.

[ screen shot ]

Embed a Video with the OzPlayer Interface

The OzPlayer is an “overlay” that replaces the standard HTML5 media elements with accessible buttons and controls supporting a variety of assistive technologies as well as standard keyboard commands. The OzPlayer meets WCAG 2.0, Level AA requirements and supports the playback of local media content as well as YouTube and Vimeo Pro videos. The CCC Technology Center and CCC Accessibility Center have acquired a license for California Community Colleges to use at no cost for college and district websites and affiliated projects.

The Oz Player files can be sourced from a college’s web server or the player content-delivery network (CDN). College domains must be whitelisted before they will function with the CDN solution. 

1. Register your college domain at: https://docs.google.com/forms/d/e/ 1FAIpQLSfne5p_YXsKc4hbpFg_58Hy-OtYfcOsf7XXCDBI2zpJWDC-_A/viewform

   1. Enter your first and last name in the Name field.

   2. Enter your email address in the Email address field.

   3. From the School/District Affiliation drop-down list, select your college.

   4. Enter your college’s website name in the Please identify the College domain names you wish to register for the Oz Player CDN field.

   5. Select the appropriate radio button for the Do you need the Oz Player source files to host on your local web server? question.

   6. Click the Submit button. 

1. Once the college domain is approved, proceed to the OzPlayer Code Generator to create the appropriate code: http://www.accessibilityoz.com/ozplayer/ozplayer-code-generator-commercial/

   1. Enter the video’s URL in the Video URL (required) field. 

b. From the Video type drop-down list, select the appropriate type (i.e., YouTube or MP4).

c. Optional Step: Enter a URL to an image in the to the Poster URL field. 

d. From the Player color drop-down list, select the preferred color of buttons for your version of the OzPlayer.

e. Select the Transcript open by default? checkbox to have immediately display the Video Transcript dialog box.

f. Enter the appropriate ISO language code in the Languages field. Note: If the captions are in English, leave the Language field as “en”.

g. Enter a unique value in the Video ID field (e.g., videoName_date, etc.) if there will be more than one video per page.

h. Enter the URL to the caption file in the Captions (VTT) URL field.

i. Optional Step: Enter the URL to the Transcript Extras in the Transcript extras (VTT) URL field.

j. Click the Submit button. A text area will appear at the top of the page with the HTML code you need to insert in your page to make the video player appear and function. 

Once the OzPlayer code has been developed, you can now add it to your content portlet.

3. Remove the following script from the OzPlayer code:

<script type="text/javascript" src=“https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/mediaelement.min.js"></script>

4. Verify the code is using version 3.0 and not 2.0. If needed, change the version to 3.0 for the following links and scripts in the code:

<link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/ozplayer.min.css" media="all" rel="stylesheet" type="text/css" /> <link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-skin/highlights-blue.css" media="all" rel="stylesheet" type="text/css" /> <link href="https://ozplayer-commercial.global.ssl.fastly.net/3.0/transcript.css" media="all" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-core/ozplayer.min.js"></script> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/ozplayer-lang/en.js"></script> <script type="text/javascript" src="https://ozplayer-commercial.global.ssl.fastly.net/3.0/config.js"></script>

5. Return to MyPath and click the Source icon to switch from WYSIWYG mode to Source (HTML) mode. 

[ screen shot ]

6. Copy the OzPlayer code created in step 2 with the edits made in steps 3 and 4, and paste it where you want the video to be positioned. 

[ screen shot ]

7. Click the Source icon to switch from the Source (HTML) mode back to the WYIWYG mode. 

[ screen shot ]

8. Click the Save icon to save your configuration and return to the Portlet Registry screen with your new content portlet displayed in the list of portlets.

Manage Content Header Image

Tenant Admins can upload banner style images from their hard drives that can be specified for use in content portlet. These images can be used for single or multiple content portlets. 

Attaching a Banner Image to a Content Portlet

1. Navigate to Tenant Admin tab -> Portal Administration panel -> Manage Content Header Images link to display the Portlet Header Image Admin screen.

2. Click the Choose File button to navigate and select an image from your local computer. 

[ screen shot ]

3. Click the Upload button to add the image to the Header Images section. 

[ screen shot ]

[ screen shot ]

4. From the Portlet Name drop-down list, select the content portlet you want to add a header image to.

5. From the Assigned Header Image drop-down list, select the image you want assigned to the content portlet.

6. Click the Set button to add the header image to the content portlet. 

[ screen shot ]

[ screen shot ]

7. Go to the Search field at the top of the page, enter the name of the content portlet with attached the header image, and select the it from the list.

Editing an Image on a Content Portlet 

Header images can be updated after one has been added to a content portlet.

1. Navigate to Tenant Admin tab -> Portal Administration panel -> Manage Content Header Images link to display the Portlet Header Image Admin screen.

2. From the Portlet Name drop-down list, select the content portlet you want to edit.

3. From the Assigned Header Image drop-down list, select the new image you want assigned to the content portlet.

4. Click the Set button to update the header image to the content portlet. 

Removing an Image from a Content Portlet

Header images previous added to a content portlet can be removed so that no image is in place after one had been added to a content portlet.

1. Navigate to Tenant Admin tab -> Portal Administration panel -> Manage Content Header Images link to display the Portlet Header Image Admin screen.

2. Click on the header image attached to the content portlet.

[ screen shot ]

3. Click the trash icon for the corresponding content portlet to remove the portlet from the image. 

[ screen shot ]

Deleting an image from the Portlets Header Image Administration

Images previously uploaded and not attached to a content portlet can be deleted from the Portlet Header Image Administration portlet.

1. Navigate to Tenant Admin tab -> Portal Administration panel -> Manage Content Header Images link to display the Portlet Header Image Admin screen.

2. Place the cursor over the image you want to delete. A trash icon appears in the top, right corner of the image. 

[ screen shot ]

Note: A trash icon appears in the top, right corner of the image.

3. Click the trash icon to delete the image.

Note: If the image is attached to one or more content portlets, all portlets associated to the image must be removed before it can be deleted. A list of portlets assigned to the image is display. 

[ screen shot ]

4. Click the trash icon for each content portlet attached to the image.

5. Once all of the content portlets are removed, click the trash icon to delete the image.

6. Click on the Delete button on the Confirm Delete confirmation modal. 

Manage Public Documents

Tenant Admins can upload documents (.jpg, .zip, .tar, .gif, .csv, .png, .txt, .pdf, .gz, .json, and .doc(x)) from their hard drives that can be attached to a content portlet or an advisor card task, and made available to students for download. These files can be used for single or multiple content portlets or advisor cards.

Attaching a Documents to a Content Portlet

1. Navigate to Tenant Admin tab -> Portal Administration panel -> Manage Public Documents link to display the Public Document List Admin screen. 

2. Click the Choose File button to navigate and select a document from your local computer. 

3. Click the Upload button to add the document to the list of documents available to be attached to content portlets. 

Note: Once a document has been uploaded, the Portlet Name drop-down list and Document to Assigned drop-down list will be displayed in the Attach Document to Portlet section.

4. From the Portlet Name drop-down list, select the content portlet you want to attach a document to.

5. From the Document to Assigned drop-down list, select the document you want attached to the content portlet. 

App Launcher

Survey

Advisor Cards

Layout Management

Navigation Menu

Custom URLs

Contact & Support