Webbmallar som komponenter
Webbmallar kan skapas och användas som komponenter i webbsidor så att skaparna kan använda dessa återanvändbara komponenter och tillhandahålla parametrar som uppfyller kraven.
Som utvecklare kan du skapa en webbmall som innehåller specifika funktioner som beslutsfattare kan konfigurera när de utformar webbsidor.
Du kan till exempel skapa följande komponenter (och andra) som webbmallskomponenter som kan konfigureras i designstudion:
- Platslista med kartor
- Karuselldisplay
- Galleri med bilder eller videoklipp
För att lägga till en komponent på en webbsida kan du redigera sidan med hjälp av Visual Studio Code för webben och lägga till ett Liquid inkludera objekt till sidkopian:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Exempel:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Skapa du en webbmallkomponent
Om du vill skapa en webbmallskomponent som du kan tillåta en tillverkare att skicka parametrar till, måste du lägga till en {% manifest %} tagg i webbmallen. I avsnittet om manifestet beskrivs vilka parametrar du kan konfigurera för att skicka och som ska användas i webbmallskoden.
Manifestet är ett JSON-objekt som definierar egenskaperna för webbmallen som visas i designstudion: typ, visningsnamn, beskrivning, tabeller och parametrar. Dessa webbmallegenskaper kan användas för att skapa ett samband mellan programutvecklare och lågkodsredigering. Parametrarna relaterar till variabler som utvecklare använder i sin källkod, och lågkodsskapare kan konfigurera sina värden.
Egenskaper som stöds av manifest
| Manifest egenskap | Description |
|---|---|
| Type | Måste ställas in på Funktion. Funktion: Lägg till webbmallskomponenten via processen Lägg komponent till i designstudio. |
| displayName | Eget namn för webbmallkomponenten som visas i designstudion. |
| description | Beskrivning av webbmallskomponent. |
| tabeller | En matris med Dataverse tabeller som en utvecklare kan använda för att navigera direkt till Dataarbetsytan för att redigera tabellkonfigurationen eller posterna. Tabellerna måste visas med hjälp av sina logiska namn. |
| params | Parametrar med definierade egenskaper: id: matches variabel som används i webbmallskoden och Liquid inkludera taggen. displayName: användarvänligt namn i designstudio. beskrivning: Kort text som visas med hjälp av en knappbeskrivning för att skapa sammanhang för beslutsfattare som använder komponenten. |
Exempel:
{% 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-->
Skriv webbmallkod
Om du vill utöka en befintlig mall som du redan har skapat rekommenderar vi att du skapar en kopia av webbmallen och utökar kopian så att källkoden bevaras och data går förlorade.
Alla parametrar skickas som strängar. I koden rekommenderas det att du konverterar parametervärdena till önskade typer efter behov. Konverteringsparametrar kan göras med hjälp av filter för Liquid filter.
Exempel:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Konfigurera en webbmallkomponent på en webbsida
När webbmallskomponenten (med en manifestsektion) skapas kan du lägga till en motsvarande Liquid referens till webbsidans kopia (med Visual Studio Code för webben, Visual Studio Code, programmet Portal Management andra metoder) som skickar de olika parametrarna, som visas i detta exempel:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Du kan konfigurera parametrarna direkt i designstudion. På så sätt kan en utvecklare skapa avancerade komponenter med hjälp av webbmallar som beslutsfattare med låg kod kan konfigurera med hjälp av designstudion.
Begränsningar och kända problem
Det finns inte stöd för att kapsla in webbmallkomponenter i andra webbmallkomponenter.
Gå vidare
Hur man skapar en webbmallskomponent