Aggiunta di azioni personalizzate alla barra degli strumenti della griglia
È possibile definire azioni personalizzate da visualizzare sulla barra degli strumenti della griglia.
Panoramica
• Pulsante
• Elenco a discesa
• Link
• Pulsante interruttore
Configurazione di azioni personalizzate per la barra degli strumenti del widget Griglia
1. In Composer creare un servizio dati che restituisca un'infotable contenente i dati necessari per le definizioni delle azioni. Per ulteriori informazioni sui formati di dati supportati, vedere Esempio di configurazione della barra degli strumenti.
2. In Mashup Builder aggiungere il servizio al mashup utilizzando il pannello Dati.
3. Associare l'infotable del servizio alla proprietà ToolbarActions del widget Griglia. Nel pannello Proprietà sono elencate proprietà aggiuntive per le azioni personalizzate.
4. Nel pannello Proprietà configurare le azioni della barra degli strumenti. Per creare associazioni di widget interne, utilizzare la finestra di dialogo di configurazione delle associazioni.
5. Fare clic su Salva e quindi su Visualizza mashup.
Proprietà delle azioni personalizzate
Nella tabella che segue sono elencate le proprietà per ogni tipo di azione personalizzata che è possibile aggiungere al widget Griglia.
|
Tipo di azione
|
Nome proprietà/evento
|
Descrizione
|
Esempio
|
|---|---|---|---|
|
Pulsante
|
<actionId>_Clicked
|
Evento che viene attivato quando si fa clic sul pulsante.
|
Button1_Clicked
|
|
<actionId>_Disabled
|
Disattiva il pulsante sulla barra degli strumenti.
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
Controlla la visibilità del pulsante sulla barra degli strumenti.
|
Button1_Visible
|
|
|
Elenco a discesa
|
<actionId>_Disabled
|
Disattiva l'elenco a discesa sulla barra degli strumenti.
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
Questa proprietà associabile consente di impostare e recuperare il valore del testo selezionato nell'azione elenco a discesa.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
Evento che si attiva quando l'elemento selezionato nell'elenco a discesa viene modificato.
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
Controlla la visibilità dell'elenco a discesa sulla barra degli strumenti.
|
Dropdown1_Visible
|
|
|
Link
|
<actionId>_Disabled
|
Disattiva il link sulla barra degli strumenti.
|
Link1_Disabled
|
|
<actionId>_Visible
|
Controlla la visibilità dell'azione link sulla barra degli strumenti.
|
Link1_Visible
|
|
|
Pulsante interruttore
|
<actionId>_Disabled
|
Disattiva il pulsante interruttore sulla barra degli strumenti.
|
Toggle1_Disabled
|
|
<actionId>_State
|
Questa proprietà associabile consente di impostare e recuperare lo stato dell'azione pulsante interruttore.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
Evento che si attiva quando lo stato del pulsante interruttore viene modificato.
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
Controlla la visibilità dell'azione pulsante interruttore sulla barra degli strumenti.
|
Toggle1_Visible
|
Esempio di creazione di un servizio per configurare le azioni personalizzate per la barra degli strumenti della griglia
Nell'esempio seguente viene illustrato un servizio che crea le azioni personalizzate indicate di seguito sulla barra degli strumenti della griglia:
• Un elenco a discesa che controlla l'altezza di riga.
• Un pulsante interruttore che controlla la visibilità dei numeri di riga.
• Un pulsante di esportazione per esportare le righe selezionate sulla griglia.
In Composer creare un servizio dati che restituisca un'infotable con i dati necessari per le azioni personalizzate. Per ulteriori informazioni sui formati di dati supportati, vedere Definizione delle azioni della barra degli strumenti mediante un'infotable.
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
infoTableName : "InfoTable",
dataShapeName : "ToolbarAction"
});
// Dropdown start
result.AddRow({
actionId: "DD1",
actionType: "dropdown",
actionLabel: "Row Height",
actionTooltip: "Change row height",
actionDisabled: false,
actionVisible: true,
dropdownData: [{label:"36 px", value: "36"}, {label:"48 px", value: "48"}, {label:"64 px", value: "64"}],
actionMaxWidth: 200,
dropdownHintText: "Select..."
});
// Dropdown end
// Toggle start
result.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Show Row Numbers",
actionTooltip: "Adds a column that shows row numbers.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'right',
actionMaxWidth: 200
});
// Toggle end
// Button start
result.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Export",
actionTooltip: "Export the selected rows data.",
actionDisabled: false,
actionVisible: true,
buttonType: "primary",
actionMaxWidth: 100
});
// Button end
In Mashup Builder creare le associazioni riportate di seguito.
• Per controllare l'altezza delle righe della griglia, associare la proprietà dell'elenco a discesa SelectedText a una funzione Espressione che converta il tipo di base stringa in un numero. È quindi possibile associare l'output della funzione alla proprietà MinRowHeight della griglia.
• Per controllare la visibilità dei numeri di riga, associare la proprietà T1_State del pulsante interruttore alla proprietà ShowRowNumbers della griglia.
• Per visualizzare il pulsante di esportazione quando sono selezionate delle righe, associare la proprietà RowsSelected della griglia alla proprietà B1_Visible del pulsante.
Per ulteriori informazioni sulle opzioni di configurazione disponibili per le azioni personalizzate, vedere Esempio di configurazione della barra degli strumenti.