Edit

Share via

SharePoint web part design showcase: Create a To-Do list property pane

This article describes how to create a To-Do list web part. This example uses the single pane property pane type and is reactive and based on the Office UI Fabric responsive grid.

Create a To-Do list web part

  1. Add a description to help users understand more about the web part and its properties.

    In this example, the description is "Select a source for your to-dos and customize the display for the list of tasks."

    Adding a description

  2. Add a Fabric drop-down component connected to a list.

    Adding a Fabric dropdown

  3. Add a Fabric checkbox component to display completed tasks.

    Adding a Fabric check box

  4. Add two more check boxes to control display options.

    Adding two more Fabric check boxes

  5. Add a Fabric slider for the maximum number of items to display.

    Adding a Fabric slider

  6. Next, the author of the page selects a list or manually adds tasks to prepopulate the To-Do list web part.

    Select a list in pane

    Select a list in pane expanded

    Manual addition of tasks to list

  7. The web part shows an indicator of items loading onto the page.

    Indicator of items

  8. Items from the list load.

    List items loading

    When the new tasks are loaded, they fade into view by using animation components from Office UI Fabric.

    New tasks loaded

  9. The property pane controls the UI. Tasks with pivots enabled are displayed via the Display check boxes in the property pane.

    Property pane controlling web part items

Responsive views

The following example shows the 2/3 column view of the web part.

Two thirds column view

The following example shows the 1/3 column view of the web part.

One third column view

The following example shows the mobile (read-only) view of the web part.

Mobile view of the to-do list web part

See also