Gerenciador de transações: Layouts - Efeitos de IU

  • Versão de lançamento: Australia
  • Atualizado 12 de mar. de 2026
  • 6 min. de leitura

    • Saiba como adicionar funcionalidade a um botão programando efeitos de IU em YAML ou JSON.

    No Gerenciador de transações, os efeitos de IU são elementos de layout que adicionam funcionalidades a um botão. Os usuários podem personalizar os efeitos de IU CPQ estabeleceu. No entanto, os usuários não podem criar novos efeitos de IU como fazem eventos.

    Se um efeito de IU e um evento estiverem presentes no mesmo botão, o efeito de IU será executado após a execução do evento.

    Exemplo: Abrir uma lista

    Por exemplo, um efeito de IU pode permitir que um botão abra uma lista pesquisável de produtos que podem ser adicionados a uma transação. Veja como isso pode ser escrito no layout:

          ...
      {
        "type": "button",
        "event": "productSearch",
        "label": "Add Products",
        "uiEffect": {
          "type": "productSearch",
          "target": "slideout"
        },
        "columnOrder": 6,
        "variableName": "productSearch"
      },
      ...

    Veja como esse botão pode aparecer na IU resultante:

    Adicione produtos

    Efeitos de IU de programação

    Um efeito de IU é definido por uma combinação de parâmetros. Todos os efeitos de IU têm um tipo e alguns podem ter um destino, local ou opções.

    Cada parâmetro tem os seguintes valores possíveis:

    • type: url, anchor, productSearch, lineDetail, reconfigure, addFavorite, manageFavorites, refreshSession, showTier
    • target: inline, tab, window, modal, slideout, lineDrawer, fullScreen
    • location: [Uma URL ou um ID de elemento]
    • options: [depende do tipo]

    Análise de tipos

    • url Requer um local na forma de um URL. Pressionar o botão leva os usuários para a URL por meio de um destino específico (em linha, guia, janela, iframe modal ou iframe deslizante). Usando chaves, os administradores podem passar dinamicamente valores de campo para o URL. Os casos de uso comuns são passar um valor para um documento de saída ou abrir uma página de registro no Salesforce.
    • anchor Requer um local como um ID de elemento no layout. Pressionar o botão focaliza ou rola para o elemento. Os elementos primários relacionados são abertos em guias ou em uma estrutura acordeão. O destino deve estar em linha.
    • productSearch abre o catálogo de produtos no destino em uma janela deslizante ou modal. Um nome de variável é obrigatório. O efeito de IU deve ser adicionado ao elemento gridHeaderButtons. As opções incluem o seguinte:
      • Mostrar lista de produtos: products- true(mostrar), false(ocultar)
      • Mostrar lista de favoritos: favorites- true(mostrar), falso (ocultar)
      • Local do posicionamento do botão: actionLocation- footer, header, ou ambos
        • O padrão é footerse não for especificado
        • Os botões incluem "Cancelar", "Adicionar linha", "Configurar" e "Configuração concluída"

      O código a seguir mostra produtos, oculta favoritos e coloca botões somente no cabeçalho:

      ...
"options": {
  "products": true,
  "favorites": false,
  "actionLocation": header
},
...
    • lineDetail deve estar em um botão de nível de linha. Pressionar o botão abre o layout de detalhe de linha no destino ( modal, slideout, ou lineDrawer).
    • exportLines deve estar em um botão no nível do cabeçalho. Pressionar o botão exporta as linhas de transação para um arquivo CSV.
    • reconfigure pode estar em um botão de nível de linha ou de cabeçalho. Se o botão estiver no nível do cabeçalho, será necessária uma seleção de linhas. . reconfigureo tipo abre configurações no destino ( modal, slideout, ou lineDrawer). reconfigureinclui a opção para definir o local dos botões. Para obter mais detalhes, consulte productSearchacima.
    • addFavorites pode estar em um botão de nível de linha ou em um botão de nível de cabeçalho. Se o botão estiver no nível do cabeçalho, será necessária uma seleção de linhas. addFavoritesabre uma janela para descrever e criar um favorito a partir da seleção. Nenhuma outra propriedade é compatível.
      Nota:
      Para compartilhar favoritos, uma configuração de locatário deve estar habilitada. Para habilitar o compartilhamento de favoritos, envie um tíquete de suporte.
    • manageFavoritesAbre o Gerenciador de favoritos no destino especificado ( modal, slideout, ou inline).
    • refreshSession verifica se a sessão foi modificada. Em caso afirmativo, refreshSessionAtualiza o SessionID e mescla as mudanças.
    • showTierAbre a grade de item de linha em tela cheia se Tela cheia e. Items de linha . showTierfunciona com qualquer camada, mas para os fins deste recurso, o local deve ser preenchido com o nome da variável de camada dos itens de linha.

    Atualmente, os JSONs de layout não são validados e algumas combinações de propriedades não são compatíveis. Combinações incompatíveis provavelmente falharão sem indicar erros.

    Chamadas de evento implícitas

    Alguns efeitos de IU envolvem a execução de eventos relacionados. Por exemplo, acionar o productSearchEfeito de IU ou o. reconfigureO efeito de IU executa o. upsertLinesevento.

    Condições de acesso

    A capacidade de um usuário acessar um efeito de IU não pode ser controlada da mesma maneira que os eventos. Não há configuração comparável às seguintes configurações de evento:

    Gerenciador de transações: Layouts - Efeitos de IU

    No entanto, as condições de acesso para um efeito de IU podem ser alteradas por seu contexto na transação ou por eventos relacionados.

    Quando um efeito de IU tem um evento implícito associado a ele, as condições de acesso do evento determinam as condições de acesso do botão e, por sua vez, o efeito de IU. Portanto, se um administrador quiser limitar as condições sob as quais um productSearchO efeito de IU pode ser acionado, eles podem adicionar essas limitações ao upsertLinesevento.

    Um botão na grade de linhas que tem reconfigureO efeito de IU está oculto em linhas que não são configuráveis. No nível do cabeçalho, ele é habilitado somente quando cada linha selecionada é configurável.

    Se um evento e um efeito de IU estiverem presentes em um botão, o acesso para ambos será determinado pela interseção de suas configurações de acesso individuais. Para que o botão esteja acessível, o efeito de IU e o evento devem estar acessíveis. Se um estiver desabilitado ou oculto, o botão inteiro será desabilitado ou oculto.

    Casos comuns

    • Pesquisa de produto (o. AddLines O efeito de IU chama implicitamente o. UpsertLines evento):
      • Snippet de código JSON
        {
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
  }
}
      • Snippet de código YAML
        type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout
    • Gaveta de detalhes da linha:
      • Snippet de código JSON
        "lineLevelButtons": [
 {
   "icon": "settings",
   "label": "reconfig",
    "uiEffect": {
       "type": "lineDetail",
        "target": "lineDrawer"
      },
    "variableName": "reconfig"
  }
      • Snippet de código YAML
        lineLevelButtons:
-icon: settings
 label: reconfig
 uiEffect:
   type: lineDetail
   target: lineDrawer
 variableName: reconfig
    • Pesquisa de produtos com favoritos habilitados:
      • Snippet de código JSON
        {
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
    "options": {
      "products": true,
      "favorites": true,
    }
  }
}
      • Snippet de código YAML
        type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout
  options:
    products: true
    favorites: true
    • Abrir link de URL em uma nova guia:
      • Snippet de código JSON
        {
  "columnorder": 1,
  "label": "Google it",
  "type": "event",
  "variableNane": "LinkToSite",
    "uieffect": {
        "type": "url",
        "target": "tab",
        "location": "https://google.com/search?q=I{txn.search}" 
    }
}
      • Snippet de código YAML
        columnorder: 1
label: Google it
type: event
variableName: LinkToSite
uieffect:
  type: url
  target: tab
  location: "https://google.com/search?q=I{txn.search}"
    • Sessão de atualização:
      • Snippet de código JSON
        {
  "type": "button",
  "variableName": "Refresh",
  "label": "Refresh",
  "uiEffect": {
    "type": "refreshSession"
  }
}
      • Snippet de código YAML
        type: button
variableName: Refresh
label: Refresh
uiEffect:
  type: refreshSession
    • Reconfigurar:
      • Snippet de código JSON
        "lineLevelButtons": [
  {
     "icon": "settings",
     "label": "Reconfigure",
      "uiEffect": {
          "type": "reconfigure",
          "target": "modal"
       },
     "variableName": "reconfig"
  }
      • Snippet de código YAML
        lineLevelButtons:
-icon: settings
 label: Reconfigure
 uiEffect:
   type: reconfigure
   target: modal
 variableName: reconfig
    • Adicionar aos favoritos:
      • Snippet de código JSON
        {
  "label": "Add To Favorites",
  "uiEffect": {
    "type": "addFavorite"
    },
  "variableName": "addFavorites"
}
      • Snippet de código YAML
        label: Add To Favorites
uiEffect:
  type: addFavorite
variableName: addFavorites
    • Gerenciar favoritos:
      • Snippet de código JSON
        {
  "label": "Manage Favorites",
  "uiEffect": {
    "type": "manageFavorites",
    "target": "modal"
    },
 "variableName": "manageFavorites"
}
      • Snippet de código YAML
        label: Manage Favorites
uiEffect:
  type: manageFavorites
  target: slideout
variableName: manageFavorites
    • Snippet YAML de linhas de exportação:
      label: Export Lines
uiEffect:
  type: exportLines
variableName: exportLines