DOCSMarshal /JS

Custom Items

È possibile sviluppare dei mask item personalizzati, definiti custom items, da integrare all'interno di maschere e pagine di DocsMarshal.

Per registrare i custom items all'interno del Portal è sufficiente inserirli in file javascript all'interno della cartella "Scripts/AdditionalJS/EzTemplates"

Il seguente codice mostra un esempio di custom item di una griglia di profili 

DM.Masks.registerTemplate({
    id: 'griglia',
    name: 'Griglia DM',
    description: 'Custom item dmGrid',
    version: 1,
    icon: 'fa fa-link',
    author: 'DocsMarshal',
    template: function (e) {
        // costruisco la griglia
        let grid = e.container.dmGrid(e.templateArgument).dmGrid('instance');
        
        grid.on('dataSourceLoaded', function() {
            // porto il messaggio verso la maschera
            e.sendMessage('loaded', {
                isLoaded: true // posso valorizzare dati che saranno letti da logiche in maschera
            });
        });

        e.onMessage('refresh', function (e) {
            // ho ricevuto un messaggio dalla maschera
            // nell'oggetto e.data ho a disposizione i dati dei parametri definiti nei messaggi
            DM.UI.alert({
                type: "success",
                text: "Il valore è: " + e.data.refreshCustomParam
            })
            grid.refresh();
        });

        e.onDispose(function() {
            grid.dispose();
        });
    },
    designTemplate: function (e) {
        // imposto cosa visualizzare quando sono in designer mode
        return 'griglia nel designer';
    },
    // imposto i messaggi abilitati per questo custom item
    messages: {
        send: [
            {
                type: 'loaded',
                params: [
                    { name: 'isLoaded' }
                ]
            },
        ],
        receive: [
            {
                type: 'refresh',
                params: [
                    { name: 'refreshCustomParam' }
                ]
            }
        ]
    }
})

Elenco proprietà

Descrizione proprietà

id

Type: string

Id del custom item, è una stringa a libera scelta purchè sia univoca

template

Type: function

Funzione che viene richiamata quando deve essere costruito il custom item.
Al suo interno, occorre creare il componente, registrare eventuali eventi e/o messaggi. Alla funzione viene passato un oggetto, contenente:

  • container
    elemento sul quale istanziare il componente
  • templateArgument
    una serie di opzioni che è possibile valorizzare dalla maschera, da utilizzare per instanziare il componente del custom item
  • sendMessage('message', data)
    funzione per inviare messaggi dal custom item alla maschera. Nel primo parametro occorre fornire il nome del messaggio, mentre nel secondo parametro il contenuto del messaggio da trasmettere
  • onMessage('message', function(e){ console.log(e); })
    funzione per legarsi agli eventi inviati dalla maschera verso il nostro custom item. Nel primo parametro occorre fornire il nome del messaggio, mentre nel secondo parametro la funzione da eseguire alla ricezione del messaggio.
  • onDispose(function(e){ })
    funzione richiamata quando viene richiesto che il custom item venga distrutto.

designTemplate

Type: function

Funzione che permette di definire l'aspetto del custom item in designer mode.

messages

Type: object

I messaggi servono per creare un collegamento con la maschera, permettendo il passaggio di dati.
Per poterli utilizzare, occorre registrare nell'oggetto messages l'elenco dei messaggi abilitati.
Clicca qui per la loro implementazione.

Descrizione dell'oggetto:

  • send [ ]
    • type
      Stringa che identifica il messaggio
    • params [ ]
      • name
  • receive [ ]
    • type
      Stringa che identifica il messaggio
    • params [ ]
      • name
Esempio:
messages: {
    send: [
        {
            type: 'loaded',
            params: [
                { name: 'isLoaded' }
            ]
        },
    ],
    receive: [
        {
            type: 'refresh',
            params: [
                { name: 'refreshCustomParam' }
            ]
        }
    ]
}