Histórico da Página

...

Iremos utilizar o conceito de Super Widget na construção de nossa widget. Para saber mais sobre, acesse o guia da Super Widget.

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

Bloco de código

theme	Eclipse
language	xml
collapse	true

<#if !newsSource??>
    <#assign newsSource = "dataset">
</#if>
<#if !numberOfArticles??>
    <#assign numberOfArticles = 5>
</#if>
<#if url??>
    <#assign parameters = '{"newsSource": "${newsSource}", "url": "${url?url}", "numberOfArticles": "${numberOfArticles}"}'?html>
<#else>
    <#assign parameters = '{"newsSource": "${newsSource}", "numberOfArticles": "${numberOfArticles}"}'?html>
</#if>
<div id="KitIntranetNews_${instanceId}"
	 class="wcm-widget-class super-widget fluig-style-guide"
	data-params="KitIntranetNews.instance(${parameters})">
    <form role="form">
        <div id="newsSource_${instanceId}" class="form-group">
            <label for="formNewsSource_${instanceId}">${i18n.getTranslation('kitintranet.news.label.source')}</label>
            <select id="formNewsSource_${instanceId}" class="form-control" value="${newsSource!}" data-change-news-source>
                <option value="dataset" <#if newsSource == 'dataset'>selected</#if>>
                    ${i18n.getTranslation('kitintranet.news.data.dataset')}
                </option>
                <option value="rssfeed" <#if newsSource == 'rssfeed'>selected</#if>>
                    ${i18n.getTranslation('kitintranet.news.data.rssfeed')}
                </option>
            </select>
        </div>
        <div id="rssFeed_${instanceId}" class="form-group">
            <label for="feedUrl_${instanceId}">${i18n.getTranslation('kitintranet.news.label.rssfeed')}</label>
            <input class="form-control" id="feedUrl_${instanceId}" value="${url!}"
                   placeholder="${i18n.getTranslation('kitintranet.news.label.rssfeed.placeholder')}" />
        </div>
        <div id="dataSet_${instanceId}" class="form-group">
            <label for="dataSetLink_${instanceId}">${i18n.getTranslation('kitintranet.news.label.datasetlink')}</label>
            <a id="dataSetLink_${instanceId}" href="#"></a>
        </div>
        <div id="articles_${instanceId}" class="form-group">
            <label for="feedUrl_${instanceId}">${i18n.getTranslation('kitintranet.news.label.numberofarticles')}</label>
            <input class="form-control" id="numberOfArticles_${instanceId}" value="${numberOfArticles!}" />
        </div>
        <button type="submit" class="btn btn-default"
                data-save-preferences>${i18n.getTranslation('kitintranet.news.label.save')}</button>
    </form>
</div>	<!--
		código
	 -->
</div>

Interface aplicada com Fluig Style Guide

...

Bloco de código

theme	Eclipse
language	js

var preferences = {
    newsSource: $("#formNewsSource_" + this.instanceId).val(),
    url: $("#feedUrl_" + this.instanceId).val()"/news/feed/url",
    numberOfArticles: $("#numberOfArticles_" + this.instanceId).val()10
};
 
WCMSpaceAPI.PageService.UPDATEPREFERENCES(
            {
                async: true,
                success: function (data) {
                    FLUIGC.toast({title: data.message, message: '', type: 'success'});
            			// código
    },
                fail: function (xhr, message, errorData) {
                    FLUIGC.toast({
                        title: '${i18n.getTranslation("kitintranet.news.preferences.error")}',
                        message: errorData.message,
                        type: 'warning'
                    });
                }
            		// código
    }
}, this.instanceId, preferences
        );

Como recuperar preferências da widget

...

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 23

Nova versão 24

Chave

Interface aplicada com Fluig Style Guide

Como recuperar preferências da widget