{"id":29577,"date":"2021-10-06T16:00:09","date_gmt":"2021-10-06T10:30:09","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=29577"},"modified":"2021-10-06T14:42:26","modified_gmt":"2021-10-06T09:12:26","slug":"outlook-style-preview-panes-now-possible-using-side-panes-with-power-platform-wave-2-2021-release","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/10\/outlook-style-preview-panes-now-possible-using-side-panes-with-power-platform-wave-2-2021-release\/","title":{"rendered":"Outlook style preview panes now possible using Side Panes with Power Platform Wave 2 2021 Release"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

The release of Power Platform Wave 2 2021 has brought in some amazing features and functionalities. One of which is the Side Panes and the ability to incorporate multiple panels in it.<\/p>\n

In the earlier article<\/a> we discussed how the panels are now capable of displaying entity forms, lists and even web resources and dashboards in the panels with multiple panels possible, you can show more than one of these simultaneously.<\/p>\n

In this blog, we will be using sidePanes multi-panel to show a preview pane for the selected record and yes as a bonus we have also included the steps to get outlook style reading pane for emails.<\/p>\n

\"Power<\/p>\n

Show Selected Record details using sidePanes<\/strong><\/h2>\n

Here, we are creating a panel in the sidePane in which we will show the selected account record. When a record is selected from the view, we will create a pane and open the record in the same.<\/p>\n

\"Power<\/p>\n

As we need to trigger it on select of the record, we will be using Editable grid. In this grid, we get the onRecordSelect event on which will call our method.<\/p>\n

\"Power<\/p>\n

Below is the systematic guide to achieve the above.<\/strong><\/h2>\n

Step 1:<\/strong><\/p>\n

Start by creating an asynchronous function and initializing the required variables. Get the selected record and its Id from execution context.<\/p>\n

From global context, we get the client URL i.e. CRM URL of the user.<\/p>\n

public async onRecordSelect(executionContext: any) {\r\nlet selectedRecord = executionContext.getFormContext().data.entity;\r\nlet selectedRecordId = selectedRecord.getId().replace(\"{\", \"\").replace(\"}\", \"\");\r\nlet globalContext = parent.Xrm.Utility.getGlobalContext();\r\nlet clientUrl = globalContext.getClientUrl();\r\nlet sidePanes = parent.Xrm.App.sidePanes;\r\nsidePanes.state = 1;<\/pre>\n
We get the sidePanes from parent.Xrm.App.sidePanes <\/strong>in which we will be creating the panels.<\/p>\n
sidePanes.state is the method to expand or collapse the panel.<\/p>\n
Step 2:<\/strong><\/p>\n
In the next step, we check if the pane already exist or not with getPane method. If it exist then we will close or delete it, preventing duplicate error.<\/p>\n
if (sidePanes.getPane(\"selectedRecordPane\") != undefined) {\r\nlet existingPanel = sidePanes.getPane(\"selectedRecordPane\");\r\nexistingPanel.close();\r\n}<\/pre>\n
Step 3:<\/strong><\/p>\n
In this step, we will create the pane. As shown in the below code, selectedRecordPane is the panel object consisting of panel properties as explained below.<\/p>\n
title: The title of the pane. Used in pane header and for tooltip.<\/p>\n
paneId: The unique ID of the pane. If the value is not pass, the ID value is auto-generated.<\/p>\n
imageSrc: The path of the icon to show in the panel switcher control.<\/p>\n
width: The width of the pane in pixels.<\/p>\n
alwaysRender: Prevents the pane from unmounting when it is hidden.<\/p>\n
There are several more properties in pane, which you can find here<\/a>.<\/p>\n
let selectedRecordPane = {\r\ntitle: \"Selected Record\",\r\nimageSrc: clientUrl + \"\/_imgs\/svg_1.svg\",\r\nbadge: true,\r\nalwaysRender: false,\r\npaneId: \"selectedRecordPane\",\r\nwidth: 600\r\n}\r\nlet recordPanel = await sidePanes.createPane(selectedRecordPane);<\/pre>\n
By createPane method we created the panel in the sidePane.<\/p>\n
Step 4:<\/strong><\/p>\n
In the last step, we will create a pageInput object to open the record from navigate method.<\/p>\n
This navigate method works same as navigateTo<\/a> method.<\/p>\n
let selectedRecordPageInput = {\r\npageType: \"entityrecord\",\r\nentityName: selectedRecord.getEntityName(),\r\nentityId: selectedRecordId\r\n};\r\nawait recordPanel.navigate(selectedRecordPageInput);\r\n}<\/pre>\n
selectedRecord.getEntityName() gives the entity name and selectedRecordId is the guid of the record.<\/p>\n
\"Power<\/p>\n
Below is the entire Code:<\/strong><\/p>\n
public async onRecordSelect(executionContext: any) {\r\n\/\/get the selected record\r\nlet selectedRecord = executionContext.getFormContext().data.entity;\r\n\/\/get the selected record id\r\nlet selectedRecordId = selectedRecord.getId().replace(\"{\", \"\").replace(\"}\", \"\");\r\n\/\/get client URL from globalContext\r\nlet globalContext = parent.Xrm.Utility.getGlobalContext();\r\nlet clientUrl = globalContext.getClientUrl();\r\n\/\/take sidePanes in a variable\r\nlet sidePanes = parent.Xrm.App.sidePanes;\r\n\/\/Here we set the sidePanes state to 0 to keep the panel closed by default.\r\n\/\/ 0 \u2013 collapsed, 1 - expanded\r\nsidePanes.state = 1;\r\n\/\/on Record first we will close the existing panel if there is any\r\nif (sidePanes.getPane(\"selectedRecordPane\") != undefined) {\r\nlet existingPanel = sidePanes.getPane(\"selectedRecordPane\");\r\nexistingPanel.close();\r\n}\r\n\/\/create panel object\r\nlet selectedRecordPane = {\r\ntitle: \"Selected Record\",\r\nimageSrc: clientUrl + \"\/_imgs\/svg_1.svg\", \/\/ account icon url\r\nbadge: true, \/\/ show the badge i.e. account icon image\r\nalwaysRender: false,\r\npaneId: \"selectedRecordPane\", \/\/panel unique id\r\nwidth: 600 \/\/ width of the panel when opened\r\n}\r\n\/\/ create panel in the sidePane\r\nlet recordPanel = await sidePanes.createPane(selectedRecordPane);\r\n\/\/pageInput object decides which records to open\r\nlet selectedRecordPageInput = {\r\npageType: \"entityrecord\",\r\nentityName: selectedRecord.getEntityName(),\r\nentityId: selectedRecordId\r\n};\r\n\/\/open the selected record\r\nawait recordPanel.navigate(selectedRecordPageInput);\r\n}<\/pre>\n
Create an Email Reading Pane with sidePanes<\/strong><\/p>\n
The next cool thing you can do with the sidePane is to create a reading pane of the emails.<\/p>\n
Just like the Outlook design, all emails are shown on the left, clicking on an email results in opening of that email on the right side. Similarly, we will be recreating it in our CRM.<\/p>\n
For record selection event, we will again use the Editable Grid, which will give us the onRecordSelect event. On select of an email, the email details will appear on the right side of the screen.<\/p>\n
\"Power<\/p>\n
When the email from the view is selected it opens up a panel on the right side of the screen, displaying us the details of the email.<\/p>\n
Below is the entire code to achieve the Outlook design for Emails in CRM.<\/strong><\/p>\n
public async onEmailSelect(executionContext: any) {\r\n\/\/ get selected record id\r\nlet selectedRecord = executionContext.getFormContext().data.entity;\r\nlet selectedRecordId = selectedRecord.getId().replace(\"{\", \"\").replace(\"}\", \"\");\r\n\/\/get client URL i.e. CRM URL\r\nlet globalContext = parent.Xrm.Utility.getGlobalContext();\r\nlet clientUrl = globalContext.getClientUrl();\r\n\/\/get the sidePanes in a variable\r\nlet sidePanes = parent.Xrm.App.sidePanes;\r\n\/\/ panel should be expanded on create so value 1.\r\nsidePanes.state = 1;\r\n\/\/checking if panel already exist\r\nif (sidePanes.getPane(\"selectedRecordPane\") != undefined) {\r\n\/\/if panel exist then close \/ delete it.\r\nlet existingPanel = sidePanes.getPane(\"selectedRecordPane\");\r\nexistingPanel.close();\r\n}\r\n\/\/create panel with the panel object and createPane method\r\nlet selectedEmailPane = {\r\nimageSrc: clientUrl + \"\/_imgs\/svg_4202.svg\",\r\nbadge: true,\r\nalwaysRender: false,\r\npaneId: \"selectedRecordPane\",\r\nwidth: 600,\r\nhideHeader: true\r\n\u00a0}\r\nlet emailPanel = await sidePanes.createPane(selectedEmailPane);\r\n\/\/ open the selected email record with navigate method\r\nlet selectedEmailPageInput = {\r\npageType: \"entityrecord\",\r\nentityName: selectedRecord.getEntityName(),\r\nentityId: selectedRecordId\r\n};\r\nawait emailPanel.navigate(selectedEmailPageInput);\r\n}<\/pre>\n
Note:<\/em><\/strong> If no title is provided in the panel object, it will take the primary field as the title. If you want to hide the title then use hideHeader property in the panel object as used in the email panel.<\/em><\/p>\n
Conclusion<\/strong><\/h2>\n
With this new panel feature showing contextual information and designing preview panes that has been an ask for a while is a simple task. The panels work on the tablet as well.<\/p>\n
\"Mailchimp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction The release of Power Platform Wave 2 2021 has brought in some amazing features and functionalities. One of which is the Side Panes and the ability to incorporate multiple panels in it. In the earlier article we discussed how the panels are now capable of displaying entity forms, lists and even web resources and\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1920,2361],"tags":[2522,2523],"class_list":["post-29577","post","type-post","status-publish","format-standard","hentry","category-microsoft-wave-2","category-technical","tag-power-platform-wave-2-2021-release","tag-side-panes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=29577"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29577\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=29577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=29577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=29577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}