Componenten voor paginaontwerp

De volgende componenten zijn bedoeld voor gebruik bij het ontwerpen van inhoud voor een standaardwebpagina. Zij vormen een ondergroep van de componenten beschikbaar uit-van-de-doos voor een standaardinstallatie van AEM.

Sommige zijn onmiddellijk beschikbaar door sidekick, diverse anderen zijn ook beschikbaar door wijze van het Ontwerp te gebruiken om hen toe te laten/onbruikbaar te maken.

LET OP

Deze sectie bespreekt slechts componenten die uit-van-de-doos in een standaard AEM installatie beschikbaar zijn.

Afhankelijk van uw instantie kunt u aangepaste componenten hebben die uitdrukkelijk voor uw vereisten worden ontwikkeld. Deze kunnen zelfs de zelfde naam hebben zoals sommige componenten die hier worden besproken.

De componenten zijn beschikbaar wanneer een pagina uit het lusje van Componenten van sidekick en Nieuwe Component invoegen selecteur (wanneer u in componenten of activa hier selecteert tweemaal klikt).

U kunt een component selecteren en naar de gewenste locatie op de pagina slepen en vervolgens Inhoud en eigenschappen bewerken.

Componenten worden gesorteerd op basis van verschillende categorieën (componentgroepen), waaronder (voor paginaontwerp):

  • Algemeen: Omvat basiscomponenten, met inbegrip van tekst, beelden, lijsten, grafieken, etc.
  • Kolommen: Bevat componenten die nodig zijn voor het ordenen van de lay-out van de inhoud.
  • Formulier: Bevat alle componenten die nodig zijn om een formulier te maken.

Algemeen

De algemene componenten zijn de basiscomponenten die u gebruikt om inhoud te maken.

Account-item

U kunt een koppeling definiëren met een titel en beschrijving.

Adaptieve afbeelding

De stichtingscomponent Adaptive Image genereert afbeeldingen die zo zijn geschaald dat ze passen in het venster waarin de webpagina wordt geopend. Om de component te gebruiken, verstrekt u een beeldmiddel of van het dossiersysteem of DAM. Wanneer de webpagina wordt geopend, downloadt de webbrowser een kopie van de afbeelding waarvan het formaat is gewijzigd, zodat deze geschikt is voor het huidige venster.

De volgende kenmerken kunnen de grootte van het venster bepalen:

  • Apparaatscherm: Op mobiele apparaten worden meestal webpagina's weergegeven, zodat deze zich over het hele scherm uitstrekken.
  • Venstergrootte van webbrowser: Gebruikers van laptop- en desktopcomputers kunnen het formaat van vensters in webbrowsers wijzigen.

De component genereert bijvoorbeeld een kleine afbeelding wanneer de webpagina op een mobiele telefoon wordt geopend en een afbeelding van middelgrote grootte wanneer deze op een tablet wordt geopend. Op een laptop maakt en levert de component een grote afbeelding wanneer de pagina wordt geopend in een gemaximaliseerde webbrowser. Wanneer de grootte van de webbrowser wordt aangepast aan een gedeelte van het scherm, past de component zich aan door een kleinere afbeelding te leveren en wordt de weergave vernieuwd.

Ondersteunde afbeeldingsindelingen

U kunt afbeeldingsbestanden met de volgende bestandsnaamextensies gebruiken met de component Adaptive Image:

  • .jpg
  • .jpeg
  • .png
  • .gif **
LET OP

** Geanimeerde .gif-bestanden worden niet ondersteund in AEM voor adaptieve uitvoeringen.

Afbeeldingsgrootten en Kwaliteit

In de volgende tabel wordt de breedte weergegeven van de afbeelding die wordt gegenereerd voor de opgegeven breedte van de viewport. De hoogte van de gegenereerde afbeelding wordt berekend om een constante hoogte-breedteverhouding te behouden en er wordt geen witruimte weergegeven binnen de afbeeldingsrand. Uitsnijden kan worden gebruikt om witruimte te voorkomen.

Wanneer de afbeelding een JPEG-afbeelding is, kan de grootte van de viewport ook de JPEG-kwaliteit beïnvloeden. De volgende JPEG-kwaliteiten zijn mogelijk:

  • Laag (0,42)
  • Normaal (0,82)
  • Hoog (1,00)
Breedtebereik van viewport (pixels) Breedte afbeelding (pixels) JPEG-kwaliteit Type doelapparaat
width <= 319 320 laag
width = 320 320 medium Mobiele telefoon (staand)
320 < breedte < 481 480 medium Mobiele telefoon (liggend)
480 < breedte < 769 476 hoog Tablet (staand)
768 < breedte < 1025 620 hoog Tablet (liggend)
breedte <= 1025 full (oorspronkelijke grootte) hoog Desktop

Eigenschappen

In het dialoogvenster kunt u eigenschappen bewerken voor uw instantie van de component Adaptief beeld, die veel gemeen hebben met de component Image waarop deze is gebaseerd. De eigenschappen zijn beschikbaar op twee tabbladen:

  • Afbeelding

    • Afbeelding

      Sleep een afbeelding vanuit de zoekfunctie voor inhoud of klik om een bladervenster te openen waarin u een afbeelding kunt laden. Nadat de afbeelding is geladen, kunt u de afbeelding uitsnijden, roteren of verwijderen. Als u wilt in- of uitzoomen op de afbeelding, gebruikt u de schuifbalk onder de afbeelding (boven de knoppen OK en Annuleren)

    • Uitsnijden

      Een afbeelding uitsnijden. Sleep de rand om de afbeelding uit te snijden.

    • Roteren

      Klik herhaaldelijk op Roteren totdat de afbeelding naar wens is geroteerd.

    • Wissen

      Verwijder de huidige afbeelding.

  • Geavanceerd

    • Titel

      De component Adaptive Image gebruikt deze eigenschap niet.

    • Alt-tekst

      De alternatieve tekst die voor de afbeelding moet worden gebruikt.

    • Koppelen naar

      De component Adaptive Image gebruikt deze eigenschap niet.

    • Beschrijving

      De component Adaptive Image gebruikt deze eigenschap niet.

De adaptieve afbeeldingscomponent uitbreiden

Zie De adaptieve afbeeldingscomponent aanpassen voor informatie over het aanpassen van de adaptieve afbeeldingscomponent.

Met de Carousel-component kunt u afbeeldingen weergeven die aan afzonderlijke pagina's zijn gekoppeld:

  • één voor één
  • voor korte tijd
  • in een volgorde die u opgeeft
  • met een door u opgegeven tijdvertraging

Met de besturingselementen waarop u kunt klikken, kan de gebruiker de weergegeven pagina's ook in real-time doorlopen, op aanvraag. Als u op de pagina klikt die momenteel zichtbaar is, gaat u naar die pagina. Met andere woorden, de Carousel fungeert als navigatiecontrole.

Eigenschappen

Deze zijn beschikbaar in twee tabbladen:


  • CarouselHier geeft u op hoe de carrousel werkt:

    • Afspeelsnelheid

      De tijd in milliseconden voordat de volgende dia wordt getoond.

    • Overgangstijd

      Tijd in milliseconden voor de overgang tussen twee dia's.

    • Besturingselementstijl

      Er zijn verschillende opties beschikbaar in een keuzemenu. Bijvoorbeeld, Vorige/Volgende Knopen, Hoogste - juiste Schakelaars.


  • ListThis you specify how pages in your Carousel:

    • Lijst samenstellen met

      Er zijn verschillende manieren om een paginalijst samen te stellen: Onderliggende pagina's, Vaste lijst, Zoeken of Geavanceerd zoeken (allemaal hieronder beschreven).

      Welke methode u ook kiest, op de pagina's die u in de lijst opneemt, is er al een afbeelding gekoppeld aan de pagina. Dit is de afbeelding die in de carrousel wordt weergegeven. Als er geen afbeelding is voor een bepaalde pagina onder de Pagina-eigenschappen van die pagina, moet u een afbeelding aan de pagina koppelen voordat u begint, omdat de carrousel anders een lege (of meestal lege) pagina weergeeft. Zie Pagina-eigenschappen bewerken.

      Afhankelijk van het item dat u kiest, wordt een nieuw deelvenster weergegeven:

      • Opties voor onderliggende pagina's

        • Bovenliggende pagina

          Geef een pad handmatig of met de kiezer op. Laat leeg als u de huidige pagina als bovenliggend item wilt gebruiken.

      • Opties voor vaste lijst

        • Pagina's

          Selecteer een lijst met pagina's. Gebruik + om meer items en de knoppen Omhoog/Omlaag toe te voegen om de volgorde aan te passen.

      • Zoekopties

        • Starten in

          Voer handmatig of met de kiezer een beginpad in.

        • Zoekopdracht
          U kunt een zoekquery voor onbewerkte tekst invoeren.

      • Opties voor Geavanceerd zoeken

        • Querybuilder prediknotatie

          U kunt een onderzoeksvraag ingaan gebruikend Querybuilder prediknotatie. U kunt bijvoorbeeld "fulltext=Marketing" invoeren om alle pagina's met "Marketing" in de inhoud weer te geven in de carrousel.

          Zie QueryBuilder API voor volledige bespreking van vraaguitdrukkingen en verdere voorbeelden.

    • Volgorde van

      Selecteer jcr:title, jcr:created, cq:lastModified of cq:template in het vervolgkeuzemenu.

    • Limiet

      Het maximumaantal items dat u in de carrousel wilt gebruiken; dit is optioneel.

OPMERKING

U kunt een aangepaste carrouselcomponent voor Adobe Experience Manager maken die digitale elementen weergeeft die zich in de AEM DAM bevinden. Zie Aangepaste carrouselcomponenten maken voor Adobe Experience Manager voor meer informatie.

Grafiek

Met de component Diagram kunt u een balk, lijn of cirkeldiagram toevoegen. AEM maakt een grafiek op basis van de gegevens die u opgeeft. U verstrekt gegevens door direct in het lusje van Gegevens te typen of door een spreadsheet te kopiëren en te kleven.

  • Gegevens

    • Grafiekgegevens

      Voer uw diagramgegevens in met de CSV-indeling. In de indeling Door komma's gescheiden waarden worden komma's (",") gebruikt als veldscheidingsteken.

  • Geavanceerd

    • Type diagram

      Selecteer Schijfdiagram, Lijngrafiek en Staafdiagram.

    • Alternatieve tekst

      Alternatieve tekst die wordt weergegeven in plaats van het diagram.

    • Breedte

      Breedte van het diagram in pixels.

    • Hoogte

      Hoogte van het diagram in pixels.

In het volgende voorbeeld ziet u een voorbeeld van diagramgegevens, gevolgd door het resulterende staafdiagram:

chlimage_1-26 dc_chart_use

OPMERKING

U kunt een aangepast AEM grafiekbesturingselement maken dat gegevens weergeeft die zich in de AEM JCR bevinden. Zie Adobe Experience Manager-gegevens weergeven in een diagram voor meer informatie.

Inhoudsfragment

LET OP

De volledige functionaliteit van het Beheer van het Fragment van de Inhoud is slechts beschikbaar met touch-toegelaten UI.

De component van het Fragment van de Inhoud kan in het klassieke hulpje UI worden gezien, maar de verdere functies zijn niet beschikbaar.

Inhoudsfragmenten worden gemaakt en beheerd als pagina-onafhankelijke elementen. Vervolgens kunt u deze fragmenten en de variaties ervan gebruiken bij het ontwerpen van de inhoudspagina's.

Ontwerpimportmodule

Hierdoor kunt u een ZIP-bestand met een ontwerppakket uploaden.

downloaden

De component Download maakt een koppeling op de geselecteerde webpagina om een specifiek bestand te downloaden. U kunt middelen van de Vinder van de Inhoud slepen of een dossier uploaden.

  • Downloaden

    • Beschrijving

      Een korte beschrijving die wordt weergegeven met de downloadkoppeling.

    • Bestand

      Bestand beschikbaar voor downloaden op de resulterende webpagina. Sleep een element uit de zoekfunctie voor inhoud of klik in het gebied om het bestand te uploaden dat u wilt downloaden.

In het volgende voorbeeld wordt de component Download getoond in Geometrixx:

dc_download_use

Extern

De externe component van de toepassingsintegratie (External) laat u toe om externe toepassingen in uw AEM pagina in te bedden gebruikend iframe.

  • Extern

    • Doeltoepassing

      Geef de URL op van de webtoepassing die moet worden geïntegreerd; bijvoorbeeld:

      https://en.wikipedia.org/wiki/Main_Page
      
    • Parameters doorgeven

      Schakel het selectievakje in als de parameters naar de toepassing moeten worden doorgegeven.

    • Breedte en Hoogte

      De grootte van het iframe definiëren

De externe toepassing is geïntegreerd in het alineasysteem van de AEM. bijvoorbeeld wanneer u een doeltoepassing van https://en.wikipedia.org/wiki/Main_Page gebruikt:

chlimage_1-27

OPMERKING

Afhankelijk van uw gebruiksscenario zijn er bijvoorbeeld andere opties beschikbaar voor de integratie van externe toepassingen. de Integratie van Portlets.

Flash

Met de component Flash kunt u een Flash-film laden. U kunt een Flash-element van de zoeker naar de component slepen of u kunt het dialoogvenster gebruiken:

  • Flash

    • Flash-film

      Het Flash-filmbestand. Sleep een element van de zoekfunctie voor inhoud of klik om een bladervenster te openen.

    • Grootte

      Dimension in pixels van het weergavegebied dat de film bevat.

  • Alternatieve afbeelding

    Een alternatieve afbeelding die moet worden weergegeven

  • Geavanceerd

    • Contextmenu

      Geeft aan of het contextmenu moet worden weergegeven of verborgen.

    • Venstermodus

      Hoe het venster eruitziet, bijvoorbeeld dekkend, transparant of als een duidelijk (effen) venster.

    • Achtergrondkleur

      Een achtergrondkleur die is geselecteerd in het kleurendiagram dat wordt weergegeven.

    • Minimumversie

      De minimale versie van Adobe Flash Player die is vereist om de film uit te voeren. De standaardwaarde is 9.0.0.

    • Attributen

      Eventuele andere vereiste kenmerken.

Afbeelding

De component image geeft een afbeelding weer en de bijbehorende tekst volgens de opgegeven parameters.

U kunt een afbeelding uploaden, deze vervolgens bewerken en bewerken (bijv. uitsnijden, roteren, koppeling/titel/tekst toevoegen).

U kunt een afbeelding van de Inhoudszoeker rechtstreeks naar de component of het dialoogvenster Bewerken slepen. U kunt ook dubbelklikken in het centrale gedeelte van het dialoogvenster Bewerken om door uw lokale bestandssysteem te bladeren en een afbeelding te uploaden. Op de twee tabbladen van het dialoogvenster Bewerken staan ook alle definities en bewerkingen van de afbeelding:

dc_image

OPMERKING

De voortgang van het uploaden kan niet worden gecontroleerd met Internet Explorer.

Gebruikers van Internet Explorer moeten de afbeelding uploaden en op OK klikken en de afbeelding vervolgens opnieuw openen om het geüploade bestand in de voorvertoning te zien en wijzigingen uit te voeren (bijsnijden).

Zie de sectie Gecertificeerde Platforms voor meer informatie over HTML5-functies die door AEM worden gebruikt.

Wanneer een beeld wordt geladen, kunt u het volgende vormen:

  • Kaart

    Als u een afbeelding wilt toewijzen, selecteert u Kaart. U kunt opgeven hoe u de afbeelding met hyperlinks wilt maken (rechthoek, veelhoek enzovoort) en waar het gebied naartoe moet wijzen.

  • Uitsnijden

    Selecteer Uitsnijden om een afbeelding uit te snijden. Gebruik de muis om de afbeelding uit te snijden.

  • Roteren

    Selecteer Roteren als u een afbeelding wilt roteren. Herhaal deze bewerking totdat de afbeelding op de gewenste manier is geroteerd.

  • Wissen

    Verwijder de huidige afbeelding.

  • Zoombalk

    Als u wilt in- of uitzoomen op de afbeelding, gebruikt u de schuifbalk onder de afbeelding (boven de knoppen OK en Annuleren)

  • Titel

    De titel van de afbeelding.

  • Alt-tekst

    Een alternatieve tekst die kan worden gebruikt bij het maken van toegankelijke inhoud.

  • Koppelen naar

    Maak een koppeling naar elementen of andere pagina's binnen uw website.

  • Beschrijving

    Een beschrijving van de afbeelding.

  • Grootte

    Hiermee stelt u de hoogte en de breedte van de afbeelding in.

De uiteindelijke afbeelding (met Titel en Beschrijving) kan worden weergegeven als:

chlimage_1-28

Layout Container

LET OP

Hoewel de component Layout Container beschikbaar is in de klassieke gebruikersinterface, is de volledige functionaliteit alleen beschikbaar in de interface met aanraakbediening. Zie Responsieve lay-out voor meer informatie.

Lijst

Met de component List kunt u zoekcriteria configureren voor het weergeven van een lijst:

  • Lijst

    • Lijst samenstellen met

      Hier geeft u op waar de inhoud van de lijst wordt opgehaald. Er zijn verschillende methoden:

    • Afhankelijk van het item dat u kiest, wordt een nieuw deelvenster weergegeven:

      • Opties voor onderliggende pagina's

        • Onderliggende niveaus van (bovenliggende pagina)

          Geef een pad handmatig of met de kiezer op. Laat leeg als u de huidige pagina als bovenliggend item wilt gebruiken.

      • Opties voor vaste lijst

        • Pagina's - Selecteer een lijst met pagina's. Gebruik + om meer items toe te voegen en klik op de knop Omhoog/Omlaag om de volgorde aan te passen.
      • Zoekopties

        • Begin in - ga een beginweg in, of manueel of gebruikend de selecteur. Zoekopdracht U kunt een zoekquery voor onbewerkte tekst invoeren.
      • Opties voor Geavanceerd zoeken

        • Querybuilder voorspelt aantekening - U kunt een onderzoeksvraag ingaan gebruikend de predicaataantekening van de Bouwer Querybuilder. U kunt bijvoorbeeld "fulltext=Marketing" invoeren om alle pagina's met "Marketing" in de inhoud weer te geven in de carrousel. Zie QueryBuilder API voor volledige bespreking van vraaguitdrukkingen en verdere voorbeelden.
      • Tags - Geef de bovenliggende pagina, tags/ trefwoorden en de vereiste overeenkomende criteria op.

    • Weergeven als

      Hoe je de objecten wilt aanbieden; Dit zijn onder andere koppelingen, lesgevers en nieuws.

    • Volgorde van

      Of de lijst moet worden besteld en, zo ja, welke criteria moeten worden gebruikt voor sorteren. U kunt criteria invoeren of een criteria selecteren in de opgegeven vervolgkeuzelijst.

    • Limiet

      Geef het maximumaantal items op dat u in de lijst wilt weergeven.

    • Feed inschakelen

      Geeft aan of een RSS-feed voor de lijst moet worden geactiveerd.

    • Pagineren na

      Hier kunt u het aantal lijstitems opgeven dat tegelijkertijd moet worden weergegeven. Een lijst met meer items dan opgegeven gebruikt paginering om de lijst in verschillende delen weer te geven.

In het volgende voorbeeld wordt een component List getoond op de manier waarop een lijst met onderliggende pagina's kan worden weergegeven (het ontwerp wordt bepaald door de aangepaste CSS-definities van een siteontwerp).

dc_list_use

Aanmelden

Hier vindt u de velden Gebruikersnaam en Wachtwoord.

chlimage_1-29

U kunt configureren:

  • Aanmelden

    • Sectielabel

      Invultekst voor de invoervelden.

    • Label voor gebruikersnaam

      Tekst die een label moet geven aan het veld gebruikersnaam.

    • Wachtwoordlabel

      Tekst om het wachtwoordveld een label te geven.

    • Label van de knop Aanmelden

      Tekst voor de aanmeldknop.

    • Omleiden naar

      U kunt de pagina op uw website opgeven die moet worden geopend nadat de gebruiker zich heeft aangemeld.

  • Al aangemeld

    • Doorgaan, knoplabel

      Tekst die aangeeft dat de gebruiker al is aangemeld.

Status van bestelling

  • Titel

    • Titel

      Geef de titeltekst op die u wilt weergeven.

    • Koppeling

      Geef de pagina (het product) op waarvoor de status van de bestelling moet worden weergegeven.

    • Type/Grootte

      Maak een keuze uit de beschikbare selectie.

chlimage_1-30

Referentie

Met de component Reference kunt u verwijzen naar tekst van een andere pagina van uw AEM website (binnen de huidige instantie). De inhoud van de alinea waarnaar wordt verwezen, wordt weergegeven alsof deze zich op de huidige pagina bevindt. De inhoud wordt bijgewerkt wanneer de bronalinea verandert (mogelijk moet de pagina worden vernieuwd).

  • Alineaslaggids

    • Referentie

      Geef het pad op naar de pagina en alinea waarnaar u wilt verwijzen (inhoud opnemen).

Als u het pad naar een alinea wilt opgeven, moet u het pad (op de pagina) achtervoegsel geven met:

.../jcr:content/par/<paragraph-ID>

Bijvoorbeeld:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Naast het verwijzen naar een specifieke alinea, kan het pad ook worden gewijzigd om een volledig pari-systeem op te geven. U kunt dit doen door het pad te voorzien van:

/jcr:content/par

Bijvoorbeeld:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Zodra gevormd zal de inhoud precies zoals op de bronpagina verschijnen. Het feit dat dit een verwijzing is, wordt alleen weergegeven wanneer u de component opent voor bewerking:

chlimage_1-31

Zoeken

De component van het Onderzoek voegt onderzoeksmogelijkheden aan uw pagina toe.

U kunt configureren:

  • Zoeken

    • Knooppunttypen

      Als de zoekopdracht moet worden beperkt tot een specifieke lijst van knooppunttypen, moeten deze hier worden vermeld; bijvoorbeeld cq:Page.

    • Pad om in te zoeken

      Geef de basispagina op van de vertakking die u wilt zoeken.

    • Tekst van knop Zoeken

      De naam die wordt weergegeven op de werkelijke zoekknop.

    • Statistische tekst

      De tekst die boven de zoekresultaten wordt weergegeven.

    • Geen resultaattekst

      Als er geen resultaten zijn, wordt de hier ingevoerde tekst weergegeven.

    • Spellcheck-tekst

      Als iemand een gelijkaardige termijn ingaat, wordt deze tekst getoond vóór de termijn.

      Als u bijvoorbeeld geometrie typt, wordt ''Bedoelde u?'' weergegeven in het systeem. geometrixx".

    • Tekst op vergelijkbare pagina's

      De tekst die wordt weergegeven naast een resultaat voor vergelijkbare pagina's. Klik op deze koppeling om pagina's met vergelijkbare inhoud weer te geven.

    • Tekst verwante zoekopdrachten

      De tekst die naast onderzoeken naar verwante termijnen en onderwerpen verschijnt.

    • Tekst voor trends zoeken

      De titel boven de zoektermen die gebruikers invoeren.

    • Label voor resultaatpagina's

      De tekst die onder aan deze lijst wordt weergegeven met koppelingen naar andere resultatenpagina's.

    • Vorige label

      De naam die wordt weergegeven op de koppeling naar vorige zoekpagina's.

    • Volgende label

      De naam die wordt weergegeven op de koppeling naar volgende zoekpagina's.

In het volgende voorbeeld wordt de component Search getoond na een zoekopdracht naar het woord geometrixx in de hoofdmap van een standaardinstallatie. Dit illustreert ook de paginering van resultaten:

dc_search_use

In het volgende voorbeeld wordt een zoekterm getoond die verkeerd is gespeld en niet beschikbaar is:

dc_search_usenotfound

Sitemap

Een automatische sitemapvermelding die (met de standaardinstellingen) alle pagina's (als actieve koppelingen) op de huidige website weergeeft. Een extract toont bijvoorbeeld:

dc_sitemap_use

Indien nodig kunt u configureren:

  • Sitemap

    • Basis
      PathPath van waar de lijst moet beginnen.

Presentatie

Met deze component kunt u een reeks afbeeldingen laden die als een diapresentatie op de pagina worden weergegeven. U kunt afbeeldingen toevoegen of verwijderen en elke titel toewijzen. Onder Geavanceerd kunt u ook de grootte van het weergavegebied opgeven.

U kunt configureren:

  • Dia's

    • Nieuwe dia

      U kunt een selectie van dia's specificeren gebruikend Add (en Remove) knopen.

    • Titel

      Geef indien nodig een titel op. Dit wordt bedekt op de aangewezen dia.

  • Geavanceerd

    • Grootte

      Geef de breedte en hoogte op in pixels.

In de diapresentatie-component worden vervolgens herhaaldelijk alle elementen gedurende een korte periode op volgorde weergegeven, voordat de volgende dia wordt vervaagd:

dc_slideshow_use

Tabel

OPMERKING

De component Table is gebaseerd op Rich Text redacteur, zoals de component Text.

Het wordt aanbevolen de component Tabel voor tabellen te gebruiken, hoewel deze ook kunnen worden samengesteld met de component Text.

De component Table wordt preconfigured om u te laten een lijst construeren, vullen en formatteren. Met behulp van het dialoogvenster kunt u uw tabel configureren en de inhoud maken door:

  • helemaal opnieuw
  • het kopiëren en het kleven van een spreadsheet of een lijst van een externe redacteur (zoals Excel, OpenOffice, Blocnote, enz.).

dc_table

In de volgende schermafbeelding ziet u een voorbeeld van de tabelcomponent. het ontwerp wordt bepaald door de locatiespecifieke CSS:

dc_table_use

Label

Een tagcloud geeft een grafisch weergegeven selectie van de tags die zijn toegepast op de inhoud van uw website:

dc_tagclouduse

Wanneer u de component Tag Cloud configureert, kunt u het volgende opgeven:

  • Weer te geven labels

    Waar de weer te geven tags worden verzameld. Selecteer op een pagina een pagina met alle onderliggende codes of alle codes.

  • Pagina

    Selecteer de pagina waarnaar moet worden verwezen.

  • Geen koppelingen op tags

    Of de weergegeven tags moeten fungeren als koppelingen.

Voor meer informatie over het toepassen van markeringen, bezoek Gebruikend Markeringen.

Tekst

OPMERKING

De component Text is gebaseerd op de Rich Text editor, evenals de component Table.

Het wordt aanbevolen de component Tabel voor tabellen te gebruiken, hoewel deze ook kunnen worden samengesteld met de component Text.

De component van de Tekst laat u een tekstblok ingaan gebruikend een redacteur WYSIWYG, met functionaliteit die door Rich Text redacteur wordt verstrekt. Met een selectie pictogrammen kunt u tekst opmaken, inclusief lettertypekenmerken, uitlijning, koppelingen, lijsten en inspringing.

dc_text

Als u het tabblad Stijlen van het dialoogvenster Bewerken opent, kunt u ook instellen:

  • Spacer
  • Tekststijl

De opgemaakte tekst wordt dan op de pagina weergegeven. het daadwerkelijke ontwerp is afhankelijk van de site-CSS:

dc_text_use

Voor meer gedetailleerde informatie over de component van de Tekst en de functionaliteit die door de Rich redacteur van de Tekst wordt verstrekt, zie Rich Text Editor pagina.

Bewerken op plaats

Naast de op een dialoogvenster gebaseerde bewerkingsmodus voor RTF-tekst biedt AEM ook Bewerken op plaats, waarmee de tekst direct kan worden bewerkt terwijl deze wordt weergegeven in de lay-out van de pagina.

Tekst en afbeelding

De component Tekst en afbeelding voegt een tekstblok en een afbeelding toe. U kunt ook afzonderlijk tekst en afbeeldingen toevoegen en bewerken. Zie de Text en Image componenten voor meer informatie.

chlimage_1-32 chlimage_1-33

U kunt configureren:

  • Componentstijlen (stijlen)

    Hier kunt u de afbeelding links of rechts uitlijnen. De standaardinstelling is Left uitgelijnd, met de afbeelding aan de linkerkant.

  • Afbeeldingseigenschappen (geavanceerde afbeeldingseigenschappen)

    Hier kunt u het volgende opgeven:

    • Afbeeldingselement

      Upload de vereiste afbeelding.

    • Titel

      de titel van het blok; wordt weergegeven door mouseover.

    • Alt-tekst

      Alternatieve tekst die moet worden weergegeven als de afbeelding niet kan worden weergegeven. Als de titel leeg wordt gelaten, wordt deze gebruikt.

    • Koppeling naar

      Geef een doelpad op.

    • Beschrijving

      Een beschrijving van de afbeelding.

    • Grootte

      Hiermee stelt u de hoogte en breedte van de afbeelding in.

In het volgende voorbeeld ziet u een component Tekstafbeelding waarin de afbeelding links wordt uitgelijnd:

dc_tile_use

Titel

De component title kan:

  • de naam van de huidige pagina weergeven; Dit doet u door het veld Titel leeg te laten
  • geeft u een tekst weer die u opgeeft in het veld Titel.

U kunt configureren:

  • Titel

    Als u een andere naam dan de paginatitel wilt gebruiken, voert u deze hier in.

  • Koppeling

    De URI als de titel moet werken als een koppeling.

  • Type/Grootte

    Selecteer Klein of Groot in de vervolgkeuzelijst. Klein wordt gegenereerd als een afbeelding. Groot wordt gegenereerd als tekst.

In het volgende voorbeeld wordt een component Title weergegeven. het ontwerp wordt bepaald door de sitespecifieke CSS.

dc_title_use

Video

Met de component Video kunt u een vooraf gedefinieerd, out-of-the-box video-element op een pagina plaatsen.

Zie ook Uw videoprofielen configureren voor gebruik met HTML5-elementen.

Na het plaatsen van een geval van de component op uw pagina kunt u vormen:

  • Video

    • Video-element - Uw video-element uploaden of neerzetten.
    • Grootte - De native grootte van de video (breedte x hoogte in pixels) wordt weergegeven in de vakken naast Grootte (zie boven). Voer hier handmatig de afmetingen voor breedte en hoogte in als u de native afmetingen van de video wilt overschrijven. Klik OK om het dialoogvenster te sluiten.
OPMERKING

Ondersteunde indelingen zijn onder andere:

  • .mp4
  • Ogg
  • FLV (video Flash)

Kolommen

Kolommen zijn een mechanisme om de lay-out van inhoud in AEM te bepalen. In een standaardinstallatie zijn componenten voor het maken van twee en/of drie kolommen beschikbaar.

In het volgende voorbeeld worden de gebruikte componenten 2 kolommen en 3 kolommen getoond. U kunt de plaatsaanduidingen voor nieuwe componenten gebruiken:

chlimage_1-34

2 kolommen

Een component van de Controle van de Kolom die aan 2 gelijke kolommen in gebreke blijft.

3 kolommen

Een component van de Controle van de Kolom die aan 3 gelijke kolommen in gebreke blijft.

Kolombesturingselement

Met de component Kolombeheer kunnen gebruikers selecteren hoe ze de inhoud in het hoofdvenster van de webpagina in meerdere kolommen willen splitsen. Gebruikers kunnen het aantal vereiste kolommen selecteren (uit een vooraf gedefinieerde lijst) en vervolgens inhoud maken, verwijderen of verplaatsen binnen elk van de kolommen.

  • Kolombesturingselement

    • Kolomlay-out

      Selecteer het aantal kolommen dat u wilt renderen. Nadat elke kolom is gemaakt, bevat deze een eigen koppeling voor het slepen van componenten of elementen tijdens het toevoegen van inhoud.

formulier

Formuliercomponenten worden gebruikt om formulieren te maken waarmee bezoekers invoer kunnen verzenden. Forms en formuliercomponenten kunnen worden gebruikt om informatie te verzamelen, waaronder gebruikersfeedback (bijvoorbeeld een vragenlijst voor klanttevredenheid) en gebruikersgegevens (bijvoorbeeld gebruikersregistratie).

OPMERKING

Zie AEM Forms Help voor informatie over AEM Forms.

Forms is opgebouwd uit verschillende onderdelen:

  • formulier

    De formuliercomponent definieert het begin en einde van een nieuw formulier op een pagina. Andere componenten kunnen vervolgens tussen deze elementen worden geplaatst, zoals tabellen, downloads enzovoort.

  • Formuliervelden en -elementen

    Formuliervelden en -elementen kunnen tekstvakken, keuzerondjes, afbeeldingen enzovoort bevatten. De gebruiker voert vaak een handeling uit in een formulierveld, zoals het typen van tekst. Zie de afzonderlijke formulierelementen voor meer informatie.

  • Profielcomponenten

    Profielcomponenten hebben betrekking op bezoekersprofielen die worden gebruikt voor sociale samenwerking en andere gebieden waar personalisatie van bezoekers vereist is.

Hieronder ziet u een voorbeeldformulier. Het bestaat uit de component Form (begin en einde), met twee velden Form Text die worden gebruikt voor invoer, een General Text veld dat wordt gebruikt voor de doorlooptekst en een Submit knop.

dc_form

OPMERKING

Informatie over het verder ontwikkelen en aanpassen van uw formulieren is beschikbaar op Forms-pagina ontwikkelen. Dit omvat onder andere het toevoegen van handelingen, beperkingen, het vooraf laden van velden en het gebruik van scripts om een service aan te roepen die actie moet ondernemen.

Gemeenschappelijke instellingen voor (veel) formuliercomponenten

Hoewel elk van de formuliercomponenten een ander doel heeft, bestaan veel van deze componenten uit vergelijkbare opties en parameters.

Wanneer u een van de formuliercomponenten configureert, zijn de volgende tabbladen beschikbaar in het dialoogvenster:

  • Titel en tekst

    Hier moet u de basisinformatie specificeren, zoals de titel van het formulier en eventuele bijbehorende tekst. In voorkomend geval kunt u ook andere belangrijke informatie definiëren, zoals of het veld meerdere selecties kan bevatten en of items kunnen worden geselecteerd.

  • Beginwaarden

    Hiermee kunt u een standaardwaarde opgeven.

  • Restricties

    Hier kunt u opgeven of een veld verplicht is en plaatsbeperkingen in dat veld gelden (moet bijvoorbeeld numeriek zijn, enzovoort).

  • Stijlen

    Hiermee geeft u de grootte en opmaak van de velden aan.

OPMERKING

De velden die u ziet, variëren aanzienlijk, afhankelijk van de afzonderlijke component.

Deze lusjes verstrekken u van de noodzakelijke parameters; deze kunnen afhankelijk zijn van het individuele componenttype, maar kunnen het volgende omvatten:

  • Titel en tekst

    • Elementnaam

      Naam van het formulierelement. Dit geeft aan waar in de gegevensopslagruimte de gegevens worden opgeslagen.

      Dit is een verplicht veld en mag alleen de volgende tekens bevatten:

      • alfanumerieke tekens
      • _ . / : -
    • Titel

      De titel die bij het veld wordt weergegeven. Als deze optie leeg blijft, wordt de standaardtitel weergegeven.

    • Beschrijving

      Staat u toe om extra informatie voor de gebruiker te verstrekken, indien nodig. Op het formulier wordt dit weergegeven onder het veld, in een kleiner lettertype dan de titel.

    • Tonen/verbergen

      Hiermee bepaalt u wanneer het veld zichtbaar is.

  • Beginwaarden

    • Standaardwaarde

      De waarde die in het veld wordt weergegeven wanneer het formulier wordt geopend. i voordat de gebruiker invoer heeft opgegeven.

  • Restricties

    • Vereist

      Dit is afhankelijk van het type formuliercomponent, maar bevat een of meer klikvakken om aan te geven dat dit veld, of bepaalde delen van dit veld, verplicht is/zijn.

    • Vereiste boodschap - Een bericht om gebruikers te laten weten dat dit veld is vereist; een vereist veld wordt ook gemarkeerd met een sterretje.

    • Restrictie - De beperkingen die beschikbaar zijn voor selectie zijn afhankelijk van het type formuliercomponent.

    • Het
      BerichtA van de beperking om gebruikers te informeren wat wordt vereist.

  • Stijlen

    • Grootte

      In rijen en kolommen.

    • Breedte

      In pixels.

    • CSS

Formulier (component)

De component Form definieert zowel het begin als het einde van een formulier met behulp van de elementen Begin van formulier en Einde van formulier. Deze worden altijd gekoppeld om ervoor te zorgen dat het formulier correct is gedefinieerd.

dc_form-1

Tussen het begin en het einde van een formulier kunt u formuliercomponenten toevoegen die de daadwerkelijke invoervelden voor gebruikers definiëren.

Begin van formulier

Deze component is nodig om het begin van een nieuw formulier op een pagina te definiëren. U kunt configureren:

  • formulier

    • Hartelijk dank,
      paginaDe pagina waarnaar wordt verwezen, is bedoeld om bezoekers te bedanken voor hun invoer. Als het formulier leeg blijft, wordt het na verzending opnieuw weergegeven.
    • Start
      WorkflowHiermee bepaalt u welke workflow wordt geactiveerd wanneer een formulier wordt verzonden.
  • Geavanceerd

    • Type handeling

      Een formulier heeft een handeling nodig. De actie definieert de bewerking die wordt geactiveerd voor uitvoering met de gegevens die door de gebruiker worden verzonden (vergelijkbaar met action= in HTML). Sommige hebben een overeenkomstige Configuratie van de Actie nodig.

      Een selectie van actietypen is inbegrepen in een standaard AEM installatie:

      • Account-verzoek

      • Inhoud maken

      • Lead maken

      • Account maken en bijwerken

      • E-mailservice: Abonnee maken en toevoegen aan lijst

      • E-mailservice: E-mail met automatische beantwoorder verzenden

      • E-mailservice: Gebruiker uit lijst opzeggen

      • Community bewerken

      • Bronnen bewerken

      • Werkstroomgestuurde bron(nen) bewerken

      • Mail

      • Details geplaatste bestelling

      • Profiel bijwerken

      • Wachtwoord opnieuw instellen

      • Wachtwoord instellen

      • Winkelinhoud

        Dit is het standaardhandelingstype.

      • Inhoud opslaan met uploads

      • Bestelling verzenden

      • Abonnement opzeggen

      • Volgorde bijwerken

    • Formulierid

      De formulier-id vormt een unieke identificatie van het formulier. Gebruik de formulier-id als u meerdere formulieren op één pagina hebt; zorg ervoor zij verschillende herkenningstekens hebben.

    • Pad laden

      Het pad naar knooppunteigenschappen dat wordt gebruikt om vooraf gedefinieerde waarden in de formuliervelden te laden.

      Dit is een optioneel veld dat het pad naar een knooppunt in de repository aangeeft. Als dit knooppunt eigenschappen heeft die overeenkomen met de veldnamen, worden de desbetreffende velden op het formulier vooraf geladen met de waarde van die eigenschappen. Als er geen overeenkomst bestaat, bevat het veld de standaardwaarde.

      Met Pad laden kunt u het formulier vooraf laden met waarden in de vereiste velden. Zie Formulierwaarden vooraf laden.

    • Clientvalidatie

      Geeft aan of clientvalidatie is vereist voor dit formulier (servervalidatie always vindt plaats.) Dit kan in combinatie met de Forms Captcha-component worden bereikt.

    • Brontype voor validatie

      Hiermee definieert u het type resource voor formuliervalidatie als u het volledige formulier wilt valideren (in plaats van afzonderlijke velden). Als u het volledige formulier valideert, voert u ook een van de volgende handelingen uit:

      • Een script voor clientvalidatie:

        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

      • Een script voor validatie aan de serverzijde:

        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

    • Configuratie van handelingen

      De opties beschikbaar in Configuratie van de Actie zijn afhankelijk van Geselecteerd Type van Actie:

      • Account-verzoek

        • Account
          pagina makenDe pagina die wordt gebruikt bij het maken van een nieuwe account.
      • Inhoud maken

        • Inhoudspad

          Het inhoudspad voor alle inhoud die door het formulier wordt neergezet. Voer een pad in dat met een schuine streep / eindigt. De slash betekent dat voor elke formulierpoort een nieuw knooppunt wordt gemaakt op de opgegeven locatie. bijvoorbeeld:

          /forms/feedback/

        • Type

          Selecteer het gewenste type.

        • formulier

          Geef het formulier op.

        • Renderen met

          Selecteer de gewenste optie in de lijst.

        • Type bron

          Indien ingesteld, wordt deze aan elke opmerking toegevoegd als sling:resourceType

        • Kiezer weergeven

      • Lead maken

        • De lead wordt toegevoegd aan deze lijst

          Geef de lijst met vereiste leads op.

      • Account maken en bijwerken

        • Eerste groep

          Groep waaraan nieuwe gebruiker moet worden toegewezen.

        • Home

          Pagina die moet worden weergegeven na geslaagde aanmelding.

        • Pad

          Het pad (relatief) naar waar de nieuwe account wordt gemaakt en opgeslagen.

        • Gegevens weergeven…

          Klik op deze knop om de informatie over formulierresultaten in de bulkeditor te openen. Van hier, kunt u de informatie naar een .tsv (lusje-gescheiden) dossier (voor gebruik, bijvoorbeeld, in een spreadsheet van Excel) uitvoeren.

      • Mail

        • Van

          Voer het e-mailadres in waaruit de e-mail moet komen.

        • Mailto

          Voer het e-mailadres in waarnaar het formulier wordt verzonden.

        • CC

          Voer het CC-e-mailadres of -adressen in.

        • BCC

          Voer het BCC-e-mailadres of -adressen in.

        • Subject

          Voer een onderwerp voor de e-mail in.

      • Wachtwoord opnieuw instellen

        • Wachtwoordpagina wijzigen

          De pagina die wordt gebruikt bij het wijzigen van het wachtwoord.

      • Winkelinhoud

        • Inhoudspad

          Het inhoudspad voor alle inhoud die door het formulier wordt neergezet. Voer een pad in dat met een schuine streep / eindigt. De slash betekent dat voor elke formulierpoort een nieuw knooppunt wordt gemaakt op de opgegeven locatie. bijvoorbeeld:

          /forms/feedback/

        • Gegevens weergeven…

          Klik op deze knop om de informatie over formulierresultaten in de bulkeditor te openen. Van hieruit kunt u de informatie exporteren naar een .tsv-bestand (gescheiden door tabs) (bijvoorbeeld in een Excel-spreadsheet).

      • Inhoud opslaan met uploads

        Dit heeft dezelfde opties als Inhoud opslaan.

      • Abonnement opzeggen

        • De lead wordt uit deze lijst verwijderd

          Geef de lijst met vereiste leads op.

Einde van formulier

Dit geeft het einde van het formulier aan. U kunt configureren:

  • Einde formulier

    • Verzendknop tonen

      Geeft aan of een knop Verzenden moet worden weergegeven.

    • Naam verzenden

      Een id als u meerdere verzendknoppen in een formulier gebruikt.

    • Titel verzenden

      De naam die op de knop wordt weergegeven, zoals Verzenden of Verzenden.

    • Knop Herstellen tonen

      Schakel het selectievakje in om de knop Herstellen zichtbaar te maken.

    • Titel opnieuw instellen

      De naam die wordt weergegeven op de knop Herstellen.

    • Beschrijving

      Informatie die onder de knop wordt weergegeven.

