Modernized Case Grids

You might not have noticed due to the holidays last month, but another 2022 Wave 2 feature that is part of Dynamics 365 Customer Service went into general availability in December! A nice little holiday present from Microsoft! This feature gives customer service agents and managers access to relevant information regarding cases. I am sure you’re familiar with the ‘regular’ case grid, which is a list of case records, configurable by makers. The problem with the ‘regular’ case grids is that there is no way to show relevant data from other tables, due to there being a 1:N relationship with the case table. I’m referring to things like SLA details, the last interaction on the case etc. With the modernized case grid you’ll be able to show this type of data! As you probably already guessed, this feature is something that needs to be enabled first, before you can use it so let’s talk about how we can do that.

Enabling the modernized case grid

Unfortunately you’ll have to enable the modernized case grid from the legacy interface, which you can access by navigating to make.powerapps.com and opening the default solution. (You can access the solutions by clicking on ‘Solutions’ on the left side and clicking on ‘Default Solution’.) Once the solution is open, click on the three dots on the top and select ‘Switch to classic’. This will open the default solution in the legacy powerapps interface. From there you’ll need to expand ‘Entities’ which you’ll see on the left hand side below ‘Components’. Scroll down until you find the case table, and click on ‘Case’. You’ll notice the properties window for the case table will load. Since most of this functionality is built in a control, we’re going to add the control to the case table. You can do this by clicking on the controls tab which you will see on the top of the screen. Click ‘Add control’ and search for the ‘Power Apps grid control’. Click the ‘Add’ button and click the dots below ‘Web’, ‘Phone’ and ‘Tablet’ which means this control will be used when the case grids are accessed through web, phone or a tablet.

Once the control is added to the case table, you’ll notice there are a lot of configuration options available on the control.

• Enable Editing: This will allow or prevent users to edit the records inline. NOTE: in order to edit columns you will need to DOUBLE CLICK the column you want to edit.
• Enable filtering: This will allow or prevent users to filter records in the subgrid
• Allow range selection: This will allow or prevent
• Enable jump bar: This setting will show or hide the jump bar.
  More information about the jump bar here
• Enable pagination: If this is set to ‘yes’ then the data will be shown in pages, and infinite scrolling will be disabled
• Enable status column: Showing or hiding the status column of cases
• Enable option set colors: This will enable or disable showing custom colors for option set values NOTE: You can view/change option set value colors by opening the option set column and opening the values.
• Show data type icons: This will enable or disable showing icons in the columns (Yes we can also add our own custom icons!)
• Navigation types allowed: This will allow us to configure navigation of primary and/or lookup columns
• Reflow behavior: Here we can configure the reflow behavior for the grid. More information on reflow behavior here.
• Customizer control: I couldn’t find much information on this online but what I do know is that you need to edit this option. By can do this by clicking on the pencil icon. Make sure the ‘Bind to a static value’ is selected, and ‘SingleLine.text’ is selected in the dropdown. Then paste the following on the right side of the dropdown: MscrmControls.CustomCellControl.CustomCellControl and click ‘Ok’.

Once you configured the control, make sure to save and publish your changes. You might have noticed that there is also a new view that has been added to cases with this feature. The view is called ‘Enhanced active cases‘ and has most of these columns already added to the view. In order to get access to the view you’ll need to add it to your model driven apps. To add the view to Customer Service Workspace you’ll need to access the app designer. NOTE: You can also add some (or all) of the columns that are in this view to other views.

You can do this by clicking the name of the model driven app you’re in, which will open the app chooser. Click on the three dots of the app you want to add the case view to, then click ‘Open app designer’. When the app designer opens, make sure to navigate to ‘Pages’ (left hand side of the screen.) Scroll down and click on ‘cases and click ‘Case’ to see ‘Case forms’ and ‘Case views’. Click on ‘Case views’. On the right side of the screen you’ll see views that are part of the app, and below that you’ll see views that are not part of the app. Find the ‘Enhanced active cases’ view and click on the ellipse, then click ‘+Add’ to add it to the model driven app. You should now see the ‘Enhanced active cases’ view below the ‘In this app’ views. Don’t forget to save and publish! You can repeat this step to add the view to any other model driven apps! Once the changes have been saved and published you’ll be able to open the model driven app and navigate to the enhanced case view that was just added. Below you see a screenshot of what the view looks like. I removed some of the columns so that it shows all the column visualizations that are part of this feature.

You’ll notice this grid looks a lot nicer than the grid we were used to. We can see the different icons (if enabled) for priority and origin and the status reason is also displayed in a very nice way, allowing users to immediately distinguish between the different statuses per case. You’ll also see the ‘Next SLA’ column, which shows something that we weren’t able to view on a grid before! This column shows the earliest expiration time of an SLA (If an SLA is associated with the case) and the agents will see the timer control count down just like they can when they open the case!! Another thing we usually aren’t able to see in a grid view, is the ‘Last Interaction’ column. This shows the last interaction that took place for each individual case. This field shows the most recent activity on the case! Another new column is the ‘Case Age’ column. This is a calculated field that looks at the date the case was created and calculates the total age of the case this way.

Adding custom icons for option set values

I did want to mention that makers are able to add values and icons to the ‘Origin’ and ‘Priority’ columns if the needed. Adding an option set value is easy, so I am not going to describe how to do that, but I will describe how to add an icon for the custom drop down values. Let’s pretend I added an option set value for the ‘Origin’ column which I named ‘Instagram’. In order to add an icon for this value, I will need to create a web resource in the application. Navigate to make.powerapps.com, then click on ‘Solutions’ on the left side on the sitemap. Open the default solution (you can also create your own solution and add the web resource there.) Search for ‘Web resource’ under ‘Objects’. Open ‘Web resources’ and click ‘+New’ from the command bar. Upload the icon after clicking the ‘Upload file’ button. For ‘Display name’ you can enter anything. I entered ‘Instagramicon’. The most important thing is the value in the ‘name’ field, as this is the system name and needs to be entered like this: Incident/Origin/<Option Set Value Label>OriginIcon which in my example results in: Incident/Origin/instagramOriginIcon because I named my option in the origin option set column ‘Instagram’.

Example number 2: Let’s say I also added an option set value for the ‘Priority’ column which I named ‘Urgent’. In order to add an icon for this value, I will need to create another web resource in the application. Navigate to make.powerapps.com, then click on ‘Solutions’ on the left side on the sitemap. Open the default solution. Search for ‘Web resource’ under ‘Objects’. Open ‘Web resources’ and click ‘+New’ from the command bar. Upload the icon after clicking the ‘Upload file’ button. For ‘Display name’ you can enter anything. I entered ‘Urgenticon’. The most important thing is the value in the ‘name’ field, as this is the system name and needs to be entered like this: Incident/Priority/<Option Set Value Label>PriorityIcon which in my example results in: Incident/Priority/UrgentPriorityIcon because I named my option in the origin option set column ‘Urgent’.

I hope you enjoyed reading this article! Be sure to check in again next week for a new article or subscribe here to never miss another post!