The CrmEntityListView is an custom server control that renders a list of records in an Adxstudio Portal based on a particular savedquery view customization defined on an entity within CRM that supports sorting, paging as well as searching. This control also supports multiple views of the same or different entity type.

Adding CrmEntityListView to a Page Template

The following control declaration can be added to an ASP.NET page template in the Visual Studio Web Application project.

<adx:CrmEntityListView runat="server" ID="ListView" CssClass="table-responsive" ListCssClass="table table-striped" ClientIDMode="Static"></adx:CrmEntityListView>

The control also requires a ViewConfigurations property to be assigned in the code behind of the page template. 

using System;
using System.Collections.Generic;
using Adxstudio.Xrm.Web.UI.CrmEntityListView;

namespace Site.Pages
{
public partial class ListAccountsPage : PortalPage
{
protected void Page_Init(object sender, EventArgs e)
{
ListView.ViewConfigurations = new List<ViewConfiguration>
{
new ViewConfiguration("account", "accountid", "Active Accounts", 25),
new ViewConfiguration("account", "accountid", "Inactive Accounts", 25)
};
}
}
}

Properties

The CrmEntityListView control has several properties that can be specified to modify the behavior.

NameDescription
LanguageCode The language code used to retrieve localized attribute labels. If not specified, the organization's base language will be retrieved and used.
PortalName The portal configuration that the control binds to.
ListCssClass The CSS class assigned to the list. Recommend setting this to "table table-striped"
ViewQueryStringParameterName The Query String parameter name for the selected view. When multiple ViewConfigurations have been declared, a control will be rendered with a list of the views for the user to choose from, upon selecting the id will be passed to the query string with this parameter name. Default value is "view".
ViewConfigurations Collection of ViewConfiguration settings to get view(s) and configure their display.
You should ensure the content placeholder that contains the CrmEntityListView control has ViewStateMode="Enabled" or the control may not bind property on postback.

ViewConfiguration

This class defines the properties necessary to retrieve a savedquery view from CRM and the provides the configuration settings that dictate how the view should be displayed.

NameDescription
PortalName The portal configuration that the control binds to.
EmptyListText The text to display when the query does not return any records. Default value is "There are no records to display."
FilterQueryStringParameterName The Query String parameter name for the filter. Default value is "filter". Only used if FilterPortalUserAttributeName and FilterAccountAttributeName contain valid values.
SortQueryStringParameterName The Query String parameter name for sorting . Default value is "sort".
PageQueryStringParameterName The Query String parameter name for the current page. Default value is "page".
EntityName Logical name of the entity associated with the view.
PrimaryKeyName Logical name of the primary key attribute of the entity associated with the view.
ViewName Name of a savedquery view record.
ViewId Unique identifier of the savedquery view record.
PageSize Number of records per page.
LayoutXml XML that defines the layout of the view expressed in the LayoutXml language. See http://msdn.microsoft.com/en-us/library/gg334522.aspx
FetchXml XML that defines the query expressed in the FetchXml language. See http://msdn.microsoft.com/en-us/library/gg309405.aspx
ViewDisplayName Override the display name of the view. Default display name uses the savedquery view's name property. Only used when more than one ViewConfiguration has been defined. This text is displayed in the view selection control.
ColumnOverrides Collection of ViewColumn items that define the column and the corresponding display name to override the default display name specified by the schema and the corresponding width in pixels to override the column width specified by the view's layoutXml.
FilterWebsiteAttributeName Attribute logical name on the target entity of the lookup field of type adx_website that is used to assign the current website id to filter the query results.
FilterPortalUserAttributeName Attribute logical name on the target entity of the lookup field of type contact that is used to assign the current portal user's contact id to filter the query results.
FilterAccountAttributeName Attribute logical name on the target entity of the lookup field of type account that is used to assign the current portal user's contact's parent customer account id to filter the query results.
FilterByUserOptionLabel Text to display when rendering a filter dropdown to select 'my' records. Default value is "My". Only displayed if FilterPortalUserAttributeName and FilterAccountAttributeName contain valid values.
Search A ViewSearch class that defines the search settings for this view.
DetailsActionLink An ActionLink class that defines a link button for a details page that will displayed for each row. The id of the record will assigned to the query string.
InsertActionLink An ActionLink class that defines a link button for a page that handles the creation of new records.
ActionLinksColumnWidth Width in pixels of the column containing action links. Default is 20 pixels. Column is only added if DetailsActionLink has been initialized.

ViewSearch

The settings that dictate whether search is enabled, as well as provide the various display properties.

NameDescription
Enabled Indicates whether the search control is enabled or not. Default is false.
SearchQueryStringParameterName The Query String parameter name for the search query. Default is "query".
PlaceholderText Text assigned as the placeholder on the search input field.
TooltipText Text assigned to the tooltip on the search input field.
ButtonLabel Label assigned to the search button.

DetailsActionLink

The settings that dictate whether a link to a details page is rendered for each record and provides the various display properties.

NameDescription
URL URL to a web page that displays the details of a single record. The id of the record is passed to the Query String using the parameter name specified by the QueryStringIdParameterName property.

Label

Text to display for the button.
Tooltip Text assigned to the tooltip on the button.
QueryStringIdParameterName The Query String parameter name that contains the value of the record id.

InsertActionLink

