Șabloane web drept componente
Șabloanele web pot fi create și utilizate ca componente în paginile web pentru a permite producătorilor să utilizeze aceste componente reutilizabile și să ofere parametri pentru a îndeplini cerințele.
În calitate de dezvoltator, puteți crea un șablon web pentru a oferi funcționalități specifice pe care producătorii le pot configura în timp ce proiectează pagini web.
De exemplu, puteți crea următoarele componente (și altele) drept componente de șablon web care pot fi configurate în studioul de proiectare:
- Lista locației cu hărți
- Afișare carusel
- Galerie de imagini sau videoclipuri
Pentru a adăuga o componentă la o pagină web, puteți edita pagina utilizând Visual Studio Code pentru Web și adăugând un obiect Liquid include la copia paginii:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Exemplu:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Creați o componentă de șablon web
Pentru a crea o componentă de șablon web căreia îi puteți permite unui producător să treacă parametri, trebuie să adăugați o etichetă {% manifest %} la șablonul web. Secțiunea manifest descrie parametrii pe care îi puteți configura pentru a-i transmite și a fi utilizați de codul șablonului web.
Manifestul este un obiect JSON care definește proprietățile șablonului web afișat în studioul de proiectare: tip, nume afișat, descriere, tabele și parametri. Aceste proprietăți ale șablonului web pot fi folosite pentru a reduce decalajul dintre dezvoltatorii profesioniști și editarea cu cod redus. Parametrii se referă la variabilele pe care dezvoltatorii le folosesc în codul lor sursă, iar producătorii cu cod redus își pot configura valorile.
Proprietăți de manifest acceptate
| Proprietate manifest | Descriere |
|---|---|
| Tipul | Trebuie să fie fie Funcțional sau Aspect. Aspect: adăugați componenta șablon web prin procesul Adăugați o secțiune în studioul de design. Funcțional: adăugați componenta șablon web prin procesul Adăugați o componentă în studioul de design. |
| displayName | Nume prietenos pentru componenta șablon web, care urmează să fie afișată în studioul de design. |
| descriere | Descrierea componentei șablonului web. |
| tabele | O serie de tabele Dataverse pe care un producător le poate folosi pentru a naviga direct la spațiul de lucru Date pentru a edita configurația tabelelor sau înregistrările. Tabelele trebuie listate folosind numele lor logic. |
| params | Parametri cu proprietăți definite: id: corespunde variabilei utilizate în codul șablonului web și etichetei Liquid include. displayName: Nume prietenos în studioul de design. descriere: Textul scurt care apare într-un balon explicativ pentru a oferi context creatorilor care folosesc componenta. |
Exemplu:
{% 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-->
Editarea codului șablonului pentru web
Dacă doriți să extindeți un șablon web disponibil existent, vă recomandăm să creați o copie a șablonului web și să extindeți copia pentru a păstra codul sursă și a preveni pierderea datelor.
Toți parametrii sunt transmiși ca șiruri. În codul dvs., este recomandat să convertiți valorile parametrilor în tipurile dorite, după cum este necesar. Conversia parametrilor poate fi realizată utilizând Filtre Liquid.
Exemple:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Configurați o componentă de șablon web pe o pagină web
Când este creată componenta de șablon web (cu o secțiune manifest), puteți adăuga o referință Liquid corespunzătoare la copia paginii web (folosind Visual Studio Code pentru web, Visual Studio Code, aplicația Gestionarea portalului sau alte metode) transmițând diferiți parametri, așa cum se arată în acest exemplu:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Puteți configura parametrii direct în studioul de design. În acest fel, un dezvoltator profesionist poate construi componente avansate folosind șabloane web pe care producătorii cu cod redus le pot configura folosind studioul de design.
Limitări și probleme cunoscute
Imbricarea componentelor șablonului web în alte componente de șablon web nu este acceptată.
Pasul următor
Cum se creează o componentă de șablon web