Dokumentation AEM as a Cloud Service Användarhandbok

Universal Editor Overview for AEM Developers developer-overview

Last update: Thu Nov 07 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:
Utveckling

Skapat för:

Administratör
Utvecklare

Om du är en AEM utvecklare som är intresserad av hur den universella redigeraren fungerar och hur du använder den i ditt projekt ger det här dokumentet dig en introduktion genom att leda dig genom att instrumentera WKND-projektet så att det fungerar tillsammans med den universella redigeraren.

Syfte purpose

Det här dokumentet är en introduktion för utvecklare av både hur den universella redigeraren fungerar och hur du kan mäta hur programmet fungerar med det.

Den gör detta genom att ta ett standardexempel som de flesta AEM utvecklare känner till, Core Components och WKND, och tolkar några exempelkomponenter som kan redigeras med Universal Editor.

TIP

Det här dokumentet innehåller extra steg som illustrerar hur den universella redigeraren fungerar och är avsett att fördjupa utvecklarens förståelse för redigeraren. Det är därför inte den mest direkta vägen till att instrumentera ett program, utan det mest illustrativa i den universella redigeraren och hur det fungerar.

Om du vill komma igång så snabbt som möjligt kan du läsa dokumentet Komma igång med den universella redigeraren i AEM.

Förutsättningar prerequisites

Du behöver följande för att kunna följa med i den här översikten.

En lokal utvecklingsinstans av AEM as a Cloud Service
- Din lokala utvecklingsinstans måste vara konfigurerad med HTTPS för utvecklingssyfte på localhost.
- WKND-demowebbplatsen måste vara installerad.
Åtkomst till den universella redigeraren
En lokal Universal Editor-tjänst som körs i utvecklingssyfte
- Se till att du dirigerar webbläsaren till acceptera det självsignerade certifikatet för lokala tjänster.

Förutom att man är allmänt bekant med webbutveckling utgår man i det här dokumentet från att man är van vid AEM. Om du inte är van vid AEM kan du överväga att granska WKND-självstudiekursen innan du fortsätter.

Om du inte redan har det måste du ha den lokala AEM utvecklingsinstansen installerad med WKND och HTTPS aktiverad som enligt villkoren. Den här översikten förutsätter att din instans körs vid https://localhost:8443.

Öppna mallsidan för WKND English i AEM Editor.

code language-text
`https://localhost:8443/editor.html/content/wknd/language-masters/en.html`

Välj Visa som publicerad på menyn Sidinformation i redigeraren. Då öppnas samma sida på en ny flik med AEM Editor inaktiverat.

code language-text
`https://localhost:8443/content/wknd/language-masters/en.html?wcmmode=disabled`

Kopiera länken.

Logga nu in på Universal Editor.

code language-text
`https://experience.adobe.com/#/aem/editor`

Klistra in länken som du kopierade tidigare av WKND-innehållet i fältet Webbplats-URL i den universella redigeraren och klicka på Öppna.

Universal Editor försöker läsa in innehållet sameorigin

Universal Editor läser in innehåll som ska redigeras i en ram. Om du AEM standardinställningarna för X-Frame-alternativ förhindrar du detta, vilket tydligt kan ses som ett fel i webbläsaren och visas i konsolutdata när du försöker läsa in din lokala kopia av WKND.

Webbläsarfel på grund av SAMEORIGIN-alternativet

Alternativet X-Frame sameorigin förhindrar återgivning AEM sidor i en ram. Du måste ta bort det här sidhuvudet för att sidorna ska kunna läsas in i Universal Editor.

Öppna Configuration Manager.

code language-text
`https://localhost:8443/system/console/configMgr`

Redigera OSGi-konfigurationen org.apache.sling.engine.impl.SlingMainServlet
Ta bort egenskapen X-Frame-Options=SAMEORIGIN för egenskapen Ytterligare svarshuvuden.
Spara ändringarna.

Om du nu läser in den universella redigeraren igen ser du att AEM sida läses in.

TIP

