Skip to content

kintoneのJSカスタマイズ(React)でダイアログが閉じるまで待つ

Updated:

手順

ポイントは2つ。

kintone.events.on(
  [
    "app.record.detail.process.proceed",
    "mobile.app.record.detail.process.proceed",
  ],
  async (event) => {
    const root = createRoot(container);

    const promise = new Promise((resolve, reject) => {
      root.render(<App resolve={resolve} reject={reject} />);
    });

    return promise
      .then(() => {
        return event;
      })
      .catch(() => {
        return false;
      })
      .finally(() => {
        root.unmount();
      });
  },
);

あとは、コンポーネント内でresolve()。

const App = (props) => {
  const { resolve, reject } = props;

  const [open, setOpen] = useState(true);

  const onClose = () => {
    setOpen(false);
    resolve(0);
  };

  return <Dialog open={open} onClose={onClose} />;
};