Inhoudlay-outs maken met Oracle Content Management

Maak een inhoudlay-out voor het rangschikken van velden in een inhouditem wanneer dit wordt weergegeven op een sitepagina. Wanneer een inhouditem aan een pagina wordt toegevoegd, wordt hiervoor de gekozen inhoudlay-out gebruikt.

Een Enterprise gebruiker kan inhouditems maken en gebruiken op basis van inhoudtypen en lay-outs die u als ontwikkelaar levert. U kunt nieuwe inhoudlay-outs maken op basis van de standaardlay-out. Door meerdere inhoudlay-outs aan het inhoudtype te koppelen, kan de siteontwerper inhouditems weergeven in verschillende contexten zonder de inhoud te wijzigen.

Als u een inhoudlay-out in een inhoudlijstcomponent gebruikt, wordt de inhoudlay-out eenmaal per inhouditem herhaald. De inhoudlay-outs worden vervolgens gerangschikt door de sectielay-out.

U kunt een inhoudlay-out exporteren om deze offline te wijzigen en deze vervolgens importeren als vervanging van de bestaande inhoudlay-out.

Ga als volgt te werk om een inhoudlay-out te maken:

Klik op de beginpagina van Oracle Oracle Content Management op Ontwikkelaar in de zijnavigatie.
De pagina Ontwikkelaar wordt weergegeven.
Klik op Alle componenten bekijken.
Kies in het dropdownmenu Maken aan de rechterkant de optie Inhoudlay-out maken.
Selecteer in het dialoogvenster Inhoudlay-out maken de inhoudtypen die gebruikmaken van de lay-out, kies de velden die u wilt weergeven en activeer Ondersteuning voor aangepaste instellingen bij gebruik in sites als u wilt dat sitemakers aangepaste instellingen en stijlen kunnen toevoegen wanneer zij inhouditem- en inhoudlijstcomponenten toevoegen aan een pagina.
Geef een naam en beschrijving op voor de inhoudlay-outcomponent en klik op Maken.

De inhoudlay-out wordt aan uw componenten toegevoegd.

Opmerking:
In inhoudlay-outtitels zijn alleen alfanumerieke tekens, streepjes en onderstrepingstekens toegestaan.
Als u de inhoudlay-out voor bewerking wilt exporteren, selecteert u deze en klikt u vervolgens op Exporteren in het snelmenu of klikt u op in de actiebalk.
1. Navigeer naar een bestaande map of selecteer Maken en klik op Map om een nieuwe map te maken. Geef een naam en desgewenst een beschrijving op.
2. Schakel het selectievakje naast de map in en klik op OK.
3. Klik op het pictogram of de naam van de map om deze te openen.
Er wordt een lay-outpackagebestand gemaakt in de geselecteerde map met de naam van de inhoudlay-out en de extensie .zip. Download het bestand naar uw ontwikkelingsomgeving om de bestanden te bewerken.

Met deze bestanden wordt de lay-out van de velden in inhouditems beheerd waarvoor de inhoudlay-out 'Employee-Card' (Werknemerskaart) wordt gebruikt. Als u Ondersteuning voor aangepaste instellingen bij gebruik in sites hebt geactiveerd, wordt er ook een aanvullend bestand met de naam settings.html gemaakt. Dit bestand levert de standaardweergave van één inhouditem zodat dit item kan worden weergegeven.

Beschrijving van de illustratie GUID-1B7C7C81-7057-4E9C-B98C-C982CC483961-default.png

Bewerk de bestanden design.css, layout.html en render.js om de gewenste inhoudlay-out op te halen.

In de volgende bestanden wordt bijvoorbeeld de inhoudlay-out 'Employee-Card' (Werknemerskaart) opgegeven:

Bewerk het bestand 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;
}

Bewerk het bestand 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>

Bewerk het bestand 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;
});

Zie Componenten ontwikkelen voor informatie over het beheren van het bestand 'render.js' en andere bestanden.

Importeer de gewijzigde bestanden om de bestaande inhoudlay-out te vervangen.
1. Klik op de beginpagina op Documenten.
2. Upload de gewijzigde inhoudlay-out naar een map, in een bestand met de extensie .zip, die dezelfde map- en bestandsnamen bevat als die u hebt geëxporteerd.
  Als u deze als een nieuwe inhoudlay-out wilt importeren, moet u de GUID van de inhoudlay-out wijzigen in _folder.json.
3. Klik op de beginpagina op Ontwikkelaar.
  De pagina Ontwikkelaar wordt weergegeven.
4. Klik op Alle componenten bekijken.
5. Kies in het menu Maken de optie Component importeren.
6. Schakel het selectievakje naast het geladen zipbestand met de gewijzigde component in en klik op OK.
Uw gewijzigde inhoudlay-out wordt geïmporteerd in Componenten.

U kunt een inhoudlay-out ook exporteren om deze te kopiëren of verplaatsen naar een andere Oracle Content Management instance en de lay-out hierin importeren.