Entender manifest.xml

O manifest.xml é o arquivo de configuração do widget, é obrigatório. Através dele definem-se dados como a tag do widget, parâmetros, template principal 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. 
• 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. 
• icon: ícone usado apenas dentro do painel administrativo da plataforma 
• isPreLoad: seu valor padrão é "true". 
• Esta propriedade ficará obsoletajsHandler: 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