Websjablonen als onderdelen
Websjablonen kunnen worden gemaakt en gebruikt als onderdelen op webpagina's, zodat makers deze herbruikbare onderdelen kunnen gebruiken en parameters kunnen bieden om aan de vereisten te voldoen.
Als ontwikkelaar kunt u een websjabloon maken om specifieke functionaliteit te bieden die makers kunnen configureren tijdens het ontwerpen van webpagina's.
U kunt bijvoorbeeld de volgende onderdelen (en andere) maken als websjabloononderdelen die in de ontwerpstudio kunnen worden geconfigureerd:
- Locatielijst met kaarten
- Carrouselweergave
- Galerie met afbeeldingen of video's
Als u een onderdeel aan een webpagina wilt toevoegen, kunt u de pagina bewerken met behulp van de Visual Studio Code voor het web en een Liquid include-object toevoegen aan de paginakopie:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Voorbeeld:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Een websjabloononderdeel maken
Als u een websjabloononderdeel wilt maken waaraan u een maker parameters kunt laten doorgeven, moet u een tag {% manifest %} aan de websjabloon toevoegen. De manifestsectie beschrijft de parameters die u kunt configureren om door te geven aan en te worden gebruikt door de websjablooncode.
Het manifest is een JSON-object dat de eigenschappen definieert van de websjabloon die wordt weergegeven in de ontwerpstudio: type, weergavenaam, beschrijving, tabellen en parameters. Deze websjablooneigenschappen kunnen worden gebruikt om de kloof tussen professionele ontwikkelaars en low-code bewerking te overbruggen. De parameters hebben betrekking op variabelen die ontwikkelaars gebruiken in hun broncode, en makers van low-code kunnen hun waarden configureren.
Door manifest ondersteunde eigenschappen
| Eigenschap Manifest | Beschrijving |
|---|---|
| Type | Moet Functioneel of Indeling zijn. Indeling: voeg het websjabloononderdeel toe via het proces Sectie toevoegen in ontwerpstudio. Functioneel: voeg het websjabloononderdeel toe via het proces Onderdeel toevoegen in ontwerpstudio. |
| displayName | Beschrijvende naam voor het websjabloononderdeel, die moet worden weergegeven in de ontwerpstudio. |
| description | Beschrijving van het websjabloononderdeel. |
| tabellen | Een matrix van Dataverse-tabellen die een maker kan gebruiken om rechtstreeks naar de Gegevenswerkruimte te navigeren om de tabelconfiguratie of records te bewerken. De tabellen moeten worden weergegeven met hun logische naam. |
| params | Parameters met gedefinieerde eigenschappen: id: komt overeen met de variabele die wordt gebruikt in de websjablooncode en de Liquid include-tag. displayName: beschrijvende naam in ontwerpstudio. description: korte tekst die wordt weergegeven via knopinfo om context te bieden aan makers die het onderdeel gebruiken. |
Voorbeeld:
{% 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-->
Websjablooncode schrijven
Als u een bestaande kant-en-klare websjabloon wilt uitbreiden, raden we u aan een kopie van de websjabloon te maken en de kopie uit te breiden om de broncode te behouden en gegevensverlies te voorkomen.
Alle parameters worden doorgegeven als tekenreeksen. In uw code wordt aanbevolen om de parameterwaarden naar behoefte naar de gewenste typen te converteren. Het converteren van parameters kan worden bereikt met behulp van Liquid-filters.
Voorbeelden:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Een websjabloononderdeel configureren op een webpagina
Wanneer het websjabloononderdeel (met een manifestsectie) is gemaakt, kunt u een overeenkomstige Liquid-verwijzing toevoegen aan de kopie van de webpagina (met behulp van Visual Studio Code voor het web, Visual Studio Code, de Portalbeheer-app of andere methoden) waarbij de verschillende parameters worden doorgegeven, zoals in dit voorbeeld:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
U kunt de parameters direct in de ontwerpstudio configureren. Zo kan een professionele ontwikkelaar geavanceerde onderdelen bouwen met behulp van websjablonen die low-code makers kunnen configureren met behulp van de ontwerpstudio.
Beperkingen en bekende problemen
Het nesten van websjabloononderdelen in andere websjabloononderdelen wordt niet ondersteund.
Volgende stap
Procedure voor het maken van een websjabloononderdeel