---
sourceDocument: オーストラリア API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/api-reference

 Release :

    - australia

ft:locale :

    - ja-JP

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) 所要時間：9分

Cabrillo 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 オブジェクトのアレイ | 設定するボタンについて説明します。現在、最大 1 つのボタンがサポートされています。 |
| execute | 関数 | ボタンがタップされたときに呼び出す関数。この関数には戻り値がなく、選択したボタンインデックスを唯一のパラメーターとして受け取ります。関数には、数値である単一のパラメーターが必要です。 |
[表 : 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 オブジェクトの配列。 | 設定するボタンについて説明します。必要に応じて、ボタンが追加のメニューにオーバーフローする場合があります。 |
| execute | 関数 | ボタンがタップされたときに呼び出す関数。この関数には戻り値がなく、選択したボタンインデックスを唯一のパラメーターとして受け取ります。関数には、数値である単一のパラメーターが必要です。 |
[表 : 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(文字列 title) {#ariaid-title7}

現在のネイティブビューのタイトルを設定します。
{#CV-setTitle_S__table_kbq_k3n_wbb__entry__3}

| 名前 | タイプ | 説明 |
|-|-|-|
| title | 文字列 | インターフェイスのタイトル。 |
[表 : 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);