---
sourceDocument: 호주 API 참조
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/api-reference

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 API 참조

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# cabrillo.viewLayout - 클라이언트

# cabrillo.viewLayout - 클라이언트 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 8분

카브릴로 JS 버튼 및 스피너와 같은 네이티브 UI 요소에 대한 액세스를 제공하는 함수입니다.

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

현재 네이티브 뷰의 제목을 가져옵니다.
{#CV-getTitle__table_rcj_22k_pyb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 안 함 |   |   |
[표 1. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 약속 | 성공하면 제목 텍스트로 해결되고, 그렇지 않으면 오류로 해결됩니다. |
[표 2. 반환]

{#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}

클라이언트 인터페이스에서 뒤로 버튼을 숨깁니다.
{#CV-hideBackButton__table_smb_fkk_pyb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 안 함 |   |   |
[표 3. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 안 함 |   |
[표 4. 반환]

{#CV-hideBackButton__table_tmb_fkk_pyb}  

    cabrillo.viewLayout.hideBackButton();

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

현재 인터페이스에서 네이티브 스피너를 숨깁니다.
{#CV-hideSpinner__table_oyf_tnn_wbb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 안 함 |   |   |
[표 5. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 무효 |   |
[표 6. 반환]

{#CV-hideSpinner__table_pyf_tnn_wbb}  

    cabrillo.viewLayout.hideSpinner();

## cabrillo.viewLayout - setBottomButtons(배열 버튼, 기능 실행) {#ariaid-title5}

현재 인터페이스의 맨 아래에 있는 버튼을 설정합니다.
이미지와 배지는 하단 버튼에서 지원되지 않습니다.
{#CV-setBottomButtons_CBA-f__table_b4j_hmn_wbb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 버튼 | Cabrillo.Button 객체의 배열 | 설정할 버튼에 대해 설명합니다. 현재 최대 하나의 버튼이 지원됩니다. |
| 실행 | 함수 | 버튼을 누를 때 호출할 함수입니다. 함수에는 반환 값이 없으며 선택한 버튼 인덱스를 유일한 매개변수로 사용합니다. 함수에는 숫자인 단일 매개변수가 있어야 합니다. |
[표 7. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 약속 | 성공하면 해결되지 않은 객체이고, 그렇지 않으면 오류가 표시됩니다. |
[표 8. 반환]

{#CV-setBottomButtons_CBA-f__table_c4j_hmn_wbb}  
하단 버튼을 설정합니다.

    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);
    });

아래쪽 버튼을 지웁니다.

    cabrillo.viewLayout.setBottomButtons();

## cabrillo.viewLayout - setNavigationBarButtons(배열 버튼, 기능 실행) {#ariaid-title6}

현재 인터페이스의 탐색 모음에서 버튼을 설정합니다.
오버플로우 버튼 메뉴에 나타나는 버튼의 이미지와 배지는 생략됩니다. 이러한 이유로 탐색 모음에서 이미지 단추를 설정할 때 제목과 이미지 이름을 제공하는 것이 가장 좋습니다.
{#CV-setNavigationBarButtons_CBA_F__table_ojc_1jn_wbb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 버튼 | Cabrillo.Button 객체의 배열입니다. | 설정할 버튼에 대해 설명합니다. 버튼은 필요에 따라 추가 메뉴로 오버플로우될 수 있습니다. |
| 실행 | 함수 | 버튼을 누를 때 호출할 함수입니다. 함수에는 반환 값이 없으며 선택한 버튼 인덱스를 유일한 매개변수로 사용합니다. 함수에는 숫자인 단일 매개변수가 있어야 합니다. |
[표 9. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 약속 | 성공하면 해결되지 않은 객체이고, 그렇지 않으면 오류가 표시됩니다. |
[표 10. 반환]

{#CV-setNavigationBarButtons_CBA_F__table_pjc_1jn_wbb}  
탐색 모음 버튼을 설정합니다.

    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);
       });

여러 버튼을 처리합니다.

    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);
       });

탐색 모음에 배치된 버튼은 이미지로 나타낼 수 있습니다.

    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);
       });

네이티브 뒤로 버튼은 기본적으로 네이티브 앱에 표시되지만 버튼의 `buttonStyle` 속성을 설정하여 뒤로 버튼을 Cabrillo 버튼으로 바꿀 수 있습니다.

    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);
       });

버튼은 필요에 따라 오버플로우 버튼 메뉴에 배치됩니다. 오버플로우 버튼 메뉴에 버튼을 강제로 넣으려면 버튼의 buttonStyle 속성을 설정합니다.

    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);
       });

버튼에 탐색 모음을 배치할 때 배지가 있을 수 있습니다. 이 예에서는 쇼핑 카트 아이콘과 배지 개수가 3인 버튼을 설정합니다. 배지는 파란색 배경에 흰색 텍스트가 있습니다.

    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);
       });

탐색 모음 지우기 버튼.

    cabrillo.viewLayout.setNavigationBarButtons();

## cabrillo.viewLayout - setTitle(문자열 제목) {#ariaid-title7}

현재 네이티브 뷰의 제목을 설정합니다.
{#CV-setTitle_S__table_kbq_k3n_wbb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 직위 | 문자열 | 인터페이스의 제목입니다. |
[표 11. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 무효 |   |
[표 12. 반환]

{#CV-setTitle_S__table_lbq_k3n_wbb}  

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

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

클라이언트 인터페이스에 뒤로 버튼을 표시합니다.
{#CV-showBackButton__table_mdx_dkk_pyb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 안 함 |   |   |
[표 13. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 안 함 |   |
[표 14. 반환]

{#CV-showBackButton__table_ndx_dkk_pyb}  

    cabrillo.viewLayout.showBackButton();

## cabrillo.viewLayout - showSpinner(개체 옵션) {#ariaid-title9}

현재 인터페이스에 네이티브 스피너를 표시합니다.
{#CV-showSpinner__table_ljp_jnn_wbb__entry__3}

| 이름 | 유형 | 설명 |
|-|-|-|
| 옵션 | 객체 | 옵션입니다. 스피너의 모양을 수정하는 추가 설정입니다. { "mask": Boolean, "maskColor": "String" } |
| options.mask | 부울 | 옵션입니다. 스피너 뒤에 마스크를 표시할지 여부를 결정합니다. 유효한 값은 다음과 같습니다. * true: 스피너 뒤에 마스크를 표시합니다. * false: 스피너 뒤에 마스크를 표시하지 않습니다. {#CV-showSpinner__ul_sgs_mhk_pyb} 기본값: false |
| options.maskColor | 문자열 | 마스크의 색상입니다(활성화된 경우). |
[표 15. 매개변수]

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

| 유형 | 설명 |
|-|-|
| 안 함 |   |
[표 16. 반환]

{#CV-showSpinner__table_mjp_jnn_wbb}  

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