Creating and editing custom widgets

Shared widgets appear on the Custom Widgets tab in the Widgets tool and they are distinguishable by a Shared Widget icon. They are available to add to your course homepage, but you cannot modify their content. You can only modify the content for custom widgets that are created within your course offering.

Create a custom widget
Edit a custom widget
Add release conditions to a custom widget
Add html custom code
Replace strings

Create a custom widget

On the My Home or Course Home page, click Manage the homepages for this Org Unit in the bottom right corner of the page.
Click Widgets from the tool navigation.
Click Create Widget.
Enter a Name and Description for the widget.
If you want to share your custom widget with other org units, click Add an Org Unit (only applicable at the organization level).
Click Save and Close.

Edit a custom widget

On the My Home page or a course homepage, click Manage the homepages for this Org Unit in the bottom right corner of the page.
Click Widgets from the tool navigation.
Click the Edit icon beside the widget you want to edit.
Make your changes and click Save and Close.

Properties

The Properties tab allows you to define or change the widget name, description, and sharing settings (only available at the organization level).

Content

The Content tab allows you to add your own custom HTML (with the exception of ASP) code and incorporate your organization or course’s specific colors, and logos when creating widgets.

Use the default content window of the HTML Editor to add content to your widget and click the Edit HTML Source icon in the bottom left corner to add HTML custom code.

Add HTML custom code

Go to the Content tab on the Edit Widget page.
Click the Edit HTML Source icon in the bottom left corner of the HTML Editor to open the HTML Source Editor.
Add your HTML custom code. For example, the following HTML custom code can be used to create a YouTube solar car video feed using a “solar car” tag:
<iframe height="350" width="265" frameBorder="0" src="http://www.youtube.com/videos_list?tag=solar car" marginHeight="0" marginWidth="0" name="videos_list" id="videos_list"></iframe>
Click Update.
Click Customize Widget Style to apply different styling options to the widget. See Editing widget display.
Note To help you meet visual accessibility standards, there is a built-in WCAG (Web Content Accessibility Guideline) checker on the Widget Settings page. Be aware that if you choose a shade that does not meet these guidelines (for example, the contrast between the text color and the background color is too low), the check mark by WCAG AA will be replaced by a warning or error icon to alert you to possible accessibility issues.
Click Save and Close.

Release conditions

The Release Conditions tab allows you to define a set of criteria that must be fulfilled (e.g. a user must be enrolled in the current org unit as a specific role). If a user doesn't meet the set release conditions they won’t see this widget on their homepage. For example, you could create a widget with links visible only to instructors.

The conditions most likely to apply to widgets are as follows:

Group Enrollment Users must belong to the selected group to see the widgets associated with the condition.
Org Unit Enrollment Users must belong to the selected org unit to see the widgets associated with the condition.
Section Enrollment Users must belong to the selected section within your course to see the widgets associated with the condition.
Role in Current Org Unit Users must be enrolled in your course as a certain role to see the widgets associated with the condition

Replace strings

Replace strings allow you to use dynamic fields in HTML content that display applicable information based on the user and org unit. They are available when you create widgets and other HTML content using the HTML Editor.

Current Org Unit {OrgUnitId}, {OrgUnitName}, {OrgUnitCode}, {OrgUnitTypeID}

Organization {OrgId}, {OrgName}

Current user {UserId}, {UserName}, {OrgDefinedId}, {FirstName}, {LastName}, {Email}

User’s role in current org unit {RoleId}, {RoleCode}