Sage CRM 2021: Controlling field and screen spacing in ASP pages and .NET code.

2 minute read time.

Below is a screen shot of the Company Summary screen. Complex screens like this one, either for a system entity or a custom entity, can be built using the APIs.

A partial rebuild of the Company Summary Screen using the .NET API is actually included in the example projects shipped with the SDK installer.

Note: The SDK Installer is found in the download folder "Example Components and Developer Resources (All Versions)" on the community. 

The positioning of the page elements, the screens and the individual fields can be controlled by either meta data or by code.

A screen is made up of different User Interface objects within "containers" or "panels".

The ASP API uses Container blocks to allow the overall structure of the page to be built.
The .NET API has User Interface classes called HorizontalPanel and VeriticalPanel to do the equivalent task.

Either way the page is likely to be structured in code like this:

  • There is an wrapping VerticalPanel/Container (1) that contains the HorizontalPanels/Containers (2, 3 & 6).
  • A HorizontalPanels/Containers (3) can contain one or more screens (e.g. 4 & 5) which may or may be derived from meta data.

We don't have a way in Meta Data to control the inclusion of these panels in system screens (we can control the individual fields in the blocks that make up a screen like the CompanySummary but we can not change the order or display of those blocks themselves). We can control this in any page we build.

Controlling Screens in ASP pages

Container and Screen Blocks in ASP pages have properties that we can set.

The three main properties that control the positioning of a block are:

  • NewLine. Specifies whether the block appears on a new line.
  • Height. Sets the block position in pixels or percent from the top of the screen.
  • Width. Sets the block width in pixels or as a percentage of screen.

Within the code the usage is simple.

var myBlock = CRM.GetBlock("PersonBoxShort");
myBlock.Width = "100%";

And this changes the HTML of the page

Controlling Screens using the .NET API

As noted at the beginning of this article, the .NET API uses a different approach to assembling a page and the User Interface classes (EntryGroup, VerticalPanel, HorizontalPanel) allow you to add what every attributes are supported by HTML TABLE and TD tags.

Within the code the usage is simple.

HorizontalPanel hpAddressPhoneEmail = new HorizontalPanel();
hpAddressPhoneEmail.AddAttribute("width", "100%");
hpAddressPhoneEmail.AddAttribute("valign", "bottom");

VerticalPanel vpMainPanel = new VerticalPanel();
vpMainPanel.AddAttribute("width", "100%");

Controlling field positioning using the ASP API

The approach to controlling fields is different. There are a couple of properties that can be set within Metadata but can also be used in code.

eWareEntryBlock.Height
eWareEntryBlock.Width

Note: The height and width for a screen refers to a percentage or fixed number of pixels BUT here for a field (Entry) these are expressed as string values and represent the RowSpan or ColSpan attributes for the HTML TD tags.

Example Usage

var myBlock = CRM.GetBlock("CompanyBoxShort");
myEntryBlock = myBlock.GetEntry("comp_type");

myEntryBlock.Height = "2";
myEntryBlock.Width = "4";

This causes the following change to the generated HTML

Type:
Prospect  

Controlling field positioning using the .NET API

The height and width for an Entry in the .NET API work in a similar way to the ASP usage. The integer values represent the RowSpan or ColSpan attributes for the HTML TD tags.