O manifest.xml é o arquivo de configuração do widget, é obrigatório. Através dele define-se dados como a tag do widget, parâmetros, template principal e entre outros.

Estrutura

<?xml version="1.0" encoding="utf-8" ?>
<package>
    <widgets>
        <!-- Validar se não tem caracteres estranhos no campo "tagName" -->
        <!-- Validar, deve ter um componentRef, se não tiver, então o default "WidgetComponent" deve ser utilizado -->
        <!-- Se o campo "folder" está vazio, então deve ser utilizado "tagName" como o nome da pasta -->
        <!-- Para não ficar repetindo os paths, fazer com que os campos "icon" e "template" procurem dentro da pasta folder, e não achar procura no zip -->

        <widget
            category="general"
            component="WidgetComponent"
            description="Exemplo de plugin"
            folder="my.widget"
            icon="my.widget\image\icon.gif"
            isPreLoad="False"
            jsHandler="MyWidget"
            tagName="my_widget"
            template="wd.my.widget.template"
            title="Exemplo de plugin"
            widgetName="Exemplo de plugin"
        >

            <!-- <property defaultValue="valor default" friendlyName="Propriedade 1" name="Prop1" required="false" type="Text" visibility="Server" />
            <property defaultValue="" friendlyName="Propriedade 2" name="Prop2" required="false" type="Number" visibility="Server" />
            <property defaultValue="" friendlyName="Propriedade 3" name="Prop3" required="true" type="Enum" visibility="Client">
                <options>
                    <option friendlyName="option 1" value="1" />
                    <option friendlyName="option 2" value="2" />
                    <option friendlyName="option 3" value="3" />
                </options>
            </property> -->

            <include relativePath="Scripts/wd.my.widget.js" type="Javascript" />
            <include relativePath="Styles/wd.my.widget.css" type="StyleSheet" />

        </widget>
    </widgets>
</package>

Informações principais

category: categoria do widget. O valor padrão é "general"
component: componente de dados do widget. Veja aqui mais detalhes
description: Breve descrição do widget
folder: nome da pasta do widget. Este nome é utilizado para clonar a pasta do widget e customizar os templates dentro do tema. Veja mais detalhes aqui
icon: ícone usado apenas dentro do painel administrativo da plataforma
isPreLoad: seu valor padrão é "true". Esta propriedade ficará obsoleta
jsHandler: nome (único) de registro do widget para o JavaScript. Caso seja utilizado um valor incorreto, o script do widget que depende desse manipulador não executará
tagName: tag utilizada para chamar o widget via liquid dentro do template. Estrutura recomendada: nome_do_widget em letras minúsculas, sem caracteres especiais e com termos separados por _ (underline)
template: nome do template principal. Sempre termina com .template
title: título do widget
widgetName: nome do widget

Propriedades

defaultValue: valor padrão da propriedade
frieldlyName: nome amigável da propriedade. É exibido ao incluir widgets em áreas pelo Configurar Design
name: nome utilizado para chamar o parâmetro via liquid no template
required: indica se o parâmetro é obrigatório
type: tipo do parâmetro. Pode ser "Text" (Texto), "Number" (Número), "Boolean" (true ou false) ou "Enum" (lista de opções)
visibility: visibilidade do parâmetro. Pode ser "Client" (acessível via JavaScript pelo this.options do widget) ou "Server" (acessível via liquid no template)

Assets

Utiliza-se a tag include informando no "relativePath" o caminho do arquivo e no "type" o tipo de asset ("JavaScript" ou "StyleSheet")

Tipos de componente

📘

Os dados do componente estão disponíveis para uso no template (liquid) através do objeto ComponentData. No caso do tipo WidgetComponent, o ComponentData será um objeto vazio.

WidgetComponent
É o componente de dados padrão. Indica que o widget irá utilizar os contextos globais.

Componente Próprio
Indica que o widget possui um componente com dados próprios para serem utilizados por ele.

Parâmetros globais

🚧

Importante!

Com o parâmetro Template é possível definir um template alternativo para substituir o principal. Esta é uma das formas possíveis de customização. Veja aqui mais informações sobre customização de widgets.