Mer information om OSGi-konfigurationen finns i dokumentet Komma igång med den universella redigeraren i AEM.
Läs dokumentet Konfigurera OSGi för Adobe Experience Manager as a Cloud Service för mer information om OSGi i AEM.

Hantera samma webbplatskookies samesite-cookies

När Universal Editor läser in sidan, läses den in till AEM inloggningssida för att säkerställa att du är autentiserad att göra ändringar.

Du kan dock inte logga in. När du visar webbläsarkonsolen ser du att webbläsaren har blockerat indata i bildrutan

Indata blockerad

Inloggningstokens cookie skickas till AEM som en tredjepartsdomän. Därför måste cookies på samma plats tillåtas i AEM.

Öppna Configuration Manager.

code language-text
`https://localhost:8443/system/console/configMgr`

Redigera OSGi-konfigurationen com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
Ändra egenskapen SameSite-attributet för cookien för inloggningstoken till None.
Spara ändringarna.

Om du nu läser in den universella redigeraren igen kan du logga in på AEM och målsidan läses in.

TIP

Mer information om OSGi-konfigurationen finns i dokumentet Komma igång med den universella redigeraren i AEM.
Läs dokumentet Konfigurera OSGi för Adobe Experience Manager as a Cloud Service för mer information om OSGi i AEM.

Universell redigerare Ansluter till fjärrramen ue-connect-remote-frame

När sidan har lästs in i Universal Editor och du har loggat in på AEM försöker Universal Editor ansluta till fjärrbildrutan. Detta görs via ett JavaScript-bibliotek som måste läsas in i fjärrbildrutan. Om JavaScript-biblioteket inte finns skapas ett timeout-fel i konsolen.

Timeout-fel

Du måste lägga till det nödvändiga JavaScript-biblioteket till sidkomponenten i WKND-appen.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Redigera filen customheaderlibs.html under /apps/wknd/components/page.

Lägg till JavaScript-biblioteket i slutet av filen.

code language-html
`<script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"></script>`

Klicka på Spara alla och läs sedan in den universella redigeraren igen.

Sidan läses nu in med rätt JavaScript-bibliotek så att den universella redigeraren kan ansluta till sidan och timeoutfelet visas inte längre i konsolen.

TIP

Biblioteket kan läsas in antingen i sidhuvudet eller i sidfoten.
universal-editor-embedded.js-biblioteket är tillgängligt på NPM och du kan vara värd för det själv om det behövs eller placera det direkt i programmet.

Definiera en anslutning för att behålla ändringar connection

WKND-sidan läses nu in korrekt i Universal Editor och JavaScript-biblioteket läses in för att ansluta redigeraren till din app.

Du har dock troligen lagt märke till att du inte kan interagera med sidan i Universalläsaren. Universal Editor kan inte redigera sidan. För att den universella redigeraren ska kunna redigera innehållet måste du definiera en anslutning så att den vet var innehållet ska skrivas. För lokal utveckling måste du skriva tillbaka till din lokala AEM på https://localhost:8443.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Redigera filen customheaderlibs.html under /apps/wknd/components/page.

Lägg till de metadata som krävs för anslutningen till den lokala AEM i slutet av filen.

code language-html
`<meta name="urn:adobe:aue:system:aem" content="aem:https://localhost:8443">`

Den senaste versionen av biblioteket rekommenderas alltid. Om du behöver en tidigare version läser du dokumentet Komma igång med den universella redigeraren i AEM.

Lägg till de metadata som behövs för anslutningen till den lokala Universal Editor-tjänsten i slutet av filen.

code language-html
`<meta name="urn:adobe:aue:config:service" content="https://localhost:8000">`

Klicka på Spara alla och läs sedan in den universella redigeraren igen.

Nu kan den universella redigeraren inte bara läsa in ditt innehåll från den lokala AEM utvecklingsinstansen, utan även veta var de ändringar du gör med den lokala universella redigeringstjänsten ska sparas. Det här är det första steget när du ska göra ditt program redigerbart med den universella redigeraren.

TIP

Mer information om anslutningsmetadata finns i dokumentet Getting Started with the Universal Editor i AEM.
Mer information om strukturen för den universella redigeraren finns i dokumentet Universal Editor Architecture.
Se dokumentet Local AEM Development with the Universal Editor för mer information om hur du ansluter till en självvärdbaserad version av Universal Editor.

Instrumenting Components instrumenting-components

Men du märker antagligen att du fortfarande inte kan göra så mycket med den universella redigeraren. Om du försöker klicka på lagret högst upp på WKND-sidan i Universalläsaren kan du inte markera det (eller något annat på sidan).

Komponenterna måste också vara instrumenterade för att kunna redigeras med den universella redigeraren. Om du vill göra det måste du redigera teaserkomponenten. Därför måste du täcka över kärnkomponenterna eftersom kärnkomponenterna är under /libs, som inte kan ändras.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Markera noden /libs/core/wcm/components och klicka på Överläggsnod i verktygsfältet.
Med /apps/ markerat som plats för övertäckning klickar du på OK.
Markera noden teaser under /libs/core/wcm/components och klicka på Kopiera i verktygsfältet.
Markera den överlappande noden på /apps/core/wcm/components och klicka på Klistra in i verktygsfältet.
Dubbelklicka på filen /apps/core/wcm/components/teaser/v2/teaser/teaser.html för att redigera den.

Lägg till instrumenteringsinformation för komponenten i slutet av den första div på ungefär rad 26.

code language-text
`data-aue-resource="urn:aem:${resource.path}" data-aue-type="component" data-aue-label="Teaser"`

Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.
Klicka på teaserkomponenten överst på sidan i Universalläsaren och se att du nu kan markera den.
Om du klickar på ikonen Innehållsträd på egenskapspanelen i den universella redigeraren ser du att redigeraren känner igen alla scener på sidan nu när du har instrumenterat den. Det lager du valde är det som är markerat.

TIP

Mer information om att täcka över noder finns i dokumentet Använda sammanslagningen av delningsresurser i Adobe Experience Manager as a Cloud Service.

Teaser-underkomponenterna för instrument subcomponents

Nu kan du markera suddgummit, men fortfarande inte redigera det. Detta beror på att teaser är en sammansättning av olika komponenter som bild- och titelkomponenten. Du måste mäta dessa underkomponenter för att kunna redigera dem.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Markera noden /apps/core/wcm/components/teaser/v2/teaser/ och dubbelklicka på filen title.html.

Infoga följande egenskaper i slutet av taggen h2 (nära rad 17).

code language-text
`data-aue-prop="jcr:title" data-aue-type="text" data-aue-label="Title"`

Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.
Klicka på titeln för samma teaser-komponent överst på sidan och se att du nu kan markera den. Innehållsträdet visar också titeln som en del av den valda teaserkomponenten.

Nu kan du redigera teaserkomponentens titel!

Vad betyder allt det? what-does-it-mean

Nu när du kan redigera teaser titel ska vi titta på vad du har gjort och hur.

Du har identifierat teaser-komponenten för Universal Editor genom att instrumentera den.

data-aue-resource identifierar resursen i AEM som redigeras.
data-aue-type definierar att objekten ska behandlas som en sidkomponent (till skillnad från en behållare).
data-aue-label visar en användarvänlig etikett i användargränssnittet för det valda lagret.

Du har även instrumenterat titelkomponenten i teaserkomponenten.

data-aue-prop är JCR-attributet som är skrivet.
data-aue-type är så attributet ska redigeras. I det här fallet med textredigeraren eftersom det är en titel (till skillnad från RTF-redigeraren).

Definiera autentiseringsrubriker auth-header

Nu kan du redigera titeln på teaser in-line och ändringarna sparas i webbläsaren.

Redigerad titel på teaser

Om du läser in webbläsaren igen läses den tidigare titeln in igen. Detta beror på att även om den universella redigeraren kan ansluta till din AEM kan redigeraren ännu inte autentisera till din AEM för att skriva tillbaka ändringar i JCR.

Om du visar nätverksfliken för webbläsarutvecklarverktygen och söker efter update, kan du se att det uppstår ett 401-fel när du försöker redigera titeln.

Fel vid försök att redigera titeln

När du använder Universal Editor för att redigera AEM produktionsinnehåll används samma IMS-token som du använde för att logga in på redigeraren för att autentisera AEM för att underlätta återskrivningen till JCR.

När du utvecklar lokalt kan du inte använda AEM identitetsleverantör eftersom IMS-tokens bara skickas till domäner som ägs av Adobe. Du måste manuellt ange ett sätt att autentisera genom att explicit ange en autentiseringshuvud.

Klicka på ikonen Autentiseringshuvuden i verktygsfältet i det universella redigeringsgränssnittet.
Kopiera den autentiseringsrubrik som krävs för att autentisera den lokala AEM och klicka på Spara.
Läs in den universella redigeraren igen och redigera nu teaser titel.

Det finns inte längre några fel rapporterade i webbläsarkonsolen och ändringarna sparas sedan i den lokala AEM.

Om du undersöker trafiken i webbläsarens utvecklingsverktyg och letar efter händelserna update kan du se uppdateringens detaljer.

Teaser title har redigerats

{
  "connections": [
    {
      "name": "aem",
      "protocol": "aem",
      "uri": "https://localhost:8443"
    }
  ],
  "target": {
    "resource": "urn:aem:/content/wknd/language-masters/en/jcr:content/root/container/carousel/item_1571954853062",
    "type": "text",
    "prop": "jcr:title"
  },
  "value": "Tiny Toon Adventures"
}

connections är anslutningen till din lokala AEM
target är den exakta noden och de egenskaper som uppdateras i JCR
value är den uppdatering du har gjort.

Du kan se ändringen som finns kvar i JCR.

Uppdatera i JCR

TIP

Det finns många verktyg tillgängliga online för att generera nödvändiga autentiseringshuvuden för dina test- och utvecklingssyften.

Det grundläggande exemplet Basic YWRtaW46YWRtaW4= för autentiseringshuvudet är för kombinationen av användare/lösenord för admin:admin, vilket är vanligt vid lokal AEM.

Instrumentera appen för egenskapspanelen properties-rail

Du har nu ett program som är instrumenterat för att kunna redigeras med Universal Editor!

Redigeringen är för närvarande begränsad till redigering av teaserns titel. Det finns dock tillfällen när redigering på plats inte räcker. Text som t.ex. teaserns titel kan redigeras där den finns med tangentbordsinmatning. Men mer komplicerade objekt måste kunna visas och tillåta redigering av strukturerade data som skiljer sig från hur de återges i webbläsaren. Det här är vad egenskapspanelen är till för.

Om du vill uppdatera appen så att den använder egenskapspanelen för redigering går du tillbaka till sidhuvudfilen för sidkomponenten i appen. Här har du redan upprättat anslutningarna till den lokala AEM-utvecklingsinstansen och den lokala universella redigeringstjänsten. Här måste du definiera de komponenter som är redigerbara i programmet och deras datamodeller.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Redigera filen customheaderlibs.html under /apps/wknd/components/page.

Till slutet av filen lägger du till det skript som behövs för att definiera komponenterna.

code language-html

code language-html
`<script type="application/vnd.adobe.aue.component+json"> { "groups": [ { "title": "General Components", "id": "general", "components": [ { "title": "Teaser", "id": "teaser", "plugins": { "aem": { "page": { "resourceType": "wknd/components/teaser" } } } }, { "title": "Title", "id": "title", "plugins": { "aem": { "page": { "resourceType": "wknd/components/title" } } } } ] } ] } </script>`

<script type="application/vnd.adobe.aue.component+json">
{
  "groups": [
    {
      "title": "General Components",
      "id": "general",
      "components": [
        {
          "title": "Teaser",
          "id": "teaser",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/teaser"
              }
            }
          }
        },
        {
          "title": "Title",
          "id": "title",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/title"
              }
            }
          }
        }
      ]
    }
  ]
}
</script>

Under det lägger du till det skript som behövs för att definiera modellen i slutet av filen.

code language-html

code language-html
<script type="application/vnd.adobe.aue.model+json"> [ { "id": "teaser", "fields": [ { "component": "text-input", "name": "jcr:title", "label": "Title", "valueType": "string" }, { "component": "text-area", "name": "jcr:description", "label": "Description", "valueType": "string" } ] }, { "id": "title", "fields": [ { "component": "select", "name": "type", "value": "h1", "label": "Type", "valueType": "string", "options": [ { "name": "h1", "value": "h1" }, { "name": "h2", "value": "h2" }, { "name": "h3", "value": "h3" }, { "name": "h4", "value": "h4" }, { "name": "h5", "value": "h5" }, { "name": "h6", "value": "h6" } ] } ] } ] </script>

<script type="application/vnd.adobe.aue.model+json">
[
  {
    "id": "teaser",
    "fields": [
      {
        "component": "text-input",
        "name": "jcr:title",
        "label": "Title",
        "valueType": "string"
      },
      {
        "component": "text-area",
        "name": "jcr:description",
        "label": "Description",
        "valueType": "string"
      }
    ]
  },
  {
    "id": "title",
    "fields": [
      {
        "component": "select",
        "name": "type",
        "value": "h1",
        "label": "Type",
        "valueType": "string",
        "options": [
          { "name": "h1", "value": "h1" },
          { "name": "h2", "value": "h2" },
          { "name": "h3", "value": "h3" },
          { "name": "h4", "value": "h4" },
          { "name": "h5", "value": "h5" },
          { "name": "h6", "value": "h6" }
        ]
      }
    ]
  }
]
</script>

Klicka på Spara alla i verktygsfältet.

Vad betyder allt det? what-does-it-mean-2

Om du vill kunna redigera med egenskapspanelen måste komponenterna tilldelas groups, så varje definition börjar som en lista med grupper som innehåller komponenterna.

title är namnet på gruppen.
id är gruppens unika identifierare, i det här fallet allmänna komponenter som utgör sidinnehållet i motsats till avancerade komponenter för sidlayout, till exempel.

Varje grupp har sedan en matris på components.

title är namnet på komponenten.
id är den unika identifieraren för komponenten, i det här fallet en teaser.

Varje komponent har sedan en plugin-definition som definierar hur komponenten mappas till AEM.

aem är det plugin-program som hanterar redigeringen. Detta kan ses som den tjänst som bearbetar komponenten.
page definierar vilken typ av komponent det är, i det här fallet en standardsidkomponent.
resourceType är mappningen till den faktiska AEM.

Varje komponent måste sedan mappas till en model för att definiera de enskilda redigerbara fälten.

id är modellens unika identifierare, som måste matcha komponentens ID.
fields är en array med de enskilda fälten.
component är den typ av indata som t.ex. text eller textområde.
name är fältnamnet i den JCR som fältet mappas till.
label är beskrivningen av fältet som visas i redigerarens användargränssnitt.
valueType är datatypen.

Instrumentera komponenten för egenskapspanelen properties-rail-component

Du måste också definiera på komponentnivå vilken modell komponenten ska använda.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Dubbelklicka på filen /apps/core/wcm/components/teaser/v2/teaser/teaser.html för att redigera den.

I slutet av den första div på ungefär rad 32, efter de egenskaper du lade till tidigare, lägger du till instrumenteringsinformation för modellen som den teaserkomponenten ska använda.

code language-text
`data-aue-model="teaser"`

Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.

Nu kan du testa egenskapspanelen som är instrumenterad för komponenten.

Klicka en gång till på teaser i Universal Editor för att redigera den.
Klicka på egenskapspanelen för att visa egenskapsfliken och visa fälten som du just instrumenterat.

Nu kan du redigera teaser-objektets titel antingen direkt som du gjorde tidigare eller i egenskapspanelen. I båda fallen sparas ändringarna i den lokala AEM.

Lägg till ytterligare fält i egenskapspanelen add-fields

Med hjälp av den grundläggande strukturen i datamodellen för komponenten som du redan har implementerat kan du lägga till ytterligare fält enligt samma modell.

Du kan till exempel lägga till ett fält för att justera komponentens format.

Öppna CRXDE Lite.

code language-text
`https://localhost:8443/crx/de`

Redigera filen customheaderlibs.html under /apps/wknd/components/page.

Lägg till ytterligare ett objekt i fields-arrayen för formatfältet i modelldefinitionsskriptet. Kom ihåg att lägga till ett kommatecken efter det sista fältet innan du infogar det nya.

code language-json

code language-json
`{ "component": "select", "name": "cq:styleIds", "label": "Style", "valueType": "string", "multi": true, "options": [ {"name": "hero", "value":"1555543212672"}, {"name": "card", "value":"1605057868937"} ] }`

{
   "component": "select",
   "name": "cq:styleIds",
   "label": "Style",
   "valueType": "string",
     "multi": true,
   "options": [
     {"name": "hero", "value":"1555543212672"},
     {"name": "card", "value":"1605057868937"}
   ]
}

Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.
Klicka en gång till på teaserns titel för att redigera den.
Klicka på egenskapspanelen och se att det finns ett nytt fält för att justera komponentens stil.

Alla fält i JCR för komponenten kan visas på det här sättet i Universal Editor.

Sammanfattning summary

Grattis! Nu kan du instrumentera dina egna AEM program så att de fungerar tillsammans med den universella redigeraren.

När du börjar instrumentera ditt eget program bör du tänka på de grundläggande steg du utförde i det här exemplet.

Du konfigurerar utvecklingsmiljön.
- AEM körs lokalt på HTTPS med WKND installerat
- Universell redigeringstjänst som körs lokalt på HTTPS
Du har AEM OSGi-inställningarna så att innehållet kan läsas in på fjärrbasis.
- org.apache.sling.engine.impl.SlingMainServlet
- com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
Du har lagt till
Du har definierat en anslutning för att behålla ändringarna i
- Du definierade en anslutning till den lokala AEM utvecklingsinstansen.
- Du har även definierat en anslutning till den lokala tjänsten Universal Editor.
Du instrumenterade teaserkomponenten.
Du instrumenterade underkomponenterna i teaser.
Du har definierat ett anpassat autentiseringshuvud så att du kan spara ändringar med den lokala tjänsten Universal Editor.
Du instrumenterade programmet för att använda egenskapspanelen.
Du instrumenterade teaserkomponenten för att använda egenskapspanelen.

Du kan följa dessa steg för att mäta hur din egen app kan användas med den universella redigeraren. Alla egenskaper i JCR kan visas för den universella redigeraren.

Ytterligare resurser additional-resources

Titta på följande dokument för mer information om funktionerna i den universella redigeraren.

Om du vill komma igång så snabbt som möjligt kan du läsa dokumentet Komma igång med den universella redigeraren i AEM.
Mer information om nödvändiga OSGi-konfigurationer finns i dokumentet Komma igång med den universella redigeraren i AEM.
Mer information om anslutningsmetadata finns i dokumentet Getting Started with the Universal Editor i AEM.
Mer information om strukturen för den universella redigeraren finns i dokumentet Universal Editor Architecture.
Se dokumentet Local AEM Development with the Universal Editor för mer information om hur du ansluter till en självvärdbaserad version av Universal Editor.
Mer information om att täcka över noder finns i dokumentet Använda sammanslagningen av delningsresurser i Adobe Experience Manager as a Cloud Service.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab

Universal Editor Overview for AEM Developers developer-overview

Syfte purpose

Förutsättningar prerequisites

Starta AEM och logga in i den universella redigeraren sign-in

Universal Editor försöker läsa in innehållet sameorigin

Hantera samma webbplatskookies samesite-cookies

Universell redigerare Ansluter till fjärrramen ue-connect-remote-frame

Definiera en anslutning för att behålla ändringar connection

Instrumenting Components instrumenting-components

Teaser-underkomponenterna för instrument subcomponents

Vad betyder allt det? what-does-it-mean

Definiera autentiseringsrubriker auth-header

Instrumentera appen för egenskapspanelen properties-rail

Vad betyder allt det? what-does-it-mean-2

Instrumentera komponenten för egenskapspanelen properties-rail-component

Lägg till ytterligare fält i egenskapspanelen add-fields

Sammanfattning summary

Ytterligare resurser additional-resources