DocumentatieAEM as a Cloud ServiceHandboek

Aan de slag - Zelfstudie voor ontwikkelaars

Last update: Mon Sep 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Beheerder
  • Ontwikkelaar

In het huidige digitale tijdperk is het van essentieel belang gebruikersvriendelijke formulieren te maken voor elke organisatie. Met Edge Delivery Services voor AEM Forms (EDS) kunt u formulieren maken met vertrouwde gereedschappen, zoals Google Docs en Microsoft Office.

Deze formulieren verzenden gegevens rechtstreeks naar een Microsoft Excel- of Google Sheets-bestand, zodat u levendige ecosystemen en robuuste API's van Google Sheets, Microsoft Excel en Microsoft SharePoint kunt gebruiken om ingediende gegevens eenvoudig te verwerken of een bestaande zakelijke workflow te starten.

AEM Forms biedt een blok, Adaptive Forms Block genaamd, waarmee u eenvoudig formulieren kunt maken voor het vastleggen en opslaan van vastgelegde gegevens. U kunt tot een nieuw AEM project leiden dat met het AanpassingsBlok van Formswordt gevormd of het AanpassingsBlok van Forms aan een bestaand AEMtoevoegt.

Deze zelfstudie van AEM Forms begeleidt u bij het maken, voorvertonen en publiceren van uw eigen aangepaste formulier met een nieuw Adobe Experience Manager (AEM) Forms-project.

Vereisten

  • U hebt een rekening GitHub, en begrijpt de grondbeginselen van het Git.
  • Je hebt een Google- of Microsoft SharePoint-account.
  • U begrijpt de basisbeginselen van HTML, CSS en JavaScript.
  • Node/npm is geïnstalleerd voor lokale ontwikkeling.

Koppen omhoog! In deze zelfstudie worden macOS, Chrome en Visual Studio Code gebruikt. Terwijl de stappen voor andere montages kunnen worden aangepast, zouden de screenshots en specifieke elementen UI op uw gekozen werkend systeem, browser, en coderedacteur kunnen verschillen.

Een nieuw AEM-project maken dat vooraf is geconfigureerd met Adaptive Forms Block

Met de AEM Forms Boilerplate-sjabloon kunt u snel aan de slag met een AEM project dat vooraf is geconfigureerd met het Adaptive Forms Block. Het is de snelste en eenvoudigste manier om AEM best practices te volgen en meteen uw formulieren samen te stellen.

Aan de slag met de AEM Forms boilerplate-opslagsjabloon

  1. Creeer een bewaarplaats GitHub voor uw AEM Project. Opslagplaats maken:

    1. Ga naar https://github.com/adobe-rnd/aem-boilerplate-forms.

      AEM Forms Boilerplate

    2. Klik het Gebruik deze malplaatje optie en selecteer creeer een nieuwe bewaarplaats optie. Het scherm van de nieuwe repository wordt geopend.

      creeer nieuwe bewaarplaats gebruikend AEM Forms Boilerplate

    3. Voor creeer een nieuw bewaarplaatsscherm, selecteer de eigenaar, en specificeer Naam van de Bewaarplaats. De Adobe adviseert dat de bewaarplaats aan Openbaar wordt geplaatst. Zo, selecteer de openbare optie, en klik creeer Bewaarplaats.

    plaats de bewaarplaats aan openbaar

  2. Installeer de AEM Code Sync GitHub App in uw dataopslag. Installeren:

    1. Ga naar https://github.com/apps/aem-code-sync/installations/new.
    2. Voor het Install AEM scherm van de Synchronisatie van de Code, selecteer slechts de optie van Bewaarplaatsen en selecteer uw pas gecreëerde bewaarplaats. Klik op Opslaan.

    plaats de bewaarplaats aan openbaar

    note note
    NOTE
    Als u de Onderneming van GitHub met IP het filtreren gebruikt, kunt u volgende IP aan de lijst van gewenste personen toevoegen: 3.227.118.73

    Gefeliciteerd! Er wordt een nieuwe website uitgevoerd op https://<branch>--<repo>--<owner>.hlx.page/ .

    • <branch> verwijst naar de vertakking van uw bewaarplaats GitHub.
    • <repository> geeft uw GitHub-opslagplaats aan.
    • <owner> verwijst naar gebruikersbenaming van uw rekening GitHub die gastheren uw bewaarplaats GitHub.

    Bijvoorbeeld, als de taknaam main is, is de bewaarplaats wefinance, en de eigenaar is wkndforms, zou de website in https://main—wefinance—wkndforms.hlx.page/ in gebruik zijn.

