Personalizar a visualização detalhada da entidade
Introdução
Você pode personalizar a visualização detalhada de uma entidade de qualquer maneira, incluindo:
- Ocultar guias inúteis, renomear guias existentes ou adicionar novas guias;
- Criando suas próprias seções para agrupar campos nativos e personalizados da maneira que você precisar.
Aviso: por mais poderosa que seja, a personalização da visualização tem suas limitações.
Para modificar a visualização detalhada, abra o item de menu Configurações do Targetprocess > Visualizações detalhadas. Aqui você encontrará layouts padrão para cada entidade. Esses layouts são descritos no formato JSON e contêm a lista de todas as guias, seções, campos e botões, representados como componentes.
Observação: ao criar um novo componente, não é necessário configurá-lo, componentID, pois ele é gerado automaticamente.
Cada entidade tem seu próprio layout padrão semelhante à antiga visualização detalhada não personalizável. Você sempre pode redefinir para o modelo padrão ou desativar completamente a personalização. Cada modelo define o layout para a entidade específica no processo específico (por exemplo, Recursos no processo “Kanban”).
Aviso: Não está vendo a opção Exibições detalhadas? 1. Certifique-se de que você é um administrador do sistema. Se as únicas duas opções que você vê nas Configurações são “Diagnóstico e registros” e “Importar”, isso significa que você não é um administrador do sistema. 2. A personalização da Visualização detalhada pode estar temporariamente desativada para a conta da sua empresa por algum motivo. Envie uma solicitação para tp-support@apptio.com e nós o informaremos quando a ativação for possível.
Neste exemplo, trabalharemos com a entidade Recurso no processo “Scrum”. Para isso, navegamos até Configurações do Targetprocess > Visualizações detalhadas e, em seguida, selecionamos “Recursos” no menu suspenso de entidades e “Scrum” no menu suspenso de processos. Em seguida, ativamos a visualização personalizável. O layout padrão é carregado.
Observação: se houver erros de pontuação ou sintaxe no JSON, o editor de layout destacará os erros. O botão “Aplicar alterações” ficará desativado até que você resolva o problema. Se algo deu errado, você pode restaurar a versão editada para um layout padrão clicando no botão “Restaurar para padrão”.
# Guias
As guias são definidas no sections componente. Cada guia tem três partes:
title(título da guia)titleExtra(contador para o título da guia)component(conteúdo da guia)
{
"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"
}Renomear uma guia existente
Para renomear uma guia, modifique avalue parte title . Vamos renomear a Flow guia para Change Log.{
"title":{
"type":"string",
"value":"Change Log",
"localize":true
},
"component":{
"type":"component",
"component":"auditHistory",
"componentId":"component_uovrhva"
},
"componentId":"section_a6ede8w"
}
Mover uma guia existente
Vamos mover a guia chamada “Testes” para o final. Para isso, pegaremos toda a seção e a moveremos para o final dasections matriz. 
Adicionar uma nova guia
Vamos mover “Lead & Cycle time” para uma nova guia. Por padrão, ele é exibido como um componente recolhível:{
"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"
},section componente:{
"title":{
"type":"string",
"value":"Lead cycle time",
"localize":true
},
"component":{
"type":"component",
"component":"leadCycleTime",
"properties":{
"evictProperties":[
"leadTime",
"cycleTime"
]
}
}
}
Remover guia existente
Vamos remover a guia “Teste”:
Especifique uma guia que deve ser aberta por padrão
Você pode especificar qual guia deve ser aberta sempre que abrir um cartão, adicionando a propriedade adicional “selected”. Vamos configurar a guia “Tarefas” para ser aberta sempre que você abrir a visualização detalhada da História do Usuário.
Adicionar guia Fluxo à entidade Domínio Estendido
A partir da versão Targetprocess 2403.3, é possível adicionar uma guia Fluxo às entidades do Domínio Estendido.{
"type": "section",
"title": {
"type": "string",
"value": "Flow",
"localize": true
},
"component": {
"type": "component",
"component": "implementationHistory"
}
},
Adicionar uma página incorporada como uma guia
Você pode ver as páginas pelos links que você forneceu em um campo personalizado URL e URL modelo como uma guia adicional em uma visualização de entidade, para que você possa trabalhar com as páginas e documentos externos no Targetprocess. Vamos adicionar um campo personalizado “Doc” sob o objeto “Effort” da seção “Info” no JSON.
Agora vamos adicionar uma nova guia chamada Google “Doc” após a guia “Relações”: adicione todo o objeto sob o objeto “Relações” em JSON.{
"title": {
"type": "string",
"value": "Google Doc"
},
"component": {
"type": "embeddedPage",
"customFieldName": "Doc"
}
}
Vá para a visualização detalhada do recurso e preencha o campo URL personalizado com um link externo (por exemplo, para um Google documento). Magia! 
Adicione um roteiro (cronograma) incorporado como uma guia
É possível adicionar o Roadmap na guia Exibição detalhada. Navegue até aqui para obter as instruções.Adicionar um quadro incorporado como uma guia
Não é possível no momento. Sinta-se à vontade para adicionar seu voto à ideia correspondente.Adicionar modelo de tarefa/caso de teste
Este componente ajuda você a criar um conjunto de casos de teste ou tarefas e adicioná-lo imediatamente a qualquer história de usuário. Funciona para qualquer projeto, equipe ou processo. O componente adiciona uma guia à visualização da História do Usuário. Nesta guia, você pode criar modelos que contenham tarefas ou casos de teste que precisam ser aplicados a várias histórias de usuários. Depois de criar o modelo e as tarefas e/ou casos de teste que você gostaria de usar, eles podem ser aplicados a qualquer história de usuário acessando a guia Modelo e selecionando Aplicar modelo. Adicione este componente à entidade User Story:{
"title": {
"type": "string",
"value": "Template",
"localize": true
},
"component": {
"type": "taskTestCaseTemplate"
}
}
Permitir conteúdo persistente em guias
Por padrão, sempre que você alterna para outra guia, seu conteúdo é solicitado ao backend. Esta solicitação leva algum tempo (curto) e faz com que o sistema exiba um indicador de carregamento. Você pode desativar esse comportamento e fazer com que o sistema armazene em cache todas as guias da entidade atualmente aberta. Então, o conteúdo da guia se torna persistente: cada guia é solicitada apenas uma vez; e quando você volta para ela depois de alternar para outras guias, ela exibe seu conteúdo imediatamente, sem solicitar e renderizar novamente. Para permitir conteúdo persistente na guia, use a"cacheOpenedTabs" propriedade no componente com "type": "sections", que contém suas guias. Defina a propriedade como "true". (É considerado "false" por padrão.){
"id": "tabs",
"type": "sections",
"location": "tabs",
"cacheOpenedTabs": "true",
"sections": [
// YOUR TABS HERE...
]
}"true" pode resultar em uma carga significativa nas atualizações em tempo real. Se você estiver enfrentando problemas com atualizações em tempo real ou com o desempenho geral do seu navegador ou dispositivo, tente definir "cacheOpenedTabs" para "false". # Blocos na coluna direitaRemover um bloco
Agora vamos personalizar o painel direito da visualização. Para remover a seção “Tempo de ciclo do chumbo”, basta excluir todo o objeto com"value": "Lead cycle time". 
Adicionar um bloco
Deseja agrupar campos de data em uma nova seção? Para garantir que você não perca a formatação JSON, duplique qualquer seção, por exemplo, “Info”, dê um nome à nova seção editando"value": "Info" a string. Exclua os campos que são inúteis para esta seção removendo todo o objeto relacionado a cada campo do JSON. 
Adicione uma seção para DevOps Integrações
Para visualizar Ramificações e Mesclagens/Solicitações relacionadas a qualquer ID de entidade do Targetprocess, é necessário personalizar a visualização desse tipo de entidade. Este código adicionará um novo bloco ao painel direito:{
"type": "devops-info/v2",
"component": "DevOpsInfoV2",
"componentId": "devops_component"
},
Adicione uma seção para integração com o Jira
Para ver informações relacionadas à integração com o Jira, use o seguinte código:{
"type": "work-sharing-v2/v2",
"component": "WorkSharingInfoComponentV2",
"componentId": "work_sharing_component"
},Adicionar um TestRail bloco
Este componente funciona em conjunto com TestRail a integração. O código adiciona uma nova guia que mostrará a lista de casos de teste de TestRail.{
"title": {
"type": "string",
"value": "TestRail",
"localize": false
},
"component": {
"type": "testrail-list",
"component": "TestRailTestCasesComponent",
"componentId": "testrail_testcases"
},
"componentId": "section_testrail"
},Adicionar um bloco de acesso direto
Este componente permite controlar as permissões de acesso dos usuários às entidades:{"type": "direct-access-component"},Ocultar campos
Aviso: observe que os campos ocultos da visualização ainda estão disponíveis por meio da API v.2, portanto, não é uma boa ideia ocultar campos por motivos de segurança dessa forma.
Como os campos de data já são exibidos na nova seção “Datas”, vamos removê-los da seção “Informações”: exclua objetos completos de campos da matriz “Informações”. 
Renomear campo nativo
Aviso: não renomeie campos nativos através do editor de layout, pois isso afeta apenas a visualização detalhada, e não todas as visualizações do sistema, levando a inconsistências.
Adicionar campo personalizado
Aviso: o campo personalizado do tipo Targetprocess Multiple Entity não é compatível. Adicione seu voto à ideia correspondente se desejar exibir um campo personalizado desse tipo.
Vamos adicionar o campo personalizado “Extra” abaixo do campo “Proprietário” da seção “Informações”. Não se esqueça de adicionar este campo em Configurações do Targetprocess > item do menu Campos personalizados. Agora adicione o objeto inteiro sob o objeto “Owner” no JSON.{
"type": "property.customField",
"properties": {
"name": "Extra"
}
}
Renomear campo personalizado
Se você deseja renomear um campo personalizado existente, adicione uma propriedadelabel adicional dentro de properties. label deve incluir "type":"string" e value com o nome necessário.{
"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"
}
}Adicionar um campo personalizado do tipo rich text
Um campo personalizado do tipo rich text é geralmente adicionado na parte principal da visualização, pois requer muito espaço. Vamos colocar um campo “Informações adicionais” na guia “Informações” sob o objeto “Descrição” no JSON.
Tornar um campo somente leitura
Substitua"editable": true, por "editable": false,Desativar reinicialização
Ao adicionar um valor"allowReset": false,, uma vez definido, ele não aceitará valores vazios nem terá um X para reiniciá-lo. 
Adicionar uma dica de ferramenta
Umtooltip componente pode ser atribuído a qualquer label{
"type": "property.plannedEndDate.assignable",
"properties": {
"label": {
"type": "string",
"value": "Planned end",
"localize": true
},
"editable": true,
"tooltip": "HEre!"
},
"componentId": "property.plannedEndDate.assignable_nl5etxp"
},
# LAYOUTGrade
Também é possível adicionar uma grade contendo valores específicos, por exemplo, campos personalizados da entidade:
{
"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"
}Pilha
Se você deseja ter vários campos/componentes /etc dentro do recolhível, pode tornar esse componente uma pilha para poder colocar um número arbitrário de filhos nele.
{
"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"
}Dobrável
Você também pode configurar guias recolhíveis com os campos personalizados ou outros campos. Você só precisará substituir os nomes e títulos dos campos personalizados pelos que você precisa:
{
"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": ""
}Tornar os elementos recolhíveis (não) recolhidos por padrão
Você pode definir o comportamento de um Collapsible em relação a ser recolhido ou expandido a cada abertura da página. Isso é controlado pela"defaultState" propriedade que tem três valores possíveis: "collapsed", "uncollapsed", "user" (o padrão). Com "defaultState": "collapsed", o Collapsible ficará sempre recolhido após a página ser carregada ou atualizada. A última alteração desse estado – ou seja, se o usuário expandir o Collapsible – persiste até a página ser atualizada; o que significa que alternar entre as guias não reverterá o estado para recolhido. Com "defaultState": "uncollapsed", o Collapsible estará sempre desdobrado (ou seja, expandido) após a página ser carregada ou atualizada. Tal como no caso do "collapsed" valor acima, a última alteração deste estado pelo Utilizador persiste até que a página seja atualizada. Se "defaultState" estiver definido como "user" ou não for especificado, então, ao atualizar, o Collapsible terá o mesmo estado (colapsado ou expandido) em que o usuário o deixou antes da atualização. Observe que essa propriedade funciona tanto para Collapsibles em guias quanto para Collapsibles na coluna direita – mais precisamente, para qualquer componente de layout do tipo "collapsible". Aqui está um exemplo de um trecho de código de um Collapsible que está recolhido por padrão:{
"type": "collapsible",
"title": {
"type": "string",
"value": "Short Description",
"localize": true
},
"component": {
"type": "stack",
"components": [
{
"type": "description"
}
],
"orientation": "column"
},
"properties": {
"defaultState": "collapsed"
}
}
Adicionar uma linha horizontal
Você pode adicionar uma linha horizontal para separar os campos uns dos outros:{
"type": "separator"
}
Adicione um espaço
Você pode separar os campos entre si adicionando um espaço adicional:{
"type": "space"
}
Adicionar texto simples
Juntamente com um cabeçalho de seções recolhíveis, você pode adicionar texto personalizado à exibição personalizada da entidade. Você só precisa colar o JSON entre as seções necessárias:
{
"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": ""
}
Você pode ler mais sobre a configuração do controle de atribuições em um artigo separado. # Ocultar campos e guias sob determinadas condições Você pode exibir campos na visualização detalhada dependendo da função do usuário ou dos valores em outros campos.Aviso: Isso não implica permissões. Tecnicamente, todos os campos estão disponíveis para leitura e escrita por meio da API e todos os campos podem ser exibidos nos painéis. Isso serve apenas para simplificar ou organizar a visualização para uma função específica, não para definir permissões ou controle de acesso.
Observação: Se
visibilityConfig for especificado várias vezes, eles serão combinados usando AND, ou seja, um usuário deve ter ambas as funções especificadas como usuário e uma das funções especificadas como atribuição do projeto.Com base na função do usuário no projeto
"visibilityConfig": {
"showForProjectRoles": [
"Support Person",
"Top Manager"
]
}Com base na função padrão do usuário
"visibilityConfig": {
"showForUserRoles": [
"Developer",
"QA Engineer"
]
}Com base nos valores em outros campos
"visibilityConfig": {
"entityQuerySelector": "<any selector>"
}- Mostrar apenas se o campo personalizado “checkboxCF” da caixa de seleção for verdadeiro: checkboxCF==true
- Mostrar apenas se a equipe com ID 44 estiver atribuída: assignedTeams.where( team.id==44 ).count()>0
- Mostrar apenas para estado de entidade não final: entityState.isFinal==false
Vamos mostrar a guia “Descrição” apenas quando a equipe com id=185765 for atribuída à entidade:
Com base nas práticas do processo
Se a prática correspondente estiver desativada, o elemento não será exibido:"visibilityConfig": {
"requiredPractices": [
"Test Cases"
]
}