# Feature SPPM-216 - Visualize "Portfolio", "Program" and "Project" differently in dropdowns and lists

Project: Stream Project Portfolio Management
Status: closed
URL: https://community.openproject.org/work_packages/SPPM-216

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 17.0.0 |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| SPPM-279 | Bug | Project list: not enough space between the porfolio/program's name and the workspace icon and type | closed |  | 17.0.0 |  | Modules and project features / Project list |
| SPPM-278 | Bug | Program's name not truncated in the project dropdown = workspace type, icon, star not visible | closed |  | 17.0.0 |  | Modules and project features / Project list |
| SPPM-266 | Bug | Complete specs for autocompleter changes | closed |  | 17.0.0 |  |  |
| SPPM-264 | Bug | In autocompleters: Program icons wrong, text not muted  | closed |  | 17.0.0 |  |  |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/bDgY4i9P5Bp2wAjNV0yeU0/Portfolios-module?node-id=1-20105 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Attila Dombi |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a user  
**I want to** see different representations for "Program", "Portfolio" and "Project" in dropdowns and lists  
**so that** I can easily distinguish between the three

## **Acceptance criteria**

#### **Type representations:**

  - The new workspace types are differentiated by icons:
    
      - Project: `project`
    
      - Program: `versions`
    
      - Portfolio: `briefcase`

#### **Projects list:**

  - The `project list` module is keeping the name `Projects`

  - For portfolios and programs in the table will to will have a label at the end of the name with an icon and label will be displayed.
    
      - The name of the projects should be truncated at the end of the modal preserving always visible, if present, the type label and icon.

  - The button `+ Project` is now renamed `+ Add` and opens a dropdown with all three options of creation (portfolio, program, and project) with each icon represented.

#### Projects dropdown:

  - The new dropdown should open the hierarchy containing all the three types of project types.

  - The new dropdown modal should take a bigger width of `640px`.
    
      - The name of the projects should be truncated at the end of the modal preserving always visible, if present, the favorite star and the type label.

  - The dropdown header is removed and the search bar and `All | Favorite` toggle switch are now in a single line.

  - The star to indicate favorite project types is maintained.

  - The icon and label to indicate Portfolios and Programs is added in the latest position after the name of the workspace and star (if present).
    
      - The projects don't have icon or label indicator.

  - The `+ Project` button in the dropdown and the `Project lists` button in the footer should be removed.

#### Others:

  - The dropdown for project selection, like parent projects… (excluding type project) should also contain the information of the workspace type as done in the workspaces' dropdown.

## **Figma**

  - Workspaces lists: <https://www.figma.com/design/bDgY4i9P5Bp2wAjNV0yeU0/Portfolios-module?node-id=194-7536>

  - Workspaces dropdown: <https://www.figma.com/design/bDgY4i9P5Bp2wAjNV0yeU0/Portfolios-module?node-id=1-20105>

## **Technical notes**

  - The list and autocomplete of needs to be maintained in Angular for now until the TreeView is not ready.

  - Until the TreView is not optimised for loading all projects.

## **Permissions and visibility considerations**

  - *none*

## **Translation considerations**

  - *none*

## **Out of scope**

  - The project dropdown is not going to be Primarised using Turbo until the TreeView is ready.

  - Replacing the project dropdown (for navigation) by a filterable tree view.

  - Same is true for other project dropdown