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

Creating a Custom Tab Application

Custom tab applications are display in Ingeniux CMS via custom tabs configuration. A custom tab application always maintains the context of current publishing target for the CMS. Also, depending on if the tab is attached to pages or located in the Apps tab, it could be the currently selected page's information. Like all plug-in applications, a custom tab always has references to the _Common and _CurrentUser objects.

Note
This topic uses the SampleApp project as an example, which is located in your Ingeniux CMS installation at [path-to-cms-site-instance]/site/App_Data/xml/custom. It is only an example and should not be modified or deployed.

The process of creating a custom tab application are divided into the following tasks:

  1. Setting up a new MVC web application in VS
  2. Adding a new custom tab controller
  3. Adding a view for the index action
  4. Testing the custom tab action in the CMS

Setting 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 located at [path-to-cms-site-instance]/site/App_Data/xml/custom.

    Custom MVC Project

    Note
    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.
  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 the CMS site's bin folder:
    • Ingeniux.CMS.Common.dll
    • Ingeniux.CMS.CSAPI.dll
    • Ingeniux.CMS.Models.dll
    • Raven.Client.Lightweight.dll
  4. For all of the above references, ensure that the Copy Local property is set to False.

    Ingeniux References

Adding 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.) 
    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);
			}
        }
    }
}
    Note
    The [ExportMetadata("controller", "CustomTabController")] line must duplicate the controller class name as the value of the attribute.

Adding Views for Index Actions

The next step is to add a view for the index action. For easy development, this is a strong-typed view that 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:
    @*@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*@

Next Steps:

To verify that the tab application functions as expected, see Testing Custom Tab.

 

This section includes: