$().dmRepeater()

<div id="container"></div>
<script>
// costruisco il repeater
    $('#container').dmRepeater({
        ...oggetto contenente i parametri...
    });
// ottengo l'istanza del componente
    let instance = $('#container').dmRepeater('instance');
    ...
// in un secondo momento, ad esempio rispondendo ad un evento, chiamo un metodo del componente
    instance.refresh();
</script>

applyScrollViewForContent

Type: Boolean
Default: false

Se abilitato, header e footer del Repeater rimarranno fissi e sempre visibili nel loro posto, verrà applicato lo scorrimento (scrollView) al contenuto.
Nota: Per funzionare correttamente il Repeater deve avere un'altezza definita (esempio 50vh)

virtualScrollingEnabled

Type: Boolean
Default: false

Il componente renderizzerà il proprio contenuto in sezioni, dinamicamente in base allo scorrimento. Questa opzione permette di velocizzare significativamente i tempi di visualizzazione.
Nota: Per funzionare correttamente il Repeater deve avere un'altezza definita (esempio 50vh) e che la proprietà 'applyScrollViewForContent' sia abilitata.

virtualScrollingItemsPerStep

Type: Int
Default: 20

Se 'virtualScrollingEnabled' è abilitato, indica il numero di elementi del Repeater da disegnare per ogni sezione. Scorrendo verso la fine del Repeater, verrà aggiunta una nuova sezione all'esistente.

searchOptions

Type: List<searchOption>
Default: null

Contiene tutte le informazioni che il componente utilizzerà per effettuare la ricerca in DocsMarshal

• dynAssObjectId
  Specifica l'ObjectId della DynAss
• dynAssId
  Specifica l'id della DynAss
• dynAssExternalId
  Specifica l'externalId della DynAss
• idView
  Specifica l'id della view
• viewExternalId
  Specifica l'externalId della view
• classTypeId
  Specifica l'id della classe
• classTypeExternalId
  Specifica l'externalId della classe
• domainIds
  Specifica un elenco di id domini ([1,2,3])
• domainExternalIds
  Specifica un elenco di externalId domini (["dominio1","dominio2"])
• objectStateIds
  Specifica un elenco di id stati ([1,2,3])
• objectStateExternalIds
  Specifica un elenco di externalId domini (["dominio1","dominio2"])
• selectFieldIds
  Stringa token contenente l'elenco dei campi da selezionare nella ricerca ("C313;C10")
• selectFieldExternalIds
  Stringa token contenente l'elenco dei campi da selezionare nella ricerca ("Campo1;Campo2;Dynass.Campo3")
• where
  Specifica dei filtri di ricerca da applicare server-side, non modificabili dall'utente. Ogni elemento dell'array specifica una condizione su un campo aggiuntivo. Tutte le condizioni vengono combinate in AND.
  Il formato degli oggetti è il medesimo delle griglie di DocsMarshal.
• orderBy
  Lista di oggetti, ognuno dei quali specifica degli ordinamenti da applicare al risultato della ricerca server-side.
  • FieldId (1)
  • FieldExternalId ("Campo")
  • Direction ("ASC", "DESC")
• distinct
  
• top
  Permette di applicare un numero massimo di profili da estrarre dalla ricerca

layout

Type: object
Default: { display: "grid" }

Contiene tutte le informazioni che il componente utilizzerà per costruire il suo layout

• display
  Specifica come dovrà comportarsi il contenitore del repeater. A seconda del valore, verrà impostata la proprietà CSS display: flex / grid
  Valori: "flex" / "grid"
• gridTemplateColumns
  Questa proprietà CSS ('grid-template-columns') definisce le misure delle colonne della griglia. È possibile scrivere un numero (es. '3') oppure delle espressioni (es. '200px repeat(auto-fill, 100px)').
  Valida solo per display: grid
  
• gap
  Questa proprietà CSS permette di definire lo spazio tra righe e colonne. (Esempio: 30px)
  Valida solo per display: grid
  
• flexDirection
  Specifica la direzione della proprietà CSS flex-direction utilizzata dal componente per costruire il contenitore degli elementi da ripetere.
  Valida solo per display: flex
  Valori: "row" / "column"

Esempio:

    //Repeater con 2 colonne di elementi, a 10px di distanza
    layout: {
        display: "grid",
        gridTemplateColumns: 2,
        gap: "10px",
    }

autoRefresh

Type: int?
Default: null

Permette di definire un tempo di refresh automatico dei dati

tileTemplate

Type: object
Default: oggetto

Indica la struttura che il componente deve utilizzare per visualizzare graficamente ogni singolo elemento (profilo).
Chiavi HTML:

• '<D: {C1} :>' per ottenere il valore di un campo, dove al posto di 'C1' viene riportato l'id del campo, preceduto dal carattere 'C'.
• '<D: {C1:dd/MM/yyyy} :>' per ottenere il valore di un campo di tipo data ed applicare una formattazione, dove al posto di 'C1' viene riportato l'id del campo, preceduto dal carattere 'C'.
• '<DHTML: {C1} :>' per stampare il valore HTML di un campo, dove al posto di 'C1' viene riportato l'id del campo, preceduto dal carattere 'C'.

Chiavi JS:
Alla funzione, viene passato un oggetto contenente diverse informazioni sul raggruppamento, fra cui:

• getFieldValueByDbFieldName(key, defaultValue, format): funzione per ottenere il valore di un campo, fornito il suo DBName come parametro. Esempio: 'C135'. (Default)
• getFieldValueByExternalId(key): funzione per ottenere il valore di un campo, fornito il externalId come parametro

Nota: in caso di utilizzo del Repeater all'interno di ambienti esportabili con il Resenter, consigliamo l'utilizzo della funzione 'getFieldValueByDbFieldName' per i campi aggiuntivi, in quanto gli ID verranno tradotti automaticamente

Esempio HTML:

tileTemplate: `
    <div>
        <span>Valore campo: <D: {C1} :></span>
    </div>
`
    

Esempio JS:

tileTemplate: function(e) {
    return $("<div>").append(
        $("<span>").text("Valore campo: " + e.getFieldValueByDbFieldName('C1'))
    )
}
        

emptyContentTemplate

Type: string
Default: null

Indica il template da utilizzare quando la ricerca non produce risultati.
Esempio HTML:

    <div>
        <span>Nessun dato</span>
    </div>

headerOptions

Type: headerOption
Default: { }

Contiene le informazioni riguardo l'header toolbar

• visible
  Specifica la visibilità della toolbar
• items
  Specifica gli elementi da mostrare nella toolbar. La proprietà è un array che può contenere stringhe ed oggetti.
  Le stringhe rappresentano elementi predefiniti nel componente:
  
  • "search" - crea un componente di ricerca
  • "refresh" - crea un bottone per l'aggiornamento dei dati
  • "menu" - crea un bottone per l'apertura del menu
  • "dmProfileInsert" - crea un bottone per l'inserimento di un profilo
  • "export" - crea un bottone per l'esportazione dei dati
  • "searchBox" - crea una textBox per la ricerca di dati nel componente (richiede che siano state configurate le filterOptions)
  In alternativa è possibile definire un elemento personalizzato, come nell'esempio seguente:

  {
      widget: "dxButton", //tipologia di componente
      location: 'after', //posizione
      options: {
          text: "Button Text",
          onClick: function (e) {
              //todo
          }
      }
  }
                  

filterOptions

Type: filterOptions
Default: { }

Permette di configurare su quali campi effettuare dei filtri client-side.
Il filtro è applicabile dall'elemento di ricerca ('search'), oppure tramite il metodo 'filter' del componente.

• fieldIds: [1,2,3]
  
• fieldExternalIds: ["campo1","campo3"]
  

elementEvents

Type: elementAction
Default: [ ]

Permette di definire delle operazioni che verranno eseguite in seguito ad eventi sugli elementi del Repeater.
Ad esempio, l'azione di apertura di una maschera di aggiornamento di profilo al click di un elemento.
Le azioni supportate sono:

• dmProfileView
• dmProfileUpdate

L'oggetto da inserire nell'array elementEvents è strutturato nel seguente modo:

{
    "name": "dmProfileView", //nome della action da utilizzare
    "event": "tileClick", //evento del Repeater per il quale scatenare l'azione
    "options": { //eventuali opzioni dell'azione
        "idMask": "9fceb20b-4acd-4ce2-ac12-5e590f622e69",
        "popupOptions": {
            "width": "80%",
            "height": "80%",
            "title": "test"
        }
    }
}

grouping

Type: object
Default: { enabled: false }

Contiene le informazioni riguardo il raggruppamento dei dati

• enabled
  Indica se il raggruppamento è abilitato
• hideIfOnlyOne
  Indica se nascondere il raggruppamento in caso sia presente solo un gruppo
• skipEmptyValues
  Indica se ignorare i valori di raggruppamento nulli
• fieldId
  Indica l'id del campo sul quale effettuare il raggruppamento
• groupHeaderTemplate
  Indica la struttura che il componente deve utilizzare per visualizzare graficamente ogni singolo raggruppamento.
  Esistono due template, groupHeaderTemplate e groupFooterTemplate, rispettivamente per header e footer di ogni elemento di raggruppamento. Chiavi HTML:
  
  • '<D: {Title} :>' per ottenere il valore del raggruppamento
  • '<D: {ItemsCount} :>' per ottenere il totale dei profili presenti nel raggruppamento
  
  Chiavi JS:
  Alla funzione, viene passato un oggetto contenente diverse informazioni sul raggruppamento, fra cui:
  • title: titolo del raggruppamento
  • objectId: chiave randomica rappresentante il raggruppamento
  • items: array contenente tutti gli oggetti del raggruppamento
  • getItemsCount(): funzione che ritorna la somma degli elementi presenti nel raggruppamento
  
  Esempio:

  groupHeaderTemplate: function(e) {
  	return $("<div>").addClass("testclass").append(
  		$("<h3>").text("" + e.title + " / Somma: " + e.getItemsCount() + ""),
  	);
  }
              

• groupFooterTemplate
  Permette di definire il template da utlizzare per il footer di ogni raggruppamento. Per la sua configurazione, vedi 'groupHeaderTemplate'

applyProfilesFilter

Type: Function
Ritorno: DM.Entities.Profile[]

Permette di filtrare client-side il Repeater, a differenza del metodo 'applySearchText' che permette di filtrare sui campi definiti nelle filterOptions, questa implementazione accetta una funzione di callback che verrà richiamata per ogni profilo.
Esempio:

let profiliRimasti = repeaterInstance.applyProfilesFilter(function(profile){ profile.getFieldValueByExternalId('Importo', 0) > 0 })

profileSelectionChanged

Parametri: e

Evento scatenato al cambio di selezione di elementi del Repeater.
L'evento mette a disposizione un parametro contenente le informazioni dei profili selezionati.

• instance: istanza del componente Repeater
• selectedElements: lista degli elementi HTML selezionati
• profiles: lista dei profili selezionati (DM.Entities.Profile)

repeaterInstance.on('profileSelectionChanged', function(e){
    console.log(e);
})

tileClick

Parametri: e

Evento scatenato al click di un elemento del Repeater.
L'evento mette a disposizione un parametro contenente le informazioni del profilo associato all'elemento cliccato.

• instance: istanza del componente Repeater
• element: elemento HTML cliccato
• data: profilo (DM.Entities.Profile) cliccato
• key: chiave (objectId) dell'elemento cliccato
• event: oggetto contenente le informazioni originali dell'evento javascript scatenato

repeaterInstance.on('tileClick', function(e){
    console.log(e);
})

tileDblClick

Parametri: e

Evento scatenato al doppio click di un elemento del Repeater.
L'evento mette a disposizione un parametro contenente le informazioni del profilo associato all'elemento cliccato.

• instance: istanza del componente Repeater
• element: elemento HTML cliccato
• data: profilo (DM.Entities.Profile) cliccato
• key: chiave (objectId) dell'elemento cliccato
• event: oggetto contenente le informazioni originali dell'evento javascript scatenato

repeaterInstance.on('tileCblClick', function(e){
    console.log(e);
})