Uw eigen inhoudsbron koppelen

Uw onlangs gecreeerde bewaarplaats GitHub richt aan voorbeeldinhoud die in een omslag van de Aandrijving van Googlewordt opgeslagen. Deze inhoud met het kenmerk Alleen-lezen biedt een fantastisch beginpunt voor uw formulieren. U kunt het bestand gratis kopiëren naar uw eigen Google Drive en het aanpassen aan uw wensen.

Inhoud van de Steekproef op de Aandrijving van Google

Om de steekproefinhoud aan uw eigen inhoudsomslag te kopiëren en uw bewaarplaats GitHub aan uw eigen inhoudsomslag te richten:

  1. Maak een nieuwe map die specifiek voor uw AEM inhoud is bestemd in Google Drive of Microsoft SharePoint. In dit document wordt een map gebruikt die op Microsoft SharePoint is gemaakt.

  2. Deel de map met de Adobe Experience Manager-gebruiker (helix@adobe.com).

    het Gebruik beheert de optie van de Toegang om omslag met AEM Gebruiker te delen - SharePoint

    het Gebruik beheert de optie van de Toegang om omslag met AEM Gebruiker te delen - de Aandrijving van Google

    Zorg ervoor dat u bewerkingsrechten voor de map hebt opgegeven aan de Adobe Experience Manager-gebruiker.

    de omslag van het Aandeel met AEM Gebruiker, verstrekt het uitgeven rechten-SharePoint

    de omslag van het Aandeel met AEM Gebruiker, verstrekt het uitgeven rechten - de Aandrijving van Google

  3. Kopieer de voorbeeldinhoud die in de omslag van de Aandrijving van Googleaan uw omslag wordt opgeslagen. Kopiëren:

    1. Download de bestanden samen of download afzonderlijke bestanden.

      Inhoud van de Steekproef van de Download

      De bestanden nav en footer definiëren de basislay-out van uw pagina's en veranderen zelden in een project. Ze hebben ook een specifieke structuur die afwijkt van de meeste andere inhoudsbestanden. Door deze bestanden te bekijken, krijgt u een idee hoe inhoud in AEM Projecten wordt georganiseerd.

    2. Upload deze bestanden naar de map Microsoft SharePoint of Google Drive.

      Inhoud van de Steekproef op de Aandrijving van Google

      Kopieer het enquiry -blad van de voorbeeldinhoud naar de map op Google Drive of Microsoft SharePoint. Deze bevat een structuur voor een voorbeeldformulier.

  4. Nu u uw opstelling van de inhoudsomslag hebt, is het tijd om het met uw project op GitHub te verbinden die u eerder gebruikend AEM Forms Boilerplate creeerde. Verbinding maken:

    1. Ga naar de bewaarplaats GitHub die u eerder gebruikend AEM Forms Boilerplate creeerde.

    2. Open de fstab.yaml voor bewerking.

    3. Vervang de bestaande verwijzing door het pad naar de map die u met de AEM gebruiker hebt gedeeld (helix@adobe.com).

      Inhoud van de Steekproef op de Aandrijving van Google

      Als u de Microsoft SharePoint gebruikt, gebruikt het mappad de volgende notatie:

      code language-html 
      https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

      Bijvoorbeeld:

      code language-html 
      https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

      Voor meer informatie bij het beheren van dossiers met Microsoft SharePoint, zie hoe te Adobe SharePointgebruiken.

    4. Leg het bijgewerkte fsatb.yaml -bestand vast nadat u de verwijzing hebt bijgewerkt en alles er goed uitziet. Als u om het even welke bouwstijlkwesties ontmoet, zie het oplossen van problemen GitHub bouwt kwesties.

      Leg bijgewerkt fsatab.yaml- dossier vast

      Hiermee verbindt u de inhoudsmap met uw website. Na het bijwerken van de verwijzing kunnen fouten met "404 Niet gevonden" aanvankelijk optreden. Dit komt omdat er nog geen voorvertoning van uw inhoud is weergegeven. In de volgende sectie wordt uitgelegd hoe u begint met het ontwerpen en voorvertonen van uw inhoud.

Inhoud voorvertonen en publiceren

Nadat u de laatste stap hebt uitgevoerd, is de nieuwe inhoudsbron niet leeg, maar is deze pas zichtbaar op uw website als deze wordt gepromoot naar de voorvertoning of de live stadia. Op dit moment kan dit 404 fouten veroorzaken.

Niet-gepubliceerde inhoud voorvertonen:

  1. Installeer de uitbreiding van Chrome genoemd AEM Sidekick.

    installeer AEM Sidekick

    Nadat u de extensie hebt geïnstalleerd op Chrome, vergeet dan niet de extensie vast te zetten, zodat u deze gemakkelijker kunt vinden.

    Vastzetten AEM Sidekick

  2. Als u de extensie Sidekick Chrome wilt instellen, gaat u naar de map Google Drive of Microsoft SharePoint die u eerder hebt gedeeld, klikt u met de rechtermuisknop op het extensiepictogram op de browserwerkbalk en selecteert u Add this project .

    AEM Sidekick - voeg een project toe

    Wanneer de extensie is geïnstalleerd en uw project is toegevoegd, kunt u een voorvertoning van uw inhoud weergeven en deze publiceren vanaf uw Google Drive.

  3. Selecteer alle documenten in de map Microsoft SharePoint of Google Drive. U kunt meerdere documenten kiezen door de Ctrl-toets (Windows/Linux) of de Cmd-toets (Mac) ingedrukt te houden terwijl u klikt.

    selecteer alle dossiers

  4. Klik op het AEM Sidekick-pictogram op de Chrome-uitbreidingsbalk. Er verschijnt een werkbalk op het scherm. U kunt uw inhoud voorvertonen of publiceren.

    Als u de bestanden index , nav , footer en enquiry hebt gekopieerd, zijn al deze documenten afzonderlijke documenten met hun eigen voorvertoning- en publicatiecycli. Zorg er dus voor dat u een voorvertoning weergeeft (en publiceert) van al deze documenten.

    Nadat u de bestanden hebt voorvertoond, worden de documenten weergegeven op de tabbladen van de nieuwe browser. Ga naar de volgende URL om een voorbeeld van het voorbeeldformulier te bekijken:

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.live
    • <branch> verwijst naar de vertakking van uw bewaarplaats GitHub.
    • <repository> geeft uw GitHub-opslagplaats aan.
    • <owner> verwijst naar gebruikersbenaming van uw rekening GitHub die gastheren uw bewaarplaats GitHub.

    https://<branch>--<repo>--<owner>.hlx.page/enquiry URL.

    Als de gegevensopslagruimte van uw project bijvoorbeeld 'wefinance' heet, bevindt deze zich onder de eigenaar van de account 'wkndforms' en gebruikt u de 'main'-vertakking, is de URL:

    https://main-wefinantie-wkndforms.hlx.page.

Een formulier maken

De voorbeeldinhoud bestaat uit een blad "vraag" dat fungeert als sjabloon voor het formulier "vraag". Elke rij van het blad vertegenwoordigt a vormgebied, en de kolomkopballen bepalen de gebiedseigenschappen. Met dit voorbeeldformulier begint u met het samenstellen van uw formulier.

Vorm van het Onderzoek

Laten we beginnen met het bijwerken van een veldlabel. Open het 'vraag'-blad om het te bewerken, wijzig het label van de verzendknop in Let's Chat en gebruik AEM Sidekick om het bestand voor te vertonen en te publiceren.

Vorm van het Onderzoek

Wanneer u een voorvertoning van het bestand weergeeft of het bestand publiceert, wordt een JSON-versie van het bestand op een nieuw tabblad weergegeven. Kopieer de voorvertoning (.hlx.page) of de publicatie (.hlx.live) URL van het bestand.

JSON van de vormspreadsheet

Open het enquiry -bestand en vervang de URL in het formulierblok door de URL van het bestand dat u in de vorige stap hebt gekopieerd. Controleer of de URL een hyperlink is.

dossier van het Onderzoek met .json URL van URL van spreadsheet

Gebruik AEM Sidekick om een voorvertoning van het enquêtedocument weer te geven en dit te publiceren.

dossier van het Onderzoek met .json URL van URL van spreadsheet

Ga naar de volgende URL om een voorbeeld van het bijgewerkte onderzoeksformulier te bekijken:

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

Het label van de verzendknop wordt bijgewerkt naar Let's Chat .

Vorm van het Onderzoek

Voor gedetailleerde informatie over het creëren van en het publiceren van een nieuwe vorm, hoofd over aan creeert een vormgids.

Beginnen met het ontwikkelen van stijlen en functionaliteit

Zo kunt u snel aan de slag met een lokale AEM-ontwikkelomgeving:

  1. Installeer AEM CLI: AEM CLI vereenvoudigt ontwikkelingstaken. Laten we het wereldwijd installeren met npm:

    code language-bash 
        npm install -g @adobe/aem-cli

  2. Kloon uw project GitHub: Kloon uw projectbewaarplaats van GitHub gebruikend het volgende bevel, die vervangt <owner> met de eigenaar van de opslagplaats en <repo> met de naam van de opslagplaats:

    code language-none 
    git clone https://github.com/<owner>/<repo>

  3. Start uw lokale omgeving: navigeer naar uw projectmap en vul uw lokale AEM met één opdracht in:

    code language-none 
    cd <repo>
aem up

De map Adaptive Forms Block blocks/form is uw afspeelplaats voor opmaak en code voor uw formulieren! Bewerk .css - of .js -bestanden in deze map en u ziet de wijzigingen direct in uw browser.

Klaar om uw creatie te presenteren? Gebruik Git om uw wijzigingen vast te leggen en door te drukken. Hiermee werkt u de voorvertoning- en productieomgevingen bij die toegankelijk zijn via deze URL's (vervang plaatsaanduidingen door uw projectdetails):

Voorvertoning: https://<branch>--<repo>--<owner>.hlx.page/
Productie: https://<branch>--<repo>--<owner>.hlx.live/

Gefeliciteerd! U hebt uw lokale ontwikkelomgeving ingesteld en uw wijzigingen geïmplementeerd.

Aangepast Forms-blok toevoegen aan uw bestaande AEM-project

https://video.tv.adobe.com/v/3427789

Als u een bestaand AEM project hebt, kunt u het Adaptive Forms Block integreren in uw huidige project om aan de slag te gaan met het maken van formulieren.

NOTE
Deze stap is op projecten van toepassing die met worden gebouwd AEM Boilerplate. Als u uw AEM project gebruikend AEM Forms Boilerplatecreeerde, kunt u deze stap overslaan.

Om te integreren:

  1. Kloon de Adaptieve bewaarplaats van het Blok van Forms: https://github.com/adobe-rnd/aem-boilerplate-formsaan uw computer.

  2. Zoek in de gedownloade map naar de map blocks/form . Deze map kopiëren. Navigeer nu naar de lokale blocks map van uw AEM project en plak de gekopieerde formuliermap hier.

  3. Leg deze veranderingen in uw AEM project op GitHub vast en duw.

Dat is het! Het Adaptive Forms Block maakt nu deel uit van uw AEM project. U kunt beginnen met het maken en toevoegen van formulieren aan uw AEM.

Het oplossen van problemen GitHub bouwt kwesties

Verzeker een vlotte GitHub bouwt proces door potentiële kwesties te richten:

  • los de Fout van de Weg van de Module op:
    Als u de fout "Onbekwaam ontmoet om weg aan module ""…/…/scripts/lib-franklin.js"op te lossen, navigeer aan het [ EDS Project ] /blocks/forms/form.js- dossier. Werk de importinstructie bij door het bestand lib-franklin.js te vervangen door het bestand aem.js.

  • handvat het Leiden Fouten:
    Als u tegenkomt met regelfouten, kunt u deze omzeilen. Open het ] /package.json dossier van het Project van 0} EDS {en wijzig het "plusteken"manuscript van "lint": "npm run lint:js && npm run lint:css" aan "lint": "echo 'skipping linting for now'". [ Sparen het dossier en begaat de veranderingen in uw project GitHub.

Zie ook

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab