Creating a Page Widget

Prerequisites

• Sitefinity 9.0 and above.
• The Portal Connector 4.0 or Higher successfully installed on the Sitefinity site.
• A Portal Connector License.
• Visual Studio 2012 or greater.

Scenario

We are building a TPC MVC Page widget, that will query the CRM, based on the logged in user customer ID. When we get the results successfully, we will display the first name, last name and the email address in the widget. So, before we start coding lets have a look at how we are going to set up our files for our widget.

Setting Up the Files

We need to keep our files organize and its important to keep this folder structures. There are few steps you need to take an order to setting up files for your widget. First open your Sitefinity web app using Visual studio, locate your MVC folder in the root level. Now you should be able to see the 3 folders named View, Model, Controller.

You need to create a class file inside the Controller folder as well as the Model folder. Please name the controller class file as “yourwidgetnameController”.

Create a folder inside the model folder, and name it as “yourwidgetname”. Inside this folder, we will be creating two model files, One for the Model and one for the View Model. Name your model file as “yourwidgetnameModel” and the view Model file as “yourwidgetnameViewModel”.

 Finally, create a folder inside the View folder, and name it as “yourwidgetname”, then inside this folder we need to create view file (. chtml).

Optionally if you have any scripts file related to the widgets, your can creates a script folder and place them under scripts folder. Once you set up your files it will look like below. 

Controller 

Controllers file is responsible of controlling/handling data for the view or the model.  In the controller file, you need to add in this line of code just after the declaration of the class an order to register your widget in the Sitefinity Tool Box. 

[ControllerToolboxItem(Name = "Sample Page Widget", Title = "Sample Page Widget", SectionName = "MVC Widgets")]

Our controller class need to inherit from "TpcPageWidgetController" and pass in our widget model. it will look like this: 

public class SamplePageWidgetController : TpcPageWidgetController<SamplePageWidgetModel>
	

We also need to save the model in a private variable.

private SamplePageWidgetModel model;
	

Then you need to initiate the controller with the name of your view, and it will look like this.

public TpcRegistrationController()
{
    TemplateName = "Registration";
}

Next , we need to add this two lines of code.

[TypeConverter(typeof(ExpandableObjectConverter))]
[ReflectInheritedProperties]

Now we are getting Model in to the controller by the next few lines of code.

public override SamplePageWidgetModel Model
{
  get { 
	return model ?? (model = ControllerModelFactory.GetModel<SamplePageWidgetModel>(GetType()));
      }
}

Finally, we are overriding the ActionResult function, adding the View Model, any other functions we would like to execute. The code will look like below.

public override ActionResult Index()
{
    Model.GetProfileInfo();

    var viewModel = (SamplePageWidgetViewModel)Model.GetViewModel();
    viewModel.ControlDataId = ControlDataId;
    return View(TemplateName, viewModel);
}

Please Note: you will see some error messages and missing references to the model functionality. Ignore these error messages for now as we haven’t start building our model.

Model 

Model is very important as it the central component of your widget. It holds the logic, rules and the behaviour of your widget. On the other hand, View model works in between Model and the View as a bridge. Therefore, view model only show certain data defined by Model to the View. The reason behind having a View Model is that we don’t want to expose the model or the logic to users.   

 First let’s have a look at the Model. For this instance, we need to have these using’s that are listed below an order for our widget to work.

using System;
using Microsoft.Xrm.Sdk;
using Microsoft.Xrm.Sdk.Query;
using pavliks.PortalConnector.Crm.Connection;
using pavliks.PortalConnector.Mvc.Engine.Interfaces;
using pavliks.PortalConnector.Mvc.Engine.Models;
using pavliks.PortalConnector.UserManagement;

Then our model class need to inherit from the TpcPageWidgetModel, it will look like this.

public class SamplePageWidgetModel : TpcPageWidgetModel
	

We need to save the First name, last name, email address, ControlDataID (Page control ID for this instance of the widget will generated when the widget added to the page). Therefore, we need to create public variables inside our class declaration and it will look like this.

public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public Guid ControlDataId { get; set; }

Once we setup our variables for the widget we are going to override the ITpcPageWidgetViewModel and return the new instance of the view model. This is where we are passing the values from the model to the View model.

public override ITpcPageWidgetViewModel GetViewModel()
{
    return new SamplePageWidgetViewModel
    {
	 DeveloperName = DeveloperName,
	 CssClass = CssClass,
	 IsHidden = IsHidden,
	 FirstName = FirstName,
	 LastName = LastName,
	 Email = Email
    };
}

An order to get the contact ID from the logged in user, we are going to create a function which will access the PortalProfile class and return the current user contact ID.

public void GetProfileInfo()
{
   Guid Data = new Guid(GetGuid().ToString());
   string profile = "No Profile Found";
   if (Data != Guid.Empty)
   {
        using (var manager = new CrmConnectionManager())
	{
	   ICrmConnection connection = manager.Connection;
           ColumnSet profileColumSet;
	   profileColumSet = new ColumnSet("firstname", "lastname", "emailaddress1");
 
	   Entity e = connection.Retrieve("contact", GetGuid(), profileColumSet);
	   FirstName = e.GetAttributeValue<string>(profileColumSet.Columns[0]);
	   LastName = e.GetAttributeValue<string>(profileColumSet.Columns[1]);
	   Email = e.GetAttributeValue<string>(profileColumSet.Columns[2]);
	}
   }
}

In this function, we are doing few key things,

• first, we are getting the Current logged in user ID from the GetGuid() function.
• We are making a connection to CRM using ICrmConnection.
• Create a columnSet and pass in the filed  names.
• Retrieve the information from the open connection that we have created by passing in the Entity name, GetGuid() function and the Column set.
• Once we retrieve the data, we are going to save them in the Public variable we have create in the begging of this example.

If you go back to your controller, you can see we are calling this GetProfileInfo() function inside the Action Result index function.

Please Note: We will discuss about the Tpc classes and interface that our widget inheriting under the “Related TPC Classes and Interfaces” topic.

View

Finally, we are looking in to the view of the widget where we can display the data that we retrieving from the view model.

An order to show the data that we retrieve from CRM we need to connect our view to the view model. Therefor, we need to add this line of code. 

<div class="container-fluid well col-xs-6">
    <div class="row">
	<div class="col-xs-2">
	    <img src="http://placehold.it/380x500" class="img-responsive">
	</div>
	<div class="col-xs-8">
	     <p>First Name : @Model.FirstName </p>
	     <p>Last Name  : @Model.LastName</p>
             <p>Email      : @Model.Email </p>
	</div>
     </div>
</div>

Related TPC Classes and Interfaces

There are many TPC classes and Interface that we need to inherit from while building a custom widget an order to endure correct functionality of the The Portal Connector. Here is a list of Classes that we will be using.

Classes

• TpcPageWidgetController<PassInYourModel>: You need to passing in your model in to this class.
• TpcPageWidgetModel: This class have predefined properties that will used by most of the page widgets.
• ITpcPageWidgetViewModel: This class have predefined properties that will used by most of the page widgets.

Interfaces

• ITpcPageWidgetViewModel: this interface will make sure you will have CssClass Property and the Developer Name added to your View model
• IHideableWidget : this interface will make sure you will add the boolen property to make the widget hidable.

Summary 

In this article, we have discussed about how to build a MVC page widget, File structure, Model, View Controller of our widget.  Finally, we have discussed about few of the related TPC classes and interfaces. 

Download