Header | Developers

Headerクラスはレコード詳細画面のヘッダーに対して操作を行うためのメンバーを持っています。

継承

Item

インスタンスプロパティ

title

現在表示されているヘッダーのタイトルを表す文字列です。

例

esmJSPlugin.screen.sheetDetail("customer").onEntered(function (screen) {
  const header = screen.getHeader();
  header.onMounted(function () {
    header.title = `${header.title}(株)`;
  });
});

originalTitle読み取り専用

ヘッダーのタイトルの初期値を表す文字列です。

例

esmJSPlugin.screen.sheetDetail("customer").onEntered(function (screen) {
  const header = screen.getHeader();
  header.onMounted(function () {
    header.title = `${header.originalTitle}(株)`;
  });
});

インスタンスメソッド

setTitle

文字列を受け取り、ヘッダーのタイトルを変更します。

構文

setTitle(title);

引数

title

ヘッダーのタイトルを示す文字列です。

返値

なし

例

esmJSPlugin.screen.sheetDetail("customer").onEntered(function (screen) {
  const header = screen.getHeader();
  header.onMounted(function () {
    header.setTitle(`${header.originalTitle}(株)`);
  });
});

setColor

文字列を受け取り、ヘッダーの色を変更します。

構文

setColor(color);

引数

color

ヘッダーの色を示す文字列です。

返値

なし

例

esmJSPlugin.screen.sheetDetail("customer").onEntered(function (screen) {
  const header = screen.getHeader();
  header.onMounted(function () {
    header.setColor("red"); // 赤色になります
    header.setColor("#FFFFFF"); // 白色になります
    header.setColor(null); // デフォルトの色になります
  });
});

setBackgroundColor

文字列を受け取り、ヘッダーの背景色を変更します。

構文

setBackgroundColor(backgroundColor);

引数

backgroundColor

ヘッダーの背景色を示す文字列です。

返値

なし

例

esmJSPlugin.screen.sheetDetail("customer").onEntered(function (screen) {
  const header = screen.getHeader();
  header.onMounted(function () {
    header.setBackgroundColor("red"); // 赤色になります
    header.setBackgroundColor("#FFFFFF"); // 白色になります
    header.setBackgroundColor(null); // デフォルトの色になります
  });
});

setButtons

ヘッダーにボタンを追加します。

構文

setButtons([
      {
        onClick: callback,
        iconProps: {
          imgSrc: iconSrc,
          iconName: iconName,
          title: title,
        },
      },
    ]);

引数

onClick

ボタンがクリックされたときに実行される関数です。

iconProps.imgSrc

ボタンに表示されるアイコンの画像パスです。 JSプラグインで用意されているアイコンのパスを設定してください。

iconProps.iconName

ボタンに表示されるアイコンの名前です。指定するアイコンの名前については、以下3つのサイトを参照してください。

iconProps.title

ボタンをホバーしたときに表示されるチップ内に表示される文字列です。

返値

なし

例

esmJSPlugin.screen.sheetDetail("businessplan").onHeaderMounted(function (screen) {
    const header = screen.getHeader();

    // クリックされたタイミングで関数を実行するボタンを追加する
    header.setButtons([
      {
        onClick: () => {
          alert("clicked");
        },
        iconProps: {
          imgSrc: "./icon/icon.png",
          title: "カスタムボタン",
        },
      },
      {
        onClick: () => {
          alert("clicked");
        },
        iconProps: {
          iconName: "mdi-share-variant-outline",
          title: "カスタムボタン",
        },
      },
    ]);
  });