AppSuiteのAPIを使ったデータの追加(insert_data) #03
前回までは・・・
皆様こんにちは。
もうすぐ10月だというのにいつまでも暑いですね。そろそろうんざりなので、いい加減涼しくなってほしいものです。10月になっても30度を超える日があるとかないとか・・・想像するだけで嫌になりますね。
こう暑いと何もやる気が起こらず、記事の投稿もままならなくなります。
さて、それでは言い訳はこれくらいにして・・・
前回までは、AppSuiteのAPIを使ってデータの参照系（一覧データ取得、1件データ取得）の処理を行いました。
前回同様、開発環境や準備などについては割愛させていただきますので、ご興味を持っていただけたら、とても簡単ですのでぜひとも#01をご一読いただき開発環境の準備など取り組んでみてください！
ちなみに、我らが（？）desknet's NEOが、9月13日にバージョンアップ(V8.6)されたみたいです！
今回も様々な便利機能が付いたみたいですね！
そんなバージョンアップ内容の中でも、特に関係ありそうな内容では、
なんと！desknet's NEOモバイルアプリから！
AppSuiteのアプリを利用することができるようになった！
みたいで、更に利用の幅が広がりますね！
また、desknet's NEO本体のほうでいうと、ポータル上に複数の「メニュー」コンテンツを配置できるようになったりと、逆に「なんでいままでできんかったんや」というくらい、よき機能も追加されたようです。想像しただけで業務効率が上がりそうです！好きなオプションメニュー表示したり、よく使うアプリだけのメニュー表示したりですね！
こんな暑い中、ネオジャパンの皆様、ご苦労様でした！
利用ユーザーの一人として感謝申し上げます。
今回は！
今まではデータの参照系APIのみでしたが、今回から、いよいよデータの登録・更新系APIを使っていきたいと思います。
#01と#02で作成した一覧データ取得、1件データの取得のサンプルアプリを改造して、「データの追加API」（insert_data）を使ってみたいと思います。
今回も、あまり複雑なものではありませんので、ぜひ最後までお付き合いください。
事前準備
それでは、実際の手順に進んでいきます。
Visual Studio Codeにて、#02で作成したサンプルアプリケーションのフォルダを開くか、新たに作成してください。
前回の続きだと、プロジェクトを実行すると、AppSuieから取得した一覧データが表示され、「名前」リンクをクリックすると1件データの表示ができる状態になっているかと思います。
まずは、データを追加するために必要な項目を入力するエリア（名前、住所、電話番号、年齢、区分を入力する項目群）を用意しましょう。
エリアを追加したら、次に入力したデータでAPIをコールし、AppSuiteにデータを追加する関数を用意しましょう。<button>タグのclickイベントからコールされるentryData関数がそれに該当します。いったん、関数を追加し、入力した値を表示してみます。
この状態で各入力項目に値を入力し、「データ追加」ボタンを押すと、ブラウザのコンソールに以下のように表示されると思いますので、これで準備完了です。（「コンソール」は、ブラウザを表示した状態でF12キーをクリックすると表示される「開発者ツール」にあります。）
無事、入力内容が表示されましたでしょうか？
（24歳と入力しているのは気にしないでください。気持ちの問題です。）
それでは準備できましたので、今回のお題の「データの追加APIの使用」に進んでいきましょう！
データの追加APIの使用方法
AppSuiteのAPIを使ってデータを追加するためのサンプルコードを記述していきます。
ちなみに、AppSuiteのデータの追加APIは、以下のページに詳細説明がありますので、お使いいただく前にぜひご一読ください。
それでは、「事前準備」で修正したコードに、更に手を加えていきます。
事前準備のコードでは、「データ追加」ボタンで入力した値を取得・表示できるようにしましたので、そこからデータの追加APIを使用して入力した内容をAppSuiteに追加するための処理を実装していきます。
entryData関数内の処理を以下のように修正します。
入力した値を取得し、AppSuiteの「データの追加」API（insert_data）をコールしています。また、APIの実行結果をテーブルの下部に表示する、"detail_data"変数に格納してみました。
ポイントは、AppSuiteの項目名をカッコ（{{と}}）で囲むこと、でしょうか。このカッコで囲まないと、正しくデータが追加されないのでご注意ください。
それでは動作を確認してみましょう。
「名前」、「住所」、「電話番号」、「年齢」、「区分」を入力し、「データ追加」ボタンを押すと、実行結果として、"status"、"servertime”、”ID"がレスポンスとして取得できますので、その結果がテーブル下部に表示されます。
正しく実行されていれば、"status":"ok"で、”ID"にテーブルに表示されていない新たなIDが表示されているはずです。また、AppSuiteを表示すると、入力したデータが新たに追加されていることと思います。
ちなみに、サンプルコード側のブラウザには新たに追加されたデータが表示されないのは、ブラウザ上に表示しているデータが、新しいデータを追加する前の一覧データで表示されているためです。
ブラウザを更新し、最新の状態にすれば追加したデータが表示されます。
いかがでしょうか？簡単すぎましたかね。
IDが5になっているのは、一度失敗してID:4のデータは使えなかったため削除しているからです。（てへ・・・そしてなんと、「住所」欄にふりがな入れとる・・・書き終わってから気が付きました。暑いからってことで許してください。）
ブラウザで入力した内容を、APIを使ってAppSuiteに追加する、とても簡単なサンプルでした。ちょっと短めですが、今回はここまでとさせていただきます。
前回同様、今の段階では、AppSuite上で行えることと同じで、使い道もありませんが、次回はデータの変更、削除を行ったりしてみたいと思います。また次回もお付き合いいただければ幸いです。
それではまた！
ここで使用したサンプルコードと、AppSuiteのサンプルアプリをダウンロードできるようにしてみましたので、必要であればお使いください。
余談ですが・・・
現在のサンプルコードは、"Vue3"を使って作成しています。Vue.jsだけを使っており、あまり複雑な表現などをするにはちょっと不便なのですね。
なので、ちょっと汚いコードになっていたり、おかしな処理をしていたりしていますが、あと３～４記事で基本的なAPIのご紹介が終わりますので、もうしばらくお付き合いください。
基本的なAPI紹介が終わったら、ちょっとした業務アプリ？程度のサンプルを作成してみたいと思っています。そこでは、"Vue3"ではなく、Vue2とVuetifyというライブラリを使用して作成することになりますので、そうなるともう少しはすっきりしたサンプルになると思いますので、それまではご容赦ください。（Vue3はまだまだ勉強中なので、Vuetify使用時にはVue2になります・・・）
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか？