Personalizzazione per configurazione

Modifica online

È possibile aggiungere nuovi campi in qualsiasi pagina di elenco o di riepilogo aggiungendo un file di configurazione JSON. Non è necessario assumere la proprietà del codice sorgente dell'instradamento completo.

L'applicazione segue il paradigma della pagina di ricerca, elenco e dettagli nella maggior parte dei flussi di business come il ritiro, la confezione e altri flussi di evasione ordini. Le pagine di elenco e dettagli hanno anche un layout UI simile tra i flussi di business. È possibile personalizzare l'elenco e la pagina dei dettagli per mostrare o nascondere i dati.

Ad esempio, le informazioni nella pagina Elenco ordini pacchetto vengono visualizzate in quattro colonne. I pulsanti di azione vengono visualizzati nella quinta colonna. È possibile personalizzare la pagina di elenco e dettagli in base all'approccio di configurazione, se si desidera visualizzare ulteriori dati o nascondere i dati in una di queste colonne.

Il framework di personalizzazione legge la configurazione dalla cartella <store-temp>/extensions/override-static-assets/differential/config che contiene i seguenti file di configurazione:
  • show-widgets-config.json - utilizzare questo file di configurazione per mostrare i dati personalizzati come illustrato nel seguente JSON di esempio:
    [
    {
      "componentID": "PickUpOrder",
      "attributes": [
          {
            "type": "list-label-data",
            "columnId": "1",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IsOverdue"
            },
            "data": {
                "dataBindingPath": "IsOverdue",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_Overdue",
                    "bundleValues": [
                        {
                            "param": "isOverdue",
                            "value": "IsOverdue"
                        }
                    ]
                }
            } 
           },
          {
            "type": "list-label-data",
            "columnId" :"2",
            "label": {
                "bundleKey": "pickOrderList.LABEL_IncludedInBatch"
            },
            "data": {
                "dataBindingPath": "IncludedInBatch",
                "databundleFormatter": {
                    "bundleKey": "pickOrderList.LABEL_IsIncludedInBatch",
                    "bundleValues": [
                        {
                            "param": "includedInBatch",
                            "value": "IncludedInBatch"
                        }
                    ]
                }
            } 
          },
          {
            "type": "list-data",
            "columnId" :"3",
            "data": {
                "dataBindingPath":"ScacAndService"
            },
            "style": "h6-text color-gray-60"
          }
      ]
    },
    {
        "componentID" : "shipmentSummaryDetails",
        "attributes" : [
          {
            "type": "summary-label-data",
            "columnId" :"1",
            "label": {
                "bundleKey": "shipmentSummary.LABEL_OrderPurpose"
            },
            "data": {
                "dataBindingPath": "DocumentType",
                "databundleFormatter": {
                    "bundleKey": "shipmentSummary.LABEL_OrdPurpose",
                    "bundleValues": [
                        {
                            "param": "documentType",
                            "value": "DocumentType"
                        }
                    ]
                }
            }
          },
          {
            "type": "summary-label-data",
            "columnId" :"2",
            "data": {
                "dataBindingPath":"SellerOrganizationName"
            },
            "label": {
                "bundleKey": "shipmentSummary.LABEL_Brand"
            }
          }
        ]
    }
]
  • hide-widgets-config.json - utilizzare questo file di configurazione per nascondere i dati come illustrato nel seguente JSON di esempio:
    [
    {
        "componentID" : "ShipmentDetailsComponent",
        "tids" :[ "ShipmentNoTag", "ShipmentTypeIcon", "ShipmentNo"]
    },
    {
        "componentID":"shipmentSummaryDetails",
        "tids" :["customerInfoPanel"]
    }
]

La seguente tabella descrive gli attributi supportati della specifica JSON:

Tabella 1. Attributi supportati della specifica JSON
Attributo Descrizione
componentID L'ID del componente in cui i dati devono essere visualizzati o nascosti.
attributes Un array di attributi in cui ogni attributo corrisponde ai dati che devono essere visualizzati.
type Il tipo di dati da visualizzare. I valori validi sono list-label-data, list-datae summary-label-data.
  • list-label-data - visualizza la coppia chiave - valore in una pagina di elenco.
  • list-data - visualizza il valore dei dati in una pagina di elenco.
  • summary-label-data - visualizza la coppia chiave - valore in una pagina di riepilogo. Lo stile sarà congruente con altre coppie chiave - valore nella pagina di riepilogo.
columnId Il numero di colonna in cui devono essere visualizzati i dati.

Le informazioni in una pagina di elenco o di riepilogo vengono visualizzate in colonne. Ad esempio, lo stato della spedizione viene visualizzato nella prima colonna. Mentre la data di spedizione prevista viene visualizzata nella terza colonna.
data.dataBindingPath Il xpath del binding che si trova all'interno dell'oggetto entità. Ad esempio, se l'oggetto Shipment mostrato nel seguente codice di esempio deve visualizzare la descrizione del prodotto nell'applicazione, xpath è ItemDetails.PrimaryInformation.Description.
{
  "Shipment": {
    "ItemDetails": {
      "PrimaryInformation": {
        "Description": "test description"
      }
    }
  }
}
label.bundleKey La chiave del bundle dell'etichetta definita nel file en.json .
data.databundleFormatter.bundlekey La chiave del pacchetto dei dati che devono essere formattati utilizzando il file en.json . Utilizzare solo quando i dati devono essere formattati dinamicamente per una voce di bundle.
data.databundleFormatter.bundleValues L'array di coppie parametro - valore utilizzato per la formattazione dei dati.
data.databundleFormatter.bundleValues.param Il nome della variabile all'interno del valore del bundle che deve essere sostituito con i dati effettivi.
data.databundleFormatter.bundleValues.value Il xpath del bind all'interno del modello di entità che deve essere utilizzato per sostituire la chiave nel valore del bundle.
style Le classi CSS che devono essere applicate.