kintoneにオリジナルアクションを作成するカスタマイズ

こんにちは！
今回は

を応用して、オリジナルアクションを作ってみたいと思います👀

↓こんなオリジナルアクションボタンを作ります。

アプリの準備

フィールド種類	フィールドコード	備考
文字列(1行)	オリジナルアクション

※通常アクションのフィールド不要です👀

カスタマイズの方針

以下のようなオリジナルパラメータを追加したURLを開くことで
新規レコード追加時にオリジナルのパラメータoriginal_actionの値XXXXを文字列(1行)フィールドにコピーする・・・というようなカスタマイズをします。

https://【サブドメイン】.cybozu.com/k/【アプリID】/edit?original_action=XXXX

作成の手順

1. オリジナルパラメータを含むURLを開いたら、original_actionの値を文字列(1行)フィールドにコピーする
2. オリジナルアクションボタンをクリックしたら、original_actionパラメータを含むURLに飛ぶ

この2つの手順を合わせるとうまくいくはずです👀

JavaScript

というわけで作っていきます。

今回、ボタンやテキストボックス作成に kintone UI Component を使いました。
https://unpkg.com/kintone-ui-component/umd/kuc.min.js

レコード追加画面表示

レコード追加画面表示後に、original_actionパラメータを見て、
パラメータがあればオリジナルアクションの動き、
なければ通常のレコード追加ということになります。

// オリジナルアクションのパラメータ定義
const original_action = "original_action";

// レコード追加画面表示後
kintone.events.on(["app.record.create.show"], (event) => {
  // パラメータ取得
  const params = new URLSearchParams(location.search);
  if (params.has(original_action)) { // original_actionパラメータがあれば
    // 文字列(1行)フィールド（フィールドコード：オリジナルアクション）にパラメータの値をコピーする
    event.record.オリジナルアクション.value = params.get(original_action);
  }
  return event;
});

詳細画面にオリジナルアクションボタンを設置

詳細画面表示後、テキストボックスやオリジナルのアクションボタンを設置します。
クリックしたらオリジナルアクションの含まれるURLを作成してそのURL飛びます。

kintone.events.on(["app.record.detail.show"], (event) => {
  // 上の白い部分取得
  const sp = kintone.app.record.getHeaderMenuSpaceElement();
  // テキストボックス
  const txt = new Kuc.Text({
    label: "渡す文字列",
    visible: true,
    disabled: false,
  });
  sp?.appendChild(txt);

  // ボタン
  const btn = new Kuc.Button({
    text: "オリジナルアクション",
    type: "submit",
    visible: true,
    disabled: false,
  });
  sp?.appendChild(btn);

  // ボタンクリック
  btn.addEventListener("click", () => {
    const url = new URL(location);
    url.href = url.origin + "/k/【アプリID】/edit"; 
    // original_actionパラメータに、テキストボックスの値をセットする
    url.searchParams.set(original_action, txt.value);
    // 作成したURLに飛ぶ
    location.href = url.href;
  });
});

まとめ

通常のアクションの細かいところに手が届かない！というときにどうぞ。