---
sourceDocument: Referência de API do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Referência de API do Xanadu

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# cabrillo.viewLayout - cliente

# cabrillo.viewLayout - cliente {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura

Cabrillo JS funções para fornecer acesso a elementos de IU nativos, como botões e controles giratórios.

## cabrillo.viewLayout -- getTitle() {#ariaid-title2}

Obtém o título da exibição nativa atual.
{#CV-getTitle__table_rcj_22k_pyb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| Nenhum |   |   |
[Tabela 1. Parâmetros]

{#CV-getTitle__table_rcj_22k_pyb} {#CV-getTitle__table_scj_22k_pyb__entry__2}

| Tipo | Descrição |
|-|-|
| promessa | Se for bem-sucedido, será resolvido para o texto do título, caso contrário, ocorrerá um erro. |
[Tabela 2. Retorna]

{#CV-getTitle__table_scj_22k_pyb}  

    cabrillo.viewLayout.getTitle()
    .then(function(title) {
       console.log(title);
    }, function(error) {
       console.log(error);
    });

## cabrillo.viewLayout -- hideBackButton() {#ariaid-title3}

Oculta o botão Voltar na interface do cliente.
{#CV-hideBackButton__table_smb_fkk_pyb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| Nenhum |   |   |
[Tabela 3. Parâmetros]

{#CV-hideBackButton__table_smb_fkk_pyb} {#CV-hideBackButton__table_tmb_fkk_pyb__entry__2}

| Tipo | Descrição |
|-|-|
| Nenhum |   |
[Tabela 4. Retorna]

{#CV-hideBackButton__table_tmb_fkk_pyb}  

    cabrillo.viewLayout.hideBackButton();

## cabrillo.viewLayout - hideSpinner() {#ariaid-title4}

Oculta um controle giratório nativo na interface atual.
{#CV-hideSpinner__table_oyf_tnn_wbb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| Nenhum |   |   |
[Tabela 5. Parâmetros]

{#CV-hideSpinner__table_oyf_tnn_wbb} {#CV-hideSpinner__table_pyf_tnn_wbb__entry__2}

| Tipo | Descrição |
|-|-|
| vazio |   |
[Tabela 6. Retorna]

{#CV-hideSpinner__table_pyf_tnn_wbb}  

    cabrillo.viewLayout.hideSpinner();

## cabrillo.viewLayout - setBottomButtons (botões de matriz, execução de função) {#ariaid-title5}

Defina botões na parte inferior da interface atual.
Imagens e selos não são compatíveis com os botões inferiores.
{#CV-setBottomButtons_CBA-f__table_b4j_hmn_wbb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| botões | Matriz de objetos Cabrillo.Button | Descreve os botões a serem definidos. No momento, há suporte para no máximo um botão. |
| execute | Função | A função a ser chamada quando um botão é tocado. A função não tem valor de retorno e usa o índice do botão selecionado como seu único parâmetro. A função deve ter um único parâmetro que seja um número. |
[Tabela 7. Parâmetros]

{#CV-setBottomButtons_CBA-f__table_b4j_hmn_wbb} {#CV-setBottomButtons_CBA-f__table_c4j_hmn_wbb__entry__2}

| Tipo | Descrição |
|-|-|
| promessa | Se for bem-sucedido, um objeto não resolvido, caso contrário, um erro. |
[Tabela 8. Retorna]

{#CV-setBottomButtons_CBA-f__table_c4j_hmn_wbb}  
Defina os botões inferiores.

    var buttons = [
        {
            title: 'Add to Cart',
            buttonId: 'btnAddCart',
            enabled: true,
            backgroundColor: '#3091F9',
            textColor: '#FFFFFF'
        }
    ];

    cabrillo.viewLayout.setBottomButtons(buttons, (buttonIndex) => {
        console.log('Success. Received an event from the button.');
    }).catch((err) => {
        console.log('Failed to register buttons.');
        console.error(err);
    });

Limpar botões inferiores.

    cabrillo.viewLayout.setBottomButtons();

## cabrillo.viewLayout - setNavigationBarButtons (botões de matriz, execução de função) {#ariaid-title6}

Defina botões na barra de navegação da interface atual.
As imagens e os selos dos botões que aparecem no menu do botão de estouro são omitidos. Por esse motivo, é melhor fornecer um título e um nome de imagem ao definir um botão de imagem na barra de navegação.
{#CV-setNavigationBarButtons_CBA_F__table_ojc_1jn_wbb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| botões | Matriz de objetos Cabrillo.Button. | Descreve os botões a serem definidos. Os botões podem estourar em um menu adicional conforme necessário. |
| execute | Função | A função a ser chamada quando um botão é tocado. A função não tem valor de retorno e usa o índice do botão selecionado como seu único parâmetro. A função deve ter um único parâmetro que seja um Número. |
[Tabela 9. Parâmetros]

{#CV-setNavigationBarButtons_CBA_F__table_ojc_1jn_wbb} {#CV-setNavigationBarButtons_CBA_F__table_pjc_1jn_wbb__entry__2}

| Tipo | Descrição |
|-|-|
| promessa | Se for bem-sucedido, um objeto não resolvido, caso contrário, um erro. |
[Tabela 10. Retorna]

{#CV-setNavigationBarButtons_CBA_F__table_pjc_1jn_wbb}  
Definir botões da barra de navegação.

    var buttons = [
       {
          title: "Save",
          enabled: true,
          buttonId: "btnSave",
       },
    ];

    cabrillo.viewLayout
       .setBottomButtons(buttons, (buttonIndex) => {
          console.log("Success. Received an event from the button.");
       })
       .catch((err) => {
          console.log("Failed to register buttons.");
          console.error(err);
       });

Manipular vários botões.

    var buttons = [
       {
          title: "Save",
          enabled: true,
          buttonId: "btnSave",
       },
       {
          title: "Delete",
          enabled: true,
          buttonId: "btnDelete",
       },
    ];

    cabrillo.viewLayout
       .setNavigationBarButtons(buttons, (buttonIndex) => {
          switch (buttonIndex) {
             case 0:
                console.log("Received an event from the Save button.");
                break;
             case 1:
                console.log("Received an event from the Delete button.");
                break;
          }
       })
       .catch((err) => {
          console.log("Failed to register buttons.");
          console.error(err);
       });

Os botões colocados na barra de navegação podem ser representados por uma imagem.

    var buttons = [
       {
          title: "Compose",
          buttonId: "btnCompose",
          imageName: "compose",
          enabled: true,
       },
    ];

    cabrillo.viewLayout
       .setNavigationBarButtons(buttons, (buttonIndex) => {
          console.log("Success. Received an event from the button.");
       })
       .catch((err) => {
          console.log("Failed to register buttons.");
          console.error(err);
       });

Um botão Voltar nativo é mostrado no aplicativo nativo por padrão, mas você pode substituir o botão Voltar por um botão Cabrillo definindo a propriedade `botãoStyle` de um botão.

    var buttons = [
       {
          title: "Cancel",
          buttonId: "btnCancel",
          imageName: "close",
          buttonStyle: cabrillo.viewLayout.REPLACE_BACK_BUTTON_STYLE,
          enabled: true,
       },
       {
          title: "Done",
          enabled: true,
       },
    ];

    cabrillo.viewLayout
       .setNavigationBarButtons(buttons, (buttonIndex) => {
          switch (buttonIndex) {
             case 0:
                c.log("Cancel button was clicked.");
                break;
             case 1:
                c.log("Done button was clicked.");
                break;
          }
       })
       .catch((err) => {
          c.log("Failed to register buttons.");
          c.error(err);
       });

Os botões são colocados no menu do botão de estouro conforme necessário. Para forçar um botão no menu do botão de estouro, defina a propriedade botãoStyle do botão.

    var buttons = [
       {
          title: "Save",
          buttonId: "btnSave",
          buttonStyle: cabrillo.viewLayout.MORE_MENU_BUTTON_STYLE,
          enabled: true,
       },
    ];

    cabrillo.viewLayout
       .setNavigationBarButtons(buttons, (buttonIndex) => {
          console.log("Success. Received an event from the button.");
       })
       .catch((err) => {
          console.log("Failed to register buttons.");
          console.error(err);
       });

Os botões podem ter um selo quando colocados na barra de navegação. Este exemplo define um botão com um ícone de carrinho de compras e uma contagem de selo de 3. O selo tem um fundo azul com texto branco.

    var buttons = [
       {
          title: "Cart",
          buttonId: "btnCart",
          imageName: "cart",
          badgeCount: 3,
          backgroundColor: "#3091F9",
          textColor: "#FFFFFF",
          enabled: true,
       },
    ];

    cabrillo.viewLayout
       .setNavigationBarButtons(buttons, (buttonIndex) => {
          console.log("Success. Received an event from the button.");
       })
       .catch((err) => {
          console.log("Failed to register buttons.");
          console.error(err);
       });

Limpar botões da barra de navegação.

    cabrillo.viewLayout.setNavigationBarButtons();

## cabrillo.viewLayout - setTitle(cadeia de caracteres título) {#ariaid-title7}

Define o título da exibição nativa atual.
{#CV-setTitle_S__table_kbq_k3n_wbb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| título | Cadeia de caracteres | O título da interface. |
[Tabela 11. Parâmetros]

{#CV-setTitle_S__table_kbq_k3n_wbb} {#CV-setTitle_S__table_lbq_k3n_wbb__entry__2}

| Tipo | Descrição |
|-|-|
| vazio |   |
[Tabela 12. Retorna]

{#CV-setTitle_S__table_lbq_k3n_wbb}  

    cabrillo.viewLayout.setTitle('My Title');

## cabrillo.viewLayout -- showBackButton() {#ariaid-title8}

Mostra o botão Voltar na interface do cliente.
{#CV-showBackButton__table_mdx_dkk_pyb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| Nenhum |   |   |
[Tabela 13. Parâmetros]

{#CV-showBackButton__table_mdx_dkk_pyb} {#CV-showBackButton__table_ndx_dkk_pyb__entry__2}

| Tipo | Descrição |
|-|-|
| Nenhum |   |
[Tabela 14. Retorna]

{#CV-showBackButton__table_ndx_dkk_pyb}  

    cabrillo.viewLayout.showBackButton();

## cabrillo.viewLayout - showSpinner (opções de objeto) {#ariaid-title9}

Mostra um controle giratório nativo na interface atual.
{#CV-showSpinner__table_ljp_jnn_wbb__entry__3}

| Nome | Tipo | Descrição |
|-|-|-|
| opções | Objeto | Opcional. Configurações adicionais para modificar a aparência do controle giratório. { "mask": Boolean, "maskColor": "String" } |
| opções.máscara | Booliano | Opcional. Determina se uma máscara deve ser exibida atrás do controle giratório. Valores válidos: * verdadeiro: exibe uma máscara atrás do controle giratório. * falso: não exibe uma máscara atrás do controle giratório. {#CV-showSpinner__ul_sgs_mhk_pyb} Padrão: falso |
| opções.maskColor | Cadeia de caracteres | Cor da máscara, se habilitada. |
[Tabela 15. Parâmetros]

{#CV-showSpinner__table_ljp_jnn_wbb} {#CV-showSpinner__table_mjp_jnn_wbb__entry__2}

| Tipo | Descrição |
|-|-|
| Nenhum |   |
[Tabela 16. Retorna]

{#CV-showSpinner__table_mjp_jnn_wbb}  

    var options = { mask: true, maskColor: '#ffffff' };
    cabrillo.viewLayout.showSpinner(options);