**As a** project manager
**I want to** enter lag to follow/precedes relations 
**so that** this is included in the scheduling of work packages.

#### **Note**

Since we are changing the relations tab to include lag, we are also Primerising it without adding any additional functionality apart from the ability to add and edit lag.

#### **Acceptance criteria (high-level)**

* The lag is shown in the relations tab for Begin of the insertionpredecessor/sucessorEnd of the insertion Begin of the deletion follow-precedessEnd of the deletion relations.

* The default is 0 days (unset).

* Users with the permissions "Manage work package relations" can edit the lag.

* Begin of the deletion ~~The lag can also be negative.~~

* End of the deletion The lag only considers working days Begin of the insertioninEnd of the insertion Begin of the deletion (forEnd of the deletion the current Begin of the insertionscope.End of the insertion Begin of the deletion scope).End of the deletion


##### Begin of the deletion Blank state

If a work package has no relations, a Blankslate is displayed:

* Title: No relations

* Caption: Add relations to other work packages to create a link between them.

* Action (primary): Add relation (dropdown)


#####End of the deletion Viewing relations

When relations exist,

* The top of the tab has a caption with a "+ Add relation" button (secondary)

* This is only visible to users with the permission to create work packages.

* Each type of existing relation is contained in a box section

* The title is the relation type followed by a badge of the number of relations (eg. "Related to (2)"

* Each relation includes:

* Begin of the insertionWork package info line (type, ID, status)End of the insertion Begin of the deletion Type

* #ID

* StatusEnd of the deletion

* Begin of the insertionSee ##58734 for existing implementationEnd of the insertion Begin of the deletion This will use the same Label component as in ##58512End of the deletion

* Work package name

* Description (optional, if it exists)

* More icon (...) with two options: Edit and Delete (danger)

* Children have no Edit option, just Delete.

* Predecessor/Successor relations include:

* The words "(before)" Begin of the insertionfor PredecssorsEnd of the insertion and "(after)" Begin of the insertionfor SuccessorsEnd of the insertion after the section titles for additional clarity

* Start and end date of the related work package (if it exists)

* Indication of manual scheduling Begin of the insertion(pin icon) ifEnd of the insertion Begin of the deletion (ifEnd of the deletion that's the Begin of the insertioncaseEnd of the insertion Begin of the deletion case)End of the deletion

* Lag (if it exists), expressed simply as "(Lag: 3 days)" after the date

* If a relation contains multiple relation types, each type is contained in its own box

* Apart from the relation types, children are also displayed in an individual box section, at the end.


**Adding relations**

* The "+ Add relation" allows the user to add a new relation

* Click on the button will trigger a flat Action menu to select relation types. Each relation has a title and a short caption that describes the relation type:

* **Related to**
Creates a visible link between the two work packages with no additional effect

* **Predecessor (before)**
The related work package necessarily needs to finish before this one can start

* **Successor (after)**
The related work package necessarily needs to start after this one finishes

* **Child**
Makes the related a work package a sub-item of the current (parent) work package

* **Duplicates**
This is a copy of the related work package.

* **Duplicated by**
The related work package is a copy of this.

* **Blocks**
The related work package cannot be closed until this one is closed first

* **Blocked by**
This work package cannot be closed until the related one is closed first

* **Includes**
Marks the related work package as including this one with no additional effect

* **Part of**
Marks the related work package as being part of this one with no additional effect

* **Requires**
Marks the related work package as a requirement to this one

* **Required by**
Marks this work package as being a requirement to the related one

* Selecting a relation type will display a dialog:

* Title: "Add {relation type}"

* Body:

* Work package search input

* Begin of the insertionDescription: input fieldEnd of the insertion Begin of the deletion Action (secondary): "+ Add description"End of the deletion

* Begin of the insertionOne-lineEnd of the insertion Begin of the deletion This adds a new text input line titled "Description"End of the deletion

* Begin of the insertionLag: input field (only for Predecessor and Successor relations)End of the insertion Begin of the deletion Action (secondary): "+ Add lag"End of the deletion

* Begin of the insertionDefault:End of the insertion Begin of the deletion This adds a new text input line titled "Lag"

* Defaut:End of the deletion "0 days"

* Caption: "The gap in number of working days in between the two work packages"

* Validation: The field has to be an integer (whole numbers: negative, 0 or positive) Begin of the insertion


End of the insertion Begin of the deletion

* Selecting "Child" will display a dialog:

* Title: "Add child"

* Body:

* Work package search input


End of the deletion **Editing relations**

* Relations can also be edited

* The More (⋯) action on relations displays a drop-down with two options:

* Edit relation

* Delete relation

* The "Edit relation" modal displays the Edit modal

* This is a variation of the add relation modal

* The work package field is inactive (it is not possible to modify this)

* Begin of the insertionLagEnd of the insertion Begin of the deletion The user can add or edit lag (if available)End of the deletion and description Begin of the insertioncan be modifiedEnd of the insertion

* Child relations only have the "Delete" relation option; they cannot be edited (because they can have neither lag nor description)


**Empty state**

Begin of the insertion##### Blank state

End of the insertion Begin of the deletion * End of the deletion If a work package has no Begin of the insertionrelations, a Blankslate is displayed:

End of the insertion Begin of the deletion relations:

End of the deletion * Begin of the insertionTitle: No relations

End of the insertion Begin of the deletion The top of the tab will still have a caption with a "+ Add relation" button (secondary)

End of the deletion * Begin of the insertionCaption:End of the insertion This Begin of the deletion will be followed with a Blankslate informing the user that theEnd of the deletion work package does not Begin of the deletion yetEnd of the deletion have Begin of the insertionany relations yet.


End of the insertion Begin of the deletion relations.


End of the deletion #### **Visuals and Figma mockups**

The UX/UI is a work in progress. For the most up-to-date mockups, please refer to the Figma document:

workPackageValue:"Figma wireframes"

Begin of the insertion<br>End of the insertion Begin of the deletion **Blank state:**End of the deletion

Begin of the deletion <img class="image_resized op-uc-image op-uc-image_inline" style="width:446px;" src="/api/v3/attachments/210175/content">

End of the deletion **Add relations drop-down:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:433px;" src="/api/v3/attachments/234378/content">

<br>

**Add successor Begin of the insertiondialog** End of the insertion Begin of the deletion dialog** (&quot;+ Add lag&quot; has already been clicked to show the Lag input):End of the deletion

<img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:515px;" src="/api/v3/attachments/238431/content">End of the insertion Begin of the deletion style="width:524px;" src="/attachments/188273/Add_relation_-_Successor__with_lag_.png">End of the deletion

**Multiple relations visible:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:450px;" src="/api/v3/attachments/234377/content">

**Edit relation modal:**

<img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:508px;" src="/api/v3/attachments/238432/content">End of the insertion Begin of the deletion style="width:485px;" src="/api/v3/attachments/236682/content">End of the deletion

#### **Anticipated UX issues**

* A user, especially one who is not familiar with the concept of lag, might not understand the concept. Begin of the insertion

* We&#39;ve added a captionEnd of the insertion Begin of the deletion We might haveEnd of the deletion to explain Begin of the insertionwhat it is in the create/edit relations modal.

End of the insertion Begin of the deletion this better.

End of the deletion * In a Gantt view, when a user moves a work package into the future, certain other work packages might be pushed. Based on the lag set for those relations, some might move by keeping a certain distance (3 days in between), some might move with no distance (the next day) and some might move with negative distance (-2 days). How should the user understand this inconsistent behaviour, especially if she cannot see that lag has been set inside the work packages?

* How can we make lag more visible in the Gantt view itself? It would have to be in the lines connected the work packages, but we know that there are technical limitations to how much we can do here.


#### Reference

**MS Project:**

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/95368/content"></div><figcaption class="op-uc-figure--description">Example (MS Project):</figcaption></figure>

#### Out of scope

* Making lag visible in the Gantt chart

* Begin of the insertionNegative lag: ##58011

* End of the insertion Displaying ghost relations, described separately: ##58427

* The option to include non-working days in lag (option to select/deselect &quot;Working days&quot; next to Lag in the relation edit modal)

* Scheduling modes, which will worked on after this feature: Begin of the insertion##42388End of the insertion Begin of the deletion

* ###42388End of the deletion