この記事は コラボフロー Advent Calendar 2023 の 22日目 の記事です！
はじめに
入社３ヶ月ちょっとのぺーぺーに何か書けることがあるんだろうか・・・
と悩んでいたところ
サポートページにサンプル/Tipsというものがあることを聞き
これ見ればJavaScript初心者でも何か作れるのでは？
というわけで今回はサンプルを見ながら何かを作ってみようということをやっていきます。
やってみる
どんな感じで使うんだろうということで、適当にサンプルを選んで試してみます。
22日目の記事ということで22個目を選択。
手順通りに進めてみます。
- サンプルページにあるコードをコピペして.jsファイルとして保存。
- コラボフローを開いて、アプリ設定からフォーム設定を開き新規作成をポチ。
- フォーム名と説明は適当に入力して通常フォーム作成をポチ。
- 追加から日付パーツを選択。
- パーツIDに指定されたもの、パーツ名を適当に入力してパーツの登録をポチ。
- 日付パーツが追加されてるのでフォーム登録をポチ。
- 戻ると今登録したフォームがあるのでそれを選択。
- 上のタブからカスタマイズを選択して、最初に保存した.jsファイルをアップロードして保存。
- アプリ設定の経路設定から新規作成をポチ。
- 申請書類のところにさっき作ったフォームを設定して経路登録をポチ。
- 新規文書から作った経路を選択して過去の日付を入れると・・・？
- で き た！
JavaScriptのコードを1文字も書かず、保存して使うだけでなんか出来てしまった。
サンプルすごい
組み合わせてみる
思った以上にサクッと出来てしまったので今度は組み合わせて何か作ってみようと思います。
最初に選んだのが日付関連だったので同じく日付関連のサンプルから以下の4つを選んでみました。
JavaScript API を利用し、日付の大小をチェックして値を入れ替える
2つの日付パーツの値から日数を計算する
日付から独自の会計期間を算出し設定する
日付の値を任意の形式に変換してテキストに設定する
フォーム作成と経路作成は割愛。
サンプルページにあるコードを1つずつコピペして・・・
今回は少しいじりましたがソースコードはこんな感じ。
(function () {
'use strict';
collaboflow.events.on(['request.input.fidStartDate.change', 'request.input.fidEndDate.change'], function (e) {
const parts = e.parts;
const startDate = parts['fidStartDate'].value;
const endDate = parts['fidEndDate'].value;
/* JavaScript API を利用し、日付の大小をチェックして値を入れ替える */
// 日付が未入力なら日数をクリア
if (startDate === '' || endDate === '') {
parts['fidDayPeriod'].value = '';
parts['fidFinancialYear'].value = '';
parts["fidMonthText"].value = '';
return;
}
// 日付を入れ替える
if ( startDate > endDate) {
parts['fidStartDate'].value = endDate;
parts['fidEndDate'].value = startDate;
}
/* 2つの日付パーツの値から日数を計算する */
const dayPeriodStartDate = parts['fidStartDate'].value
const dayPeriodEndDate = parts['fidEndDate'].value
const DAY_MILLION_SECOND = 24 * 60 * 60 * 1000;
const dayPeriod = (dayPeriodStartDate - dayPeriodEndDate) / DAY_MILLION_SECOND;
parts['fidDayPeriod'].value = Math.abs(dayPeriod) + 1;
// 開始日に入力された日付から月と年度を計算する
const targetDate = parts['fidStartDate'].value;
/* 日付の値を任意の形式に変換してテキストに設定する */
// 月を取得して、設定する
const month = targetDate.getMonth() + 1;
parts['fidMonthText'].value = month + '月';
/* 日付から独自の会計期間を算出し設定する */
// 入力された日付から3か月を減算する
targetDate.setMonth(targetDate.getMonth() - 3);
// 3か月減算した日付の「年」を設定する
parts['fidFinancialYear'].value = targetDate.getFullYear() + '年度';
});
})();
※JavaScript初心者なのでもっとこう書けばいいのにとかあると思いますがご容赦ください
これを作ったフォームにアップロードして
新規文書からそのフォームを選択してひらくと・・・？
ちょっと使い道思いつきませんが、、、組み合わせて何かが出来ました！
おわりに
いかがでしたでしょうか。
今回はサンプル/Tipsページにあるものから作ってみましたが
JavaScript全然わからない自分でもコピペするだけで出来てしまいましたし
ご紹介した以外にも色々と載ってますので
ちょっと機能追加してみたいけどJavaScriptってなんかよくわからん
という方は一度サンプルを見て試してみるというのも良いかなと思います。