Création de présentations de contenu à l'aide d'Oracle Content Management

Créez une présentation de contenu pour disposer les champs dans un élément de contenu lors de l'affichage sur une page de site. Lorsqu'un élément de contenu est ajouté à une page, il utilise la présentation de contenu choisie.

1. Sur la page d'accueil Oracle Content Management, cliquez sur Développeur dans la navigation latérale.
   La page Développeur apparaît.
2. Cliquez sur Afficher tous les composants.
3. Dans le menu déroulant Créer à droite, choisissez Créer une mise en page de contenu.
4. Dans la boîte de dialogue Créer une mise en page de contenu, sélectionnez les types de contenu qui utiliseront la présentation, choisissez les champs à afficher et activez Ajouter la prise en charge des paramètres personnalisés lorsqu'ils sont utilisés dans les sites si vous voulez permettre aux créateurs de site d'ajouter des styles et des paramètres personnalisés lors de l'ajout de composants d'élément de contenu ou de liste de contenu à une page.

   

5. Indiquez le nom et la description du composant de présentation de contenu, puis cliquez sur Créer.

   La présentation de contenu est ajoutée aux composants.

   Remarque :

   Seuls les caractères alphanumériques, les traits d'union et les traits de soulignement sont valides dans les titres de présentation de contenu.
6. Pour exporter la présentation de contenu afin de la modifier, sélectionnez-la, puis cliquez sur Exporter dans le menu contextuel ou cliquez sur dans la barre d'actions.
   1. Accédez à un dossier existant ou sélectionnez successivement Créer et Dossier pour créer un dossier, puis indiquez un nom et, éventuellement, une description.
   2. Cochez la case en regard du dossier, puis cliquez sur OK.
   3. Cliquez sur l'icône ou le nom du dossier pour l'ouvrir.

   Un fichier de package de présentation est créé dans le dossier sélectionné avec le nom de la présentation de contenu et une extension .zip. Téléchargez le fichier dans votre environnement de développement pour modifier les fichiers.

   

   Ces fichiers contrôlent la présentation des champs dans les éléments de contenu qui utilisent la présentation de contenu Employee-Card. Si vous avez activé Ajouter la prise en charge des paramètres personnalisés lorsqu'ils sont utilisés dans les sites, un autre fichier nommé settings.html est également créé. Il présente le rendu par défaut d'un élément de contenu pour qu'il puisse être affiché.

   
   
   Description de l'illustration GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png
   
7. Modifiez les fichiers design.css, layout.html et render.js pour obtenir la présentation de contenu souhaitée.

   Par exemple, les fichiers suivants indiquent la présentation de contenu Employee-Card :

   1. Modifiez le fichier design.css :

      .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. Modifiez le fichier layout.html :

      {{#data.employee_profile_pictureURL}}
      <div class="scs-tile-layout-img-container">
          <img class="scs-tile-layout-img" src="{{data.employee_profile_pictureURL}}" />
      </div>
      {{/data.employee_profile_pictureURL}}
      <ul class="scs-tile-layout">
          <li>
              <p><b>{{name}}</b></p>
          </li>
          <li>&nbsp;</li>
          <li>
              <p>{{data.employee_job_title}}</p>
              <p>{{data.employee_location}}</p>
              <p><b>Phone: </b>{{data.employee_phone}}</p>
          </li>
          {{#scsData.detailPageLink}}
          <li>
              <a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail-page">Profile</span></a>
          </li>
          {{/scsData.detailPageLink}}
      </ul>

   3. Modifiez le fichier render.js :

      /* globals define */
      
      define([
          'jquery',
          'mustache',
          'text!./layout.html',
          'css!./design.css'
      ], 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,
                      contentType,
                      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 content.data.employee_profile_picture === 'string' ?
                              content.data.employee_profile_picture : content.data.employee_profile_picture.id,
                          'contentType': contentType,
                          'secureContent': secureContent
                      };
                      content.data.employee_profile_pictureURL = contentClient.getRenditionURL(params);
                  }
      
                  console.log(content);
      
                  try {
                      // Mustache
                      template = Mustache.render(templateHtml, content);
      
                      if (template) {
                          $(parentObj).append(template);
                      }
                  } catch (e) {
                      console.error(e.stack);
                  }
              }
          };
      
          return ContentLayout;
      });
      

      Pour plus d'informations sur la modification de render.js et des autres fichiers, reportez-vous à Développement de composants.

8. Importez les fichiers modifiés pour remplacer la présentation de contenu existante.
   1. Sur la page d'accueil, cliquez sur Documents.
   2. Téléchargez la présentation de contenu modifiée vers un dossier, dans un fichier avec l'extension .zip, comprenant les mêmes noms de dossier et de fichier que ceux exportés.
      Si vous souhaitez l'importer en tant que nouvelle présentation de contenu, vous devez modifier le GUID de la présentation de contenu dans _folder.json.
   3. Sur la page d'accueil, cliquez sur Développeur.
      La page Développeur apparaît.
   4. Cliquez sur Afficher tous les composants.
   5. Dans le menu Créer, choisissez Importer un composant.
   6. Cochez la case en regard du fichier .zip téléchargé qui contient le composant modifié, puis cliquez sur OK.

   La présentation de contenu modifiée est importée dans Composants.