Benutzerdefinierte Aktionen zur Raster-Symbolleiste hinzufügen
In ThingWorx 9.4 oder höher können Sie benutzerdefinierte Aktionen definieren, die in der Raster-Symbolleiste angezeigt werden sollen.
Übersicht
• Schaltfläche
• Dropdown
• Link
• Umschaltfläche
Benutzerdefinierte Aktionen für die Symbolleiste des Widgets "Raster" konfigurieren
1. Erstellen Sie in Composer einen Datendienst, der eine Infotable mit den erforderlichen Daten für die Aktionsdefinitionen zurückgibt. Weitere Informationen zu den unterstützten Datenformaten finden Sie unter Beispiel: Muster-Symbolleistenkonfiguration.
2. Fügen Sie den Dienst in Mashup Builder unter Verwendung des Fensterbereichs Daten zum Mashup hinzu.
3. Binden Sie die Dienst-Infotable an die Eigenschaft ToolbarActions des Widgets "Raster". Zusätzliche Eigenschaften für die benutzerdefinierten Aktionen werden im Fensterbereich Eigenschaften aufgelistet.
4. Konfigurieren Sie die Symbolleistenaktionen im Fensterbereich Eigenschaften. Verwenden Sie das Dialogfenster zur Konfiguration von Bindungen, um interne Widget-Bindungen zu erstellen.
5. Klicken Sie auf Speichern und dann auf Mashup anzeigen.
Eigenschaften von benutzerdefinierten Aktionen
In der folgenden Tabelle werden die Eigenschaften für jeden benutzerdefinierten Aktionstyp aufgeführt, den Sie dem Widget "Raster" hinzufügen können.
|
Aktionstyp
|
Eigenschaft/Ereignisname
|
Beschreibung
|
Beispiel
|
|---|---|---|---|
|
Schaltfläche
|
<actionId>_Clicked
|
Ein Ereignis, das beim Klicken auf die Schaltfläche ausgelöst wird
|
Button1_Clicked
|
|
<actionId>_Disabled
|
Deaktiviert die Schaltfläche in der Symbolleiste
|
Button1_Disabled
|
|
|
<actionId>_Visible
|
Steuert die Sichtbarkeit der Schaltfläche in der Symbolleiste
|
Button1_Visible
|
|
|
Dropdown
|
<actionId>_Disabled
|
Deaktiviert die Dropdown-Liste in der Symbolleiste
|
Dropdown1_Disabled
|
|
<actionId>_SelectedText
|
Diese bindbare Eigenschaft ermöglicht es Ihnen, den Wert des ausgewählten Texts in der Dropdown-Aktion festzulegen und abzurufen.
|
Dropdown1_SelectedText
|
|
|
<actionId>_SelectedTextChanged
|
Ein Ereignis, das ausgelöst wird, wenn das ausgewählte Element in der Dropdown-Liste geändert wird
|
Dropdown1_SelectedTextChanged
|
|
|
<actionId>_Visible
|
Steuert die Sichtbarkeit der Dropdown-Liste in der Symbolleiste
|
Dropdown1_Visible
|
|
|
Link
|
<actionId>_Disabled
|
Deaktiviert den Link in der Symbolleiste
|
Link1_Disabled
|
|
<actionId>_Visible
|
Steuert die Sichtbarkeit der Link-Aktion in der Symbolleiste
|
Link1_Visible
|
|
|
Umschaltfläche
|
<actionId>_Disabled
|
Deaktiviert die Umschaltfläche in der Symbolleiste
|
Toggle1_Disabled
|
|
<actionId>_State
|
Diese bindbare Eigenschaft ermöglicht es Ihnen, den Status der Umschaltflächen-Aktion festzulegen und abzurufen.
|
Toggle1_State
|
|
|
<actionId>_StateChanged
|
Ein Ereignis, das ausgelöst wird, wenn der Status der Umschaltfläche geändert wird
|
Toggle1_StateChanged
|
|
|
<actionId>_Visible
|
Steuert die Sichtbarkeit der Umschaltflächen-Aktion in der Symbolleiste
|
Toggle1_Visible
|
Beispiel: Dienst erstellen, um benutzerdefinierte Aktionen für die Raster-Symbolleiste zu konfigurieren
Das folgende Beispiel zeigt einen Dienst, der die folgenden benutzerdefinierten Aktionen in der Raster-Symbolleiste erstellt:
• Eine Dropdown-Liste, die die Zeilenhöhe steuert
• Eine Umschaltfläche, die die Sichtbarkeit von Zeilennummern steuert
• Eine Export-Schaltfläche zum Exportieren ausgewählter Zeilen im Raster
Erstellen Sie in Composer einen Datendienst, der eine Infotable mit den erforderlichen Daten für die benutzerdefinierten Aktionen zurückgibt. Weitere Informationen zu den unterstützten Datenformaten finden Sie unter Symbolleistenaktionen unter Verwendung einer Infotable definieren.
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
Erstellen Sie in Mashup Builder die folgenden Bindungen:
• Binden Sie die Dropdown-Eigenschaft SelectedText an eine Ausdrucksfunktion, die den String-Basistyp in eine Zahl konvertiert, um die Höhe der Rasterzeilen zu steuern. Sie können dann die Ausgabe der Funktion an die Rastereigenschaft MinRowHeight binden.
• Binden Sie die Eigenschaft T1_State der Umschaltfläche an die Rastereigenschaft ShowRowNumbers, um die Sichtbarkeit der Zeilennummern zu steuern.
• Binden Sie die Rastereigenschaft RowsSelected an die Schaltflächeneigenschaft B1_Visible, um die Export-Schaltfläche anzuzeigen, wenn Zeilen ausgewählt sind.
Weitere Informationen zu den verfügbaren Konfigurationsoptionen für benutzerdefinierte Aktionen finden Sie unter Beispiel: Muster-Symbolleistenkonfiguration.