{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/manage-your-work/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Managing work","navTitle":null,"slug":"design/manage-your-work/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"Users conduct work in your application by creating and managing **cases**. A case is a work item that users complete to achieve an outcome, such as processing an insurance claim. Users complete Tasks and processes to progress through a case's [Lifecycle](/versions/8/design/case-lifecycle) and complete a case.\n\nOnce a user creates a case, they can manage their work on that case using the **Case Page**. Here, they will follow a prescribed workflow to conduct work, using the following three regions on the page:\n\n- The **summary panel** displays an overview of the most important data and contains the case's primary [tabs](/versions/8/design/tabs)\n- The **work area** is where most of the case activity occurs and users get work done. The work area may consist of [Tasks](/versions/8/design/tasks), [Pulse](/versions/8/design/pulse), and other components used to conduct work\n- The **utilities panel** contains relevant attachments, team info, and other critical tools\n\n![Case layout breakdown](/versions/8/uploads/case_region_details.png)"},"body":[{"id":"b2415c61-e7b5-5407-88b5-045b2b5d6d22","strapi_component":"layout.section","subSections":[],"title":"Summary panel","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Users will use the summary panel to quickly and conveniently access the most important information about a case when completing work— like the Case ID, status, and account details. \n\nUsers can collapse the summary panel to hide it from view at any point in the workflow. This allows them to control their view of the Case Page, including what information is displayed and how screen space is used. When expanded again, the summary panel will display as the user last left it.  \n\n![Case summary breakdown](/versions/8/uploads/case_panel_details_summary2.png)\n\nThe summary panel is made up of the following elements:\n\nThe **case header** is used to convey the most important information about the case, at a glance. It includes the following information:\n\n- The case (or work item) icon that is shared across all similar work (e.g., a claim icon for all claims work)\n- The unique ID of the case or work item\n- The title of the case or work item\n- Any quick Action(s) for that item (the follow Action is default)\n\nThe **highlighted fields** and **fields** show the data required to understand the case or piece of work quickly and across all contexts. These fields may include:\n\n- A list of generic or topical updates (e.g., last updated, status, etc.)\n- Core information unique to the case or work (i.e., if you are creating a medical insurance application - a member filing claim, specific injury, etc.)\n\nThe designer may decide the order of items and total number of items shown. We recommend including under 10 data items, in order to avoid a busy UI.\n\n[Tabs](/versions/8/design/tabs) house critical pieces of data that allow users to complete their work. Examples include:\n\n- The Pulse tab, which includes full chat conversations and important milestones in the case (and may add details or context in a way that standard data fields cannot)\n- The details tab, which includes additional information that is not already provided in the summary\n- The summary tab, which houses all summary data when a device's resolution is low. The tab appears as the first tab in responsive mode.\n- Custom tabs, which are generally reserved for several types of data:\n  - Child cases - used to reveal a full list of dependencies, children, and other relationships between data. These are typically used for robust lists of data that must be displayed in entirety or in tables (for comparison)\n  - Insights - used to visualize data that reveals trends"}},{"id":"345e73ec-c4b2-5d77-84ff-20a3412679ec","strapi_component":"layout.section","subSections":[],"title":"Work area","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The work area is where users complete their work on a case. This is where users will complete Tasks and progress through the Stages of a case until completion.\n\n![Case work area breakdown](/versions/8/uploads/case_work_area_details.png)\n\nThe work area is made up of the following elements:\n\n- The [Lifecycle](/versions/8/design/case-lifecycle) of a case, also known as Stages, shows the past, present and future state of the business process. Users can reference this component to understand what has already been completed on a case and what is upcoming\n- [Tasks](/versions/8/design/tasks), which include the work-to-be done items, or assignments. Users will work through Tasks to complete case Stages and move work forward until a case is completed. Tasks are made up of **forms**. Forms help users advance their work on a task or edit previously entered data\n- **Panel with current tab details**, which displays the selected summary panel tab's information. This content can include case details, the Pulse feed, or lists of cases"}},{"id":"79478d0d-2b6d-548d-9737-84044bb8b2fe","strapi_component":"layout.section","subSections":[],"title":"Utilities panel","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The utilities panel is a collapsible region where users access relevant documents and information on people and other cases related to a case.\n\nLike the summary panel, users can collapse the utilities panel to hide it from view at any point in the workflow. When expanded again, the utilities panel will display as the user last left it.\n\n![8.7-Utility panel](/versions/8/uploads/8.7_utility_panel.png)\n\nThe utilities panel contains the following:\n\n- The **utility area**, which contains common utility widgets that house information. Users can add utility assets as needed. It can hold the following widgets:\n  - [Attachments](/versions/8/design/attachments)\n  - [Followers](/versions/8/design/followers)\n  - [Related cases](/versions/8/design/related-cases)\n  - [Stakeholders](/versions/8/design/stakeholders)\n- **Expand/collapse toggle**\n\nThe utilities panel is an optional part of a case; if a designer chooses no utilities for a case, it will not be presented."}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Managing work","navTitle":null,"slug":"design/manage-your-work/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"Users conduct work in your application by creating and managing **cases**. A case is a work item that users complete to achieve an outcome, such as processing an insurance claim. Users complete Tasks and processes to progress through a case's [Lifecycle](/versions/8/design/case-lifecycle) and complete a case.\n\nOnce a user creates a case, they can manage their work on that case using the **Case Page**. Here, they will follow a prescribed workflow to conduct work, using the following three regions on the page:\n\n- The **summary panel** displays an overview of the most important data and contains the case's primary [tabs](/versions/8/design/tabs)\n- The **work area** is where most of the case activity occurs and users get work done. The work area may consist of [Tasks](/versions/8/design/tasks), [Pulse](/versions/8/design/pulse), and other components used to conduct work\n- The **utilities panel** contains relevant attachments, team info, and other critical tools\n\n![Case layout breakdown](/versions/8/uploads/case_region_details.png)"},"body":[{"id":"b2415c61-e7b5-5407-88b5-045b2b5d6d22","strapi_component":"layout.section","subSections":[],"title":"Summary panel","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Users will use the summary panel to quickly and conveniently access the most important information about a case when completing work— like the Case ID, status, and account details. \n\nUsers can collapse the summary panel to hide it from view at any point in the workflow. This allows them to control their view of the Case Page, including what information is displayed and how screen space is used. When expanded again, the summary panel will display as the user last left it.  \n\n![Case summary breakdown](/versions/8/uploads/case_panel_details_summary2.png)\n\nThe summary panel is made up of the following elements:\n\nThe **case header** is used to convey the most important information about the case, at a glance. It includes the following information:\n\n- The case (or work item) icon that is shared across all similar work (e.g., a claim icon for all claims work)\n- The unique ID of the case or work item\n- The title of the case or work item\n- Any quick Action(s) for that item (the follow Action is default)\n\nThe **highlighted fields** and **fields** show the data required to understand the case or piece of work quickly and across all contexts. These fields may include:\n\n- A list of generic or topical updates (e.g., last updated, status, etc.)\n- Core information unique to the case or work (i.e., if you are creating a medical insurance application - a member filing claim, specific injury, etc.)\n\nThe designer may decide the order of items and total number of items shown. We recommend including under 10 data items, in order to avoid a busy UI.\n\n[Tabs](/versions/8/design/tabs) house critical pieces of data that allow users to complete their work. Examples include:\n\n- The Pulse tab, which includes full chat conversations and important milestones in the case (and may add details or context in a way that standard data fields cannot)\n- The details tab, which includes additional information that is not already provided in the summary\n- The summary tab, which houses all summary data when a device's resolution is low. The tab appears as the first tab in responsive mode.\n- Custom tabs, which are generally reserved for several types of data:\n  - Child cases - used to reveal a full list of dependencies, children, and other relationships between data. These are typically used for robust lists of data that must be displayed in entirety or in tables (for comparison)\n  - Insights - used to visualize data that reveals trends"}},{"id":"345e73ec-c4b2-5d77-84ff-20a3412679ec","strapi_component":"layout.section","subSections":[],"title":"Work area","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The work area is where users complete their work on a case. This is where users will complete Tasks and progress through the Stages of a case until completion.\n\n![Case work area breakdown](/versions/8/uploads/case_work_area_details.png)\n\nThe work area is made up of the following elements:\n\n- The [Lifecycle](/versions/8/design/case-lifecycle) of a case, also known as Stages, shows the past, present and future state of the business process. Users can reference this component to understand what has already been completed on a case and what is upcoming\n- [Tasks](/versions/8/design/tasks), which include the work-to-be done items, or assignments. Users will work through Tasks to complete case Stages and move work forward until a case is completed. Tasks are made up of **forms**. Forms help users advance their work on a task or edit previously entered data\n- **Panel with current tab details**, which displays the selected summary panel tab's information. This content can include case details, the Pulse feed, or lists of cases"}},{"id":"79478d0d-2b6d-548d-9737-84044bb8b2fe","strapi_component":"layout.section","subSections":[],"title":"Utilities panel","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The utilities panel is a collapsible region where users access relevant documents and information on people and other cases related to a case.\n\nLike the summary panel, users can collapse the utilities panel to hide it from view at any point in the workflow. When expanded again, the utilities panel will display as the user last left it.\n\n![8.7-Utility panel](/versions/8/uploads/8.7_utility_panel.png)\n\nThe utilities panel contains the following:\n\n- The **utility area**, which contains common utility widgets that house information. Users can add utility assets as needed. It can hold the following widgets:\n  - [Attachments](/versions/8/design/attachments)\n  - [Followers](/versions/8/design/followers)\n  - [Related cases](/versions/8/design/related-cases)\n  - [Stakeholders](/versions/8/design/stakeholders)\n- **Expand/collapse toggle**\n\nThe utilities panel is an optional part of a case; if a designer chooses no utilities for a case, it will not be presented."}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}