Custom View for ICE List Element

How to Creation Custom Views for ICE List Elements | Create a custom view template to edit lists in In-Content View (ICE).


In order for content contributors to edit lists properly in ICE, developers must first create a custom ASP.Net view.

Prerequisite task:

  • When creating the schema that contains an ICE list, be sure to enable the list element's Grouped in expanded XML option.

    List in Schema: Grouped in expanded XML

To create a custom view template to work with the list element in ICE: 

  1. Open your project in Visual Studio.
  2. Use the following code samples to help you model your own custom ICE view:
    • Home.cshtml:
      Calls partial view that contains ICE helper.

      @model Ingeniux.Runtime.CMSPageRequest
      @using Ingeniux.Runtime
      @using System.Data.SqlClient;
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
      ...
      </head>
      <body>
          <!-- Main -->
          ...
          <section id="main" class="wrapper">
              <div class="container">
                  @Html.Partial("editable/RevisionYears", Model.Element("RevisionYears"))
              </div>
          </section>
          ...
      </body>
      </html>
      
    • RevisionYears.cshtml:
      Partial view includes ICE helper (i.e., @_Helpers.RenderICEAtrribute()).

      @model Ingeniux.Runtime.ICMSElement
      @using Ingeniux.Runtime
      @if (Model != null || Model.EditMode)
      {
          IEnumerable<ICMSElement> revisionYears = Model.Elements("RevisionYear");
          
      <div @_Helpers.RenderICEAttribute(Model)>
          
          @if (revisionYears != null && revisionYears.Count() > 0)
              
          {
              <p>
                  @foreach (ICMSElement year in revisionYears)
                  {
                      @Html.Partial("editable/_DefaultText", year)
                      <br />
                  }
              </p>
          }
      </div>
      }
    • _DefaultText.cshtml:
      Partial view renders ICE List

      @model Ingeniux.Runtime.ICMSElement
      @using Ingeniux.Runtime
      
      @if (Model != null && (!String.IsNullOrWhiteSpace(Model.Value) || Model.EditMode))
      {
          var placeholderText = ViewData["Placeholder"] != null ? ViewData["Placeholder"].ToString() : String.Empty;
          var value = Model.Value;
      
          <span @_Helpers.RenderICEAttribute(Model)>
              @if (!String.IsNullOrWhiteSpace(value))
              {
                  @Html.Raw(value)
              }
              else if (Mode.EditMode && !String.IsNullOrWhiteSpace(placeholderText))
              {
                  @placeholderText <text>Placeholder</text>
              }
          </span>
      }

      Note: The PlaceholderText value will display in ICE mode, if items in the list do not contain values. The PlaceholderText ensures that there will always be at least one list item that is viewable and clickable in ICE mode.