Erstellen derfeatures.json Dateien

Nachdem Sie eine neue Anwendung erstellt haben, erstellen Sie die features.json Dateien, die Menüpunkte für die neue Anwendung zum Hauptnavigationsmenü hinzufügen.

Mono-Repository/Angular-Repository – Einrichtung

1. Erstellen Sie im Verzeichnis orderhub-code die folgende Verzeichnisstruktur.
   mkdir -p devtoolkit_docker/orderhub-code/shell-ui/assets/dev
2. Erstellen Sie im Verzeichnis shell-ui/assets/dev eine Datei features.json .
   Diese Datei enthält eine Reihe von Features, von denen jedes eine Menüoption in der linken Navigationsleiste der Shell darstellt. Definieren Sie jedes Merkmal mit Hilfe der folgenden Eigenschaften.

   Symbol

   Name des Symbols. Die Liste der zulässigen Symbole finden Sie in der Datei /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg im Container om-orderhub-base Docker.

   iconForRailStateOnly (Optional)

   Wahr/Falsch - zeigt nur das Menüsymbol an, wenn das Menü zugeklappt wird. Der Standardwert ist auf „false“ gesetzt.

   ID

   Eine eindeutige Kennung der Funktion, um die benutzerdefinierten Funktionen von den mit dem Produkt bereitgestellten Funktionen zu unterscheiden. Präfixieren Sie die ID mitcustom .

   Navigation

   Beschreibt, wie man zu dieser Funktion navigiert.

   Leitweg

   Das Routenobjekt enthält zwei Eigenschaften.

   Verbindung

   URL zum Starten der Seite der Funktion als IFRAME. Der hier angegebene Wert hängt vom Modus ab, in dem der Container ausgeführt wird.

   • Wenn Sie Bestellzentrum von Ihrer lokalen Entwicklungsumgebung aus ausführen, ist der Wert ein absoluter URL mit einem vollständig qualifizierten Domainnamen. Wenn beispielsweise der Entwicklungsserver des benutzerdefinierten Repositorys so eingestellt ist, dass die Benutzeroberfläche auf Port9600 , dann wird der Wert gesetzt aufhttps://localhost:9600/<base href>/<path to the page> vorausgesetzt, der Entwicklungsserver des Repository wird lokal ausgeführt.

     Platzieren Sie die Datei für die lokale Entwicklung in der<path to orderhub code directory>/shell-ui/assets/dev Verzeichnis.

   • Wenn Sie die Datei für die Bereitstellung erstellen, setzen Sie den Wert auf/order-management-customization/<base-href>/<path to the page> . Derbase-href stellt den Basis-Href dar, der zum Erstellen des Angular-Repositorys verwendet wird.

     Platzieren Sie die Bereitstellungsdatei in der<path to orderhub code directory>/shell-ui/assets Verzeichnis.

   Pfad

   Stellt die Route dar, die verwendet wird, um die benutzerdefinierte Benutzeroberfläche mit der allgemeinen Benutzeroberfläche zu verknüpfen. Wenn ein Benutzer nach einer benutzerdefinierten Funktion sucht, wird der Wert in der Adressleiste des Browsers angezeigt. Verwenden/<base-href>/<path to the page> als Pfad.

   parentFeatureId

   Die parentFeatureId , die zur Verfügung gestellt wird, wenn Sie die Funktion als Untermenü eines bestehenden Menüs hinzufügen.

   Sie finden den Wert alsid imfeatures.json Datei im Basiscontainer. Führen Sie den folgenden Befehl aus, um die Datei zu extrahieren:

   docker cp om-orderhub-base:/opt/app-root/src/shell-ui/assets/features.json features.json

   Sequenz

   Der Wert sequence , der zur Verfügung gestellt wird, um ein neues Merkmal oder Untermenü zur Navigation hinzuzufügen. Der Sequenzwert bestimmt, wo das neue Feature oder Untermenü in der Navigation erscheint. Weitere Informationen zu Sequenzwerten finden Sie unter Positionierungsfunktionen im Navigationsmenü.

   Titel

   Titel des Menüs. Dieses Feld unterstützt die Globalisierung. Um den Übersetzungsdienst zu verwenden, verwenden Sie als Wert den Übersetzungseigenschaftsschlüssel, zum Beispielfeatures.custom-feature-title .

   Typ

   Setzen Sie den Typwert immer auf IFRAME.

   Aktivierungsbedingung (optional)

   Gibt die Bedingungen an, unter denen die Funktion aktiviert ist. Wenn es nicht angegeben ist, wird die Funktion standardmäßig für alle Benutzer aktiviert.

   byResourceId

   Benutzer müssen Zugriff auf eine durch Kommas getrennte Liste von Ressourcen-IDs haben, um auf die Benutzeroberfläche zugreifen zu können.

   verdeckt

   Eine Optionseigenschaft, die eine Funktion auf dem Menüband ausblendet. Der Standardwert ist 'false'. Verwenden Sie diese Eigenschaft, um auf Hyperlinks innerhalb eines UI-Moduls zuzugreifen. Ein Benutzer kann die Funktion als Lesezeichen speichern oder teilen, indem er URL aus einem Browser kopiert.

   Siehe folgendefeatures.json Dateibeispiel für die Entwicklung.

   devtoolkit_docker/orderhub-code/shell-ui/assets/dev/features.json

   [
   {
     "id": "monorepo",
     "title": "Custom Mono Repo",
     "icon": "programs-30",
     "parentFeatureId": "oms-inventory-root",
     "sequence": "10.4011",
     "iconForRailStateOnly": true,
     "navigation" : {
   	"route" : {
   		"link": "https://localhost:9300/custom-monorepo/custom-page1/monorepo/home",
   		"path": "/custom-monorepo/custom-page1/monorepo/home"
   	}
     },
     "type": "IFRAME"
   },
   {
     "id": "angularrepo",
     "title": "Custom Angular Repo",
     "icon": "tool-30",
     "parentFeatureId": "oms-order-hub-l1",
     "sequence": "10.16",
     "navigation" : {
   	"route" : {
   		"link": "https://localhost:4000/custom-angularrepo",
   		"path": "/angularrepo"
   	}
     },
     "enablementCondition": {
          "byResourceId": "BUCWSP"
     },
     "type": "IFRAME"
   }
   ]

   Nachdem Sie Ihre Entwicklungsversion der Datei erstellt haben, können Sie Ihre Änderungen für die Bereitstellung vornehmen. Siehe die devtoolkit_docker/orderhub-code/shell-ui/assets/features.json Beispieldatei für den Einsatz.

   devtoolkit_docker/orderhub-code/shell-ui/assets/features.json

   [
   {
     "id": "monorepo",
     "title": "Custom Mono Repo",
     "icon": "programs-30",
     "parentFeatureId": "oms-inventory-root",
     "sequence": "10.4011",
     "iconForRailStateOnly": true,
     "navigation" : {
   	"route" : {
   		"link": "/order-management-customization/custom-monorepo/custom-page1/monorepo/home",
   		"path": "/custom-monorepo/custom-page1/monorepo/home"
   	}
     },
     "type": "IFRAME"
   },
   {
     "id": "angularrepo",
     "title": "Custom Angular Repo",
     "icon": "tool-30",
     "parentFeatureId": "oms-order-hub-l1",
     "sequence": "10.16", 
     "navigation" : {
   	"route" : {
   		"link": "/order-management-customization/custom-angularrepo",
   		"path": "/angularrepo"
   	}
     },
     "enablementCondition": {
          "byResourceId": "BUCWSP"
     },
     "type": "IFRAME"
   }
   ]

3. Übersetzung des Featuretitels
   Erstellen Sie die sprachspezifischen Dateien im Verzeichnis shell-ui/assets/i18n . Die standardmäßig unterstützten Sprachen sind die folgenden.

   • de.json
   • en.json
   • es.json
   • fr.json
   • it.json
   • ja.json
   • ko.json
   • pl.json
   • pt.json
   • ru.json
   • tr.json
   • zh-Hant.json
   • zh-Hans.json

   Diese Datei folgt der Angular-Standardkonvention für Übersetzungsdateien. Wenn der Titel der Funktion beispielsweise lautet:features.custom-feature-title , dann die Übersetzung.json Die Datei enthält:

   {
     ...,
     "features": {
       "custom-feature-title": "New custom UI"
     },
     ...
   }