Creating a Custom Edit Form for a Dynamic Execute Element


Building a custom user interface for a Dynamic Execute element uses the same project as a custom tab application.

The sample code to build a custom user interface for a Dynamic Execute element can be found in the "SampleApp" project at [path-to-cms-site-instance]/site/App_Data/xml/custom. Once built, the UI displays a custom edit form.

To build a Dynamic Execute UI:
  1. Create a new controller based on DynamicExecuteUIController class.
    DynamicExecuteUIController
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.Composition;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ingeniux.CMS.Models;
    
    namespace Ingeniux.CMS.Controller.Custom
    {
    	[Export(typeof(CMSControllerBase))]
    	[ExportMetadata("controller", "DynamicExecuteUIController")]
    	[PartCreationPolicy(System.ComponentModel.Composition.CreationPolicy.NonShared)]
        public class DynamicExecuteUIController : DynamicExecuteInterfaceApplicationController
        {
            public ActionResult Index()
            {
    			return View(ElementData);
            }
        }
    }
    Note
    This sample DynamicExecuteUIController class file is located at [path-to-cms-site-instance]/App_Data/xml/Custom/SampleApp/Controllers. The Dynamic Execute UI only deals with one element, and passing the ElementData object directly into view is good enough. Because this model is from the CMS application, it's possible to work directly with the strong-typed view.
  2. Click the link to download the sample view.
    Note
    This sample is available within the CMS installation at [path-to-cms-instance-name]\site\App_Data\xml\Custom\SampleApp\Views\DynamicExecuteUI.
  3. This view contains some JavaScript references from the current application. Make sure to put @Html.Raw(Model.AssetBaseUrl) in front of the asset references. For example:
    Script element
    <script type="text/javascript" src="@Html.Raw(Model.AssetBaseUrl)/Scripts/jquery-2.1.0.min.js"/>

Next Steps:

The above example uses JQuery and JQuery JSON to set the updated element model on window.name. This is how the custom edit form sends the updated element model back to the CMS.

To verify that the custom edit form functions as expected, see Testing Custom Edit Form.

 

This section includes: