Skip to content

Commit 50e499e

Browse files
guntripgithub-actionsisaacmbrownmchammer01
authored
Roadmaps layout for Projects (#33266)
Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Isaac Brown <101839405+isaacmbrown@users.noreply.github.com> Co-authored-by: mc <42146119+mchammer01@users.noreply.github.com>
1 parent 85c0013 commit 50e499e

28 files changed

+322
-164
lines changed

Diff for: assets/images/help/projects-v2/example-board.png

190 KB
Loading

Diff for: assets/images/help/projects-v2/example-roadmap.png

112 KB
Loading

Diff for: assets/images/help/projects-v2/example-table.png

119 KB
Loading
12.1 KB
Loading
6.92 KB
Loading
10.9 KB
Loading
6.81 KB
Loading

Diff for: assets/images/help/projects-v2/roadmap-zoom-menu.png

8.61 KB
Loading
-2.58 KB
Loading
6.69 KB
Loading
6.55 KB
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Changing the layout of a view
3+
shortTitle: Changing the layout
4+
intro: 'You can view your project as a high-density table{% ifversion projects-v2-roadmaps %}, as a kanban board, or as a timeline-style roadmap{% else %} or as a kanban board{% endif %}.'
5+
miniTocMaxHeadingLevel: 3
6+
versions:
7+
feature: projects-v2
8+
redirect_from:
9+
- /issues/trying-out-the-new-projects-experience/customizing-your-project-views
10+
- /issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-a-view
11+
type: tutorial
12+
topics:
13+
- Projects
14+
---
15+
16+
## About the table layout
17+
18+
{% data reusables.projects.about-table-layout %} For more information, see "[Customizing the table layout](/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-table-layout)."
19+
20+
![Screenshot showing an example table layout](/assets/images/help/projects-v2/example-table.png)
21+
22+
## About the board layout
23+
24+
{% data reusables.projects.about-board-layout %} For more information, see "[Customizing the board layout](/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-board-layout)."
25+
26+
![Screenshot showing an example board layout](/assets/images/help/projects-v2/example-board.png)
27+
28+
{% ifversion projects-v2-roadmaps %}
29+
30+
## About the roadmap layout
31+
32+
{% data reusables.projects.roadmaps-release-stage %}
33+
34+
{% data reusables.projects.about-roadmap-layout %} For more information, see "[Customizing the roadmap layout](/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-roadmap-layout)."
35+
36+
![Screenshot showing an example roadmap layout](/assets/images/help/projects-v2/example-roadmap.png)
37+
38+
{% endif %}
39+
40+
## Changing the project layout
41+
42+
You can set each view in your project to a different layout.
43+
44+
{% data reusables.projects.open-view-menu %}
45+
1. Under "Layout", click either **Table**{% ifversion projects-v2-roadmaps %}, **Board** or **Roadmap**{% else %} or **Board**{% endif %}.
46+
{% ifversion projects-v2-roadmaps %}![Screenshot showing layout option](/assets/images/help/projects-v2/table-or-board-or-roadmap.png){% else %}![Screenshot showing layout option](/assets/images/help/projects-v2/table-or-board.png){% endif %}
47+
48+
49+
Alternatively, open the project command palette by pressing {% data variables.projects.command-palette-shortcut %} and start typing "Switch layout."

Diff for: content/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-a-view.md

-150
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Customizing the board layout
3+
shortTitle: Customizing boards
4+
intro: 'You can use the board layout to arrange your project''s items over customizable columns.'
5+
miniTocMaxHeadingLevel: 3
6+
versions:
7+
feature: projects-v2
8+
type: tutorial
9+
topics:
10+
- Projects
11+
---
12+
13+
## About the board layout
14+
15+
{% data reusables.projects.about-board-layout %}
16+
17+
For more information about changing a view to use the board layout, see "[Changing the project layout](/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/changing-the-layout-of-a-view#changing-the-project-layout)."
18+
19+
## Showing and hiding fields
20+
21+
{% data reusables.projects.customize.show-hide-field %}
22+
23+
## Setting the column field in board layout
24+
25+
In the board layout, you choose any single select or iteration field for your columns. If you drag an item to a new column, the value of that column is applied to the dragged item. For example, if you use the "Status" field for your board columns and then drag an item with a status of `In progress` to the `Done` column, the status of the item will switch to `Done`.
26+
27+
{% data reusables.projects.open-view-menu %}
28+
1. Click {% octicon "columns" aria-label="the columns icon" %} **Column field**.
29+
![Screenshot showing the column field item](/assets/images/help/projects-v2/column-field-menu-item.png)
30+
1. Click the field you want to use.
31+
![Screenshot showing the column field menu](/assets/images/help/projects-v2/column-field-menu.png)
32+
33+
Alternatively, open the project command palette by pressing {% data variables.projects.command-palette-shortcut %} and start typing "Column field by."
34+
35+
{% ifversion projects-v2-column-visibility %}
36+
37+
## Showing and hiding columns in board layout
38+
39+
In the board layout, you can can choose which columns to display. The available columns are made up of the contents of your selected column field.
40+
41+
1. In the board layout, scroll to the right of your columns, and click {% octicon "plus" aria-label="the plus icon" %}.
42+
43+
![Screenshot showing the plus symbol button](/assets/images/help/projects-v2/board-add-column.png)
44+
45+
1. Select the columns you want to show.
46+
47+
![Screenshot showing the list of columns](/assets/images/help/projects-v2/board-select-columns.png)
48+
49+
{% endif %}
50+
51+
{% ifversion projects-v2-numeric-summary %}
52+
53+
## Showing the sum of a number field
54+
55+
{% data reusables.projects.customize.sum %}
56+
57+
{% endif %}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Customizing the roadmap layout
3+
shortTitle: Customizing roadmaps
4+
intro: 'You can use the roadmap layout to view your project''s items on a timeline.'
5+
miniTocMaxHeadingLevel: 3
6+
versions:
7+
feature: projects-v2-roadmaps
8+
type: tutorial
9+
topics:
10+
- Projects
11+
---
12+
13+
{% data reusables.projects.roadmaps-release-stage %}
14+
15+
## About the roadmap layout
16+
17+
{% data reusables.projects.about-roadmap-layout %}
18+
19+
For more information about changing a view to use the roadmap layout, see "[Changing the project layout](/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/changing-the-layout-of-a-view#changing-the-project-layout)."
20+
21+
## Setting the start and target date fields
22+
23+
You can set the date or iteration fields that your roadmap will use to position items. When you set a view to a roadmap layout, {% data variables.product.company_short %} will attempt to use existing date and iteration fields you have already set up. If you choose an iteration field, you cannot add or edit iterations directly in the roadmap layout. For more information on creating new fields, see "[About date fields](/issues/planning-and-tracking-with-projects/understanding-fields/about-date-fields)" and "[About iteration fields](/issues/planning-and-tracking-with-projects/understanding-fields/about-iteration-fields)."
24+
25+
1. In the top right of your roadmap, click {% octicon "calendar" aria-label="the calendar icon" %} **Date fields**.
26+
27+
![Screenshot showing the date field menu item](/assets/images/help/projects-v2/roadmap-menu-dates.png)
28+
29+
1. Optionally, to create a new date or iteration field, click {% octicon "plus" aria-label="the plus icon" %} **New field**, type the name of your field, and click **Save**. You can then select the new field or create another.
30+
31+
![Screenshot showing the date field options](/assets/images/help/projects-v2/roadmap-dates-create-field.png)
32+
33+
1. Select a date or iteration field for "Start date" and "Target date."
34+
35+
![Screenshot showing the date field options](/assets/images/help/projects-v2/roadmap-select-dates.png)
36+
37+
## Setting the zoom level
38+
39+
You can choose the density of items on your roadmap. You can zoom in to show one month at a time or, for a greater overview, you can zoom out to show a quarter of a year or a full year.
40+
41+
1. In the top right of your roadmap, click {% octicon "search" aria-label="the zoom icon" %}.
42+
43+
![Screenshot showing the zoom button](/assets/images/help/projects-v2/roadmap-zoom-button.png)
44+
45+
1. Select either **Month**, **Quarter**, or **Year**.
46+
47+
![Screenshot showing the zoom level options](/assets/images/help/projects-v2/roadmap-zoom-menu.png)
48+
49+
50+
## Showing and hiding fields
51+
52+
When you show and hide fields on the roadmap layout, you define which fields are shown when the side panel opens. This setting will not affect the information visible on the roadmap layout.
53+
54+
{% data reusables.projects.customize.show-hide-field %}
55+
56+
## Grouping by field values
57+
58+
You can group items by a custom field value.
59+
60+
{% data reusables.projects.customize.group-fields %}
61+
62+
{% ifversion projects-v2-numeric-summary %}
63+
64+
## Showing the sum of a number field
65+
66+
{% data reusables.projects.customize.sum %}
67+
68+
{% endif %}

0 commit comments

Comments
 (0)