---
sourceDocument: Xanadu API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# cabrillo.viewLayout - クライアント

# cabrillo.viewLayout - クライアント {#ariaid-title1}

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](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}

| タイプ | 説明 |
|-|-|
| promise | 成功した場合はタイトルテキストに解決され、それ以外の場合はエラーになります。 |
[表 : 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}

| タイプ | 説明 |
|-|-|
| promise | 成功した場合は未解決のオブジェクト、それ以外の場合はエラー。 |
[表 : 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}

| タイプ | 説明 |
|-|-|
| promise | 成功した場合は未解決のオブジェクト、それ以外の場合はエラー。 |
[表 : 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}

| 名前 | タイプ | 説明 |
|-|-|-|
| 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);