Adding a new Panel to a Summary screen e.g. Company Summary

3 minute read time.

A screen like the company summary screen has a very particular structure because it is partially defined in meta data and partial has its structure hard coded into the system action being called. 

But imagine the business case where you have added new fields to the company table

  • comp_creditcheckdate
  • comp_creditrating
  • comp_creditcheckagency
  • comp_creditcheckmaximum

Of course these new fields can be added to the existing screen block that is defined in meta data which is "companyboxlong", but if we want to display these fields in a seperate panel then we will run into the issue that normally we can not control the blocks used in a default system action like 'companysummary'.

The basic strategy that I have used here is to define the extra block in meta data and then take advantage of the Caption property of a field and use that property to add the HTML into the screen. A script in the custom content box can then be used to position the panel.

My business requirement is that the extra panel should only display on the main Summary Page and not display when the company screen is in Edit Mode.

Step 1:

Add the fields.

I have added the fields listed above. And I have also added a dummy field "comp_dummy". The use of a Dummy field is quite a common trick for example it is used in this article "How do I put calculated or derived info in a screen's top content?"

Make sure the field level security is set so that the comp_dummy field is read only.

Step 2:

Create the basic screen. Mine was called "CreditCheck". See the last image of this article.

Step 3:

Create the block. I called mine creditcheckblock and it needs to be an entrygroup. We need to do this so that the panel inherits the label and borders.

Step 4:

Add the code to create script of the Dummy field.

if (Values("Act") == 200 || Values("Act") == 520 || Values("_actionid") == 201) {
var intRecordId = CRM.GetContextInfo("company", "comp_companyid");
var CreditCheckPanel = CRM.GetBlock("CompanyCreditCheckBoxBlock");
CreditCheckPanel.DisplayButton("1") = false;
CreditCheckPanel.DisplayForm = false;
var myRecord = CRM.FindRecord("company", "comp_companyid=" + intRecordId);
var strBlockHTML = CreditCheckPanel.Execute(myRecord);
Caption = "<script" + ">";
Caption += "var strPanelHTML ='";
Caption += strBlockHTML;
Caption += "';";
Caption += "<" + "/script>"
}
else {
Hidden = true;
}

This code makes sure the panel is only added when the company summary screen is in view mode.

The HTML for the panel is contained in the variable strBlockHTML which is going to be passed to the browser and used in the next step.

Step 5.

The following code needs to be added to the custom content of the companyboxlong screen.

<script>
crm.ready(function () {
if (crm("comp_name").getMode()=="view")
{
var myRowGaps = $("TD.ROWGap");
myRowGaps[0].innerHTML += strPanelHTML;
}
})
</script>

The code above is a combination of Client Side API and jQuery. The code checks that the code is in View Mode. It then looks for the first occurrence of a table cell with the cascading style sheet class of "RowGap". It then adds the HTML for the panel contained in the variable strPanelHTML; this was the variable that was passed into the browser from the code added to the Caption property of the Dummy field's create script.

Note:

In this example the additional fields that are displayed in the extra panel are edited using a screen called from a tab option.