Top Menu

Jump to content
    Modules
      • Projects
      • Activity
      • Work packages
      • Gantt charts
      • Calendars
      • Team planners
      • Boards
      • News
    Home
    • Getting started
    • Introduction video
      Welcome to OpenProject Community
      Get a quick overview of project management and team collaboration with OpenProject. You can restart this video from the help menu.

    • Help and support
    • Upgrade to Enterprise edition
    • User guides
    • Videos
    • Shortcuts
    • Community forum
    • Enterprise support

    • Additional resources
    • Data privacy and security policy
    • Digital accessibility (DE)
    • OpenProject website
    • Security alerts / Newsletter
    • OpenProject blog
    • Release notes
    • Report a bug
    • Development roadmap
    • Add and edit translations
    • API documentation
  • Sign in
      Forgot your password?

      or sign in with your existing account

      OpenProject ID Google

Side Menu

Collapse project menu

  • Overview
  • Activity
    Activity
  • Roadmap
  • Work packages
    Work packages
  • Gantt charts
    Gantt charts
  • Calendars
    Calendars
  • Team planners
    Team planners
  • Boards
    Boards
  • News
  • Forums

Content

Expand project menu

Updated by Jens Ulferts over 3 years ago

# User Problem

## User

_What persona, persona segment, or customer type experiences the problem most acutely?_

* Project manager
* Project member
* Team lead

## Problem

_What problem or job does the user have?_

* In project organizations users often work in different projects in parallel.
* Larger project organizations are often organized in a matrix structure. So teams might provide their expertise in several projects.
* Projects itself need multiple teams from different organization units to deliver on their project goals.
* Gantt charts do allow for operational planning across multiple projects.
* It is not possible to schedule tasks in boards view (list are not connected to dates).
* The daily activities are not aligned with strategic goals. It is hard to see the "big picture" in daily operations.

## Pain

_What is the primary workaround that users perform that we could remove or replace? Why is it painful?_

* There are many organization that have physical planning boards in their office.
* People spent a lot of time in lengthy status meetings to keep everybody on the same page.
* For team leads it is hard to understand what their team members are currently working on and to communicate priorities.
* It is also hard for team members to show their supervisors what they are currently working on.
* It is almost impossible to limit the number of work-in-progress-items. Working on too many things in parallel harms the team's productivity.
* Project plans (Gantt charts) are not linked to operational activities.
* Project plans are outdated most of the time.

# Business Case

## Reach

_About how many users, customers or potential customers currently have this problem? (Low / Worst Case)_

* Significant reach because basically all project organizations are faced with the same problem.

## Impact

_Among relevant customers or prospects, how much value do they get from a comprehensive solution to this problem? (Conservative case)_

* High-impact since focussing the team's capacity on the right things increase the results significantly (working on the right things). Additionally it makes daily operations and alignment more efficient (doing it right).

## Confidence

_What are the top risk factors that could inhibit our ability to deliver this solution? Please consider how we can mitigate these risks._

* High confidence since we have seen this pattern in very many organizations.
* Sponsoring organizations.

## Urgency and Priority

_What is the relative priority of this opportunity in your backlog? What tradeoffs must you make? Is there a hard deadline or could this wait?_

* There is no external deadline such as a change of legal requirements.

## Solution

### The module

There is a new module called "Team planner". It also has a new module icon (available in a range of formats including SVG in Figma).

* This has to be enabled and has three permissions:
* "View team planner"
* "Manage team planner" and
* Make it public/private (phrasing to be confirmed)
* The work package module will have to be active for the team planner to be active.
* Is also based on fullcalendar.io but is separate from the Calendar module.

This new module, once enabled, is visible in the sidebar as "Team planner":

