D365 CS: Spice up your case forms with new controls!

If you read last weeks article, where I talked about the new 360 customer component which came out as part of 2023 release wave 1. I also talked about how you can use and configure this component in conjunction with cases in Dynamics 365 customer service. The Microsoft documentation has this component listed under Dynamics 365 Customer Service, so it might be the case that we can’t use the component unless you have Dynamics 365 Customer Service installed. As I promised, this week I am going to expand on the configurations I discussed in last week’s article. This means I will talk about another new component, called the recent cases control. This control is also part of 2023 release wave 1 and lets us view related cases on a form. You are probably thinking, ‘Wait, we can do this already today!’, which is true. However, this control makes the records list look a lot prettier than the old grids that we’re used to! In addition to walking through adding this control to a form, I will also talk about how we can show the related customer data (which is the account or contact that is populated on the case’s customer field) in a side pane, which can be opened and closed if needed.

Recent records control

Let’s start with the recent records control. In this article I am going to add this control to the customer 360 forms I showed you how to create in last week’s article. If you haven’t read last week’s article, you can do so here. In order to add the control to the form, the customer 360 form we created last week. I am going to discuss how to add this control to the customer 360 form for account, adding it to the contact form will need the same steps. Navigate to make. powerapps.com and click on ‘tables’ on the sitemap, on the left side of the screen. Open the accounts table and click on ‘forms’ under the ‘data experiences’ section. Open the customer 360 form. In the form designer, click on ‘components’ on the sitemap, then search for the ‘recent records’ control. If you don’t see it in the list, then click on ‘Get more components’, which you’ll see on the bottom of the components list, and search for it in the ‘Get more components’ window. Clicking the control from the ‘Get more components’ window will add it to the controls available in the form designer. Drag the ‘recent records’ control on the form, below the customer 360 component. This will open the ‘Add recent records’ properties window. The table and view you select under the grid section doesn’t matter at this point, because we want to show related records. As you can see in the image below I selected ‘cases’ and the ‘all cases’ view, and clicked done. Keep in mind that this new control only shows the first 4 columns of the selected view, and I didn’t see anyway to change this. (It looks like this is baked into the control.) You can also configure to show a border, which I didn’t do at this time.

After you click ‘Done’ you’ll notice the visualization of the data on the form. You’ll also notice that all cases are shown in the control, because at this time we’re not filtering the data to only show related records. Click on the control on the form. This will open the properties window on the right side. Check the box next to ‘Show related records’ and you’ll notice you’ll have to choose the related table of records again, plus the default view for the table. I picked ‘cases’ and the related ‘all cases’ view. When you change the values, you’ll see a popup window that is asking if you want to reset the component. Click the ‘Reset component’ button and make sure the correct default view is selected. Now there is one other thing you need to do for the control to actually filter the related records! While you are in the recent records properties window, scroll down to expand the ‘components’ section and click on the ‘recent records’ control. You will need to check the ‘Control Header’ box and select a table column, I choose to select ‘Account name’ as the table column. If you don’t do this step, the related records will not be filtered.

After you made the changes, you’ll notice that the data you saw on the form earlier has disappeared. Make sure to save and publish your changes! Once that is done, make sure you clear the cache on your browser and see how it looks!

Show Customer Details in Side Pane

The configuration I discussed in last week’s article was about how we can embed the customer 360 forms in the case form. This is a great way to visualize the date, but could make the case form a bit cluttered. Another option that is available is to show the customer details in a side pane inside the model driven app. Microsoft added some JavaScript to the application we can use to do exactly that! There are two different triggers we can use: we can show the side pane when a different customer is selected for a case, or when a case (form) is opened. I thought both would be a cool thing to do so let me tell you how I did this. Since we’re using the JavaScript Microsoft provided, we need to add two event handlers to the case form, one for when the form loads, and one for when the customer field changes. Keep in mind you will need to add these event handlers to the main case form that is used by the agents.

Configure Side Pane Open on Opening of Case

I will first configure the JavaScript to show the side pane with the customer details when the case form loads. Keep in mind the form that will be loaded in the side pane is the ‘Account form for Customer Card’ for accounts and the ‘Contact form for Customer Card’ for contacts, we can’t make this script load customs forms.
Navigate to make.powerapps.com and click tables on the left side of the screen. Click ‘forms’ and open the case form. The form properties should be open on the right side of the screen. Click on the ‘events’ tab in the properties window and expand the ‘On Load’ section. Click on ‘+Event Handler, then select ‘On Load’ as the event type. Look for the library called ModernCaseManagement/Incident/msdyn_ModernCaseManagement (If the library isn’t there then click on ‘+Add Library’ to add it. In the function field enter ModernCaseManagement.ModernCaseManagementLibrary.onCustomerChange and make sure the checkbox next to ‘Enabled’ and ‘Pass execution context as first parameter’ are checked. Click done. (At this point you can save an publish, unless you also want to add the ‘OnChange’ event. This means when the data in the ‘customer’ column changes, the side pane will also open on the right hand side.

Configure Side Pane Open on Customer Field Change

The first thing you need to make sure of, is that the ‘customer’ column is on the case form. If this is not the case, (because we added a control to it) then add the field again to the form by dragging it over. Click on the customer column in the form designer. The properties window for the field will open. Similar to when I configured the on load event, you’ll need to click on the event tab in the properties window on the right of the screen. Then you need to expand the ‘On Change’ section. Click on ‘+Event Handler, then select ‘On Change’ as the event type. Again look for the library called ModernCaseManagement/Incident/msdyn_ModernCaseManagement (If the library isn’t there then click on ‘+Add Library’ to add it. In the function field enter ModernCaseManagement.ModernCaseManagementLibrary.onCustomerChange and make sure the checkbox next to ‘Enabled’ and ‘Pass execution context as first parameter’ are checked. Click done and save and publish your changes!

The image above shows what the side pane looks like and it shows the new recent records control in the side pane. I really like the new controls that have been added to the application, and the JavaScript that enables us to take advantage of the side pane! I also tried the ‘recent records control’ with opportunities, and it works perfectly! This makes me believe we can use these controls in any of the model driven apps! 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!