Modelli Web come componenti
I modelli Web possono essere creati e utilizzati come componenti nelle pagine Web per consentire agli autori di utilizzare questi componenti riutilizzabili e fornire parametri per soddisfare i requisiti.
In qualità di sviluppatore, puoi creare un modello Web per fornire funzionalità specifiche che gli autori possono configurare durante la progettazione di pagine Web.
Ad esempio, puoi creare i seguenti componenti (e altri) come componenti del modello Web che possono essere configurati nello studio di progettazione:
- Elenco delle posizioni con mappe
- Visualizzazione carousel
- Raccolta di immagini o video
Per aggiungere un componente a una pagina web, puoi modificare la pagina utilizzando Visual Studio Code per il Web e aggiungendo un oggetto Liquid alla copia della pagina:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Esempio:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Creare un componente del modello Web
Per creare un componente del modello Web in cui puoi consentire a un autore di passare i parametri, devi aggiungere un tag {% manifest %} al modello Web. La sezione del manifesto descrive i parametri che puoi configurare per passare ed essere utilizzati dal codice del modello Web.
Il manifesto è un oggetto JSON che definisce le proprietà del modello Web visualizzato in Design Studio: tipo, nome visualizzato, descrizione, tabelle e parametri. Queste proprietà del modello Web possono essere utilizzate per colmare il divario tra gli sviluppatori professionisti e l'editing con poco codice. I parametri si riferiscono alle variabili che gli sviluppatori utilizzano nel loro codice sorgente e i produttori con poco codice possono configurare i loro valori.
Proprietà del manifesto supportate
| Proprietà del manifesto | Descrizione |
|---|---|
| Type | Deve essere Funzionale o Layout. Layout: aggiungi il componente del modello Web tramite il processo Aggiungi sezione in Design Studio. Funzionale: aggiungi il componente del modello Web tramite il processo Aggiungi componente in Design Studio. |
| displayName | Nome descrittivo per il componente del modello Web, da visualizzare nello studio di progettazione. |
| description | Descrizione del componente del modello Web. |
| tabelle | Una matrice di tebelle Dataverse che un autore può utilizzare per accedere direttamente all'area di lavoro Dati per modificare la configurazione o i record delle tabelle. Le tabelle devono essere elencate utilizzando il loro nome logico. |
| params | Parametri con proprietà definite: id: corrisponde alla variabile utilizzata nel codice del modello Web e al tag Liquid include. displayName: nome descrittivo nello studio di progettazione. description: breve testo visualizzato tramite una descrizione comando per fornire un contesto agli autori che utilizzano il componente. |
Esempio:
{% 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-->
Scrivere codice dei modelli Web
Se desideri estendere un modello Web predefinito esistente, ti consigliamo di creare una copia del modello Web ed estendere la copia per preservare il codice sorgente e prevenire la perdita di dati.
Tutti i parametri vengono passati come stringhe. Nel codice, si consiglia di convertire i valori dei parametri nei tipi desiderati come richiesto. La conversione dei parametri può essere ottenuta utilizzando filtri Liquid.
Esempi:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Configurare un componente del modello Web su una pagina Web
Quando viene creato il componente del modello Web (con una sezione del manifesto), è possibile aggiungere un riferimento Liquid corrispondente alla copia della pagina Web (utilizzando Visual Studio Code per il Web, Visual Studio Code, app Portal Management o altri metodi) passando i vari parametri, come mostrato in questo esempio:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Puoi configurare i parametri direttamente nello studio di progettazione. In questo modo uno sviluppatore professionista può creare componenti avanzati utilizzando modelli Web che gli autori con poco codice possono configurare utilizzando lo studio di progettazione.
Limitazioni e problemi noti
La nidificazione dei componenti del modello Web in altri componenti del modello Web non è supportata.
Passaggio successivo
Istruzioni per creare un componente del modello Web