Wstęp

Każdy gadżet osadzony w dashboardzie ma mieć możliwość wykonywania akcji przy użyciu skryptów JavaScript. 

W momencie załadowania widoku gadżetu, dostępny jest już dla niego obiekt Gadget, który reprezentuje ten gadżet i udostępnia zestaw metod, dzięki którym może np. zmienić tytuł gadżetu czy wyświetlić okno konfiguracji.


Przykład pojedynczego widoku gadżetu (w technologii FreeMarker).

<!-- pomocnicze macro -->
<#import "/plugin.ftl" as plugin/>
 
<!-- ... ... -->
 
<!-- Skrypt wykorzystujący GadgetApi -->
<script type="text/javascript">
	// zmiana tytułu
	Gadget.setTitle('<@plugin.message "gadget.title"/>');
 
	// automatyczne odświeżanie gadżetu za refreshInterval
	Gadget.refresh(${refreshInterval});
</script>


Gadget API

Poniżej przedstawiono wszystkie dostępne metody obiektu Gadget.


MetodaParametryOpis
isOwner
  • brak

Zwraca true, jeżeli aktualnie zalogowany użytkownik jest właścicielem dashboardu.

if(Gadget.isOwner()){
	// konfiguracja etc...
}
getId
  • brak

Zwraca identyfikator gadżetu

var id = Gadget.getId();
getKey
  • brak

Zwraca klucz gadżetu. Klucz gadżetu składa się z klucza wtyczki oraz klucza modułu np. com.suncode.plugin.dashboard:introduction

var key = Gadget.getKey();
getTitle
  • brak

Zwraca aktualny tytuł gadżetu

var title = Gadget.getTitle();
setTitle
  • title: nowy tytuł gadżetu

Zmienia tekst belki tytułowej gadżetu

Gadget.setTitle('tytuł');
refreshSize
  • brak

Uaktualnia rozmiar gadżetu do jego poprawnej wysokości. Wykorzystywane, chcemy wymusić ponowne obliczenie automatycznej wysokości gadżetu (np. załadowanie dynamicznej treści).

Gadget.refreshSize();
hasAutoHeight
  • brak

Zwraca true jeżeli gadżet ma zaznaczoną opcję Dopasowana wysokość. Tak skonfigurowany gadżet próbuje dopasować się do faktycznej zawartości.

if(Gadget.hasAutoHeight() == false){
	// akcja
}
enableAutoHeight
  • brak

Włącza opcję Dopasowana wysokość. Wysokość gadżetu zostanie dopasowana do zawartości.

Gadget.enableAutoHeight();
getHeight
  • brak

Pobiera wysokość gadżetu w pixelach.

var h = Gadget.getHeight();
setHeight
  • height: nowa wysokość gadżetu (int)

Zmienia wysokość gadżetu. Jeżeli opcja Dopasowana wysokość była aktywna, zostanie ona wyłączona.

Gadget.setHeight(500);
refresh
  • timeout (opcjonalny) : okres (w sekundach), za który gadżet ma zostać odświeżony
Jeżeli timeout jest pusty lub timeout<0 to gadżet zostanie odświeżony natychmiast

.

Odświeża gadżet, pobierając ponownie zawartość gadżetu zgodnie z jego url. Podczas odświeżenia widoczna jest maska ładowania.

Odświeżenie powoduje wczytanie strony i wszystkich skryptów od nowa, dlatego funkcja nie udostępnia żadnego callback'u.
// odśwież natychmiast
Gadget.refresh();
Gadget.refresh(0);
 
// odśwież za 60 minut
Gadget.refresh(60);
 
// nie odświeżaj
Gadget.refresh(-1);
 
showConfiguration
  • forceChange (opcjonalny): jeżeli true:
    • wyświetlone okno nie ma przycisku Anuluj, co wymusza na użytkowniku zmianę ustawień na poprawne wartości.

Wyświetla widok konfiguracji gadżetu, opcjonalnie zmuszając go do poprawienia konfiguracji.

Po zapisaniu konfiguracji gadżet jest automatycznie odświeżany

Gadget.showConfiguration(true);
getProperties
  • brak

Zwraca wszystkie właściwości gadżetu. Zwrócony obiekt ma następującą budowę:

{
	'propertyname': {
		name: 'propertyname',
		value: 'propertyValue',
		type: 'text'
	},
	'secondproperty': {
		...
	},
	...
}

Właściwości są odczytywane przed wywołaniem kontrolera gadżetu, dlatego zmiany właściwości w tym kontrolerze nie będą widoczne, do następnego odświeżenia gadżetu.

// pobranie wszystkich
var props = Gadget.getProperties();
 
// pobranie konkretnej właściwości
var nameProperty = props['name']
getProperty
  • name: nazwa właściwości, którą chcemy odczytać

Odczytuje podaną właściwość po nazwie. Wynik:

{
	name: 'name',
	value: 'value',
	type: 'text'
}
var nameProperty = Gadget.getProperty('name');
Zdarzenia na gadżecie
onResize
  • function: funkcja, wywołana podczas zmiany wysokości gadżetu
    • parametry przekazane do funkcji
      1. component - komponent (panel gadżetu)
      2. newHeight - nowa wysokość w pixelach
      3. newWidth - nowa szerokość w pixelach
  • scope (opcjonalny): scope w którym wywołana będzie funkcja

Dodaje EventListener do zdarzenia Resize panelu.

Gadget.onResize(function(gadget){
	console.log('Resized');
});
onCollapse
  • function: funkcja, wywołana podczas zwijania gadżetu
  • scope (opcjonalny): scope w którym wywołana będzie funkcja

Dodaje EventListener do zdarzenia Collapse panelu.

Gadget.onCollapse(function(gadget){
	console.log('Collapsed');
});


onExpand
  • function: funkcja, wywołana podczas rozwijania gadżetu
  • scope (opcjonalny): scope w którym wywołana będzie funkcja

Dodaje EventListener do zdarzenia Expand panelu.

Gadget.onExpand(function(gadget){
	console.log('Expanded');
});