Personalizar vista detallada de entidad
Introducción
Puede personalizar la vista detallada de una entidad de cualquier manera, incluyendo:
- Ocultar pestañas inútiles, renombrar pestañas existentes o añadir nuevas pestañas
- Crea tus propias secciones para agrupar campos nativos y personalizados según tus necesidades.
Para modificar la vista detallada, abra el elemento del menú Configuración de Targetprocess > Vistas detalladas. Aquí encontrarás diseños predeterminados para cada entidad. Estos diseños se describen en formato JSON y contienen la lista de todas las pestañas, secciones, campos y botones, representados como componentes.
Cada entidad tiene su propio diseño predeterminado similar a la antigua vista detallada no personalizable. Siempre puedes restablecer la plantilla predeterminada o desactivar la personalización por completo. Cada plantilla define el diseño para la entidad específica en el proceso concreto (por ejemplo, Características en el proceso «Kanban»).
En este ejemplo, trabajaremos con la entidad Feature en el proceso «Scrum». Para ello, vamos a Configuración de Targetprocess > Vistas detalladas y, a continuación, seleccionamos «Funciones» en el menú desplegable de entidades y «Scrum» en el menú desplegable de procesos. A continuación, activamos la vista personalizable. Se carga el diseño predeterminado.

# Pestañas
Las pestañas se definen en el sections componente. Cada pestaña tiene tres partes:
title(título de la pestaña)titleExtra(contador para el título de la pestaña)component(contenido de la pestaña)
{
"id":"tabs",
"type":"sections",
"location":"tabs",
"sections":[
{
"title":{
"type":"string",
"value":"Relations",
"localize":true
},
"titleExtra":{
"type":"component",
"component":"label.relationCount",
"properties":{
"text":""
},
"componentId":"component_v47vknl"
},
"component":{
"type":"component",
"component":"relations.container",
"properties":{
"name":"relations container"
},
"componentId":"component_0eye9w9"
},
"componentId":"section_nlbsdtj"
},
{
"title":{
"type":"string",
"value":"History",
"localize":true
},
"component":{
"type":"component",
"component":"auditHistory",
"componentId":"component_uovrhva"
},
"componentId":"section_a6ede8w"
}
],
"componentId":"sections_smnpnfl"
}
Cambiar el nombre de una pestaña existente
Para cambiar el nombre de una pestaña, modifique lavalue de la title parte. Cambiemos el nombre de Flow la pestaña a Change Log.{
"title":{
"type":"string",
"value":"Change Log",
"localize":true
},
"component":{
"type":"component",
"component":"auditHistory",
"componentId":"component_uovrhva"
},
"componentId":"section_a6ede8w"
}
Mover una pestaña existente
Movamos la pestaña llamada «Pruebas» al final. Para ello, tomaremos toda la sección y la moveremos al final desections la matriz.

Añadir una nueva pestaña
Traslademos «Lead & Cycle time» a una nueva pestaña. De forma predeterminada, se muestra como un componente plegable:{
"type":"collapsible",
"title":{
"type":"string",
"value":"Lead cycle time",
"localize":true
},
"component":{
"type":"component",
"component":"leadCycleTime",
"properties":{
"evictProperties":[
"leadTime",
"cycleTime"
]
},
"componentId":"component_qkvjg2l"
},
"componentId":"collapsible_x9y2yu3"
},Lo transformaremos en un section componente:{
"title":{
"type":"string",
"value":"Lead cycle time",
"localize":true
},
"component":{
"type":"component",
"component":"leadCycleTime",
"properties":{
"evictProperties":[
"leadTime",
"cycleTime"
]
}
}
}
Eliminar pestaña existente
Eliminemos la pestaña «Prueba»:

Especifique una pestaña que debe abrirse de forma predeterminada
Puedes especificar qué pestaña debe abrirse cada vez que abras una tarjeta añadiendo la propiedad adicional «selected». Configuremos la pestaña «Tareas» para que se abra cada vez que abra la vista detallada de la historia de usuario.
Añadir la pestaña Flujo a la entidad Dominio ampliado
A partir de la versión Targetprocess 2403.3, es posible añadir una pestaña Flujo a las entidades de dominio ampliado.{
"type": "section",
"title": {
"type": "string",
"value": "Flow",
"localize": true
},
"component": {
"type": "component",
"component": "implementationHistory"
}
},
Añadir una página incrustada como pestaña
Puede ver las páginas mediante los enlaces que ha proporcionado en un campo personalizado URL y URL Plantilla como una pestaña adicional en una vista de entidad, de modo que pueda trabajar con las páginas y documentos externos en Targetprocess. Añadamos un campo personalizado «Doc» bajo el objeto «Effort» de la sección «Info» en JSON.
Ahora añadamos una nueva pestaña llamada Google «Doc» después de la pestaña «Relations»: añadamos todo el objeto bajo el objeto «Relations» en JSON.{
"title": {
"type": "string",
"value": "Google Doc"
},
"component": {
"type": "embeddedPage",
"customFieldName": "Doc"
}
}
Vaya a la vista detallada de la función y rellene el campo URL personalizado con un enlace externo (por ejemplo, a un Google documento). ¡Magia! 
Añadir una hoja de ruta (línea temporal) incrustada como pestaña
Es posible añadir Roadmap a la pestaña Vista detallada. Para obtener instrucciones, navegue hasta aquí.Añadir un tablero incrustado como pestaña
No es posible por ahora. No dude en añadir su voto a la idea correspondiente.Añadir tarea / Plantilla de caso de prueba
Este componente le ayuda a crear un conjunto de casos de prueba o tareas y añadirlo inmediatamente a cualquier historia de usuario. Funciona para cualquier proyecto, equipo o proceso. El componente añade una pestaña a la vista Historia de usuario. Desde esta pestaña, puede crear plantillas que contengan tareas o casos de prueba que necesite aplicar a varias historias de usuario. Después de crear la plantilla y las tareas y/o casos de prueba que desea utilizar, puede aplicarlas a cualquier historia de usuario yendo a la pestaña Plantilla y seleccionando Aplicar plantilla. Añade este componente a la entidad «Historia de usuario»:{
"title": {
"type": "string",
"value": "Template",
"localize": true
},
"component": {
"type": "taskTestCaseTemplate"
}
}Añadamos una pestaña «Plantilla» antes de la pestaña «Pruebas»:

Permitir contenido persistente en pestañas
De forma predeterminada, cada vez que cambias a otra pestaña, su contenido se solicita desde el backend. Esta solicitud tarda un poco (poco tiempo) y hace que el sistema te muestre un indicador de carga. Puede desactivar este comportamiento y hacer que el sistema almacene en caché todas las pestañas de la entidad actualmente abierta. Entonces, el contenido de la pestaña se vuelve persistente: cada pestaña solo se solicita una vez; y cuando vuelves a ella después de cambiar a otras pestañas, muestra su contenido inmediatamente, sin volver a solicitarlo ni volver a renderizarlo. Para permitir el contenido persistente de las pestañas, utilice la"cacheOpenedTabs" propiedad en el componente con "type": "sections", que contiene sus pestañas. Establezca la propiedad en "true". (Se considera "false" por defecto){
"id": "tabs",
"type": "sections",
"location": "tabs",
"cacheOpenedTabs": "true",
"sections": [
// YOUR TABS HERE...
]
}Tenga en cuenta que si hay un gran número de listas internas en las pestañas, establecer esta propiedad en "true" puede provocar una carga significativa en las actualizaciones en tiempo real. Si tienes problemas con las actualizaciones en tiempo real o con el rendimiento general de tu navegador o dispositivo, prueba a configurar "cacheOpenedTabs" en "false". # Bloques en la columna derechaEliminar un bloque
Ahora personalicemos el panel derecho de la vista. Para eliminar la sección «Tiempo de ciclo de plomo», simplemente borra todo el objeto con"value": "Lead cycle time".

Añadir un bloque
¿Desea agrupar los campos de fecha en una nueva sección? Para asegurarte de que no pierdes el formato JSON, duplica cualquier sección, por ejemplo, «Info», y asigna un nombre a la nueva sección editando"value": "Info" la cadena. Elimine los campos que no sean útiles para esta sección eliminando todo el objeto relacionado con cada campo del JSON.

Añadir una sección para DevOps Integraciones
Para ver las ramas y las solicitudes de fusión relacionadas con cualquier ID de entidad de Targetprocess, debe personalizar la vista de este tipo de entidad. Este código añadirá un nuevo bloque al panel derecho:{
"type": "devops-info/v2",
"component": "DevOpsInfoV2",
"componentId": "devops_component"
},Añadámoslo debajo de la sección «Asignaciones»: 
Añadir una sección para la integración con Jira
Para ver información relacionada con la integración de Jira, utiliza el siguiente código:{
"type": "work-sharing-v2/v2",
"component": "WorkSharingInfoComponentV2",
"componentId": "work_sharing_component"
},
Añadir un TestRail bloque
Este componente funciona junto con TestRail Integración. El código añade una nueva pestaña que mostrará la lista de casos de prueba de TestRail.{
"title": {
"type": "string",
"value": "TestRail",
"localize": false
},
"component": {
"type": "testrail-list",
"component": "TestRailTestCasesComponent",
"componentId": "testrail_testcases"
},
"componentId": "section_testrail"
},
Añadir un bloque de acceso directo
Este componente permite controlar los permisos de acceso de los usuarios a las entidades:{"type": "direct-access-component"},# CamposOcultar campos

Cambiar el nombre del campo nativo
Añadir campo personalizado
{
"type": "property.customField",
"properties": {
"name": "Extra"
}
}

Cambiar el nombre del campo personalizado
Si desea cambiar el nombre de un campo personalizado existente, añada una propiedadlabel adicional dentro de properties. label debe incluir "type":"string" y value con el nombre necesario.{
"type":"property.customField",
"properties":{
"name":"Custom Field Name",
"label":{
"type":"string",
"value":"Updated Name",
"localize":true
}
},
"componentId":"property.customField_0gustmk"
}
Ocultar campo personalizado
{
"type":"property.customField",
"properties":{
"name":"Cost Type"
},
"visibilityConfig":{
"entityQuerySelector":"false"
}
}
Añadir un campo personalizado de tipo texto enriquecido
Un campo personalizado de tipo texto enriquecido suele añadirse en la parte principal de la vista, ya que necesita mucho espacio. Pongamos un campo «Información adicional» en la pestaña «Información» debajo del objeto «Descripción» en JSON.

Hacer un campo de solo lectura
Reemplazar"editable": true, por "editable": false,Desactivar restablecimiento
Al añadir"allowReset": false,una vez que se establece un valor, no aceptará valores vacíos ni tendrá una X para restablecerlo.

Añadir una información sobre herramientas
Untooltip componente se puede asignar a cualquier label{
"type": "property.plannedEndDate.assignable",
"properties": {
"label": {
"type": "string",
"value": "Planned end",
"localize": true
},
"editable": true,
"tooltip": "HEre!"
},
"componentId": "property.plannedEndDate.assignable_nl5etxp"
},
# DISEÑOCuadrícula
También es posible añadir una cuadrícula que contenga valores específicos, por ejemplo, campos personalizados de la entidad:
{
"type": "grid",
"columns": [
"auto",
"auto",
"auto"
],
"rows": [
"auto",
"auto"
],
"components": [
{
"gridRow": 1,
"gridColumn": 1,
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": "property.customField_h9ow2c2"
},
{
"gridRow": 1,
"gridColumn": 2,
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": "property.customField_20bua0m"
},
{
"gridRow": 1,
"gridColumn": 3,
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": "property.customField_6kf34yv"
},
{
"gridRow": 2,
"gridColumn": 1,
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": "property.customField_ppm9uf6"
},
{
"gridRow": 2,
"gridColumn": 3,
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": "property.customField_qoa5oaj"
}
],
"componentId": "grid_7p9bi2i"
}
Apilar
Si desea tener varios campos/componentes /etc dentro del elemento plegable, puede convertir este componente en una pila para poder colocar en él un número arbitrario de
elementos secundarios. 
{
"title": {
"type": "string",
"value": "Defenition of Done",
"localize": true
},
"component": {
"type": "stack",
"orientation": "column",
"components": [
{
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Remain Developer"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Default or not"
},
"componentId": ""
}
],
"componentId": ""
},
"componentId": "",
"type": "section"
}
Plegable
También puede configurar pestañas plegables con los campos personalizados u otros campos. Solo tendrás que sustituir los nombres y títulos de los campos personalizados por los que necesites:

{
"title": {
"type": "string",
"value": "Cost benefit",
"localize": true
},
"component": {
"type": "stack",
"orientation": "column",
"components": [
{
"type": "collapsible",
"title": {
"type": "string",
"value": "First Custom Fields set",
"localize": true
},
"component": {
"type": "stack",
"orientation": "column",
"components": [
{
"type": "property.customField",
"properties": {
"name": "Select your pet"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Remain Developer"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Default or not"
},
"componentId": ""
}
],
"componentId": "stack_9dfo0xr"
},
"componentId": "collapsible_6hw534j"
},
{
"type": "collapsible",
"title": {
"type": "string",
"value": "Second Custom Fields set",
"localize": true
},
"component": {
"type": "stack",
"orientation": "column",
"components": [
{
"type": "property.customField",
"properties": {
"name": "Probability"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Tested"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Due Date"
},
"componentId": ""
}
],
"componentId": "stack_iuphs2j"
},
"componentId": "collapsible_qynefma"
},
{
"type": "collapsible",
"title": {
"type": "string",
"value": "Third Custom Fields set",
"localize": true
},
"component": {
"type": "stack",
"orientation": "column",
"components": [
{
"type": "",
"properties": {
"name": "Entity Release"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "Simulated Effort"
},
"componentId": ""
},
{
"type": "property.customField",
"properties": {
"name": "AuthDate"
},
"componentId": ""
}
],
"componentId": ""
},
"componentId": ""
}
],
"componentId": ""
},
"componentId": ""
}
Hacer que los plegables estén (no) plegados por defecto
Puedes definir el comportamiento de un elemento plegable con respecto a su plegado o despliegue cada vez que se abre la página. Esto se controla mediante la"defaultState" propiedad, que tiene tres valores posibles: "collapsed", "uncollapsed", "user" (el valor predeterminado). Con "defaultState": "collapsed", el Collapsible siempre se contraerá después de que la página se cargue o se actualice. El último cambio de este estado (es decir, si el usuario expande el elemento plegable) persiste hasta que se actualiza la página, lo que significa que al cambiar entre pestañas no se revertirá el estado a plegado. Con "defaultState": "uncollapsed", el Collapsible siempre estará desplegado (es decir, expandido) después de que la página se cargue o se actualice. Al igual que con el "collapsed" valor anterior, el último cambio de este estado realizado por el usuario persiste hasta que se actualiza la página. Si "defaultState" está establecido en "user" o no se especifica, al actualizar, el elemento plegable tendrá el mismo estado (plegado o desplegado) en el que lo dejó el usuario antes de la actualización. Tenga en cuenta que esta propiedad funciona tanto para los elementos plegables de las pestañas como para los de la columna derecha; más concretamente, para cualquier componente de diseño de tipo "collapsible". Aquí hay un fragmento de código de ejemplo de un Collapsible que está colapsado de forma predeterminada:{
"type": "collapsible",
"title": {
"type": "string",
"value": "Short Description",
"localize": true
},
"component": {
"type": "stack",
"components": [
{
"type": "description"
}
],
"orientation": "column"
},
"properties": {
"defaultState": "collapsed"
}
}Y así es como se comporta este plegable: 
Añadir una línea horizontal
Puedes añadir una línea horizontal para separar los campos entre sí:{
"type": "separator"
}Añadamos un separador debajo del campo «Descripción»:

Añadir un espacio
Puede separar los campos entre sí añadiendo un espacio adicional:{
"type": "space"
}Añadamos un espacio debajo del campo «Descripción»:

Añadir texto simple
Junto con un encabezado de secciones plegables, puede añadir texto personalizado a la vista de entidad personalizada. Solo tendrás que pegar el JSON entre las secciones requeridas:

{
"type": "component",
"component": "label",
"properties": {
"text": "This is the Header",
"cssClass": "bold"
},
"componentId": ""
},
{
"type": "component",
"component": "label",
"properties": {
"text": "Use them well",
"cssClass": "normal"
},
"componentId": ""
}# Ocultar el esfuerzo total de la lista de asignaciones Si no necesita mostrar el esfuerzo total en el control Asignaciones, puede ocultarlo añadiendo la HideTotalEffort propiedad al assignmentsList componente: 
Puede obtener más información sobre la configuración del control Asignaciones en otro artículo. # Ocultar campos y pestañas según condiciones Puede mostrar campos en la vista detallada en función del rol del usuario o de los valores de otros campos.visibilityConfig se especifica varias veces, se combinarán utilizando AND, es decir, un usuario debe tener tanto los roles especificados como usuario como uno de los roles especificados como asignación de proyecto.Según el rol del usuario en el proyecto
"visibilityConfig": {
"showForProjectRoles": [
"Support Person",
"Top Manager"
]
}
Basado en el rol de usuario predeterminado
"visibilityConfig": {
"showForUserRoles": [
"Developer",
"QA Engineer"
]
}
Basado en valores de otros campos
"visibilityConfig": {
"entityQuerySelector": "<any selector>"
}Se puede utilizar cualquier APIv2 selector. Por ejemplo:- Mostrar solo si “checkboxCF” la casilla de verificación del campo personalizado es verdadera: checkboxCF==true
- Mostrar solo si se asigna el equipo con ID 44: assignedTeams.where( team.id==44 ).count()>0
- Mostrar solo para el estado de entidad no final: entityState.isFinal==false
Mostremos la pestaña «Descripción» solo cuando el equipo con id=185765 esté asignado a la entidad:

Basado en las prácticas del proceso
Si la práctica correspondiente está desactivada, el elemento no se muestra:"visibilityConfig": {
"requiredPractices": [
"Test Cases"
]
}Práctica de «seguimiento del tiempo»: «Tiempos», práctica de «seguimiento de errores»: «Errores», práctica de «solicitudes»: «Servicio de asistencia técnica», «Casos de prueba», «Control de fuentes», «Iteraciones», «Funcionalidades», «Épicas» y «Épicas de cartera». 