Login
Home CMS Documentation Home CMS 10 Development Extending CMS Extensions Development Solution Custom App Dev Examples Tab Application

Creating Custom Tab Applications

Custom tab applications display in Ingeniux CMS via custom tabs configuration. A custom tab application always maintains the context of the current publishing target for the CMS.Like all plug-in applications, a custom tab always has references to the _Common and _CurrentUser objects.

Important
These steps use the SampleApp project as an example, which resides in your Ingeniux CMS installation at [path-to-cms-site-instance]/site/App_Data/xml/custom. This project is only an example and should not be modified or deployed.

The process of creating a custom tab application includes the following tasks:

  1. Set up a new MVC web application in VS
  2. Add a new custom tab controller
  3. Add a view for the index action
  4. Test the custom tab action in the CMS

1. Set Up New MVC Web Applications in Visual Studio

To set up a new MVC web application in VS:

  1. Create a new MVC web application in [path-to-cms-site-instance]/site/App_Data/xml/custom.
    Important
    The MVC web application version must be the same as the CMS application version. This MVC web application project can be based on an empty template.

    Custom MVC Project

  2. If unit tests are needed, check Create a unit test project.

    Create an Empty Template

  3. Add the following references to this project, all of which are located in the CMS site's bin folder:
    • Ingeniux.CMS.Common.dll

    • Ingeniux.CMS.CSAPI.dll

    • Ingeniux.CMS.Models.dll
  4. For all of the above references, ensure that the Copy Local property is set to False.

    Ingeniux References

  5. Complete the following steps to install the Raven DB Client NuGet package:
    1. Click Tools > NuGet Package Manager > Manage NuGet Packages for Solution...
    2. Click the Browse tab, and search for RavenDB client.
    3. Select the RavenDB.Client package in the search results list.
    4. Choose the version that matches your RavenDB in the Version drop-down list, and click Install.
    5. Close out of the NuGet Package Manager after the RavenDB client installation successfully completes.

2. Add New Custom Tab Controller

To add a new custom tab controller:

  1. Right click the Controllers folder.
  2. Select Add > Controller from the context menu.
  3. Use the following sample controller code as a guide for your controller:

    See Creating Application Controllers for more information.

    Note
    The [ExportMetadata("controller", "CustomTabController")] line must duplicate the controller class name as the value of the attribute.
    Sample controller code
    using System;
using System.Collections.Generic;
using System.ComponentModel.Composition;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ingeniux.CMS;
using Ingeniux.CMS.Applications;

namespace Ingeniux.CMS.Controller.Custom
{
	[Export(typeof(CMSControllerBase))]
	[ExportMetadata("controller", "CustomTabController")]
	[PartCreationPolicy(System.ComponentModel.Composition.CreationPolicy.NonShared)]
    public class CustomTabController : CustomTabApplicationController
    {
        public ActionResult Index()
        {
			using (var session = OpenReadSession())
			{
				IPage currentPage = CMSContext.GetPage(session);
				IPublishingTarget currentPubTarget = CMSContext.GetCurrentPublishingTarget(session);
				PageContext model = new PageContext
				{
					PageId = currentPage?.Id ?? "",
					PageName = currentPage?.Name ?? "",
					CurrentPublishingTargetId = currentPubTarget?.Id ?? "",
					CurrentPublishingTargetName = currentPubTarget.Name ?? "",
					CurrentUser = CMSContext.GetCurrentUser(session),
					ServerUrl = _Common.ServerUrl,
					AppBaseUrl = CMSContext.BaseUrl,
					AppAssetBaseUrl = CMSContext.AssetBaseUrl
				};					

				return View(model);
			}
        }
    }
}

3. Add Views for Index Actions

This next set of steps demonstrates how to add a view for the index action. For streamlined development, this strong-typed view renders the current page, publishing target, and user information.

To add a view for the index action:

  1. Use the following sample view code as a guide for your view:
    Sample view code
    @*@model Ingeniux.CMS.Applications.PageContext*@
@using Ingeniux.CMS;

@{

	ViewBag.Title = "Sample CMS Custom Tab Application";
	string pageLabel = string.Format("{0} [{1}]", Model.PageName, Model.PageId);

	string pubTargetLabel = Model.CurrentPublishingTargetName;

	IUser user = Model.CurrentUser;
	string userLabel = user.ToNullHelper()
		.Propagate(
			u => string.Format("{0} - {1}", u.Name, u.UserId))
		.Return("No User Specified");
}

<h2>@ViewBag.Title</h2>
<p>Current Page: @pageLabel</p>
<p>Current Publishing Target: @pubTargetLabel</p>
<p>Current User: @userLabel</p>
  2. Build the project.
  3. Before testing, make sure to comment out the first line of code: @*@model Ingeniux.CMS.Applications.PageContext*@

4. Test Custom Tab Action in CMS

Next Steps:

To verify that the tab application functions as expected, run a test in the CMS. See Testing Custom Tab for details about running tests.

 

This section includes: