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.

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 **

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.

Carousel

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.

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:

Inhoudsfragment

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:

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:

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:

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:

Layout Container

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).

Aanmelden

Hier vindt u de velden Gebruikersnaam en Wachtwoord.

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.

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:

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:

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

Sitemap

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

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:

Tabel

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.).

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

Label

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

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

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.

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:

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.

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:

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.

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.

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:

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).

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.

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.

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.

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:

Adres

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

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.

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.

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.

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.

Vervolgkeuzelijst

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

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).

Bestand uploaden

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

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.

Afbeeldingsknop

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

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

Koppelingsveld

In het koppelingsveld kan de gebruiker een URL opgeven:

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:

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:

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:

Knop verzenden

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

Of met uw eigen tekst:

Codes, veld

In dit veld kunt u tags selecteren:

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:

Knop(en) voor verzenden werkstroom

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