LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-09-09

こんにちは!
今回は

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

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

アプリの準備

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

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

image.png

カスタマイズの方針

以下のようなオリジナルパラメータを追加した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;
  });
});

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0