Accountnaam

Hierdoor kan de gebruiker een accountnaam invoeren:

dc_form_accountnaam

Adres

Zo kunt u een internationaal adresveld met de volgende indeling toevoegen:

dc_form_addressfield

De component wordt gevormd voor onmiddellijk gebruik, maar u kunt de configuratie indien nodig veranderen. Bijvoorbeeld, kunnen de beperkingen voor de individuele elementen van het adres worden toegevoegd. Als u velden leeg laat, worden de standaardinstellingen gebruikt.

Captcha

De component Captcha vereist dat de gebruiker een alfanumerieke tekenreeks typt zoals deze op het scherm wordt weergegeven. De tekenreeks verandert bij elke vernieuwing.

dc_form_captcha

U kunt diverse parameters voor deze component vormen, met inbegrip van een bericht dat moet worden getoond wanneer het koord captcha ongeldig is.

Selectievakjesgroep

Met een selectievakje kunt u een lijst maken van een of meer selectievakjes, waarvan er meerdere tegelijk kunnen worden geselecteerd.

dc_form_checkboxgroupuse

U kunt verschillende parameters opgeven, zoals een titel, beschrijving en elementnaam. Met de knoppen + en - kunt u items toevoegen of verwijderen en deze vervolgens met de pijl-omhoog en -omlaag plaatsen.

OPMERKING

Met Items laden pad kunt u de lijst met selectievakjes vooraf laden met waarden.

Zie Formuliervelden met meerdere waarden vooraf laden.

Creditcardgegevens

Zo kunt u de velden opgeven die nodig zijn voor het invoeren van creditcardgegevens. U kunt het vormen om de types van toegelaten kaart en de vereiste informatie (bijvoorbeeld, veiligheidscode) te specificeren.

chlimage_1-35

Een vervolgkeuzelijst kan worden geconfigureerd om een reeks waarden voor selectie aan uw gebruik te bieden:

dc_form_dropdownlistuse

U kunt een titel en items opgeven die in de lijst moeten worden weergegeven. Met de knoppen + en - kunt u de lijstitems toevoegen of verwijderen en deze vervolgens plaatsen met de knoppen Omhoog en Omlaag. U kunt opgeven of gebruikers meerdere items in de lijst mogen selecteren en items die automatisch moeten worden geselecteerd wanneer ze de lijst voor de eerste keer openen (oorspronkelijke waarden).

OPMERKING

Met Items laden pad kunt u de vervolgkeuzelijst vooraf laden met waarden.

Zie Formuliervelden met meerdere waarden vooraf laden.

Bestand uploaden

De component voor het uploaden van bestanden biedt de gebruiker een mechanisme voor het selecteren en uploaden van een bestand.

dc_form_fileupload

OPMERKING

U kunt een aangepaste uploadcomponent maken om bestanden te uploaden naar een verkoopserver. Zie Bestanden uploaden naar Adobe Experience Manager voor meer informatie.

Verborgen veld

Met deze component kunt u een verborgen veld maken. Deze kunnen voor verschillende doeleinden worden gebruikt; bijvoorbeeld wanneer u een handeling moet uitvoeren nadat u het formulier hebt verzonden of wanneer verborgen gegevens vereist zijn tijdens de naverwerking.

dc_form_hiddenfield

OPMERKING

U kunt het formulier ook aanpassen om specifieke formuliercomponenten weer te geven of te verbergen op basis van de waarde van andere velden in het formulier. Het is handig de zichtbaarheid van een formulierveld te wijzigen als het veld alleen onder bepaalde omstandigheden nodig is.

Zie Formuliercomponenten weergeven en verbergen.

Afbeeldingsknop

Met een afbeeldingsknop kunt u een knop maken met uw eigen afbeelding en tekst:

dc_form_imagebutton

De component voor het uploaden van afbeeldingen biedt de gebruiker een mechanisme voor het selecteren en uploaden van een afbeeldingsbestand.

dc_form_imageupload

In het koppelingsveld kan de gebruiker een URL opgeven:

dc_form_link

Wordt meestal gebruikt voor het agendagebeurtenis, waar dit wordt gebruikt voor het URL-/koppelingsveld van een gebeurtenis.

Wachtwoordveld

Dit wordt gebruikt om de gebruiker toe te staan om hun wachtwoord in te voeren:

dc_form_password

Wachtwoord opnieuw instellen

Deze component voorziet uw gebruiker van twee gebieden voor:

  • de invoer van een wachtwoord
  • herhaalde invoer van het wachtwoord om te controleren of de invoer juist is.

Met standaardinstellingen wordt de component weergegeven als:

dc_password_reset

Groep keuzerondjes

Een groep keuzerondjes bevat een lijst met een of meer keuzerondjes, waarvan er slechts één op een bepaald moment kan worden geselecteerd.

U kunt de elementnaam samen met een titel en een beschrijving opgeven Met de knoppen + en - kunt u items toevoegen of verwijderen, ze met de pijl-omhoog en -omlaag plaatsen en desgewenst een standaardwaarde opgeven:

dc_form_radiogroupuse

OPMERKING

Met Items laden pad kunt u de groep keuzerondjes vooraf laden met waarden.

Zie Formuliervelden met meerdere waarden vooraf laden.

Knop verzenden

Met deze component kunt u een verzendknop maken met de standaardtekst:

dc_form_submitButton

Of met uw eigen tekst:

dc_form_submitButtonUse

Codes, veld

In dit veld kunt u tags selecteren:

dc_form_tags_use

U kunt verschillende parameters opgeven, waaronder de naamruimten die kunnen worden gebruikt op het gespecialiseerde tabblad:

  • Tagveld

    • Toegestane naamruimten

      • Geometrixx Outdoors
      • Workflow
      • Forum
      • Stock Photography
      • Geometrixx Media
      • Standaardlabels
      • Marketing
      • Eigenschappen van element
    • Breedte in pixels

    • Grootte pop-up

Tekstveld

Het standaardtekstveld kan worden geconfigureerd op de gewenste grootte en met uw eigen lead in een bericht:

dc_form_text

Knop(en) voor verzenden werkstroom

Zo kunt u een knop Verzenden maken voor gebruik in een workflow.

chlimage_1-36

Op deze pagina