Create Content Layouts with Oracle Content and Experience

Create a content layout for laying out fields in a content item when displayed on a site page. When a content item is added to a page, it will use the chosen content layout.

An enterprise user can create and use content items based on content types and layouts that you provide as a developer. You can create new content layouts from the default layout. Multiple content layouts associated with the content type make it possible for the site designer to display content items in different contexts without changing the content.

If you use a content layout in a content list component, then the content layout is repeated once per content item. The content layouts are then arranged by the section layout.

You can export a content layout to modify it offline and then import it to replace the existing content layout.

To create a content layout:

  1. On the Oracle Oracle Content and Experience home page, click Developer in the side navigation.
    The Developer page is displayed.
  2. Click View All Components.
  3. From the Create drop-down menu on the right, choose Create Content Layout.
  4. In the Create Content Layout dialog box, select the content types that will use the layout, choose the fields to display, and enable Add support for custom settings when used in Sites if you want site creators to be able to add custom settings and styles when adding content item and content list components to a page.

    Content Layout dialog

  5. Provide a name and description for your content layout component and click Create.

    The content layout is added to your components.

    Description of content-layout-employee-card.png follows
    Description of the illustration content-layout-employee-card.png


    Only alphanumeric characters, hyphens, and underscores are valid in content layout titles.
  6. To export the content layout for editing, select it, and then click Export in the top menu.
    1. Navigate to an existing folder, or select Create then Folder to create a new folder and provide a name and, optionally, a description.
    2. Select the checkbox next to the folder, and click OK.
    3. Click the folder’s icon or name to open it.

    A layout package file is created in the selected folder with the content layout name and a .zip extension. Download the file to your development environment to edit the files.

    Assets folder of content layout

    These files control the layout of the fields in content items that use the Employee-Card content layout. If you enabled the Add support for custom settings when used in Sites, then an additional file named settings.html is also created which provides a default rendering of a single content item so it can be displayed.

    Description of layout_compare.png follows
    Description of the illustration layout_compare.png
  7. Edit the design.css, layout.html, and render.js files to get the content layout you want.

    For example, the following files specify the Employee-Card content layout:

    1. Edit the design.css file:
      .scs-tile-layout {
          font-family: 'Helvetica Neue', 'Segoe UI', sans-serif-regular, Helvetica, Arial;
          font-size: 16px;
          margin: 0px;
          padding: 0px;
          font-style: normal;
          color: #333;
      .scs-tile-layout li {
          list-style: none;
          font-size: 14px;
          font-style: normal;
          font-variant-caps: normal;
          font-weight: 200;
          margin: 0px;
      .scs-tile-layout-img-container {
          height: 150px;
          width: 100px;
          float: left;
          margin: 0em 0.5em 0em 0em;
          padding: 0px;
          border-radius: 3px;
          overflow: hidden;
          position: relative;
      .scs-tile-layout-img {
          position: absolute;
          left: -100%;
          right: -100%;
          top: -100%;
          bottom: -100%;
          margin: auto;
          height: 100%;
          min-width: 100%;
      .scs-tile-layout p {
          margin: 0px;
    2. Edit the layout.html file:
      <div class="scs-tile-layout-img-container">
          <img class="scs-tile-layout-img" src="{{data.employee_profile_pictureURL}}" />
      <ul class="scs-tile-layout">
              <p><b>Phone: </b>{{data.employee_phone}}</p>
              <a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail-page">Profile</span></a>
    3. Edit the render.js file:
      /* globals define */
      ], function($, Mustache, templateHtml, css) {
          'use strict';
          function ContentLayout(params) {
              this.contentItemData = params.contentItemData || {};
              this.scsData = params.scsData;
              this.contentClient = params.contentClient || (params.scsData ? params.scsData.contentClient : null);
              // retrieve the custom settings
              this.customSettiings = this.scsData.customSettingsData
              || {};
          ContentLayout.prototype = {
              render: function(parentObj) {
                  var template,
                      content = $.extend({}, this.contentItemData),
                      contentClient = this.contentClient,
                      secureContent = false;
                  if (this.scsData) {
                      content = $.extend(content, { 'scsData': this.scsData });
                      contentType = content.scsData.showPublishedContent === true ? 'published' : 'draft';
                      secureContent = content.scsData.secureContent;
                  if (contentClient) {
                      var params = {
                          'itemGUID': typeof === 'string' ?
                          'contentType': contentType,
                          'secureContent': secureContent
             = contentClient.getRenditionURL(params);
                  try {
                      // Mustache
                      template = Mustache.render(templateHtml, content);
                      if (template) {
                  } catch (e) {
          return ContentLayout;

      For information about editing the render.js and other files, see Develop Components.

  8. Import your modified files to replace the existing content layout.
    1. On the home page, click Documents.
    2. Upload the modified content layout to a folder, in a file with a .zip extension, which includes the same folder and file names that you exported.
      If you want to import it as a new content layout, you need to change the GUID of the content layout in _folder.json.
    3. On the home page, click Developer.
      The Developer page is displayed.
    4. Click Components.
    5. From the Create menu, choose Import Component.
    6. Select the checkbox next to the uploaded zip file that contains the modified component, and click OK.

    Your modified content layout is imported to Components.

You can also export a content layout to copy or move it to another Oracle Content and Experience instance and import it there.