Webskabeloner som komponenter
Webskabeloner kan oprettes og bruges som komponenter på websider, så skaberne kan bruge disse komponenter, der kan genbruges, og levere parametre, der opfylder kravene.
Som udvikler kan du oprette en webskabelon, der indeholder specifikke funktioner, som udviklere kan konfigurere, når de designer websider.
Du kan f.eks. oprette følgende komponenter (og andre) som webskabelonkomponenter, der kan konfigureres i designstudiet:
- Placeringsoversigt med kort
- Visning af carousel
- Galleri med billeder eller videoer
Hvis du vil føje en komponent til en webside, kan du redigere siden ved hjælp af Visual Studio Code til internettet og føje et inkluderende Liquid-objekt til sidekopien:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Eksempel:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Oprette en webskabelonkomponent
Hvis du vil oprette en webskabelonkomponent, som kan bruges af en maker til at overføre parametre, skal du føje en {% manifest %}-kode til webskabelonen. I det manifeste afsnit beskrives de parametre, du kan konfigurere til at passere og bruges af webskabelonkoden.
Manifestet er et JSON-objekt, der definerer egenskaberne for den webskabelon, der vises i designstudiet: type, visningsnavn, beskrivelse, tabeller og parametre. Disse egenskaber for webskabeloner kan bruges til at ændre kløften mellem pro-udviklere og redigering med lave koder. Parametrene relaterer til variabler, som udviklere bruger i deres kildekode, og lavkodeudviklere kan konfigurere deres værdier.
Manifest-understøttede egenskaber
| Manifest-egenskab | Beskrivelse |
|---|---|
| Type | Skal indstilles til Funktionel. Funktionsbaseret: Tilføj webskabelonkomponenten via processen Tilføj komponent i design studio. |
| displayName | Brugervenligt navn på webskabelonkomponenten, der skal vises i designstudiet. |
| description | Beskrivelse af webskabelonkomponenten. |
| tables | En matrix med Dataverse-tabeller, en bruger kan bruge til at navigere direkte til Dataarbejdsområdet for at redigere konfigurationen eller posterne i tabellerne. Tabellerne skal vises med deres logiske navn. |
| params | Parametre med definerede egenskaber: id: matcher variabel, der bruges i webskabelonkoden, og koden til Liquid-inkludering. displayName: Fuldt navn i designstudio. description: Kort tekst, der vises via et værktøjstip, for at give udvikle, der bruger komponenten, kontekst. |
Eksempel:
{% manifest %}
{
"type": "Functional",
"displayName": "Data Cards",
"description": "This component displays data using a cards layout",
"tables": ["cards"],
"params": [
{
"id": "title",
"displayName": "Title",
"description": "Heading for this component"
},
{
"id": "count",
"displayName": "Count",
"description": "No. of items to be displayed"
}]
}
{% endmanifest %}
<!--additional web template code to use parameters to specialized functionality-->
Skrive webskabelonkode
Hvis du vil udvide en eksisterende standard-webskabelon, anbefales det, at du opretter en kopi af webskabelonen og udvider kopien for at bevare kildekoden og forhindre tab af data.
Alle parametrene overføres som strenge. I koden anbefales det, at du konverterer parameterværdierne til de ønskede typer efter behov. Du kan konvertere parametre ved hjælp af Liquid-filtre.
Eksempler:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Konfiguration af en webskabelonkomponent på en webside
Når webskabelonkomponenten (med et manifestafsnit) oprettes, kan du føje en tilsvarende Liquid-reference til websidekopien (ved hjælp af Visual Studio Code til internettet, Visual Studio Code, Portalstyringsapp eller andre metoder) ved at sende de forskellige parametre, som vist i dette eksempel:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Du kan konfigurere parametrene direkte i design studioet. På denne måde kan en udvikler udvikle avancerede komponenter ved hjælp af webskabeloner, som udviklere med lav kode kan konfigurere ved hjælp af designstudiet.
Begrænsninger og kendte problemer
Det understøttes ikke at indlejre komponenter i webskabeloner i andre webskabelonkomponenter.
Næste trin
Sådan opretter du en webskabelonkomponent