Creando elfeatures.json archivos

Después de crear una nueva aplicación, se crean los archivos features.json que añaden elementos de menú para la nueva aplicación al menú de navegación principal.

Acerca de esta tarea

Necesitas crear dos versiones delfeatures.json archivo. Se utiliza una versión de archivo para fines de desarrollo y otra versión de archivo para implementar la aplicación. Los archivos son idénticos, con dos excepciones.
  • El valor que usted define en el navegación > ruta > enlace La propiedad difiere entre las versiones del archivo de desarrollo y de implementación.
  • El directorio donde coloca el archivo para el desarrollo y la implementación local es diferente. Coloca el archivo de desarrollo local en eldevtoolkit_docker/orderhub-code/shell-ui/assets/dev directorio. Coloque el archivo de implementación en eldevtoolkit_docker/orderhub-code/shell-ui/assets directorio.
Después de crear un archivo features.json para fines de desarrollo, puede hacer una copia del archivo y, a continuación, realizar los cambios necesarios para la versión de implantación.

Procedimiento

Repositorio mono/repositorio angular: configuración

  1. En el directorio orderhub-code , cree la siguiente estructura de directorios.
    mkdir -p devtoolkit_docker/orderhub-code/shell-ui/assets/dev
  2. En el directorio shell-ui/assets/dev , cree un archivo features.json .
    Este archivo contiene una serie de funciones, cada una de las cuales representa una opción de menú en la barra de navegación izquierda del shell. Defina cada característica utilizando las siguientes propiedades.
    Icono de
    Nombre del icono. Puede encontrar la lista de iconos aceptables en el archivo /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg dentro del contenedor om-orderhub-base Docker.
    iconForRailStateOnly (opcional)
    Verdadero/falso - muestra sólo el icono del menú cuando éste se colapsa. El valor predeterminado se establece en falso.
    ID
    Un identificador único de la función para distinguir las funciones personalizadas de las funciones proporcionadas con el producto. Anteponga el ID concustom .
    navegación
    Describe cómo navegar a esta función.
    direccionar
    El objeto de ruta contiene dos propiedades.
    enlace
    La URL para iniciar la página de la función como un IFRAME. El valor que se especifica aquí depende del modo en que se ejecuta el contenedor.
    • Cuando ejecuta Order Hub desde su entorno de desarrollo local, el valor es una URL absoluta con un nombre de dominio completo. Por ejemplo, si el servidor de desarrollo del repositorio personalizado está configurado para servir la interfaz de usuario en el puerto9600 , entonces el valor se establece enhttps://localhost:9600/<base href>/<path to the page> suponiendo que el servidor de desarrollo del repositorio se esté ejecutando localmente.

      Colocar el expediente de desarrollo local en el<path to orderhub code directory>/shell-ui/assets/dev directorio.

    • Cuando cree el archivo para la implementación, establezca el valor en/order-management-customization/<base-href>/<path to the page> . Elbase-href representa el href base que se utiliza para construir el repositorio Angular.

      Coloque el archivo de implementación en el<path to orderhub code directory>/shell-ui/assets directorio.

    vía de acceso
    Representa la ruta que se utilizará para asociar la interfaz de usuario personalizada con la interfaz de usuario común. Cuando un usuario busca una función personalizada, el valor aparece en la barra de direcciones del navegador. Usar/<base-href>/<path to the page> como el camino.
    parentFeatureId
    La dirección parentFeatureId que se proporciona al añadir la función como submenú del menú existente.
    Puede localizar el valor como unid en elfeatures.json archivo en el contenedor base. Ejecute el siguiente comando para extraer el archivo:
    docker cp om-orderhub-base:/opt/app-root/src/shell-ui/assets/features.json features.json
    secuencia
    El valor sequence que se proporciona para añadir una nueva función o submenú a la navegación. El valor de la secuencia determina dónde aparece la nueva función o submenú en la navegación. Para obtener más información sobre los valores de secuencia, consulte Funciones de posicionamiento en el menú de navegación.
    título
    Título del menú. Este campo apoya la globalización. Para utilizar el servicio de traducción, utilice la clave de propiedad de traducción como valor, por ejemplofeatures.custom-feature-title .
    tipo
    Establezca siempre el valor de tipo en IFRAME.
    Condición de habilitación (opcional)
    Especifica las condiciones cuando la característica está habilitada. Cuando no se especifica, habilita la función para todos los usuarios de forma predeterminada.
    byResourceId
    Los usuarios deben tener acceso a una lista de ID de recursos separados por comas para acceder a la interfaz de usuario.
    oculto
    Una propiedad de opciones que oculta una característica en la cinta. El valor predeterminado es false. Utilice esta propiedad para acceder a hipervínculos dentro de un módulo de interfaz de usuario. Un usuario puede marcar o compartir la función copiando la URL desde un navegador.

    Ver lo siguientefeatures.json ejemplo de archivo para desarrollo.

    devtoolkit_docker/orderhub-code/shell-ui/assets/dev/features.json
    Figura 1. Muestrafeatures.json Para desarrollo
    [
{
  "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"
}
]

    Después de crear su versión de desarrollo del archivo, puede realizar los cambios para la implementación. Consulte el archivo de ejemplo devtoolkit_docker/orderhub-code/shell-ui/assets/features.json para el despliegue.

    devtoolkit_docker/orderhub-code/shell-ui/assets/features.json
    Figura 2. Muestrafeatures.json para implementación
    [
{
  "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. Traducción del título de la función
    Cree los archivos específicos del idioma en el directorio shell-ui/assets/i18n . Los idiomas admitidos de forma predeterminada son los siguientes.
    • 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
    Este archivo sigue la convención estándar de Angular para archivos de traducción. Por ejemplo, si el título de la característica esfeatures.custom-feature-title , entonces la traducción.json el archivo contiene:
    {
  ...,
  "features": {
    "custom-feature-title": "New custom UI"
  },
  ...
}