CMS 10.6 Configuring ICE Component Element Views


Prerequisites: Configure empty component element support for CMS 10.6 ICE. See CMS 10.6 Configuring Empty ICE Component Element Support for details.

View changes correspond to schema component element and list element changes.

After completing the prerequisite ICE Empty Component Support task, your component element now wraps in XML. This means that, regardless of whether or not the component element is empty, you need to change your view. These changes will make a template available in the shared/editable folder to render the view for the new component element.

Important

Keep the following in mind.

  • 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.
  • Do not display any overlay in preview mode (this also applies outside of ICE). The overlay may cover a component node, which causes the screen capture of the component on save to include the overlay.

To make component 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 component element, create one.

    The following example demonstrates view code that renders a wrapped component element.

    @model Ingeniux.Runtime.ICMSElement
    <div @_Helpers.RenderICEAttribute(Model, true)>
    	@{
    		var comp = Model.Element(“RightCopy”);
    		if (comp != null)
    		{
    			@Html.Partial(“editable/RightCopy”, comp)
    		}
    	}
    </div>
  3. Ensure the view name matches the component element name.
    Note

    For example, if the component field name is PageCTA, the root element of the component element name displays as PageCTA in the expanded XML.

    <PageCTA Name="PageCTA" Type="Component" WrappedUp="true" CompTypes="RightCopy" 
         UID="57c7ed3f289f4b38b6fd43e8c68772f1" ComponentName="ciic" label="Page CTA">
      <RightCopy ID="x484" Name="ciic" IsComponent="true" Changed="20210422T22:54:23" 
          Created="20210430T21:51:34" 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">CIIC</Title>
    	<Copy type="xhtml" UID="e093b9268c0845eba849f6ee2f55003d" label="Copy" readonly="false" 
              hidden="false" required="false" indexable="false" Height="" CIID="" Name="Copy">
    	  <!DOCTYPE html>
    	  <html>
    	  <head>
    	  </head>
    	  <body>
    	  <p>CIIC copy</p>
    	  </body>
    	  </html>
    	</Copy>
      </RightCopy>
    </PageCTA>
    In this scenario, you would name the view PageCTA.cshtml. In the main view rendering, this element displays as:
    @Html.Partial("editable/PageCTA", Model.Element("PageCTA"))
  4. Save and close the view.

Next Steps: