Bileşen olarak web şablonları
Web şablonları, oluşturucuların bu yeniden kullanılabilir bileşenleri kullanmalarına ve gereksinimleri karşılayacak parametreler sunmalarına izin vermek amacıyla web sayfalarında bileşenler olarak oluşturulabilir ve kullanılabilir.
Geliştirici olarak, oluşturucuların web sayfası tasarlarken yapılandırabileceği belirli işlevleri sağlamak için bir web şablonu oluşturabilirsiniz.
Örneğin, tasarım stüdyosunda yapılandırılabilen web şablonu bileşenleri olarak aşağıdaki bileşenleri (ve başkalarını) oluşturabilirsiniz:
- Haritalarla konum listelemesi
- Döngü görüntüsü
- Resim veya video galerisi
Web sayfasına bir bileşen eklemek için, Web için Visual Studio Code'u kullanarak sayfayı düzenleyebilir ve sayfa kopyasına bir Liquid dahil etme nesnesi ekleyebilirsiniz:
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Örnek:
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Web şablonu bileşeni oluşturma
Bir oluşturucunun parametre iletmesine izin verebileceğiniz bir web şablonu bileşeni oluşturmak için, web şablonuna bir {% manifest %} etiketi eklemeniz gerekir. Bildirim bölümü, web şablonu kodu tarafından iletilecek ve kullanılacak şekilde yapılandırabileceğiniz parametreleri açıklar.
Bildirim, tasarım stüdyosunda görüntülenen web şablonunun şu özelliklerini tanımlayan bir JSON nesnesidir: tür, görünen ad, açıklama, tablolar ve parametreler. Bu web şablonu özellikleri, profesyonel geliştiriciler ile az kodlu düzenleme yapan kullanıcılar arasındaki açığı kapatmak için kullanılabilir. Parametreler, geliştiricilerin kendi kaynak kodunda kullandıkları değişkenlerle ilgilidir ve az kodlu oluşturucular kendi değerlerini yapılandırabilir.
Bildirim destekli özellikler
| Bildirim özelliği | Veri Akışı Açıklaması |
|---|---|
| Türü | Ya İşlevsel ya da Düzen olması gerekir. Düzen: Tasarım stüdyosundaki Bölüm ekle işlemi aracılığıyla web şablonu bileşenini ekleyin. İşlevsel: Tasarım stüdyosundaki Bileşen ekle işlemi aracılığıyla web şablonu bileşenini ekleyin. |
| displayName | Web şablonu için, tasarım stüdyosunda gösterilecek kolay ad. |
| description | Web şablonu bileşeninin açıklaması. |
| tabloları | Bir oluşturucunun, tablo yapılandırmasını veya kayıtlarını düzenlemek üzere doğrudan Veri çalışma alanına gitmek için kullanabileceği bir Dataverse tabloları dizisi. Tabloların, mantıksal adları kullanılarak listelenmesi gerekir. |
| parametreler | Tanımlı özelliklere sahip parametreler: id:, web şablonu kodunda ve Liquid dahil etme etiketinde kullanılan değişken ile eşleşir. displayName: Tasarım stüdyosundaki kolay ad. description: Bileşeni kullanarak oluşturuculara bağlam sağlamak için bir araç ipucu aracılığıyla gösterilen kısa metin. |
Örnek:
{% 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-->
Web şablonu kodunu yazma
Varolan bir kullanıma hazır web şablonunu genişletmek istiyorsanız, kaynak kodunu korumak ve veri kaybını önlemek için web şablonunun kopyasını oluşturmanızı ve kopyayı genişletmenizi öneririz.
Tüm parametreler dize olarak aktarılır. Kodunuzda, parametre değerlerini istenen türlere gerektiği gibi dönüştürmeniz önerilir. Parametrelerin dönüştürülmesi, Liquid filtreleri kullanılarak gerçekleştirilebilir.
Örnekler:
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Web sayfasındaki bir web şablonu bileşenini yapılandırma
Web şablonu bileşeni (bir bildirim bölümü içeren) oluşturulduğunda, bu örnekte gösterildiği gibi çeşitli parametreleri ileterek web sayfası kopyasına ilişkili bir Liquid başvurusu ekleyebilirsiniz (web için Visual Studio Code, Visual Studio Code, Portal Yönetimi uygulaması veya diğer yöntemleri kullanarak):
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Parametreleri doğrudan tasarım stüdyosunda yapılandırabilirsiniz. Bu şekilde, bir profesyonel geliştirici, az kodlu oluşturucuların tasarım stüdyosunu kullanarak yapılandırabileceği web şablonlarını kullanarak gelişmiş bileşenler oluşturabilir.
Sınırlamalar ve bilinen sorunlar
Web şablonu bileşenlerinin diğer web şablonu bileşenleriyle iç içe yerleştirilmesi desteklenmez.
Sonraki adım
Web şablonu bileşeni oluşturma