Les gadgets sont accessibles par le menu Dynacase ECM > Gadgets, qui propose à l'utilisateur une liste des gadgets disponibles. Les gadgets activés par l'utilisateur sont mémorisés et affichés automatiquement lors des prochains lancements d'ECM. La famille Gadget permet de les définir.

L'attribut GAD_JAVASCRIPT permet de référencer un fichier javascript qui sera automatiquement inclus. Il doit contenir les fonctions qui définissent le rendu graphique du gadget. Ces fonctions sont celles déclarées par les attributs GAD_VIEWWIDGET et GAD_EDITWIDGET.

Dans le cas du Widget de Consultation (GAD_VIEWWIDGET), la fonction doit retourner un objet javascript de classe Ext.Panel (tel que ceux proposés par la librairie ExtJS et le module Dynacase ExtUI).

Exemple de fichier javascript inclus :

 
Ext.fdl.MyGadgetView = function(config){
 
    var fdlDocument = context.getDocument({
        id: config.collectionId
    });
 
    var gridPanel = new Ext.fdl.GridCollection({
        collection: fdlDocument,
        iconSize: 16,
        pageSize: 50,
	viewToolbar: false,
	hideHeaders: true,
	getTitle: function(){
	    return 'MyTitle';
	}
    });
 
    return gridPanel;
 
};

Nous utilisons ici le widget Ext.fdl.GridCollection du module Dynacase ExtUI.

Dans le cas du Widget d'Edition (GAD_EDITWIDGET) est spécifié, le Gadget apparaîtra avec une icône en forme de roue, dans la partie en haut à droite, pour accéder à l'interface de paramétrage. La fonction doit retourner un objet javascript de classe Ext.form.FormPanel. Les champs de cet objet doivent correspondre à des entrées de l'attribut tableau Paramètres (GAD_T_PARAMETERS). Une barre proposant les actions Sauver et Annuler est présentée automatiquement à l'utilisateur.

Exemple de fichier javascript inclus :

 
Ext.fdl.MyGadgetEdit = function(config){
 
    var formPanel = new Ext.FormPanel({
 
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Titre',
            value: config.title,
            anchor: '100%',
            name: 'title'
        }, {
            xtype: 'textarea',
            anchor: '100% 100%',
            fieldLabel: 'Url',
            value: config.url,
            name: 'url'
        }]
    });
 
    return formPanel;
};