The settings that dictate whether a link to a page that handles the creation of a new record is rendered and provides the various display properties.

NameDescription
URL URL to a web page that handles the creation of a single record.
Label Text to display for the button.
Tooltip Text assigned to the tooltip on the button.

ViewColumn

Specifies a column with a display name to override the default display name defined in the schema and a width to override the default width defined in the view's layoutXml.

NameDescription
AttributeLogicalName Logical name of the column's attribute for which the display name should be overridden.
DisplayName Text to display for the column header.
Width Width of the column in pixels.

Filtering

Although the FilterPortalUserAttributeName|FilterAccountAttributeName|FilterWebsiteAttributeName properties of the ViewConfiguration class that allow you to apply filtering based on the user and website, it is contstrained to a direct relationship to the target entity. If you require more complex condition expressions, the control now supports filtering of current user, user's parent account, and/or website at any depth. Simply edit the entity view and build the view filter conditions in CRM to match any single contact record and the code will replace it's value with the actual value at runtime. No need to assign values to FilterPortalUserAttributeName|FilterAccountAttributeName|FilterWebsiteAttributeName properties of the ViewConfiguration class and no need to manually modify the FetchXml.

  • The control will find all condition elements where uitype="contact" and set the value to the actual value of the current portal user's contact ID.
  • The control will find all condition elements where uitype="account" and set the value to the actual value of the current portal user's parent account ID.
  • The control will find all condition elements where uitype="adx_website" and set the value to the actual value of the current website ID.
Example View Filter Criteria

The following image shows an arbitrary contact assigned to a filter condition, this contact happens to be a stub 'dummy' contact but this could be any contact record. The ID of this record will be replaced by the actual value of the ID of the user viewing the page. If the user is not logged in then no records will be returned. This provides greater flexibility in filtering the data based on the user and website contextually.

If you are filtering by current portal user's contact or parent account then it is recommended that you associate a Web Page Access Control Rule to the Web Page to force the user to sign in. You would create a Web Role with "Authenticated Users Role" checked. Create a Web Page Access Control Rule with "Restrict Read" right and associate the Web Role. This will force users to be signed in to view the page and therefore allow the data to be filled accordingly.

Filter Criteria

Modifying the FetchXml

You can revise the FetchXml associated to the savedquery view to provide additional filtering at runtime.

using System;
using System.Collections.Generic;
using Adxstudio.Xrm.Services.Query;
using Adxstudio.Xrm.Web.UI.CrmEntityListView;
using Microsoft.Xrm.Portal.Configuration;
using Microsoft.Xrm.Sdk.Query; namespace Site.Pages
{
public partial class CustomFilter : PortalPage
{
protected void Page_Init(object sender, EventArgs e)
{
var serviceContext = PortalCrmConfigurationManager.CreateServiceContext();

// create a new view configuration with entity logical name, entity primary key logical name, name of the savedquery view, optional page size (default is 10)
var leadViewConfiguration = new ViewConfiguration("lead", "leadid", "All Leads", 25);

// Get the SavedQueryView for the specified view configuration so we can get the underlying FetchXml that we want to modify.
var view = leadViewConfiguration.GetSavedQueryView(serviceContext);

// To modify the FetchXml, this example uses Adxstudio.Xrm.Services.Query.Fetch class to work with the FetchXml in a strongly typed manner.
var fetch = Fetch.Parse(view.FetchXml);

// Add a new condition to the existing filter
var filter = new Filter { Type = LogicalOperator.And };
var conditions = new List<Condition>();
var condition = new Condition
{
Attribute = "companyname",
Operator = ConditionOperator.Equal,
Value = "Fabrikam"
};
conditions.Add(condition);
filter.Conditions = conditions;
fetch.Entity.Filters.Add(filter);

// Assign the modified FetchXml back to the view configuration
leadViewConfiguration.FetchXml = fetch.ToXml().ToString();
// Formerly: leadViewConfiguration.FetchXml = fetch.ToXml();
var viewConfigurations = new List<ViewConfiguration>
{
leadViewConfiguration
};
ListView.ViewConfigurations = viewConfigurations;
}
}
}

Override Column Display Names

var viewConfigurations = new List<ViewConfiguration>
{
new ViewConfiguration("contact", "contactid", "Active Contacts")
{
ColumnOverrides = new List<ViewColumn>
{
new ViewColumn {AttributeLogicalName = "fullname", DisplayName = "<i class='fa fa-user'></i> Name"},
new ViewColumn {AttributeLogicalName = "emailaddress1", DisplayName = "<i class='fa fa-envelope'></i> Email Address"}
}
}
};

Override Column Widths

var viewConfigurations = new List<ViewConfiguration>
{
new ViewConfiguration("contact", "contactid", "Active Contacts")
{
ColumnOverrides = new List<ViewColumn> { new ViewColumn {AttributeLogicalName = "fullname", Width = 200} }
}
};

JavaScript

The grid is populated asynchronously using ajax. When the ajax call finishes, it triggers a custom event named 'loaded' that you can listen for and then do whatever you may need to the items in the list. The following is a trivial example.

$(document).ready(function() {
$("#ListView .entity-grid").on("loaded", function () {
$(this).children(".view-grid").find("tr").each(function () {
// do something with each row
$(this).css("background-color", "yellow");
});
});
});