サンプルプラグイン

以下では、実用的な 3 つのプラグイン実装例を紹介します。これらのプラグインを参考に、業務に合わせたカスタマイズを行うことができます。

タスクの優先度に応じて詳細画面のヘッダーの色を変更するプラグイン

このプラグインは、タスクの優先度に応じてヘッダーの背景色を動的に変更します。優先度が一目で分かるため、重要なタスクの見落としを防ぐことができます。

• 普通：灰色
• 優先：青
• 最優先：赤

const COLOR_MAP = {
  普通: "gray",
  優先: "blue",
  最優先: "red",
};

esmJSPlugin.screen.sheetDetail("task").onEntered(function (screen) {
  const header = screen.getHeader();
  const status = screen.getSheetItem("tasks.task.priority_id");

  status.onMounted(
    () =>
      COLOR_MAP[status.selectionLabel] &&
      header.setBackgroundColor(COLOR_MAP[status.selectionLabel])
  );
});

活動登録変更画面でメモ型項目の文字数を表示するプラグイン

文字数制限のあるメモ欄で、現在の文字数を常に確認できるようにするプラグインです。ラベルに文字数を表示することで、制限を超過する前に気付くことができます。

esmJSPlugin.screen.sheetSave("activity").onEntered(function (screen) {
  const memo = screen.getSheetItem("activities.activity.memo");

  const setLabel = () =>
    (memo.label = `${memo.originalLabel}(${memo.length}文字)`);

  memo.onMounted(setLabel);

  memo.onUpdated(setLabel);
});

タスク登録変更画面で土日をのぞいた３日後の日付を完了日の初期値にするプラグイン

タスク作成時に、完了予定日の初期値として土日を除いた 3 営業日後の日付を自動設定します。これにより、現実的な期日設定を支援し、入力の手間を省くことができます。

esmJSPlugin.screen.sheetSave("task").onEntered(function (screen) {
  const completionDate = screen.getSheetItem(
    "tasks.task.expected_completion_date"
  );

  const getDayAfter = (count, date = new Date()) => {
    if (count <= 0) return date;

    date.setDate(date.getDate() + 1);

    // 土日をスキップする
    if (date.getDay() === 0 || date.getDay() === 6) {
      return getDayAfter(count, date);
    }

    return getDayAfter(count - 1, date);
  };

  completionDate.onMounted(() => {
    completionDate.value = getDayAfter(3);
  });
});