Nettmaler som komponenter

Artikkel
10/02/2023

Webmaler kan opprettes og brukes som komponenter på websider, slik at opprettere kan bruke disse gjenbrukbare komponentene og gi parametere som oppfyller kravene.

Som utvikler kan du opprette en nettmal for å gi bestemte funksjoner som beslutningstakerne kan konfigurere når de utformer websider.

Du kan for eksempel opprette følgende komponenter (og andre) som webmalkomponenter som kan konfigureres i utformingsstudioet:

Stedsoppføring med kart
Karusellvisning
Galleri med bilder eller videoer

Hvis du vil legge til en komponent på en webside, kan du redigere siden ved hjelp av Visual Studio Code for nettet og legge til et inkluderende Liquid-objekt på sidekopien:

{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}

Eksempel:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Opprett en nettmalkomponent

Hvis du vil opprette en webmalkomponent som kan brukes av en oppretter til å sende parametere, må du legge til en {% manifest %}-kode i webmalen. Manifestdelen beskriver parameterne du kan konfigurere til å sende og brukes av webmalkoden.

Manifestet er et JSON-objekt som definerer egenskapene for webmalen som vises i utformingsstudioet: type, visningsnavn, beskrivelse, tabeller og parametere. Disse webmalegenskapene kan brukes til å skille mellom pro-utviklere og redigering med lav kode. Parameterne er relatert til variabler som utviklere bruker i kildekoden, og lavkodeopprettere kan konfigurere sine verdier.

Manifest-støttede egenskaper

Manifestegenskap	Bekrivelse
Type	Må være Funksjonell eller Oppsett. Oppsett: Legg til webmalkomponenten i Legg til del-prosessen i utformingsstudioet. Funksjonell: Legg til webmalkomponenten i Legg til komponent-prosessen i utformingsstudioet.
displayName	Egendefinert navn på webmalkomponenten som skal vises i utformingsstudioet.
description	Beskrivelse av webmalkomponenten.
tabeller	En matrise med Dataverse-tabeller som en produsent kan bruke til å navigere direkte til Dataarbeidsområdet for å redigere tabellerkonfigurasjonen eller oppføringene. Tabellene må vises med det logiske navnet.
params	Parametere med definerte egenskaper: id: samsvarer med variabelen som brukes i webmalkoden og koden til Liquid-inkludering. displayName: Egendefinert navn i utformingsstudio. beskrivelse: Kort tekst som vises via et verktøytips for å gi kontekst til opprettere som bruker komponenten.

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 nettmalkode

Hvis du vil utvide en eksisterende standard webmal, anbefaler vi at du oppretter en kopi av webmalen og utvider kopien for å beholde kildekoden og hindre tap av data.

Alle parameterne blir sendt som strenger. I koden anbefales det at du konverterer parameterverdiene til de ønskede typene etter behov. Du kan konvertere parametere ved hjelp av Liquid-filtre.

Eksempler:

{% assign posts_count = count | integer %}
{% assign column_count = columns | integer %}

Konfigurere en webmalkomponent på en webside

Når webmalkomponenten (med en manifestdel) er opprettet, kan du legge til en korresponderende Liquid-referanse til en websidekopi ( Visual Studio Code for nettet, Visual Studio Code, portaladministrasjonsapp eller andre metoder) ved å sende de forskjellige parameterne, som vist i dette eksemplet:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Du kan konfigurere parameterne direkte i utformingsstudioet. På denne måten kan en pro-utvikler bygge avanserte komponenter ved hjelp av webmaler som lavkode-opprettere kan konfigurere ved hjelp av utformingsstudioet.

Konfigurer parametere i utformingsstudioet.

Begrensninger og kjente problemer

Nesting av webmalkomponenter i andre webmalkomponenter støttes ikke.

Neste trinn

Opprette en nettmalkomponent

Del via