--- sourceDocument: Yokohama Customer Service Management sourceDocumentLink: https://www.servicenow.com/docs/r/yokohama/customer-service-management Release : - yokohama ft:locale : - en-US ft:publication_title : - Yokohama Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # CSM Configurable Workspace form ribbon and components # CSM Configurable Workspace form ribbon and components {#ariaid-title1} * Release version: Yokohama * * Updated December 16, 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete. ## Summary of CSM Configurable Workspace Form Ribbon and Components The CSM Configurable Workspace form ribbon enhances the agent experience by providing quick access to relevant case details such as customer information, timelines, and SLA details. Agents can easily view and manage case information, communicate with customers, and customize the ribbon display to meet their needs. Show full answer Show less ## Key Features * **Customer 360 Component:** Displays essential customer information including names, contact details, and accounts. Agents can email or call customers directly from this component. * **Timeline Component:** Offers a chronological summary of case activities, showing interactions and time spent on the case. Agents can zoom in/out and pan to view detailed events. * **Active SLA Component:** Shows active SLAs, time remaining, and breach statuses. Color coding indicates SLA urgency, helping agents prioritize their workload. * **Time to Resolve Component:** Estimates the time required to resolve cases, allowing agents to manage their time effectively. ## Key Outcomes By utilizing these features, ServiceNow customers can improve case management efficiency, enhance communication with clients, and ensure that SLAs are monitored effectively. Agents can customize the ribbon layout to streamline their workflow, providing a tailored experience that meets their operational needs. Enhanced visibility into case details and customer interactions ultimately leads to faster resolutions and improved customer satisfaction. The form ribbon provides includes components that display relevant information about a case and provide agents with a quick overview of the case details. These components can include a contact or consumer summary, a timeline, and SLA details. In addition to viewing case information, agents can use links in the ribbon components to place phone calls or create email messages. Agents can also show or hide the ribbon as needed by clicking a button at the top of the ribbon. ## Customer Service Management ribbon components {#csm-agent-workspace-ribbon__section_ol2_sjh_zdb} For Customer Service Management, you can configure the ribbon for the Case form to include one or more of the available ribbon components: * Customer 360 * Timeline * Active SLAs * Time to resolve component {#csm-agent-workspace-ribbon__ul_vqw_1vc_qhb} ## Customer 360 ribbon component {#csm-agent-workspace-ribbon__section_t33_bms_rdb} The Customer 360 component displays customer information such as the contact or consumer name, email address, and phone numbers. Figure 1. Customer 360 ribbon component You can configure the Customer 360 component to display different fields, such as the fields described in the following table. {#csm-agent-workspace-ribbon__table_idt_zmj_npb__entry__2} | Field | Description | |-|-| | Header | The header includes customer information. * For B2B customers: Displays either the Primary Contact or Contact. * For B2C customers: Displays the Consumer. * For internal contacts with the proxy contact role (sn_customerservice.proxy_contact): Displays the Internal contact. Note: Requires the CSM Extension for Proxy Contacts (com.snc.csm_proxy_contacts) plugin. {#csm-agent-workspace-ribbon__ul_d13_ngv_phb} | | Avatar | A graphic representation of the customer's identity, such as an image or icon. | | Name | The customer's name. | | Title | The customer's title. | | Account | For B2B customers, the account associated with the contact. | | Phone numbers | * For contacts: Mobile phone and Business phone * For consumers: Mobile phone and Home phone {#csm-agent-workspace-ribbon__ul_sdt_yms_rdb} | | Email address | The customer's email address. | [ ] {#csm-agent-workspace-ribbon__table_idt_zmj_npb} The Customer 360 component supports dot walking on selected reference tables. You can display fields from these tables: * User \[sys_user\] * Contact \[customer_contact\] * Consumer \[csm_consumer\] {#csm-agent-workspace-ribbon__ul_pdk_jgf_lwb} If you configure the Customer 360 component to display information from a dot-walked field, the label for that field shows the `Column` name instead of the `Table.Column` name. Note: For B2B customers, the Customer 360 component can also include colored tags that indicate Very Important Person (VIP) accounts and escalated accounts. From the Customer 360 component, agents can perform the following actions. {#csm-agent-workspace-ribbon__csm-agent-customer-360-actions__entry__2} | Action | Description | |-|-| | Email a contact or consumer | Agents click the address in the Email field to send an email to the contact or consumer. This action opens a new email in the email editor with the following fields auto-populated: * To: the contact or consumer email address * Subject: the case number and short description {#csm-agent-workspace-ribbon__ul_zkn_b4s_rdb} | | Call a contact or consumer | If phone integration is enabled, agents click a number in one of the phone number fields to call the contact or consumer. The OpenFrame window displays information about the contact or consumer name and the account. | | View the account record | Agents click the Account link to open the account record. | [ ] {#csm-agent-workspace-ribbon__table_kbv_c1t_rdb} ## Timeline ribbon component {#csm-agent-workspace-ribbon__section_s4w_hms_rdb} The timeline component displays a chronological summary of case activities, including case state changes and interactions between the agent and the requester (typically the customer). It also shows how much time that the fulfiller and requester spent on the case. Note: The workspace administrator can select the agent role when configuring the timeline component attributes. Figure 2. Timeline ribbon component The timeline uses icons to display events and colors to show ranges of time, such as when the case is with the agent or the customer. Agents can point to event icons in the timeline to display tooltips with additional information. Note: The timeline component uses the resolution shaper configuration for the selected entity table, for example, the Case table. The timeline includes the following features:{#csm-agent-workspace-ribbon__table_h5t_xxj_sjb__entry__2} | Timeline feature | Description | |-|-| | Global start and end dates | The global start date is the date that the case was created. The global end date is the date that the case was closed. | | Start and end dates | The start and end dates that identify a specific window of time on the timeline. The default window is one week. * The default end date is the current date. * The default start date is the current date minus 7 days. {#csm-agent-workspace-ribbon__ul_itf_f1k_sjb} | | Header | A configurable title for the timeline. With the system administrator role, you can add a title in the Name field on the Ribbon Setting form. | | Legend | Click Show Details to display event and range summary information. Figure 3. Legend summary information | | Events | Events are represented on the timeline using icons. Each type of event has a corresponding unique icon. The time that an event occurred is also captured so that events are displayed on the timeline in chronological order. | | Grouped events | Events that occur close together can be grouped and represented using a group icon. When events are grouped, the timeline displays a badge icon with the number of events in the group. | | Event summaries | Event summaries appear in the timeline legend. Each summary lists the event and the number of times it occurred. Note: An event summary includes occurrences of the event over the life of the object visualized on the timeline. | | Time ranges | Time ranges are represented on the timeline using colors. Each range has a corresponding unique color and a start and end time. The following default ranges include: * Green: with the agent * Blue: with the customer {#csm-agent-workspace-ribbon__ul_obs_jp3_5jb} | | Time range summaries | Time range summaries appear in the timeline legend. Each summary lists the range, the corresponding color, and the total duration. Note: A range summary includes occurrences of the range over the life of the object visualized on the timeline. | | Tooltips | Point to event icons to display additional information. | | Zoom | Zoom in on the timeline to see more details in a smaller time window or zoom out to see more events in a larger time window. * Click the zoom in or zoom out icons on the timeline. * Use the zoom in and zoom out features on the keyboard (Ctrl + + and Ctrl + -). * Use the zoom in and zoom out features on the cursor. {#csm-agent-workspace-ribbon__ul_tw4_xdl_sjb} | | Pan | Pan left and right to view newer or older events. * Pan left in the timeline to view older events by clicking the left caret icon (\<). Panning to the left stops when the timeline reaches the specified global start date. * Pan right in the timeline to view newer events by clicking the right caret icon (\>). Panning to the right stops when the timeline reaches the specified global end date. {#csm-agent-workspace-ribbon__ul_gwc_lyj_sjb} | | Reset the timeline | Click Now to reset the timeline to the default view after panning or zooming. The timeline resets using the time that the button was clicked as the end date and time. | | Messages | The timeline displays messages for the following events: * There is no data to be displayed. * The timeline experiences a loading error. {#csm-agent-workspace-ribbon__ul_k5d_yl5_tjb} | [Table 1. Timeline features] {#csm-agent-workspace-ribbon__table_h5t_xxj_sjb} ## Active SLA component {#csm-agent-workspace-ribbon__section_gkd_3ms_rdb} The Active SLA component displays active SLAs for the case, including time remaining, the SLA state, and any breaches. If a case has multiple SLAs, the SLA with the most imminent deadline is shown first. Pointing to the SLA component displays left and right navigation arrows that agents can use to view the other SLAs. Figure 4. SLA ribbon component Color coding within the component indicates the time remaining for the SLA: * Green: 0--50% * Yellow: 50--75% * Orange: 75--99% * Red: 100% or breached {#csm-agent-workspace-ribbon__ul_ghc_kkt_rdb} ## Time to resolve component {#csm-agent-workspace-ribbon__section_ahl_tjm_tnb} The time to resolve component displays the estimated time required for an agent to resolve the case. Note: The time to resolve component requires the Predictive Intelligence for Customer Service Management plugin (com.snc.csm_ml). For more information, see [Estimated time to resolve a case](https://www.servicenow.com/docs/rrrFQCOsEl8iXDsEn0rJFA "Machine learning in Customer Service Management helps with case resolution by predicting the estimated time to resolve a case."). Figure 5. Time to resolve component In this image, the estimated time that the agent will need to resolve the opened case is 0 to 2 days. Hence, the upper bound value is displayed. The estimated time is calculated from the time the case was created. If the range for example, is between 2 to 4 days, both the lower and upper bound values are displayed. The Time to resolve component also displays the prediction for SLA breach if the case is attached to an SLA. Following are a list of SLA messages displayed and the action required when they appear.{#csm-agent-workspace-ribbon__table_o11_fvg_xnb__entry__2} | SLA messages | Task | |-|-| | No resolution SLA exists for this case | Set the value in the Target field to Resolution in the SLA Definition form. | | Repair resolution SLA to add breach time | Click Repair on the Task SLA form. | | Highly likely to breach resolution SLA | None | | Highly unlikely to breach resolution SLA | None | | Likely to breach resolution SLA | None | | Unlikely to breach resolution SLA | None | [ ] {#csm-agent-workspace-ribbon__table_o11_fvg_xnb} ## Configuring ribbon components {#csm-agent-workspace-ribbon__section_mhb_myc_lnb} You can configure ribbon components as follows: * For CSM Agent Workspace, you can configure the ribbon layout if you have the workspace administrator role (workspace_admin). This includes the components to display in the ribbon, the order in which the components appear, and the component width. You can also configure display attributes for some of the components. For more information about ribbon configuration, see Set up ribbons in workspace. For some of the components, you can also configure attributes, such as the fields to include in the Customer 360 component. * For CSM Configurable Workspace, you can create a ribbon setting and add that setting to a ribbon configuration. For more information, see [Set up a ribbon configuration in CSM Configurable Workspace](https://www.servicenow.com/docs/dvDE3Sstkpsne3ojTXAk7A "Create a ribbon setting and add that setting to a ribbon configuration for CSM Configurable Workspace."). Note: One ribbon configuration, CSM/FSM Configurable Workspace Ribbon Config, is included with CSM Configurable Workspace. {#csm-agent-workspace-ribbon__ul_sf1_vkc_g4b}You can also display the form ribbon in the Contextual side panel. For more information, see [Display the form ribbon and form header secondary values in the Contextual side panel](https://www.servicenow.com/docs/NlFQwMtymFRymyn62TjzCQ "Configure the form ribbon and the secondary values that appear in a form header to display in the Contextual side panel in CSM Configurable Workspace."). Ribbon configurations in CSM workspaces support domain separation.