Login
Home CMS Documentation Home CMS 10 Development Building an MVC Website Developing MVC Solution by Example Rendering XML Content Rendering ICE Content CMS 10.6 Rendering ICE Content CMS 10.6 ICE DSS Prerequisites CMS 10.6 ICE Views Configuration CMS 10.6 Configuring ICE List Views

CMS 10.6 Configuring ICE List Element Views

Prerequisites: Configure list element support for CMS 10.6 ICE. See CMS 10.6 Configuring ICE List Element Support for details.

View changes correspond to schema list element changes.

After completing the CMS 10.6 Configuring ICE List Element Views task, your list element now wraps in XML. This means you need to change your view for the list element root. These changes will make a template available in the shared/editable folder to render the view for the new list element.

Important
The following updates may only be required for existing implementations. Newly created DSS Preview solutions for CMS 10.6 sites already have these changes in place.

To make list element view changes:

  1. Navigate to [Drive]:[path-to-DSS-root-folder]\Views\shared\editable.
    Note
    Typically, this folder already exists within the DSS Preview solution.
  2. If you haven’t already created a view for the wrapped list element, create one. The following example demonstrates view code that renders a wrapped list element. 
    @model Ingeniux.Runtime.ICMSElement
<div @_Helpers.RenderICEAttribute(Model, true)>
	@{
		var listItems = Model.Elements("Tray");
		foreach (var item in listItems)
		{
			@Html.Partial("editable/Tray", item);
		}
	}
</div>
  3. Ensure the view name matches the list element name.
    Note
    For example, if the component field name is Pagebottomtrays, the root element of the component element name displays as Pagebottomtrays in the expanded XML.
    <Pagebottomtrays Name="Pagebottomtrays" Type="List" label="Page bottom trays" 
     UID="6f6ab897f8394b4c9077b83c75ae0050" ItemName="Tray" ItemType="Component" ItemLabel="" CompTypes="RightCopy">
  <Tray Name="Tray" Type="Component" WrappedUp="true" CompTypes="RightCopy" 
  UID="6f6ab897f8394b4c9077b83c75ae0050" ComponentName="ice test">
	<RightCopy ID="x479" Name="ice test" IsComponent="true" Changed="20210422T16:47:43" 
      Created="20210422T16:49:41" Locale="en-us" SiteBaseUrl="" Embedded="false">
	  <IGX_Categories Count="0" CategoryIds="" />
	  <Title type="string" UID="65e2efeedad0444c82efd5579237c130" label="Title" readonly="false" 
        hidden="false" required="false" indexable="false" CharactersLimit="" CIID="" Name="Title"></Title>
	  <Copy type="xhtml" UID="e093b9268c0845eba849f6ee2f55003d" label="Copy" readonly="false" 
        hidden="false" required="false" indexable="false" Height="" CIID="" Name="Copy"></Copy>
	</RightCopy>
  </Tray>
  <Tray Name="Tray" Type="Component" WrappedUp="true" CompTypes="RightCopy" 
      UID="055145a581f2de064f73cf0d02ab1e9f" ComponentName="ice test">
	<RightCopy ID="x481" Name="ice test 2" IsComponent="true" Changed="20210422T16:47:43" 
      Created="20210422T16:49:41" Locale="en-us" SiteBaseUrl="" Embedded="false">
	  <IGX_Categories Count="0" CategoryIds="" />
	  <Title type="string" UID="65e2efeedad0444c82efd5579237c130" label="Title" readonly="false" 
        hidden="false" required="false" indexable="false" CharactersLimit="" CIID="" Name="Title"></Title>
	  <Copy type="xhtml" UID="e093b9268c0845eba849f6ee2f55003d" label="Copy" readonly="false" 
        hidden="false" required="false" indexable="false" Height="" CIID="" Name="Copy"></Copy>
	</RightCopy>
  </Tray>
</Pagebottomtrays>
    In this scenario, you would name the view Pagebottomtrays.cshtml. In the main view rendering, this element displays as: 
    @Html.Partial("editable/Pagebottomtrays ", Model.Element("Pagebottomtrays"))
    Caution

    We recommend not using the same list name for different child names and types. This way, you can write different views for each list.

    However, if you must use the same list name for multiple lists with different child types and names, render the corresponding child elements by listing the child type template calls.

    Here is an example of this scenario:

    List element template code: 
    @model Ingeniux.Runtime.ICMSElement
<div @_Helpers.RenderICEAttribute(Model, true)>
	@{
		var listItems = Model.Elements();
		foreach (var item in listItems)
		{
			@Html.Partial("editable/ListItem", item);
		}
	}
</div>
    List element item template code: 
    @model Ingeniux.Runtime.ICMSElement
<div @_Helpers.RenderICEAttribute(Model, true)>
	@{
		var type = Model.Type;

		if (type == "string" || type == "xhtml")
		{
			<div>@Model.Value</div>
		}
		else if (Model.Content.Name.LocalName == "Page")
		{
			<a href="@Model.GetAttributeValue("URL")">@Model.GetAttributeValue("Title")</a>
		}
		else if ...
	}
</div>
  4. Save and close the view.

Next Steps: