Hinzufügen von Spalten und Aktionen zu vorhandenen Tabellen

1. JSON-Objektname: Der JSON-Hauptteil enthält eindeutig definierte Objekte, die verschiedenen Tabellen zugeordnet werden. Um die Objektnamen zu finden, die in der JSON-Datei verwendet werden sollen, können Sie die Protokollnachrichten in der Browserkonsole überprüfen, während Sie durch die Benutzerschnittstelle navigieren. Suchen Sie nach der Nachricht initializeTable , um den Objektnamen anzuzeigen. Das folgende Snippet zeigt beispielsweise den Objektnamen order-table , wenn Sie sich auf der Suchergebnisseite für abgehende Bestellungen befinden.

   Time since init (ms): 9334.
   Log type: LOG.
   Log generator: common-components.
   Message: BaseTableComponent.initializeTable():  Initializing configuration for order-table

2. Objektattribute: Jedes Objekt benötigt eine Gruppe definierter Attribute.

   Name

   (Erforderlich) Eine obligatorische eindeutige Kennung der Tabelle.

   Aliasnamen

   (Optional) Wenn Sie dieselbe angepasste Tabellenkonfiguration auf mehrere Tabellen anwenden möchten, müssen Sie die anderen Tabellenobjektnamen angeben.

   tokenId

   (Optional) Eine Token-ID für einen angepassten Service, die erforderlich ist, um der Tabelle angepasste bearbeitbare Spalten hinzuzufügen

   Kopfbereiche

   Die Liste der Header in der Tabelle. Jeder Header kann die folgenden Attribute enthalten:

   Headerbeschreibung

   Attribut	Beschreibung
   ID	Die eindeutige ID der Spalte.
   Name	Der Text, der in der Spaltenüberschrift angezeigt werden soll Wenn Text übersetzt ist, können Sie die Übersetzungsdateien zum Ordner i18n hinzufügen und auf die Bezeichnung verweisen. Beispiel: "name": "CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE", Das Beispiel ruft den anzuzeigenden Text aus dem i18n -Ordner ab und sucht das Attribut, das mit CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE.
   dataBinding	Das Attribut, das aus der API-Antwort abgerufen und in der Spalte angezeigt werden soll Das Attribut muss in getPage-templates.jsonvorhanden sein. Aktualisieren Sie die Datei, wenn das Attribut nicht vorhanden ist. Weitere Informationen finden Sie unter API getPage zum Abrufen zusätzlicher Daten konfigurieren. Hinweis: Wenn Sie das Attribut formatter verwenden, lassen Sie dieses Attribut dataBinding weg.
   fixiert	Boolescher Wert. Ja Die Spalte kann in den Einstellungen auf Benutzerebene nicht über die Standardtabellenkonfigurationsoptionenneu angeordnet oder entfernt werden. Eine feste Spalte wird auch als default markiert. Falsch Die Spalte kann von jedem Benutzer auf Benutzerebene über die Standardtabellenkonfigurationsoptionenneu angeordnet oder entfernt werden. Der Standardwert lautet "False".
   Standard	Boolescher Wert, der angibt, ob diese Spalte als Teil der Standardkonfiguration angezeigt wird (standardmäßig sichtbar). Der Standardwert ist 'true'.
   sortable	Boolescher Wert, der angibt, ob diese Spalte sortierbar ist. Der Standardwert ist 'true'.
   sortKey	Der Schlüssel, nach dem sortiert werden soll, wenn die Spalte sortiert werden kann.
   SORTED	Boolescher Wert, der angibt, ob diese Spalte standardmäßig sortiert wird. Bei 'true' wird sortKey zum Sortieren der Daten verwendet. Der Standardwert lautet "False".
   Stil	(Optional) Das CSS, das auf die Tabellenspalte angewendet werden soll Beispiel: { "min-width": "100px" }
   Sequenz	(Optional) Die absolute Position der angepassten Spalte in der Tabelle ab 1. Wenn die angegebene Position eine feste Spalte enthält, wird diese Spalte an die nächste nicht feste Position in der Tabelle verschoben. Falls nicht definiert, wird die angepasste Spalte am Ende der Tabelle hinzugefügt.
   Formatierungsprogramm	Formatieren Sie die Daten in der Spalte. Jedes Formatierungsprogramm ist ein Objekt mit unterschiedlichen Eigenschaften. Die Eigenschaft type gibt den Typ des Formatierungsprogramms an. Unterstützte Typwerte sind currency, dateTimeund quantity. Zur Verwendung des Attributs formatter müssen Sie das Attribut dataBinding weglassen und stattdessen die Bindung im Attribut formatter.value angeben. Typ: Währung value: Das Attribut, das aus der API-Antwort abgerufen und in der Spalte angezeigt werden soll. currencyCode: (Optional) Der Währungscode, der beim Formatieren des Werts verwendet wird Der Währungscode wird auch aus einer Eigenschaft in der API-Antwort abgerufen. Beispiel: "formatter": { "type": "currency", "value": "PriceInfo.TotalAmount", "currencyCode": "PriceInfo.Currency" } Typ: dateTime value: Das Attribut, das aus der API-Antwort abgerufen und in der Spalte angezeigt werden soll. dateFormat: (Optional) Das zu verwendende Datenformat. Formatierungsoptionen finden Sie in der Bibliothek von Moment JS. Der Standardwert ist L LT. Beispiel: "formatter": { "type": "dateTime", "value": "PriceInfo.ReportingConversionDate", "dateFormat": "L" } Typ: Menge value: Das Attribut, das aus der API-Antwort abgerufen und in der Spalte angezeigt werden soll. Beispiel: "formatter": { "type": "quantity", "value": "OrderedQty" }
   isEditable	Boolescher Wert, der angibt, ob diese Spalte bearbeitbar ist. Der Standardwert ist 'true'. Hinweis: Stellen Sie sicher, dass die Spalte bearbeitbar ist: Bearbeiten von Spalten zu vorhandenen Tabellen hinzufügen.
   fieldConfig	Feldkonfigurationen für bearbeitbare Spalten. Nur anwendbar, wenn isEditable auf 'true' gesetzt ist Beispiel: "fieldConfig": { "type": "dropdown", "invalidText": " invalidText ", "helperText": " helperText " } Hinweis: Stellen Sie sicher, dass die Spalte bearbeitbar ist: Bearbeiten von Spalten zu vorhandenen Tabellen hinzufügen.
   Optionen	Optionen für bearbeitbare Spalten. Nur anwendbar, wenn isEditable auf 'true' gesetzt ist Beispiel: "options": { "fetch": { "api": "getPaymentStatusList", "type": "oms", "parameters": {}, "response": { "listAttribute": "PaymentStatus", "map": { "id": "CodeType", "label": "Description" } } } } Hinweis: Stellen Sie sicher, dass die Spalte bearbeitbar ist: Bearbeiten von Spalten zu vorhandenen Tabellen hinzufügen.

   toolbarActions

   Fügen Sie Aktionen zur Symbolleiste hinzu, wenn ein Benutzer ein Kontrollkästchen in der Tabelle auswählt. Jede toolbarAction kann die folgenden Attribute enthalten.

   Attribut	Beschreibung
   ID	Die eindeutige ID der angepassten Aktion.
   Elem	Der Elementtyp. Immer auf "button"gesetzt.
   Typ	Der Stil der Schaltflächenvariante, wie im Carbon-Designsystembeschrieben. IBM verwendet "primary" für Symbolleistenaktionen.
   Wert	Der Text, der in der Aktionsbeschriftung angezeigt werden soll Wenn Text übersetzt ist, können Sie die Übersetzungsdateien zum Ordner i18n hinzufügen und auf die Bezeichnung verweisen. Beispiel: "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Optional) Die Ressourcenberechtigungs-ID, die ausgewertet werden soll, wenn festgestellt wird, ob ein Benutzer Zugriff auf diese Aktion hat. Ein Administrator kann Applications Manager verwenden, um die Ressourcenberechtigungs-ID zu definieren und den Zugriff von Benutzergruppen zuzulassen oder zu verweigern. Weitere Informationen finden Sie unter Ressourcenberechtigungen für angepasste Seiten und Aktionen erstellen.
   Metadaten	Fügen Sie Metadaten für die Aktion hinzu. angepasst Legen Sie immer "wahr" fest, um anzugeben, dass Sie eine benutzerdefinierte Aktion hinzufügen. actionTargetType Gültige Werte sind "internal" oder "external". Steuert, ob die Route in demselben Paket/Repository (intern) oder in einem separaten Paket/Repository (extern) definiert ist. actionTarget Die angepasste Route, die bestimmt, was geschieht, wenn der Benutzer auf diese Aktion klickt contextColumnIds Eine durch Kommas getrennte Liste mit Spalten-IDs, die als Parameter an die Route übergeben werden. Die Spalten-IDs und ihre Spaltenwerte werden an die Route übergeben.
   iconTemplate	(Optional) Fügen Sie dem Text ein Symbol hinzu. IBM stellt eine Gruppe von Symbolen im buc-common-components.jarbereit. Jedes Symbol verfügt über eine definierte bucTemplate -Zeichenfolge, die Sie in der Datei icon-templates.component.html finden. Geben Sie die bucTemplate -Zeichenfolge an, die dem Symbol entspricht, das verwendet wird.

   overflowMenuActions

   Fügen Sie Aktionen hinzu, wenn ein Benutzer das Überlaufmenü für eine Zeile auswählt. Jede Überlaufmenüaktion kann die folgenden Attribute enthalten.

   Attribut	Beschreibung
   ID	Die eindeutige ID der angepassten Aktion.
   Bezeichnung (Label)	Der Text, der in der Aktionsbeschriftung angezeigt werden soll Wenn Text übersetzt ist, können Sie die Übersetzungsdateien zum Ordner i18n hinzufügen und auf die Bezeichnung verweisen. Beispiel: "value": "CUSTOM_ORDER.TABLE.TOOLBARACTION.VALUE",
   resourceId	(Optional) Die Ressourcenberechtigungs-ID, die ausgewertet werden soll, wenn festgestellt wird, ob ein Benutzer Zugriff auf diese Aktion hat. Ein Administrator kann Applications Manager verwenden, um die Ressourcenberechtigungs-ID zu definieren und den Zugriff von Benutzergruppen zuzulassen oder zu verweigern. Weitere Informationen finden Sie unter Ressourcenberechtigungen für angepasste Seiten und Aktionen erstellen.
   Metadaten	Fügen Sie Metadaten für die Aktion hinzu. angepasst Legen Sie immer "wahr" fest, um anzugeben, dass Sie eine benutzerdefinierte Aktion hinzufügen. actionTargetType Gültige Werte sind "internal" oder "external". Steuert, ob die Route in demselben Paket/Repository (intern) oder in einem separaten Paket/Repository (extern) definiert ist. actionTarget Die angepasste Route, die bestimmt, was geschieht, wenn der Benutzer auf diese Aktion klickt contextColumnIds Eine durch Kommas getrennte Liste mit Spalten-IDs, die als Parameter an die Route übergeben werden. Die Spalten-IDs und ihre Spaltenwerte werden an die Route übergeben.

{
    "order-table": { //Add new columns to the outbound order search results table
        "name": "order-table",
        "aliases": [
            "inbound-order-table" //Add the same columns to the inbound order search results table
        ],
        "headers": [
            {    // 1  Add Customer zip code column
                "id": "customerZipCode",  //A unique ID for the column
                "name": "CUSTOM_ORDER.SEARCH.CUSTOMER_ZIP_CODE", //Retrieves the display name from the language files in the /i18n/ folder
                "sortKey": "CustomerZipCode",  //When sorting, sort by this key
                "dataBinding": "CustomerZipCode",  //Get the CustomerZipCode from the API response. CustomerZipCode must be defined in the getPage-templates.json
                "sequence": 1, //Put at column 1. In this case, Order number is fixed by IBM at column 1, so this moves to column 2.
                "default": true,  //Visible by default. Also, since "fixed" is not defined, users can remove this column in the UI 
                "sorted": true, //Sort by zip code first
                "style": {      //Set minimum column width to 100px
                    "min-width": "100px"
                }
            },
            {   // 2  Add Customer phone no column
                "id": "customerPhoneNo",
                "name": "Customer phone no",
                "sortKey": "CustomerPhoneNo",
                "dataBinding": "CustomerPhoneNo",
                "sequence": 2,
                "sorted": true  //This column is sequence is 2 so the data is sorted by customerZipCode first (sequence 1) and then customerPhoneNo
            }
            {   // 3  Add Draft order column
                "id": "draftOrder",
                "name": "CUSTOM_ORDER.SEARCH.DRAFT_ORDER",
                "sortKey": "DraftOrderFlag",
                "dataBinding": "DraftOrderFlag",
                "sequence": 3,
                "sortable": false,  //Draft column cannot be sorted
                "fixed": true // 5  Column cannot be removed or reordered by user
            },
            {   // 4  Format currency to display the code instead of symbol
                "id": "total",
                "name": "Amount",
                "sortKey": "PriceInfo.TotalAmount",
                "sorted": true,
		   "formatter": {
			"type": "currency",
			"value": "PriceInfo.TotalAmount",
			"currencyCode": "PriceInfo.Currency",
			"display": "code"     
		},
              {   // Sample custom header with "isEditable" as true and values provided for "fieldConfig" and "options":
                "id": "lineType",
                "name": "Line type",
                "sortable": false,
                "isCustom": "true",
                "isEditable": "true",
                "style": {
                    "min-width": "8rem"
                },
                "fieldConfig": {
                  "type": "dropdown",
                  "invalidText": " invalidText ",
                  "helperText": " helperText "
                },
                "options": {
                  "fetch": {
                    "api": "getPaymentStatusList",
                    "type": "oms",
                    "parameters": {},
                    "response": {
                    "listAttribute": "PaymentStatus",
                    "map": {
                    "id": "CodeType",
                    "label": "Description"
                }
            }
          }
        }
      }
        ],
        "toolbarActions": [
            {   // 6  Custom toolbar action
                "id": "myCustomToolbarAction1", //Custom ID 
                "elem": "button",  //Always use "button"
                "type": "primary", //The button variant as defined in the Carbon design system
                "value": "CustomAction1",
                "resourceId": "",
                "iconTemplate": "editIconTemplate", //Include an Edit icon (pencil) next to the text value.
                "metadata": {
                    "custom": "true",
                    "actionTargetType": "external",
                    "actionTarget": "/customRoute",
                    "contextColumnIds": "customerZipCode,customerPhoneNo,total" //pass these values as parameters to the route
                }
            }
        ],
        "overflowMenuActions": [
           {    // 7  Custom overflow action
                "id": "myCustomOverflowAction1",
                "label": "CustomAction1",
                "resourceId": "",
                "metadata": {
                    "custom": "true",
                    "actionTargetType": "external",
                    "actionTarget": "/customRoute",
                    "contextColumnIds": "customerZipCode,customerPhoneNo,total"
                }
            }
        ]
    }
}