How Do I Create Custom Widgets in XMPro v6?

Answer

Here are the steps that are to be taken to create Widgets for HomePage, Performance Insight and Team Insight.

The Widgets framework in XMPro v6 allows you to create custom widgets that can be utilized to show various dashboards within the HomePage, Performance or Team Insight pages.

The following steps describe a sample widget called Risk Rating to be displayed within the Home Page.

1. Create Configuration XML File called HomeWidgets.xml and deploy it to the DashboardData folder under the XMWorkspace. The structure of the file is as show in the HomeWidgets.xml and as follows:

<?xml version="1.0" encoding="utf-8"?>
<DashboardPage xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<DockPanels>
<DockPanel>
<PanelUID>RiskCalculations</PanelUID>
<HeaderText>Risk Calculations</HeaderText>
<VisibleIndex>0</VisibleIndex>
<OwnerZoneUID>LeftZone</OwnerZoneUID>
<DisplayName>Favourites</DisplayName>
<ImageName>xmi_favourite.png</ImageName>
<WidgetType>Widget</WidgetType>
<DisplayOnLoad>true</DisplayOnLoad>
<Height>350</Height>
<Width>400</Width>
<Widget>
<UserControl>RiskCalculations</UserControl>
</Widget>
</DockPanel>
</DockPanels>
<DockZones>
<DockZone>
<ZoneUID>LeftZone</ZoneUID>
<ClientInstanceName>zone1</ClientInstanceName>
<CssClass>class</CssClass>
<PanelSpacing>1</PanelSpacing>
<AllowGrowing>true</AllowGrowing>
<Height>350</Height>
<Width>200</Width>
<Orientation>Horizontal</Orientation>
</DockZone>
<DockZone>
<ZoneUID>RightZone</ZoneUID>
<ClientInstanceName>zone2</ClientInstanceName>
<CssClass>class</CssClass>
<PanelSpacing>1</PanelSpacing>
<AllowGrowing>true</AllowGrowing>
<Height>350</Height>
<Width>200</Width>
<Orientation>Horizontal</Orientation>
</DockZone>
</DockZones>
</DashboardPage>

2. Create the User Control

As you will see from the above configuration file, the DockPanel has a Widget which uses a UserControl called “RiskCalculations”.

You would need to create this ascx UserControl and Deploy it to the WidgetControls folder under the XMWorkspace.

You can create various kinds of dashboard within this UserControl.

The attached sample shows one such example.

If the User Control Inherits from XMPro.Widgets.WidgetControls.BaseWidget, then you will need to add the following constructor to your user control as follows:

public UserControl(long roleId)
{
base.RoleID = roleId;
}

Otherwise, you do not need to add that constructor.

This constructor allows you to create your widgets that are controlled by the XMPro security so if you want certain Users only to see certain widgets then it is recommended that your UserControl Inherits from XMPro.Widgets.WidgetControls.BaseWidget .

3. Deploy the UserControl DLL to the bin folder.

4. Deploy the image that is mentioned in the tag of the HomeWidgets.xml configuration file.

For more information, see the following files:

• RiskCalculations.ascx
• HomeWidgets.xml

Features Added/Extended

Added in v6.0.5

Exposed the option to collapse the widget, to configure:

Add to the Dock Panel configuration:

<CollapseVisible>true</CollapseVisible>
Set
<Height>0</Height>
Set
<Width>0</Width>
Ensure the Dock Zone is set to:
<Orientation>Vertical</Orientation>

The resulting widget:

How to add HTML to the header of a given Dock Panel (Remove the spaces in CDATA):

<HeaderText>< ! [C D A T A[Welcome to <img src="images/xmpro.png" alt="XMSupport" style="vertical-align:bottom;" /> ] ]></HeaderText>