Loading
Utilizar el sistema de diseƱo de Newport

Usted estĆ” aquĆ­:

  1. Ayuda de Salesforce
  2. Documentos
  3. Omnistudio

Utilizar el sistema de diseƱo de Newport

El Sistema de diseƱo de Newport le permite personalizar el aspecto y el comportamiento de elementos de OmniScript. Newport incluye Storybook.js, una herramienta de vista previa basada en navegador, que le permite ver sus cambios de diseƱo en acciĆ³n.

Antes de comenzar

Si no estĆ” familiarizado con el uso de interfaces de lĆ­nea de comandos, consulte la guĆ­a LĆ­nea de comandos 101.

Requisitos del sistema:

Instale el Sistema de diseƱo de Newport:

  1. Duplique el repositorio vlocityinc/newport-design-system desde GitHub utilizando una interfaz de lƭnea de comandos. Para ver quƩ componentes proporciona Newport, compruebe el contenido del directorio UI/componentes.
  2. Cambie su directorio actual a newport-design-system: 
    cd newport-design-system
  3. Para trabajar con la versiĆ³n correcta del paquete de Salesforce, cambie a la sucursal correspondiente: 
    git checkout release_version
  4. Instale las dependencias: 
    npm install
  5. Inicie la vista previa de Storybook.js: 
    npm start
  6. Utilice la vista previa de Libro de cuentos para revisar los componentes y configuraciones disponibles.
  7. Agregue personalizaciones a su tema. Consulte Personalizar sus OmniScripts utilizando el Sistema de diseƱo Newport.
  8. Aplique sus personalizaciones a OmniScripts individuales o de forma global en toda su organizaciĆ³n. Consulte Implementar y aplicar cambios de estilo globales utilizando el Sistema de diseƱo Newport.

Personalizar sus OmniScripts utilizando el sistema de diseƱo Newport

Para personalizar el aspecto de sus OmniScripts, modifique los archivos CSS y HTML en el subdirectorio de la interfaz de usuario del directorio donde duplicĆ³ Newport.

Los temas se almacenan en la carpeta design-tokens. Para crear un nuevo tema para sus OmniScripts:

  1. Copie la carpeta vlocity-newport-skin a una nueva carpeta.
  2. Modifique los archivos de la nueva carpeta segĆŗn sea necesario.
  3. Para cambiar el esquema de colores, modifique los archivos color.yml. Los colores se definen utilizando cĆ³digos RGB hexadecimales o tokens que se resuelven en valores hexadecimales, que se definen en el archivo alias/color.yml.
    Por ejemplo, para cambiar el color de un componente especĆ­fico, como el subrayado naranja del elemento de entrada:
    1. Edit design-tokens/vlocity-newport-skin/background-color.yml.
    2. Actualice COLOR_BORDER_INPUT_ACTIVE a un token de color diferente definido en /alias/color.yml. Cuando cambia de color, los componentes de Newport se vuelven a compilar, de modo que hay un ligero retraso antes de que sus cambios se reflejen en el Visor previo. Para verificar su cambio, vea el componente de entrada utilizando el Visor previo.

      Para una representaciĆ³n Ć³ptima en todas las plataformas, establezca la anchura de control en 6. Las anchuras mĆ”s pequeƱas podrĆ­an no representarse correctamente en cada plataforma.

  4. Para realizar una vista previa del efecto de los estilos de Newport Design System en un OmniScript:
    1. Modifique la ConfiguraciĆ³n de secuencias de comandos y pegue la ruta al archivo CSS de nivel superior (de forma predeterminada, xxx.css) en el campo PLANTILLAS HTML PERSONALIZADAS.
      Newport Previewer le permite ver cĆ³mo se representan los componentes en escritorios, tablets y smartphones.
    2. Para realizar una vista previa de un elemento o utilidad, selecciĆ³nelo de las listas del panel izquierdo. Para ver el cĆ³digo detrĆ”s, haga clic en </>.
    3. Para navegar por la jerarquĆ­a de componentes, utilice el Ć”rbol de restricciĆ³n, que muestra definiciones de elementos desde implementaciones base a derivadas.
    4. Para ver una definiciĆ³n especĆ­fica, haga clic en el nodo correspondiente en el Ć”rbol de restricciĆ³n.

Implementar y aplicar cambios de estilo globales utilizando el Sistema de diseƱo de Newport

Aplique modificaciones al Sistema de diseƱo de Newport agregando un recurso estƔtico que sustituya el tema de Newport siempre que estƩ disponible. DespuƩs de cargarse, los cambios se aplican a todos los OmniScripts que estƔn en el Sistema de diseƱo de Newport.

  1. Descargue el Sistema de diseƱo de Newport. Consulte Aplicar marca global a OmniScripts.
  2. Cree una carpeta de distribuciĆ³n con sus cambios emitiendo este comando: npm run-script dist
  3. En versiones anteriores a Vlocity Spring '19, cambie (cd) a la carpeta dist y comprima su contenido. (No comprima la carpeta dist de nivel superior: cd en Ć©l y comprimir su contenido.)
  4. En Salesforce, cargue el archivo zip como un recurso estƔtico.
  5. En su organizaciĆ³n de Salesforce, vaya a ConfiguraciĆ³n y, en el cuadro BĆŗsqueda rĆ”pida, ingrese ConfiguraciĆ³n personalizada.
  6. Busque UISettings, haga clic en Gestionar &gt; Nuevo .
  7. Configure estos parƔmetros:
    • Nombre: Ingrese newportZipUrl para aplicar los cambios.
    • Clave: Ingrese un nombre personalizado.
    • Value: Ingrese la URL relativa del recurso estĆ”tico que contiene sus estilos personalizados. Para obtener esta URL, vaya a Recurso estĆ”tico (consulte 4 en la secciĆ³n Antes de empezar), pase el ratĆ³n sobre el vĆ­nculo Ver archivo, haga clic con el botĆ³n derecho del ratĆ³n y copie la URL. Ingrese la URL relativa despuĆ©s del nombre de dominio, eliminando la cadena de consulta (signo de interrogaciĆ³n) al final, dejando solo la ruta relativa. Por ejemplo, el texto en negrita se copiarĆ­a en esta URL: https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?
  8. Para activar el tema Libro de cuentos de Newport o Newport en un OmniScript, abra un OmniScript y seleccione Newport o Newport Storybook desde el menĆŗ desplegable en la pĆ”gina Vista previa o el lienzo del diseƱador.

Tras seleccionar el tema Newport en el lienzo de Designer, el OmniScript aparece automƔticamente en el tema Newport cuando se realiza una vista previa. El cambio a Lightning en la pƔgina de vista previa muestra el OmniScript en el tema Lightning en el lienzo de Designer.

Nota
Nota

Al crear una nueva versiĆ³n de un OmniScript creado originalmente con el tema Newport, la nueva versiĆ³n se abre en el lienzo del diseƱador con el tema Lightning seleccionado de forma predeterminada.

 
Cargando
Salesforce Help | Article