...

Objetivo

O objetivo deste guia é apresentar todo o processo de desenvolvimento de um widget integrado a vários possíveis tipos de fonte de dados. Cada sessão contém apenas o código necessário para o entendimento de cada assunto específico abordado. Para ver o resultado final do desenvolvimento, baixe os projetos abaixo:

...

Abaixo o arquivo application.info detalhado:

application.type=widget
application.code=news
application.title=Not\u00EDcias da Semana
application.description=Exibe uma lista com as \u00FAltimas not\u00EDcias da semana
application.category=KitIntranet	
application.renderer=freemarker
application.icon=icon.png
developer.code=developer
developer.name=TOTVS S.A.
developer.url=http://www.fluig.com
view.file=view.ftl
edit.file=edit.ftl
application.uiwidget=true
application.resource.js.1=/resources/js/news.js
application.resource.css.2=/resources/css/news.css
simple.deploy=false

...

Precisamos adicionar a classe css super widget na div que instancia o widget, tanto no arquivo de edição (edit.ftl) como no arquivo de visualização (view.ftl).

<div id="KitIntranetNews_${instanceId}" class="wcm-widget-class super-widget fluig-style-guide"
	data-params="KitIntranetNews.instance(${parameters})">
	<!--
		código
	 -->
</div>

...

Para salvar as preferências do widget, utilizamos o método WCMSpaceAPI.PageService.UPDATEPREFERENCES passando um método para callback (tratamento de retorno), o id da instância do widget e as preferências a serem salvas.

var preferences = {
    newsSource: "fonte",
    url: "/news/feed/url",
    numberOfArticles: 10
};
 
WCMSpaceAPI.PageService.UPDATEPREFERENCES({
    async: true,
    success: function (data) {
			// código
    },
    fail: function (xhr, message, errorData) {
		// código
    }
}, this.instanceId, preferences
);

...

No código abaixo podemos observar que o widget tem algumas variáveis chamadas news, newsSource, url e numberOfArticles.

var KitIntranetNews = SuperWidget.extend({
    news: null,
    newsSource: null,
    url: null,
    numberOfArticles: null,
    DATASET: "dataset",
    FEED: "rssfeed",
    KIT_NEWS: "kit_news",
	// código
});

...

Para saber como evitar conflito de dependência entre widgets desenvolvidos sobre a plataforma e o fluig, acesse este guia.

Zoom / Filter de Dataset

Para utilizar zoom de datasets em sua widget pode-se fazer da mesma forma como o style guide indica para fazer o filter/zoom de um serviço externo. Apenas é necessário tomar atenção a alguns detalhes que não são tão óbvios quando falamos especificamente de dataset. Veja o exemplo abaixo, utilizando o dataset "colleague" como base. (Desde que se obedeçam os demais itens do tutorial sobre filter, pode-se copiar e colar esse código diretamente em sua widget que ele irá funcionar do jeito que está).

var settings = {
        source: {
            url: '/api/public/ecm/dataset/search?datasetId=colleague&searchField=colleagueName&',
            /* poderia ser a url completa também ('http://{host}:{port}/api/public/ecm/dataset/search?datasetId=colleague&searchField=colleagueName&')
            É importante deixar o "&" no final da url, pois os outros parâmetros são montados 
            sem levar em consideração que já possa haver algo parametrizado no próprio link */
            contentType: 'application/json',
            root: 'content',
            pattern: '',
            limit: 10,
            offset: 0,
            patternKey: 'searchValue',
            /*Para que a consulta funcione, é importante que o valor do 'patternKey' 
            seja sempre 'searchValue' para o caso de zoom de dataset */
            limitkey: 'limit',
            offsetKey: 'offset'
        },
        displayKey: 'colleagueName', 
        /* Para o dataset de colleague optamos por mostrar o nome completo.
        É aconselhavel escolher o campo que, sozinho, represente melhor o registro*/
        multiSelect: true,
        style: {
            autocompleteTagClass: 'tag-gray',
            tableSelectedLineClass: 'info'
        }
    };