Task Box Web Parts

Overview

The Task Box web part provides a card-based information container, with a heading and grouped, unordered list of links, as well as optional image cap and/or description. This web part is typically used in conjunction with a Top Tasks list, however it could be used for many other applications.

Requirements

Browser must meet the statewide minimum requirements.

Accessibility

This web part passes both WCAG 2.0 and Section 508 website standards. Choice of heading level (H2-H6) allows users to incorporate the web part into content hierarchy. Image requires an alternative text value, ensuring its accessibility, and all links maintain proper form.

Suggested Prior Viewing

• Build a list
• Create list views
• Web parts overview

Video - Using Task Boxes

This video is on the longer side at just over 12 minutes.  It covers creating the list, adding columns, making views and adjusting the web part to populate with the correct information.  The basic list activities are covered very quickly so if you are not familiar with list creation, columns and creating views, please visit the suggested articles above to familiarize yourself with those topics first.  Also covered are several options available when using Task Box web parts.  

Task Box Notes

2 Sizes, 2 varieties for each size

Task boxes may be used in any content area on the page and more than one task box may exist in a single content area if the author is careful.  However, they were specifically developed for use in content areas on home page layouts that have three or four columns across.  The specifications in the video and in this article focus on those use cases.

Features and Functionality

• Card-based layout
• Fully accessible for screen readers and keyboard access
• List/Library-driven unordered list
• View-based column administration to control visibility
• Image Cap with hyperlink
• Description Paragraph (optional)

Tutorials

Create a Data Source

SharePoint

1. Create your list/library, adding any columns and content necessary. For your list, at minimum, you will need the Title field (which is automatically available in any new list) and either a Single Line of Text OR Hyperlink column, either of which can be used for the Link URL. You can use the same list for many Task Boxes, so, if you plan on filtering or sorting the list in a View, add whatever extra columns which aid you in doing so.
2. Create and title a new Standard View which contains, orders, and sorts all columns you wish to display in the grid. Any edits made to this view will be immediately reflected in the accordion. Please note that not all options are supported at this time (e.g. Grouping).
3. Save and make note of the View’s title.
4. While on a page, insert the Task Box web part using the Insert menu in the Ribbon.
5. Open the web part’s properties, fill in the Task Box Title, and choose the Heading type which fits your page’s content hierarchy.
6. Fill in the Task Box Title Url field. This will determine the page/document that the image cap and heading will link to.
7. If you would like to include a description of the task box, fill in the Task Box Description field. This will appear as a paragraph below the Heading.
8. Use the Browse feature on the Image Url field, along with the Asset Picker, to locate an image OR enter a link to an external image such as the statewide CDN server. See the Image Caps section in this document for proper size/dimension details.
9. Ensure that the Alt Text field is filled in; otherwise, the page will not pass all accessibility success criteria.
10. To add the list of links, choose a list/library via the Browse button and the Asset Picker menu on the List URL field.
11. Once the list/library is selected, select the View you require.
12. Last, select the columns to be used for the Title and Link URL, which determine the makeup of the anchors/links in the list. Most times, this is the Title column for the Link Title Field and a hyperlink column for the Link URL Field.

 

Add the Web Part

1. While on a page, insert the Task Box web part using the Insert menu in the Ribbon.
2. Open the web part’s properties, fill in the Task Box Title, and choose the Heading type which fits your page’s content hierarchy.
3. If you would like the heading to link to a resource, fill in the Task Box Title Url field.
4. If you would like to include a description of the task box, fill in the Task Box Description field. This will appear as a paragraph below the Heading.
5. If you would like to include an Image Cap, use the Browse feature on the Image Url field, along with the Asset Picker, to locate an image OR enter a link to an external image such as the statewide CDN server. See the Image Caps section in this document for proper size/dimension details.
6. If you include an Image Cap, ensure that the Alt Text field is filled in; otherwise, the page will not pass all accessibility success criteria.
7. To add the list of links, choose a list/library via the Browse button and the Asset Picker menu on the List URL field.
8. Once the list/library is selected, select the View you require.
9. Last, select the columns to be used for the Title and Link URL, which determine the makeup of the anchors/links in the list. Most times, this is the Title column for the Link Title Field and a hyperlink column for the Link URL Field.

Image Caps

This content is also found in the Task Box article with more technical information on this site.

To maintain a good design, all images should be the same dimensions and small file size. Recommended image ratio and dimensions combinations are:

Aspect Ratio	4 x 3	16 x 9
4-column layout	375 x 281	375 x 211
3-column layout	750 x 562	750 x 422

Known Limitations

A future release will limit the types of columns available in the Title and URL field dropdowns. Currently, all column types are available.

Frameworks/Libraries Dependencies

Bootstrap 3.x

Feedback

If you would like to suggest features, enhancements, or report a bug, please visit https://egovservicedesk.zendesk.com and open a new ticket.

Screenshots

Figure 1 - Web Part Properties

Still have questions?  

You can:

• Search the Knowledge Base for what you are looking for: 

• You can find more articles in the V4.x Article Index
• You can submit a question to the Oregon E-Government Service Desk