<h2>CSM workspace form ribbon and components</h2><br/><div style="overflow-x:auto"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta content="text/html; charset=UTF-8" /><meta name="copyright" content="(C) Copyright 2025" /><meta name="DC.rights.owner" content="(C) Copyright 2025" /><meta name="generator" content="DITA-OT" /><meta name="DC.type" content="reference" /><meta name="DC.title" content="CSM workspace form ribbon and components" /><meta name="abstract" content="The form ribbon provides agents with a quick overview of the case details. The form ribbon includes components that display relevant information about the case. These components can include a contact or consumer summary, a timeline, and SLA details." /><meta name="description" content="The form ribbon provides agents with a quick overview of the case details. The form ribbon includes components that display relevant information about the case. These components can include a contact or consumer summary, a timeline, and SLA details." /><meta name="DC.creator" content="ServiceNow" /><meta name="DC.date.created" content="2023-08-03" /><meta name="DC.date.modified" content="2023-08-03" /><meta name="mini-toc" content="yes" /><meta name="page-type" content="csm-config" /><meta name="DC.format" content="XHTML" /><meta name="DC.identifier" content="csm-agent-workspace-ribbon" /><link rel="stylesheet" type="text/css" href="../../../CSS/commonltr.css" /><title>CSM workspace form ribbon and components</title></head><body id="csm-agent-workspace-ribbon"> <h1 class="title topictitle1" id="ariaid-title1">CSM workspace form ribbon and components</h1> <div class="body refbody"><p class="shortdesc">The form ribbon provides agents with a quick overview of the case details. The form ribbon includes components that display relevant information about the case. These components can include a contact or consumer summary, a timeline, and SLA details.</p> <div class="section" id="csm-agent-workspace-ribbon__section_kf2_2jh_zdb"> <p class="p">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.</p> </div> <div class="section" id="csm-agent-workspace-ribbon__section_ol2_sjh_zdb"><h2 class="title sectiontitle">Customer Service Management ribbon components</h2> <div class="p">For Customer Service Management, you can configure the ribbon for the Case form to include one or more of the available ribbon components:<ul class="ul" id="csm-agent-workspace-ribbon__ul_vqw_1vc_qhb"><li class="li">Customer 360</li><li class="li">Timeline</li><li class="li">Active SLAs</li><li class="li">Time to resolve component</li></ul> </div> </div> <div class="section" id="csm-agent-workspace-ribbon__section_t33_bms_rdb"><h2 class="title sectiontitle">Customer 360 ribbon component</h2> <div class="p">The Customer 360 component displays customer information such as the contact or consumer name, email address, and phone numbers. <div class="fig fignone" id="csm-agent-workspace-ribbon__fig_z3b_drc_c2b"><span class="figcap"><span class="fig--title-label">Figure 1. </span>Customer 360 ribbon component</span> <img class="image" id="csm-agent-workspace-ribbon__image_ajb_drc_c2b" src="../../../product/customer-service-management/image/csm-workspace-customer360-component.png" alt="Component showing customer contact information, including name, email address, and phone numbers." /> </div> </div> <p class="p">You can configure the Customer 360 component to display different fields, such as the fields described in the following table.</p> <div class="p"> <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" id="csm-agent-workspace-ribbon__table_idt_zmj_npb" class="table" frame="border" border="1" rules="all"><colgroup><col style="width:40%" /><col style="width:60%" /></colgroup><thead class="thead" style="text-align:left;"><tr class="row"><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e103">Field</th><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e106">Description</th></tr></thead><tbody class="tbody"><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Header</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">The header includes customer information. <div class="p"><ul class="ul" id="csm-agent-workspace-ribbon__ul_d13_ngv_phb"><li class="li">For B2B customers: Displays either the <span class="ph uicontrol">Primary Contact</span> or <span class="ph uicontrol">Contact</span>.</li><li class="li">For B2C customers: Displays the <span class="ph uicontrol">Consumer</span>.</li><li class="li">For internal contacts with the proxy contact role (sn_customerservice.proxy_contact): Displays the <span class="ph uicontrol">Internal contact</span>. <div class="note"><span class="notetitle">Note:</span> Requires the CSM Extension for Proxy Contacts (com.snc.csm_proxy_contacts) plugin.</div> </li></ul> </div> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Avatar</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">A graphic representation of the customer's identity, such as an image or icon.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Name</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">The customer's name.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Title</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">The customer's title.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Account</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">For B2B customers, the account associated with the contact.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Phone numbers</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 "><div class="p"><ul class="ul" id="csm-agent-workspace-ribbon__ul_sdt_yms_rdb"><li class="li">For contacts: <span class="ph uicontrol">Mobile phone</span> and <span class="ph uicontrol">Business phone</span></li><li class="li">For consumers: <span class="ph uicontrol">Mobile phone</span> and <span class="ph uicontrol">Home phone</span></li></ul> </div> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e103 ">Email address</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e106 ">The customer's email address.</td></tr></tbody></table> </div> </div> <div class="p">The Customer 360 component supports dot walking on selected reference tables. You can display fields from these tables:<ul class="ul" id="csm-agent-workspace-ribbon__ul_pdk_jgf_lwb"><li class="li">User [sys_user]</li><li class="li">Contact [customer_contact]</li><li class="li">Consumer [csm_consumer]</li></ul> </div> <div class="p">If you configure the Customer 360 component to display information from a dot-walked field, the label for that field shows the <code class="ph codeph">Column</code> name instead of the <code class="ph codeph">Table.Column</code> name. <div class="note"><span class="notetitle">Note:</span> For B2B customers, the Customer 360 component can also include colored tags that indicate Very Important Person (VIP) accounts and escalated accounts.</div> </div> <div class="p">From the Customer 360 component, agents can perform the following actions. <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" id="csm-agent-workspace-ribbon__table_kbv_c1t_rdb" class="table" frame="border" border="1" rules="all"><colgroup><col style="width:36.36363636363637%" /><col style="width:63.63636363636363%" /></colgroup><thead class="thead" style="text-align:left;"><tr class="row"><th class="entry nocellnorowborder" style="vertical-align:top;" id="d182306e264">Action</th><th class="entry cell-norowborder" style="vertical-align:top;" id="d182306e267">Description</th></tr></thead><tbody class="tbody"><tr class="row"><td class="entry nocellnorowborder" style="vertical-align:top;" headers="d182306e264 ">Email a contact or consumer</td><td class="entry cell-norowborder" style="vertical-align:top;" headers="d182306e267 ">Agents click the address in the <span class="ph uicontrol">Email</span> 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:<ul class="ul" id="csm-agent-workspace-ribbon__ul_zkn_b4s_rdb"><li class="li"><span class="ph uicontrol">To</span>: the contact or consumer email address</li><li class="li"><span class="ph uicontrol">Subject</span>: the case number and short description</li></ul> </td></tr><tr class="row"><td class="entry nocellnorowborder" style="vertical-align:top;" headers="d182306e264 ">Call a contact or consumer</td><td class="entry cell-norowborder" style="vertical-align:top;" headers="d182306e267 ">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.</td></tr><tr class="row"><td class="entry row-nocellborder" style="vertical-align:top;" headers="d182306e264 ">View the account record</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e267 ">Agents click the <span class="ph uicontrol">Account</span> link to open the account record.</td></tr></tbody></table> </div> </div> </div> <div class="section" id="csm-agent-workspace-ribbon__section_s4w_hms_rdb"><h2 class="title sectiontitle">Timeline ribbon component</h2> <div class="p">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. <div class="note"><span class="notetitle">Note:</span> The workspace administrator can select the agent role when configuring the <a class="xref" href="../task/config-workspace-ribbon-attributes.html" title="Configure ribbon components to give your agents only the information they need.">timeline component attributes</a>.</div> </div> <div class="p"><div class="fig fignone" id="csm-agent-workspace-ribbon__fig_csm_aw_timeline_component"><span class="figcap"><span class="fig--title-label">Figure 2. </span>Timeline ribbon component</span> <img class="image" id="csm-agent-workspace-ribbon__image_cxn_s4l_rhb" src="../image/timeline-ribbon-component.png" alt="Timeline component displaying a summary of case activities and the time spent on each case. For the color code information, refer to the legend row in the Timeline features table." /> </div> </div> <div class="p">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.<div class="note"><span class="notetitle">Note:</span> The timeline component uses the resolution shaper configuration for the selected entity table, for example, the Case table.</div> </div> <div class="p">The timeline includes the following features: <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" id="csm-agent-workspace-ribbon__table_h5t_xxj_sjb" class="table" frame="border" border="1" rules="all"><caption><span class="tablecap"><span class="table--title-label">Table 1. </span>Timeline features</span></caption><colgroup><col style="width:50%" /><col style="width:50%" /></colgroup><thead class="thead" style="text-align:left;"><tr class="row"><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e377">Timeline feature</th><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e380">Description</th></tr></thead><tbody class="tbody"><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Global start and end dates</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">The global start date is the date that the case was created. The global end date is the date that the case was closed.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Start and end dates</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">The start and end dates that identify a specific window of time on the timeline. The default window is one week. <ul class="ul" id="csm-agent-workspace-ribbon__ul_itf_f1k_sjb"><li class="li">The default end date is the current date.</li><li class="li">The default start date is the current date minus 7 days.</li></ul> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Header</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">A configurable title for the timeline. With the system administrator role, you can add a title in the <span class="ph uicontrol">Name</span> field on the Ribbon Setting form.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Legend</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Click <span class="ph uicontrol">Show Details</span> to display event and range summary information. <div class="p"><div class="fig fignone" id="csm-agent-workspace-ribbon__fig_vny_lz3_5jb"><span class="figcap"><span class="fig--title-label">Figure 3. </span>Legend summary information</span> <img class="image" id="csm-agent-workspace-ribbon__image_wny_lz3_5jb" src="../image/timeline-ribbon-component-details.png" alt="Legend summary displaying events and the range of time spent on activities." /> </div> </div> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Events</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">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.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Grouped events</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">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.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Event summaries</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Event summaries appear in the timeline legend. Each summary lists the event and the number of times it occurred. <div class="note"><span class="notetitle">Note:</span> An event summary includes occurrences of the event over the life of the object visualized on the timeline.</div> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Time ranges</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">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:<ul class="ul" id="csm-agent-workspace-ribbon__ul_obs_jp3_5jb"><li class="li">Blue: with the agent</li><li class="li">Green: with the customer</li></ul> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Time range summaries</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Time range summaries appear in the timeline legend. Each summary lists the range, the corresponding color, and the total duration. <div class="note"><span class="notetitle">Note:</span> A range summary includes occurrences of the range over the life of the object visualized on the timeline.</div> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Tooltips</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Point to event icons to display additional information.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Zoom</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">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. <ul class="ul" id="csm-agent-workspace-ribbon__ul_tw4_xdl_sjb"><li class="li">Click the zoom in or zoom out icons on the timeline.</li><li class="li">Use the zoom in and zoom out features on the keyboard (<span class="ph uicontrol">Ctrl</span> + <span class="ph uicontrol">+</span> and <span class="ph uicontrol">Ctrl</span> + <span class="ph uicontrol">-</span>).</li><li class="li">Use the zoom in and zoom out features on the cursor.</li></ul> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Pan</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Pan left and right to view newer or older events. <ul class="ul" id="csm-agent-workspace-ribbon__ul_gwc_lyj_sjb"><li class="li">Pan left in the timeline to view older events by clicking the left caret icon (<span class="ph uicontrol"><</span>). Panning to the left stops when the timeline reaches the specified global start date.</li><li class="li">Pan right in the timeline to view newer events by clicking the right caret icon (<span class="ph uicontrol">></span>). Panning to the right stops when the timeline reaches the specified global end date.</li></ul> </td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Reset the timeline</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">Click <span class="ph uicontrol">Now</span> 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.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e377 ">Messages</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e380 ">The timeline displays messages for the following events:<ul class="ul" id="csm-agent-workspace-ribbon__ul_k5d_yl5_tjb"><li class="li">There is no data to be displayed.</li><li class="li">The timeline experiences a loading error.</li></ul> </td></tr></tbody></table> </div> </div> </div> <div class="section" id="csm-agent-workspace-ribbon__section_gkd_3ms_rdb"><h2 class="title sectiontitle">Active SLA component</h2> <div class="p">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. <div class="fig fignone" id="csm-agent-workspace-ribbon__fig_fwd_hsc_c2b"><span class="figcap"><span class="fig--title-label">Figure 4. </span>SLA ribbon component</span> <img class="image" id="csm-agent-workspace-ribbon__image_gwd_hsc_c2b" src="../image/SLARibbonComponent.jpg" alt="SLA ribbon displaying the time remaining for the SLA. For the color code description, refer to the text that follows." /> </div> </div> <div class="p">Color coding within the component indicates the time remaining for the SLA: <ul class="ul" id="csm-agent-workspace-ribbon__ul_ghc_kkt_rdb"><li class="li">Green: 0–50%</li><li class="li">Yellow: 50–75%</li><li class="li">Orange: 75–99%</li><li class="li">Red: 100% or breached</li></ul> </div> </div> <div class="section" id="csm-agent-workspace-ribbon__section_ahl_tjm_tnb"><h2 class="title sectiontitle">Time to resolve component</h2> <div class="p">The time to resolve component displays the estimated time required for an agent to resolve the case.<div class="note"><span class="notetitle">Note:</span> The time to resolve component requires the Predictive Intelligence for Customer Service Management plugin (com.snc.csm_ml). For more information, see <a class="xref" href="../../../product/customer-service-management/concept/ettr.html" title="Machine learning in Customer Service Management helps with case resolution by predicting the estimated time to resolve a case.">Estimated time to resolve a case</a>.</div> </div> <div class="fig fignone" id="csm-agent-workspace-ribbon__fig_mly_3pm_tnb"><span class="figcap"><span class="fig--title-label">Figure 5. </span>Time to resolve component</span> <img class="image" id="csm-agent-workspace-ribbon__image_e4f_4sm_tnb" src="../image/time-to-resolve.jpg" alt="Ribbon component displaying the estimated time required by an agent to resolve a case." /> </div> <p class="p">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.</p> <p class="p">The <span class="ph uicontrol">Time to resolve</span> component also displays the prediction for SLA breach if the case is attached to an SLA.</p> <div class="p">Following are a list of SLA messages displayed and the action required when they appear. <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" id="csm-agent-workspace-ribbon__table_o11_fvg_xnb" class="table" frame="border" border="1" rules="all"><colgroup><col style="width:50%" /><col style="width:50%" /></colgroup><thead class="thead" style="text-align:left;"><tr class="row"><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e696">SLA messages</th><th class="entry cellrowborder" style="vertical-align:top;" id="d182306e699">Task</th></tr></thead><tbody class="tbody"><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">No resolution SLA exists for this case</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">Set the value in the <span class="ph uicontrol">Target</span> field to <span class="ph uicontrol">Resolution</span> in the <span class="ph uicontrol">SLA Definition</span> form.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">Repair resolution SLA to add breach time</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">Click <span class="ph uicontrol">Repair</span> on the Task SLA form.</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">Highly likely to breach resolution SLA</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">None</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">Highly unlikely to breach resolution SLA</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">None</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">Likely to breach resolution SLA</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">None</td></tr><tr class="row"><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e696 ">Unlikely to breach resolution SLA</td><td class="entry cellrowborder" style="vertical-align:top;" headers="d182306e699 ">None</td></tr></tbody></table> </div> </div> </div> <div class="section" id="csm-agent-workspace-ribbon__section_mhb_myc_lnb"><h2 class="title sectiontitle">Configuring ribbon components</h2> <div class="p">You can configure ribbon components as follows: <ul class="ul" id="csm-agent-workspace-ribbon__ul_sf1_vkc_g4b"><li class="li">For <span class="ph">CSM Agent Workspace</span>, 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 <a class="xref" href="../administer/workspace/task/configure-service-workspace-ribbons.dita/configure-service-workspace-ribbons.html" target="_blank" rel="noopener noreferrer">Set up ribbons in workspace</a>.<p class="p">For some of the components, you can also configure attributes, such as the fields to include in the Customer 360 component. For more information about configuring component attributes, see <a class="xref" href="../task/config-workspace-ribbon-attributes.html" title="Configure ribbon components to give your agents only the information they need.">Configure ribbon component attributes</a>.</p> </li><li class="li">For <span class="ph">CSM Configurable Workspace</span>, you can create a ribbon setting and add that setting to a ribbon configuration. For more information, see <a class="xref" href="../../../product/customer-service-management/task/config-csm-config-ws-ribbon.html" title="Create a ribbon setting and add that setting to a ribbon configuration for CSM Configurable Workspace.">Set up a ribbon configuration in <span class="ph">CSM Configurable Workspace</span></a>.<div class="note"><span class="notetitle">Note:</span> One ribbon configuration, <span class="ph uicontrol">CSM/FSM Configurable Workspace Ribbon Config</span>, is included with <span class="ph">CSM Configurable Workspace</span>.</div> </li></ul> You can also display the form ribbon in the form ribbon in the Contextual side panel. For more information, see <a class="xref" href="../../../product/customer-service-management/task/config-csm-display-header-in-sidebar.html" title="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.">Display the form ribbon and form header secondary values in the Contextual side panel</a>.</div> <p class="p">Ribbon configurations in CSM workspaces support domain separation.</p> </div> </div> </body></html></div>