Roadmaps layout for Projects (github#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>

content/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/changing-the-layout-of-a-view.md

@@ -0,0 +1,49 @@
+---
+title: Changing the layout of a view
+shortTitle: Changing the layout
+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 %}.'
+miniTocMaxHeadingLevel: 3
+versions:
+  feature: projects-v2
+redirect_from:
+  - /issues/trying-out-the-new-projects-experience/customizing-your-project-views
+  - /issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-a-view
+type: tutorial
+topics:
+  - Projects
+---
+
+## About the table layout
+
+{% 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)."
+
+![Screenshot showing an example table layout](/assets/images/help/projects-v2/example-table.png)
+
+## About the board layout
+
+{% 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)."
+
+![Screenshot showing an example board layout](/assets/images/help/projects-v2/example-board.png)
+
+{% ifversion projects-v2-roadmaps %}
+
+## About the roadmap layout
+
+{% data reusables.projects.roadmaps-release-stage %}
+
+{% 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)."
+
+![Screenshot showing an example roadmap layout](/assets/images/help/projects-v2/example-roadmap.png)
+
+{% endif %}
+
+## Changing the project layout
+
+You can set each view in your project to a different layout.
+
+{% data reusables.projects.open-view-menu %}
+1. Under "Layout", click either **Table**{% ifversion projects-v2-roadmaps %}, **Board** or **Roadmap**{% else %} or **Board**{% endif %}.
+   {% 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 %}
+
+
+Alternatively, open the project command palette by pressing {% data variables.projects.command-palette-shortcut %} and start typing "Switch layout."

content/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-board-layout.md

@@ -0,0 +1,57 @@
+---
+title: Customizing the board layout
+shortTitle: Customizing boards
+intro: 'You can use the board layout to arrange your project''s items over customizable columns.'
+miniTocMaxHeadingLevel: 3
+versions:
+  feature: projects-v2
+type: tutorial
+topics:
+  - Projects
+---
+
+## About the board layout
+
+{% data reusables.projects.about-board-layout %}
+
+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)."
+
+## Showing and hiding fields
+
+{% data reusables.projects.customize.show-hide-field %}
+
+## Setting the column field in board layout
+
+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`.
+
+{% data reusables.projects.open-view-menu %}
+1. Click {% octicon "columns" aria-label="the columns icon" %} **Column field**.
+   ![Screenshot showing the column field item](/assets/images/help/projects-v2/column-field-menu-item.png)
+1. Click the field you want to use.
+   ![Screenshot showing the column field menu](/assets/images/help/projects-v2/column-field-menu.png)
+
+Alternatively, open the project command palette by pressing {% data variables.projects.command-palette-shortcut %} and start typing "Column field by."
+
+{% ifversion projects-v2-column-visibility %}
+
+## Showing and hiding columns in board layout
+
+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.
+
+1. In the board layout, scroll to the right of your columns, and click {% octicon "plus" aria-label="the plus icon" %}.
+
+   ![Screenshot showing the plus symbol button](/assets/images/help/projects-v2/board-add-column.png)
+
+1. Select the columns you want to show.
+
+   ![Screenshot showing the list of columns](/assets/images/help/projects-v2/board-select-columns.png)
+
+{% endif %}
+
+{% ifversion projects-v2-numeric-summary %}
+
+## Showing the sum of a number field
+
+{% data reusables.projects.customize.sum %}
+
+{% endif %}

content/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-roadmap-layout.md

@@ -0,0 +1,68 @@
+---
+title: Customizing the roadmap layout
+shortTitle: Customizing roadmaps
+intro: 'You can use the roadmap layout to view your project''s items on a timeline.'
+miniTocMaxHeadingLevel: 3
+versions:
+  feature: projects-v2-roadmaps
+type: tutorial
+topics:
+  - Projects
+---
+
+{% data reusables.projects.roadmaps-release-stage %}
+
+## About the roadmap layout
+
+{% data reusables.projects.about-roadmap-layout %}
+
+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)."
+
+## Setting the start and target date fields
+
+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)."
+
+1. In the top right of your roadmap, click {% octicon "calendar" aria-label="the calendar icon" %} **Date fields**.
+
+  ![Screenshot showing the date field menu item](/assets/images/help/projects-v2/roadmap-menu-dates.png)
+
+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.
+
+  ![Screenshot showing the date field options](/assets/images/help/projects-v2/roadmap-dates-create-field.png)
+
+1. Select a date or iteration field for "Start date" and "Target date."
+
+  ![Screenshot showing the date field options](/assets/images/help/projects-v2/roadmap-select-dates.png)
+
+## Setting the zoom level
+
+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.
+
+1. In the top right of your roadmap, click {% octicon "search" aria-label="the zoom icon" %}.
+
+  ![Screenshot showing the zoom button](/assets/images/help/projects-v2/roadmap-zoom-button.png)
+
+1. Select either **Month**, **Quarter**, or **Year**.
+
+  ![Screenshot showing the zoom level options](/assets/images/help/projects-v2/roadmap-zoom-menu.png)
+
+
+## Showing and hiding fields
+
+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.
+
+{% data reusables.projects.customize.show-hide-field %}
+
+## Grouping by field values
+
+You can group items by a custom field value.
+
+{% data reusables.projects.customize.group-fields %}
+
+{% ifversion projects-v2-numeric-summary %}
+
+## Showing the sum of a number field
+
+{% data reusables.projects.customize.sum %}
+
+{% endif %}