Entender manifest.xml

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

Nome

Descrição

Tipo

WidgetBox

Exibir Box?

Boolean

WidgetDefaultClass

Classe CSS Padrão

Boolean

WidgetClass

Classe CSS Alternativa

Texto

WidgetTitle

Título

Texto

Template

Template principal

Texto

🚧

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.


Did this page help you?