Learning Technology Support - Create a Homepage Widget

Learn how to create a widget for use on course homepages

Before you begin

This KB article speaks about this process at a high level. The features it covers are extremely flexible, and documenting the range of possibilities is not practical. It is assumed that the person following these instructions has a clear vision of the final product, and has the technical skills necessary to implement the final product. This article only covers how to create a widget, not what to fill it with.

Who can do this?

CETL staff (Administrator-Support, Administrator Assistant, AdminLTC Assistant, Administrator, Security Administrator) and Flexible Option Administrators have the ability to create homepage widgets. 

Instructors can not create homepage widgets. UWM instructors should contact the Center for Excellence in Teaching and Learning to review the need of the widget for possible development.

Navigating to Widget Management

  1. Browse to the desired course or org unit.
    • To add a widget for individual courses, browse to the appropriate course using the My Courses widget.
    • To add a widget for a collection of courses, contact CETL to gain access to the appropriate area of D2L.
  2. Click the Edit Course link in the navigation bar.
  3. Under the Site Setup heading, click the Widgets link.

Creating a new widget

To create a new widget, click the blue Create Widget button. On the Properties tab, enter a widget name in the Title field. The Title will become the default title of the widget when it is displayed on the homepage. For screen readers, the Title will also be read aloud regardless of whether the widget title is hidden or not.

Click the Release Conditions tab if the widget viewership should be restricted to a particular role (such as Student, Instructor, etc.) in a course. Note that administrative roles can see all widgets when they are on a homepage.

Click the Content tab and enter widget content in the HTML editor. For information on how to use the HTML Editor for this level of work, refer to Brightspace Documentation: Format HTML Course Content.

Once done editing content, click the blue Save and Close button to exit the widget editor, or click the Save button to save your work.

Editing HTML source directly

The HTML Editor can accept most properly formatted HTML tags, and can also accept script tags and some JavaScript. Access this view by clicking the HTML source icon.

The HTML Source icon is in the lower left, towards the bottom of the HTML editor. This image illustrates the icon circled in red.

  • Exceptionally complex HTML should be placed in an external HTML file that is stored in the courses Files area. Display the HTML file using an <IFRAME> tag. For more information, refer to W3Schools: HTML Iframes.
  • The HTML Editor automatically parses JavaScript but can mangle or strip code. JavaScript files can be uploaded to the courses Files area. Include the JavaScript using a script tag. For more information, refer to W3Schools: JavaScript.

Customizing the widget's look and feel

Below the HTML Editor, click the Customize Widget Style button to change the default look and feel of the widget--the title, border, background and title bar color.

  • Display Titlebar: check to show the name of the widget behind a colored background.
  • Prohibit minimizing widget: check to prevent hiding the widget using the chevron in the title of the widget.
  • Name: check Custom to name the widget something other than what was specified as Title on the Properties tab.

While adjusting the color, background and appearance of the widget, note the bottom of the window. D2L will display whether the title ("top color") and body of the widget ("bottom color") is WCAG AA compliant. This is in reference to color contrast. Ensure the design choices you make satisfy both standards. Not doing so may make the widget unusable by some audiences.

Adding the widget to a homepage

In almost all circumstances, the newly created widget will be added to an existing homepage. A copy of the default homepage must be made. 

Navigating to Homepages

  • Widget was just created: Click the Homepages link at the top of the page, below the navigation bar.
  • Otherwise: click the Edit Course link in your course or org unit's navigation bar. Under the Site Setup widget, click the Homepages link.

Copy the active homepage

  1. Look at the list of the homepages available to the course. Look for the title to the right of the homepage name: "Default homepage". 
  2. Click the chevron to the right of the homepage name.
  3. Click the Copy option.

Edit the new homepage

  1. Click the name of the homepage to modify. 
  2. Change the Name field to something meaningful in the context of the course and to describe the nature of the new widget.
  3. Scroll down the page to view the layout of the homepage, and click the Add Widget button in the space you wish to add the widget to.
  4. In the window that appears, click the Custom Widget option at the top of the window.
  5. Click the checkbox to the left of the widget you've created.
  6. Click the blue Add button at the bottom of the page.
  7. The widget now appears on the page. Adjust the location on the page by clicking and dragging the title of the widget.

Click the blue Save and Close button to save the page, or click the Save button to save your changes.  

Activate the Homepage

From the Edit Course page, click the Homepages link under the Site Setup heading. A list of homepages appears, including the homepage you just created. Change the Active Homepage dropdown menu to match your new homepage, then click the Apply button.

Keywords:d2l d2l@uwm brightspace learn@uw learnuw luw desire2learn widget homepage home page course my box html editor   Doc ID:76164
Owner:David D.Group:UW-Milwaukee Center for Excellence in Teaching and Learning
Created:2017-08-29 10:32 CSTUpdated:2019-12-30 10:38 CST
Sites:UW-Milwaukee Center for Excellence in Teaching and Learning
Feedback:  0   0