* Clicking on "Team planner" in the project sidebar drills into the "Team planner" sub-menu.
* The first item is a back button with the title "Team planner"
* In this sub-menu, there are four possible headers in the sidebars:
* "Favorite team planners" visible only if there are team planners that have been favourited
* "Public team planners" lists all saved team planners that are public
* "Private team planners" lists all team planners that are marked as not public
* The "Create team planner" only ever has on item (New team planner)
* The "first" team planner (so the first of either the favorited ones, public ones or the private ones, in that order) will the one that will be automatically loaded.
* If there are no existing team planners, the 'New team planner' item under "Create team planner" is loaded automatically.
* Within each view, the list of team planners is arranged alphabetically, allowing users to also prepend numbers to govern this
* To navigate to other saved planners, the user has to pick a different planner from the sidebar.
* The last header "Create new planner" has only one item, "New team planner". This is essentially the "Create" function (now that we don't have an index/list view for this v1).

### A basic (empty calendar)

Clicking on "Create new planner" loads an empty planner.

* The top header is by default in edit mode, much like when the user creates a new board; the user is able to type a name for the calendar and click on the save icon to save the calendar.
* _Note: there is no back button at the level of this top header (unlike when a new board is created; this should eventually also be changed in the boards)._
* The right side of the top header has three buttons:
* The standard "filter" action, with two specifities
* The assignee attribute is disabled/not available
* The time frame attribute is disabled/not available
* The full-screen icon.
* The "more" action with three vertically-stacked dots, with these functions (that exist already today in the context of work package list/table view).
* Rename
* Save
* Save as
* Delete
* Visibility settings
* The secondary toolbar has these elements, and is common to new and existing calendars:
* On the left edge:
* Nothing (for now; post-12.1, we will have the "Add existing button here).
* Centered:
* The current date range visible, either the month ("August 2021") or a week ("6–10 August 2021")
* On the right edge:
* A "today" button to return to today
* Left/right buttons to go forwards and backwards in time (in increments of week or month, depending on the current view)
* No filters are enabled by default in a new team planner
* The calendar area is empty in a new team planner (no work packages are visible since no assignees are added yet)
* There is a message on the calendar that says "Add assignees to set up your team planner."
* An "Add assignee" button allows users to add assignees to get started (this button is described below).

### **Main view**

The calendar week view is the main view:

* There is an "Assignee" column on the left edge.
* The other columns are dates, displayed as "{day name} - {date number}", as in "Monday - 9".
* This is shortened to "Mon - 9" in smaller windows when the cell is not wide enough to display the full version.
* The team planner, when opened, will always show the current week by default.
* If a user changes the dates (week) displayed by going forward or backwards, a refresh of the current page should fetch this same same modified date range, and not the current one. (**Open:** is this possible?)
* The current date is highlighted also in the column header, with the same yellow highlight as in the current calendar.
* As soon as assignees are added (and filters optionally enabled), work packages are displayed as strips (as they are currently in the Calendar module),
* Please see next section "Work package strips" for details.
* There is no upper limit to how many strips are displayed per assignee row. (**Open:** there should probably be a technical upper limit).
* There is an "Add assignee" button at the bottom, on the left edge.
* **Open** what is the loading animation while:
* Loading the work packages for the current week upon initially visiting the team planner
* Loading the work packages for the switched to week when browsing between weeks via the calendar buttons (next/previous week)

### Work package strips

* A work package strip is a visual representation of the work package in the calendar part of the team planner.
* A basic strip is almost identical to a work package strip in the current Calendar view.
* It starts on the start date and extends till the end date (either of which can be out of view)
* There is one line of text that represents the work package name
* The background colour represents the work package type
* A milestone is displayed:
* As a strip spanning a single day, that can be dragged around to change date or assignee, but does not have the drag edges (and thus cannot be resized; the duration is always 1 day).
* Clicking on a work package strip opens it in a classic split screen view (see below).

### **Dragging and dropping behaviour**

One of the primary advantages of the Team planner is the ability to adjust start/end times and change assignees simply by dragging work package strips.

* Small "drag handles" on either end are always visible and allow the user to extend the work package to the left or to the right.
* The left handle modifies start date.
* The right handle modifies end date.
* It is possible that for certain work strips, only one (or indeed none!) of the edge handles are visible, when the start and end dates are beyond the date range visible in the calendar.
* The user may drag a work package strip horizontally within the same assignee row to adjust the start and end dates (keeping the duration constant).
* The user may drag a work package vertically from one row to another to assign it to another user (can also be done simultaneously simulaneously with a horizontal horizotal scroll, ie., one can move the start date and change assignee in one drag-and-drop movement).
* When a work package is being dragged, the "target" date cells--the ones over which the work strip will be moved to--become blue (same as when a date range is selected) to create a new work package. This is also how fullcalendar.io natively does it. _(For visual reference, see added screen below under "Visuals")._
* The modifications are executed immediately on release.
* The work package snaps to position upon release (from its free-floating state when being dragged).
* **Open:** If the work package duration is longer than the time interval shown (e.g. two weeks) and especially when both the start date and end date are not in the shown time interval do we want to provide additional feedback to the user when dragging so that the user can gauge the new dates before dropping? Or do we want to limit the functionality of changing the dates only to that cases where at least the start or the end date is within the visible interval? We could still allow drag&drop between assignees but dragging within the same assignee wouldn't change anything.


### **Split screen view**

The split screen view is invoked either when:

* the user drag-selections a range of dates to create a new work package (described below)
* a work package strip is clicked to view its details.

The split screen behaves like it does in a work package list view:

* It anchors itself to the right.
* It pushes the main view (secondary header + calendar) to the left, and introduces a horizontal scroll
* Allows the user to change any attributes that they have the permission to change
* Any changes to the start/end dates or assignee are reflected immediately (**Open:** how immediately?) on the calendar view.

### **Add assignee button**

Clicking on this button adds a row to the calendar, with focus on the the assignee name search input (or if focus is not possible, an empty drop-down field with an "-"). This dropdown is the same as when one clicks on the "Assignee" drop-down in a work package full view or in a work package list.

* As the user starts typing, a list of users who correspond to the search terms displayed as:
* An avatar and
* Their full name
* Clicking on a particular user assigns the newly added row to the assignee, keeping its position (last row).
* On refresh, the assignee rows are re-organised alphabetically? **To discuss:** Or shall we display the assignees in the order in which assignees were added?
* It is possible to add a group as an assignee. (This allows the user to take a work package assigned to a group and assign it to a particular member of that group).
* Individuals in that group can nevertheless be added separately.
* The work packages in the group row then only show those explicitly assigned to the group, not those assigned to members of that group

### **Creating new work packages directly via the team planner**

In 12.1, adding existing work packages is not possible. This will be done in the next release via an "Add existing" pane to the left. Nevertheless, it is possible to create a new work package:

* A new work package is created by using fullcalendar.io's native drag-select functionality to allow the user to select a date range, which will trigger a "create work package" split screen. In this new work package split screen, these attributes are pre-filled based on the user's drag-select:
* the start date,
* the end date and
* the assignee
* If the user clicks on another work package whilst editing a new work package (without saving it), the behaviour is the same as when this happens in a work package list; a browser-native dialogue overlay asks them: _"Are you sure you want to cancel editing the work package?"._

### Removing work packages

Given that the team planner is merely a view, a user wishing to remove a particular work package (or a series of work packages) has three options:

* Filter the current view in such a way as to not display those work packages.
* Click on the work package strip to open the split screen view and remove the assignee, or stard/end dates so they are outside of the visible date range.
* Delete the work package (which will of course delete it from everywhere, and not just the team planner).

### Features specific to planning view

Planning view, once assignees have been added, affords the users more functionalities than is available in month view:

* Hovering on the cell with the name and avatar of the assignee displays a "remove" icon, that allows users to remove that assignee from the current view.
* The row will have a min height of x (by default the space needed to display the assignee name and icon + spacing), but can grow almost arbitrarily (see Open in "Error handing").
* To make sure this drag-select functionality is available even in cells that are particularly full (i.e, with lots of work packages on the same day), we will leave a +12px bottom padding on each assignee row. This is to ensure the user always has some whitespace available to drag-select to create a new work package.
* If the height of taken up by the assignee rows is more than the available screen height, scrolling is to be applied to entire page (or, if the split screen is open, the main area not including the split screen). **To discuss:** is this technically feasible?
* **To discuss -** When dragging a work package that spans more than the week, so that the start and end date is not displayed, we can display an overlay above the work package strip, on the edge that is cut-off, indicating the start date (see [Figma prototype for demo](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Planning-Calendar?node-id=923%3A38919)).

### Enterprise edition

* The team planner will be an enterprise only feature.
* The calendar module will be kept non enterprise with all improvements carried over from team planner included (e.g. persisting filters)

### **Error handling and exceptions**

#### Error management

* **When dragging or extending work packages**
* In this, first version, as I understand it, it is not possible to know in advance which work packages have relations or are read-only for any number of reasons (see list below). This means that we will not be able to communicate to the user that that work package isn't extendable or draggable _before_ they try modifying it, or _during._
* In any of the following cases, our (very imperfect but pragmatic) proposition for this v1 is to simply throw an error with a snackbar after the "offending" action is executed. An [example of the error in Figma is here](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1178%3A56096).
* **Examples of success and error messages are included in work package** **#39486** <mention class="mention" data-id="39486" data-type="work_package" data-text="#39486"><strong>#39486</strong></mention> **(related to drag-and-dropping work package strips).**
* Some cases where we might need to do this are:
* The work package has been invalid before, e.g. a required custom field is not set
* Moving the work package would violate a constraint (e.g. a preceding work package limiting the start date)
* For work packages with follows/precedes relationships.
* In case two work packages displayed on the same planning calendar at the same time are in a follows/precedes relationship _(for now treated the same as when they aren't on the same view; we'll need to make a distinction later when we're able to drag/drop work packages with relations)._
* the user not having the permission to edit work packages (the permissions might be different for two work packages within the same team planner if they are in different projects)
* the work package being a parent
* the work package having a locked status
* a constraint imposed by relationships on the start date is violated

### Visuals

_**An empty, initialized team planner**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24065/content"></div></figure>

_**A populated team planner with four assignees**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24064/content"></div></figure>

_**Hovering on a work package strip**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24066/content"></div></figure>

_**Dragging and dropping a work package strip (with blue background on target cells)**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24533/content"></div></figure>

_**Split screen view of a work package strip**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24067/content"></div></figure>

_**Drag-select a date range to create a new work package**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24068/content"></div></figure>

_**An error message when a work package is moved, extended or shortened but the user does not have the necessary permissions**_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/24069/content"></div></figure>

Other screens are visible in the [Figma prototype](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487).

**Mockups in Figma**
Figma prototype can be accessed at: https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487

_(Please note that the relevant screens are on the &quot;Team planner&quot; page; the above links takes you to the correct page)._

## Out of Scope for the MVC

_What should NOT be in the minimal viable change, and can be considered for future iterations? Why? Please order them by importance._

* Contributions to the fullcalendar-library
* Views other than weekly (including the two-week view)
* The ability to identify assignees with overdue work packages (and view those in an overlay)
* More detailed work package strips that display important attributes without needing a hover
* Work package planning stages (done, planned, overdue)
* Altering the order of assignees by dragging-and-dropping entire assignees rows
* A shortlist of work packages form which the user can drag and drop work packages to the calendar (and a way to filter this shortlist)
* Any form of automation (associating certain work package status with certain planning stages)
* **Mobile views**

## Differentiation

_What do you believe will differentiate us from the current experience or competitive experiences?_

* Redmine does not have Boards
* Jira does not support Gantt charts.
* MS Project (desktop) does not have a collaborative environment.

## Next iteration

_What is the next solution that would allow us to release meaningful customer value quickly?_

* Show planning iterations in the Gantt charts.
* Set work package type by hierarchy level
* Example 1: Epic -&gt; User Story -&gt; Task
* Example 2: Deliverables -&gt; Work package -&gt; Activities
* Coding schemes: 1.1.1, 1.1.2, 1.2.1, ....
Loading...