In this post, I will show you how you can create new Portlets for the Projects in the OrchardCollaboration.

In Orchardcollaboration, Project Portlets are pluggable user-interface components that can be attached to the Project Dashboard. They represent aggregated and summarized data that help the users to track the status of the projects easier. There are bunch of pre-built portlets in the Orchardcollaboration. Users have the option to add/remove them to/from the project dashboard as well as change their positions in the dashboard. In the following image, you see the Dashboard of a project. There are four portlets here.

21.png

If user navigates to the Edit mode of the project, then he/she can select/deselect the portlets of the project as well as changing their order by drag and drop. Users can also create their own custom portlets and use them in the projects. In the rest of the page, I will show you how you can create a new portlet.

Creating Portlet Template

There are two kinds of portlet templates in the Orchardcollaboraiton. Projection Portlet Templates and Summary Portlet Templates. Projection Portlet Templates show a list of items while Summary Portlet Templates represents aggregated data. In the following section, we will create a Projection Portlet Template that represents the latest Tickets whose Type is Error.

The first step is creating an Orchard Query for the new Portlet. Orchard Queries filter data based on the criteria assigned to them. There are bunch of pre-build filters that can be used in Orchard Queries. Since Tickets in Orchardcollaboration are ContentItems, we can use Orchard Queries to filter tickets. We need a Query with the following filters.

  1. ContentType = “Ticket”
  2. Related Project = “{Project.Id}”
  3. TicketType = “Error”

In order to do so:

  1. Navigate to the Queries page. You can view the Orchard Queries by clicking on the Queries link in the left linkbar of the Orchard Dashboard.

1.jpg

  1. Click on “Add new Query” link in the Queries page.

2.jpg

  1. In the Title field enter “Bug Tickets per Project” and then click on Save button. You will be navigated to the Queries page again. Find the Query with the name “Bug Tickets per Project” and then click on its “Edit” link.
  2. In the Filters section click on “Add a new Filter” link.
  3. Selects the Content Types filter and in its properties window, select “Ticket” from the list. Then click on the Save button.

5.png

  1. In the Filters section click on “Add a new Filter” link again.
  2. Click on the “Related Project” filter which is located on the “AttachToProject Fields” category.

7.png

  1. Select “{Project.Id}” for the Project field. It restricts the result to the tickets of the current project.
  2. Again click on “Add a new Filter”, and this time select “Ticket Type” filter under “Ticket Fields” category. In the Filter page, select “Error” and then click on the Save button.
  3. Also add a Sort Criteria based on the Creation date - descending.
  4. After accomplishing those steps, the query page should look like this.
  1.  In the Query page click on the Close button to finalize creation the Query.
  2. Next step is creating the portlet template. In the Orchard dashboard, in the New section (shown in the following image) click on the “Project-Dashboard Projection Portlet Template”.

12.png

  1. In the opened window, selects the query you have been created in the previous steps, enter 5 for Items to Display and then click on Save button.
  2. Now, your portlet is ready to use. You can use it in the Projects.

Creating Summary Portlet Templates

Summary Portlet Templates represent summary of data. In addition to a Query, such Portlets need a Data Report.The Data Report specifies the aggregation field and the aggregation method such as (Sum, Average, Count) for the Query. In the next steps, we will create a new Data Report that shows the Error Ticket group by Priority field in a Pie chart. The following screenshots show you how to do that.

17.png

18.png

16.png

After creation of the Data Report, click on the Project-Dashboard Summary Portlet Template in the New section in the left linkbar of the dashboard and then fill it according to the screenshot.

19.png

20.png

The portlets have been created successfully. Now, if user navigates to the Edit Project page, he/she can see the new portlets there.