JavaScriptの記事

クエスチョンボード WebTools middle

登録フォームで URL パラメータをキーに別DBのレコードを取得し自動登録する

SPIRAL Ver.2 (WebTools) で登録フォームを作成しています。 登録フォームには外部のページからアクセスするのですが、その時に指定された URL パラメータをキーに、別DBのレコードを取得し自動登録する方法があればご教示ください。 【DB構成】 ① マスタDB 商品マスタのようなイメージです。 フィールドは以下です。 ・商品コード (4桁の数値) ・商品名 ・販売状態 (販売中/...

クエスチョンボード ver.1 high

JavaScriptで必須制御を行った項目について③

JavaScriptの必須制御と表示制御について以前問い合わせて回答をいただいたものです。 フォームにてJavaScriptによる出し分け制御を行っておりますが、 運用上問題ないか確認したい事象があり、ご相談です。 ■現在の実装 送迎タイプ(駅送迎/空港送迎)に応じて入力項目を出し分けしており、 非表示側の必須項目についてはダミー値を設定しております。 以前ご案内いただいた内容を参考に、 表示切替...

クエスチョンボード ver.1 high

JavaScriptで必須制御を行った項目について②

JavaScriptの必須制御と表示制御について以前問い合わせて回答をいただいたものです。 ご案内いただいた方法にて実装を試したところ、 下記の事象が発生しております。 ■現在の状況 「送迎タイプ」の選択に応じて、 非表示となる必須項目へダミー値を設定する実装を行いました。 しかし、以下の問題が発生しております。 ①「送迎タイプ」を変更すると、  以前設定したダミー値がフォーム上に表示されてしまう...

クエスチョンボード WebTools high

「パスワード再登録フォーム」ブロックの再登録で、「パスワードフィールド」以外のフ

こちらの投稿で、「パスワードフィールド」に登録された暗号化文字列の平文を別のテキストフィールドに登録する方法を質問させていただきました。 https://knowledge.spirers.jp/question/board/detail?topicid=261 これに関連した内容となりますが、認証エリアのパスワード再設定の際、「パスワードフィールド」に加えて、パスワードの平文文字列を格納した「テ...

開発情報・ナレッジ ver.1 high

フォームに金融機関・支店の検索機能を組み込むサンプルプログラム(BankcodeJP連携)

入力フォーム上で金融機関・支店を検索一覧から選べるようにし、選択結果をフォーム項目へ格納する構成を紹介します。 検索用の中継PHPは、本フォームとは別にSPIRAL内にもう1つ「ダミーフォーム」(見えないダミー項目だけで構成した空フォー

開発情報・ナレッジ WebTools high

フォームに金融機関・支店の検索機能を組み込むサンプルプログラム(BankcodeJP連携)

フォーム上で金融機関・支店を検索一覧から選べるようにし、選択結果を項目へ格納する構成を紹介します。 検索用の中継は、フォームとは別にSPIRAL内にもう1つページを作成し、そのPHPタブ・BODYタブに貼り付ける前提です。ページのURL

開発情報・ナレッジ WebTools high

レコードリスト(一覧表)から選択して入力フォームに反映する方法

フォームでデータを入力する際、こんなお困りごとありませんか? ・商品一覧のExcelファイルから商品コードをコピペするのが面倒 ・担当者の入れ替えがあり、その都度「担当者」の選択肢を修正しないといけない 今回は、レコードリストブロックとJavaScriptと組

クエスチョンボード ver.1 low

フロント修正によるDBの影響

現在、SPIRALのWebフォームにて口座名義人の入力仕様を変更し、 フロント側(JavaScript)で小文字カナ(ァィゥェォッャュョ)を大文字カナ(ァィゥェォッャュョ)に変換する対応を実施しています。 本対応は入力時の表示・値変換のみに限定しており、サーバー側処理およびデータベース構造・更新処理には変更を加えていません。 この前提において、以下をご確認させてください。 ① 既にデータベースに登...

クエスチョンボード WebTools high

顧客コード入力後のデータ取得方法および親画面への値返却方法について

お世話になっております。 会員登録画面を開発しております。 顧客コードをキーとした顧客情報の取得について、以下2点ご相談です。 ■① 顧客コード手入力時のデータ取得について 顧客コードをテキストボックスへ手入力し、フォーカスアウト時(blurイベント等)に DBへ顧客コードをキーとして検索を行い、該当データを他の入力項目へ自動反映させたいと考えております。 【希望動作】 ・画面遷移(リロード)なし...

開発情報・ナレッジ ver.1 middle

一覧表で一括更新を可能にする方法

一覧表で、複数レコードのステータスを一括で更新できたら便利だと思いませんか? 標準機能では一つずつ操作する必要がありますが、JavaScriptを活用することで一括操作が可能になります。 本記事では、選択した複数行のステータスを一括で変更できる便利なカスタマイズをご紹介します。 反映イメージ デモサイトはこ...

クエスチョンボード ver.1 high

ログイン後のリダイレクト先を変更したい

「SPIRALセキュアセッションマネージャー」にて SPIRALv1とWordPressのプラグインにてログイン認証サイトを作成しています。 下記のような画面遷移は可能でしょうか。 下記記事を確認し、プラグイン設定のみでは不可能と判断しておりますので WordPressのPHPにて対応が可能か検討しております。  ▼FAQ:ログイン後のリダイレクト先を変更することはできますか?  https://...

開発情報・ナレッジ WebTools middle

テキストエリアに文字数カウントを追加するJavaScript

本記事では、テキストエリアの入力枠の下に入力した文字数を表示するJavaScriptの実装方法を紹介します。 この機能により、テキストの入力制限をかけている場合に「でも今どのくらい入力していて、 どの程度減らせばいいかわからない」といった事態を解消することが可能で

クエスチョンボード WebTools high

リストブロックのフィルタ方法とページ内の入力フォーム設定

添付画像のようなシステム構成で問い合わせ管理システムを作成したいと考えております。 その際、以下2つの内容について、標準機能で実現可能か、それともJavascriptやPHPを用いたコード開発が必要になるのかを確認させていただきたく、質問しました。 ・問い合わせ詳細ページのリストブロックに、問い合わせDBに持っている問い合わせIDをキーとして、問い合わせ履歴DBのレコードを表示することは標準機能で...

クエスチョンボード WebTools high

外部APIの呼び出しについて

以下のような仕組みを非同期で実装予定です。 ①SPIRALのJSから、別ページのSPIRALのPHPを呼び出す ②SPIRALのPHPから、AWSのAPI Gatewayを呼び出し、lambda関数を実行してDBのデータを取得 ③取得したデータを、SPIRALのPHPから別ページのSPIRALのJSに返す もし、SPIRALからAPI Gatewayを呼び出し、lambda関数を実行するシステムの...

開発情報・ナレッジ ver.1 high

非同期通信を使ったグラフ付きダッシュボードを作成するサンプルプログラム

カスタムAPIを使ってリアルタイム売上ダッシュボードを作成するサンプルプログラムを紹介します。 本記事は「最小構成で動作検証 → 実DB連携」の2段階で解説します。 開発初期はカスタムAPI(モックデータ)でUIと動作をすばやく検証し、その後に本番データへ

開発情報・ナレッジ WebTools high

パスワードの世代管理を行い重複を防ぐ方法

本記事では同じパスワードを使い続けないように世代管理を行う方法をご紹介いたします。 過去のパスワードを5世代保存し、新しく入力されたパスワードと比較することで、同じパスワードを使用していないかチェックします。 SPIRALではフィールドタイプがパスワードの場合、登録後の入力内容の

開発情報・ナレッジ WebTools middle

確認ステップから任意のステップまで戻るボタンを作成するサンプルプログラム

SPIRALで作成した複数ステップにまたがるフォームでは、 通常ユーザーは一つ前のステップにしか戻ることができません。 例えば、ステップ4からステップ1に直接戻るような、任意のステップへの移動は標準機能では提供されていません。 また、セキュリティ上の理

開発情報・ナレッジ WebTools high

別ページに設置したPHPにて非同期通信でデータ検証をするサンプル

本記事では、別ページに設置したPHPを活用して、非同期通信を用いたシンプルなデータ検証システムを実装する方法をご紹介します。 この仕組みでは、ユーザが入力したテキストを別ページのPHPで検証し、その結果をフロントエンドで即時にフィードバックすることが可能です。

クエスチョンボード WebTools high

JavaScriptからPHP経由でAPIのデータを取得

現在、HTML + JavaScript + PHP で検索画面を作成しています。 目的は、JavaScriptからPHPを経由してAPIを呼び出し、検索結果を画面に表示することです。 やりたいこと: 1. HTMLで検索フォームを作成 2. JavaScriptでフォームの値を取得 3. PHPにPOSTしてSpiral APIを呼び出す 4. PHPの返却結果をJSONで受け取り、画面に描画 ...

開発情報・ナレッジ ver.1 middle

単票で未入力の項目を非表示にする方法

SPIRALの単票ページで、データが未入力の項目(行)を自動的に非表示にするJavaScriptの実装方法を紹介します。 これにより、データが入力されている項目のみをスッキリと表示させることができ、ユーザーにとって見やすい画面を作成できます。 実装の概要 今回のコードでは、以下の流れで処理を

開発情報・ナレッジ ver.1 high

CSVファイルをページ上から一括更新するサンプルプログラム

ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括更新するサンプルプログラムを紹介します。 注意点 ・ 付属のJavaScript CSVパーサーは簡易的なものです。複雑なCSV(改行を含む値など)には対応できない場合があります。 ・ 更新先のDB(サ

開発情報・ナレッジ ver.1 high

CSVファイルをページ上から一括アップロードするサンプルプログラム

ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括登録するサンプルプログラムを紹介します。 注意点 ・ 付属のJavaScript CSVパーサーは簡易的なものです。複雑なCSV(改行を含む値など)には対応できない場合があります。 ・ 登録先の

開発情報・ナレッジ WebTools high

CSVファイルをページ上から一括更新するサンプルプログラム

ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括更新するサンプルプログラムを紹介します。 注意点 ・ このサンプルは、SPIRALのページで動作することを前提としています。 ・ 更新先のDBと、CSVの列構成を事前に一致させておく必要があります。 ・

開発情報・ナレッジ ver.1 middle

UXを向上させるリアルタイム・パスワード強度チェッカー

入力されたパスワード強度を視覚的に分かるUI 概要 ユーザーが入力するパスワードの強度をリアルタイムで視覚的にフィードバックするUIコンポーネントです。 強度メーターと条件チェックリストにより、ユーザーは安全なパスワードを直感的に作成できます。セキュリティ向上とUX改善に繋がり、会員登

開発情報・ナレッジ ver.1 middle

「エラーがどこか分からない!」を防ぐ。ユーザーのストレスを減らすエラーサマリーの実装方法

SPIRALのフォームでエラーサマリーを表示するJavaScriptをご紹介します。 機能としてはエラーメッセージをカウントし内部リンクによってエラー位置に遷移するというシンプルなものですが、どこでエラーが起きたかを一目で把握でき、エラー位置までクリッ

開発情報・ナレッジ WebTools high

CSVファイルをページ上から一括アップロードするサンプルプログラム

ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括登録するサンプルプログラムを紹介します。 注意点 ・ このサンプルは、SPIRALのページで動作することを前提としています。 ・ 登録先のDBと、CSVの列構成を事前に一致させておく必要があり

開発情報・ナレッジ WebTools middle

フィールド間の重複選択を不可にするサンプルプログラム

アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2

開発情報・ナレッジ ver.1 middle

フィールド間の重複選択を不可にするサンプルプログラム

アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2

開発情報・ナレッジ ver.1 middle

テキストをカレンダー形式で表示させるサンプルプログラム

フォームの日付入力欄は、ユーザーにとって入力が煩雑になりがちな要素です。 特に、年月日が別々のテキストフィールドになっている場合、UI/UXの低下を招くことがあります。 本記事では、既存の年月日入力欄を、 直感的に操作できるカレンダーピッカーに置き換えるJavaScrip

開発情報・ナレッジ WebTools middle

マルチセレクトでその他を選択した時に入力欄の活性化・非活性化を切り替えるサンプルプログラム

本記事では、HTMLのチェックボックス群において、 「その他」の選択肢(特定のチェックボックス)が選ばれた際に、 関連するテキスト入力欄を動的に活性化・非活性化するJavaScriptの実装方法を紹介します。 この機能により、ユーザーが

開発情報・ナレッジ WebTools high

カスタムAPIを使ったグラフ付きダッシュボードを作成するサンプルプログラム

カスタムAPIを使ってリアルタイム売上ダッシュボードを作成するサンプルプログラムを紹介します。 本記事は「最小構成で動作検証 → 実DB連携」の2段階で解説します。 開発初期はカスタムAPI(モックデータ)でUIと動作をすばやく検証し、その後に本番データ

開発情報・ナレッジ WebTools high

OpenAIとpdf.jsで実現するPDFを自動解析しフォーム入力するサンプルプログラム

本記事では、PDFをアップロードして自動解析し、 フォームのフィールドへ情報を自動入力する仕組みを2種類ご紹介します。 pdf.js を用いてブラウザ上でPDFを解析し、 OpenAIのサービスを利用してテキスト情報を抽出する方法になります

クエスチョンボード WebTools high

表示制御について

フォーム回答後の確認画面で任意項目(条件分岐で表示されなかった項目)を 表示させない方法はありますでしょうか。 SPIRERS ナレッジ向上チーム ogt 確認画面でThymeleafをご使用いただくことで、表示項目の制御が可能です。 例として、セレクトの設問で1つ目の選択肢を選択した場合のみ表示するパターンをご用意させていただきました。 詳細はコードブロックをご参照ください。 Thymeleaf...

クエスチョンボード WebTools high

配列を setTHValue() で渡すと文字列になってしまう問題について

PHP側でAPIレスポンスの配列データ(JSON)をフロント側(HTML/JavaScript)に渡そうとしています。 PHP側で取得した検索結果(配列)を、JSON形式でJavaScriptに渡したいのですが可能なのでしょうか? 以下の方式を試してみたのですが、うまくできない状態です。 json_encode($response_items, JSON_UNESCAPED_UNICODE) → ...

開発情報・ナレッジ WebTools middle

DBに格納したPDFをレコードアイテムブロックで描画するサンプル

DBに格納したPDFをレコードアイテムブロックで描画するサンプルを紹介します。 レコードアイテムブロックにデフォルトで出力されるファイルフィールドのリンクはダウンロード専用になっており、 画面上に描画する事が出来ません。 そのため、PDFを画面上に描画するために本

開発情報・ナレッジ WebTools high

カスタムAPIを使った動的社員検索プルダウンを作成するサンプルプログラム

カスタムAPIを利用してマスタDBを検索しプルダウンに反映するサンプルプログラムを紹介します。 今回は社員検索フォームを題材にサンプルの実装方法を解説します。 本記事では、社員マスタデータベースから階層的に本部、部署、課、社員を選択し、 社員IDをhidd

開発情報・ナレッジ WebTools high

カスタムAPIでSPIRAL APIを効果的に扱うライブラリ

RESTful APIを簡単に利用するためのカスタムAPIクライアントのライブラリを作成しました。 カスタムAPIクライアントを使用することで、バックエンドとフロントエンドの連携が容易になり、 データベース操作やメール配信ジョブの管理などの機能を簡単にできるだけでな

開発情報・ナレッジ WebTools middle

ファイルフィールドをファイルストレージとして活用するサンプルプログラム

JavaScript(fetch API)を使用して、レコードアイテムを読み込み、 設定されているファイルURLをダウンロードURLに差し替えるの実装方法を紹介します。 ファイルをDBに格納することで、ログイン時のみファイルをダウンロードさせたい場合に便利な

開発情報・ナレッジ WebTools middle

テスト環境のカスタムAPIに外部から接続テストを行うサンプル

ver.2.35でリリースされたカスタムAPI機能を利用して開発を行う際、 Basic認証を利用する事で外部環境からでもテスト環境に接続を行い、デバッグすることが可能です。 本記事では、Basic認証を利用したデバッグ方法を解説します。 ※特定IPアドレス制限を利用

開発情報・ナレッジ WebTools high

カスタムAPIを用いて非同期通信でデータ検証をするサンプル

本記事では、ver.2.35でリリースされたカスタムAPIを活用して、非同期通信を用いたシンプルなデータ検証システムを実装する方法をご紹介します。 この仕組みでは、ユーザが入力したテキストをカスタムAPIのPHPで検証し、その結果をフロントエンドで即時にフィードバック

開発情報・ナレッジ WebTools high

カスタムAPIでAIチャットウィンドウを作ってみた

本記事では、ver.2.35でリリースされたカスタムAPIを活用して、OpenAIのチャットAPIを呼び出すチャットボットウィンドウを出力するJavaScriptの構築手法をご紹介します。 この仕組みでは、バックエンド側はPHPでカスタムAPIを実装し、 フロントエンド側はJa

開発情報・ナレッジ WebTools middle

数値入力をスライダーにして操作性を向上させる強化ガジェット

フォームブロックに置いて各フィールドに対してスライダーを生成し、操作性を向上させるガジェットのご紹介です。 name値とスライダー設定を指定するだけで、自動的にスライダーが生成され、初期値が設定されます。 この様なイメージでスライダーを作成できます。 注意点 ・スラ

クエスチョンボード WebTools high

非同期通信について

SPIRALの仕様上、ページの一部分だけを更新させることは可能でしょうか? 添付の画面イメージで、画面全体ではなく、必要な部分のみをPHPからポストバックさせたいと考えております。具体的には、各レコード情報にリンクが設置されており、そのリンクを押下することによって各レコードに該当するデータをAPIで取得して、bodyに返したい…というイメージです。この際、画面全体を更新させるのではなく、各レコード...

開発情報・ナレッジ ver.1 high

SPIRALのデータを暗号化・復号化してダウンロードさせる方法

全体像 SPIRALのAPIから取得したデータを暗号化し、ダウンロード可能な形式に変換します。 ダウンロードしたファイルは、別ページにて復号化し、CSVとしてダウンロードできます。 データを暗号化しダウンロードボタンに引き渡す設定 PHP <?//<!

開発情報・ナレッジ WebTools high

SPIRALのデータを暗号化・復号化してダウンロードさせる方法

全体像 SPIRALのAPIから取得したデータを暗号化し、ダウンロード可能な形式に変換します。 ダウンロードしたファイルは、別ページにて復号化し、CSVとしてダウンロードできます。 データを暗号化しダウンロードボタンに引き渡す設定 PHP <?php //-

開発情報・ナレッジ WebTools high

APIで取得したデータをCSVでダウンロードさせるサンプルプログラム

APIで取得したデータをCSVにしてダウンロードが出来るボタンを設置する方法をご紹介いたします。 レコードリストの抽出条件とAPIでデータを取得する条件を一致させるとレコードリストのデータをダウンロードさせる様なボタンを作成することができます。 本記事のプロ

開発情報・ナレッジ WebTools middle

フォームに初期入力値を設定する強化ガジェット

フォームブロックに置いて各フィールドに対して初期入力値を設定する強化ガジェットのご紹介です。 name値と入力値を指定するだけで、自動的にフィールドタイプを判定して初期値が入力されます。 注意点 ・入力コントロールで、[年/月/日][時/分/秒]の形式で設定してください ・HTML

開発情報・ナレッジ WebTools high

フォームに電子署名を追加する

この記事ではフォームに電子署名(マウスやスマートフォンのタップで描けるサイン)を、 追加する方法をご紹介いたします。 この様な形でマウスで文字を書く事ができます。 DB設定 電子署名を格納したいDBにフィールドタイプ:ファイルのフィールドを追加してください。 本サンプルにつきましては識別名をsig...

開発情報・ナレッジ ver.1 high

フォームに電子署名を追加する

この記事ではフォームに電子署名(マウスやスマートフォンのタップで描けるサイン)を、 追加する方法をご紹介いたします。 この様な形でマウスで文字を書く事ができます。 DB設定 DBを新規作成する場合はDBタイトルをsignDBとして作成してください。 既存のDBを利用する場合は後述するサンキューページ...

開発情報・ナレッジ WebTools high

QRコードを表示させる方法

URLを簡単に受け渡しできるQRコードを画面上に表示させたい場合があります。 今回は、来場受付などでも活躍するこのQRコードを生成する方法を2種類ご案内いたします。 APIサービスで生成する方法 URLの末尾にお問い合わせ番号やメールアドレスなどのQRコードにしたい内容を記載することでQRコードを...

開発情報・ナレッジ WebTools middle

ポイント使用フローに所持ポイントが0以下にならない制御を追加する

この記事では、SPIRALでの顧客マスタにおける所持ポイント管理と、商品交換フォームを通じたポイント使用フローを紹介します。 また、顧客マスタの所持ポイントがマイナスにならないように、データベース(DB)側とページ上でのエラー表示設定についても説明します。 DB

開発情報・ナレッジ WebTools high

JavaScirptでセレクトをドリルダウン表示する

登録フォームブロックにて選択したセレクト項目の内容によって、下位層のセレクト項目の内容を絞り込む方法(ドリルダウン表示)をご紹介します! 今回はjQueryを使わずにJavaScirpt(Vanilla JS)のみで作成しているため、ライブラリ等の読み込みは必要ありません

設計情報 WebTools high

チャットボットにGPT連携をしてDBの情報を取り込み、自社製品の内容を回答させる方法

openAIのGPTのAPIを利用する事で、 SPIRALに格納されているデータを組み込んだ自動回答が出来るチャットボットを構築する事が出来ます。 このチャットボットを構築すると以下のようなことが可能となります。 サポートデスクのチャット対応

開発情報・ナレッジ WebTools middle

formタグに属性を付与せずにボタンのイベントを取得する方法

Javascriptでフォームを操作する際にWebToolsではどのように行えば良いのか、という質問を多くいただいておりました。 本記事ではformタグにIDなどの属性を付与せずに「次へ」ボタンのイベントを取得する方法を紹介します。 設定の際の参考になれば幸いで

開発情報・ナレッジ WebTools high

フォームの特定ステップでのみJavascriptを動作させる方法

フォームのステップをパラメータで判定し、それぞれのステップで動作するJavascriptを作成しました。 実際にサンプルコードを掲載しておりますので、特定のステップでJavascriptを動作させたい場合に活用してみてください。 デモはこちら 機能説明 Ja

開発情報・ナレッジ WebTools high

Googleアカウントで認証エリアにログインさせるサンプルプログラム

Googleのアカウント情報を利用して SPIRAL WebToolsにAPIで登録を行い、認証エリアにログインさせるサンプルプログラムを作成いたしました。 SPIRAL WebToolsとGoogleを連携して認証エリアにソーシャルログインさせたい場合は

開発情報・ナレッジ WebTools high

レコードリスト(一覧表)からの複数情報をフォームへ反映する方法

レコードリスト(一覧表)からの情報反映 の記事で、単一情報の反映方法はご紹介いたしました。 今回は、Jquery を利用して リストの複数情報を入力画面に反映する方法を紹介いたします。 チェックボックスで複数選択後にボタンをクリックすると反映する仕組みになって

開発情報・ナレッジ WebTools low

フォーム入力中の離脱を防止するダイアログが実装できる強化ガジェット

フォーム入力の際にユーザで誤ってブラウザなどを閉じて離脱するのを防ぐダイアログ機能を実装できる強化ガジェットを作成しました。 実際にサンプルコードを掲載しておりますので、コピペで簡単に実装できます。 フォーム入力中のユーザを補助する機能を強化したい場合に活

開発情報・ナレッジ WebTools low

パラメータを引継いだままレコードリストに戻るリンクを追加する強化ガジェット

レコードアイテムには、デフォルトでレコードリストに戻るリンクが付いていません。 ページリンク追加からレコードリストのページへ戻るリンクを追加することができますが、この方法で追加した場合はレコードリストで適用していたページ数、検索条件、ソート順、表示

開発情報・ナレッジ WebTools low

ビジュアル設定フォームにリアルタイムチェック機能をコピペで実装できる強化ガジェット

コピペするだけでフォーム入力の際にリアルタイムで入力値をチェックしてくれる機能を実装できます。 簡単に実装できますので、フォーム入力補助機能を強化したい時に活用してみてください。 デモはこちら 機能・前提 機能 ・必須入力チェック ・メール

開発情報・ナレッジ WebTools middle

ファイル添付時にサムネイルを表示させる強化ガジェット

フォームで画像ファイルを添付した際にサムネイルを表示する強化ガジェットを作成しました。 ビジュアル設定で使用できる形にしていますので、ぜひ参考にしてください。 デモはこちら 仕様 ・JavaScript で送信しているため、対応していないブラウザがあります。 ・DOM

開発情報・ナレッジ WebTools middle

【jQuery】邪魔にならないフローティングバナーの作成方法

WEBサイト上でページのサイドや下部に追従して表示されるフローティングバナーは、 訪問したユーザがページを閲覧している際に常に表示されるため、特定のページへの導線として非常に有効的な手段の1つとなっています。 しかし、こうしたバナーはユーザにとってページを閲覧

開発情報・ナレッジ WebTools middle

自動でセッション延長を行う強化ガジェット

SPIRAL では、サイト側のセッションは、最大60分となっています。 セッション時間を自動で延長をする強化ガジェットを作成しました。 同一画面で一定時間経過した場合にセッション延長を行うかの確認ダイアログも表示できるようにしています。 仕様 ・XMLHttpRequest を使用

開発情報・ナレッジ WebTools low

テキストをカレンダー形式で表示させる強化ガジェット

日時・日付フィールドをフォームで使用する際にテキスト形式になっています。 入力欄を日付タイプ・時刻タイプで表示させる強化ガジェットを作成いたしました。 アクセス日から起算して、選択できる日付を絞れる機能も追加しているので、ぜひ活用してみてください! デモはこちら 変更・改

開発情報・ナレッジ WebTools low

セレクトをドリルダウン表示する強化ガジェット

選択したセレクト項目の内容によって、下のセレクト項目が連動し項目を絞り込んで 表示されるようにするフォーム入力を補助する強化ガジェットを作成いたしました。 ラベルIDの設定に決まりがありますが、簡単に実装できますので、ぜひ活用してみてください! 前提・仕様 ・フォームブロックは

クエスチョンボード ver.1 middle

マイエリア内フォーム設置を簡略化する方法について

お世話になります。 https://knowledge.spirers.jp/article/development/detail/1744/ こちらの記事を拝見し、設定を行いました。 実際に作成したカスタムページへアクセスしてみると 「https://area31.smp.ne.jp/regist/is」へ遷移はするのですが、以下のエラーが出力されます。 404 : Not Found 該当する...

開発情報・ナレッジ WebTools low

Enterキーでフォームが送信されないようにする強化ガジェット

フォームの入力中、誤ってEnterキーを押してしまい、予期せずフォームを送信してしまうことがあると思います。 今回はEnterキーでフォームが送信されないようにする強化ガジェットをご紹介します。 前提・仕様 ・ブロックかページの JavaScript タブにコー

クエスチョンボード WebTools high

テキストフィールドの正規表現について

住所の入力欄にテキストフィールドを使用するにあたり、以下の文字以外が入力された場合 入力制限の正規表現機能でエラーを出したいのですが、可能でしょうか。 ・日本語(漢字、ひらがな、全角カタカナ) ・半角英数字 ・半角ハイフン ・半角スペース、全角スペース サポートサイトの正規表現設定例と一般的な正規表現一覧のサイトを参考に設定してみましたが、うまくいきませんでした。 https://support....

開発情報・ナレッジ WebTools low

チェック状態でボタンを活性化する強化ガジェット

利用規約の同意チェックなど、チェック状態に応じて送信ボタンを非活性化・活性化する強化ガジェットを作成しました。 フォーム入力補助機能を強化したい時に活用してみてください。 変更・改定履歴 [ 2022.04.08 ] 改定 コメントアウトの文章を修正 [ 2022.07.14

開発情報・ナレッジ WebTools middle

ブラウザのJavaScript が無効時に画面操作させない強化ガジェット

ブラウザ側で JavaScript が無効化されている場合、 サイトに JavaScript による制御を入れても当然動作しません。 意図せず無効になっている場合、正しくデータが登録されずに後続の処理に影響が出てくる可能性もあります。 今回、JavaS

開発情報・ナレッジ WebTools middle

マルチセレクトで選択できる数を制御する強化ガジェット

「マルチセレクトで選択できる数を制限したい!」とリクエストボードより投稿をいただきました。 要望にお応えして、”マルチセレクトで選択できる数を制限する強化ガジェット”を作ってみました! ビジュアル設定に対応していますので、制限を入れたいと思っている方は、ぜひ参考にしてく

開発情報・ナレッジ WebTools high

ver.2 で DB に登録されているファイルをダウンロードするサンプルプログラム

SPIRAL WebTools おいて、ver.2.18時点では、サイト側にファイルダウンロード機能が実装されていません。(※) 今回は、 DB に保存されているファイルをサイト側でダウンロード可能にするボタンを作ってみました。 ファイルをダ

開発情報・ナレッジ ver.1 middle

Enterキーでフォームが送信されないようにする

フォームの入力中、誤ってEnterキーを押してしまい、予期しない挙動が発生してしまう時があるかと思います。 今回はEnterキーでフォームが送信されないようにする方法をご紹介します。 DEMOはこちら 入力の途中でEnterキーを押してもsubmitされません。 設定方法

開発情報・ナレッジ ver.1 middle

JavaScriptで項目の表示非表示を切り替え、かつ表示する場合は入力必須にする

入力フォーム上で、特定の選択肢が選ばれた場合にのみ、入力必須のテキストボックスを表示する方法をご案内いたします。 DEMOはこちら 「職種」で「その他」を選ぶと入力必須のテキストが表示されます。 フォームの設定 フィールドはセレクトフィー

開発情報・ナレッジ WebTools high

レコードリスト(一覧表)からフォームへ反映する方法

レコードリストと JavaScript で リストの情報を入力画面に反映する方法を紹介いたします。 こちらを使って、ボタンをクリックすると担当者の一覧が表示され、IDを選択すると自動的に反映すると言ったことが可能です。 デモはこちら 変更・改訂履歴 [ 2023.04.

開発情報・ナレッジ ver.1 middle

jQueryでセレクトをドリルダウン表示する

選択したセレクト項目の内容によって、下位層のセレクト項目の内容を絞り込む方法(ドリルダウン表示)をご紹介します! 文章だと分かりづらいので、とりあえずDEMOを触ってみてください! DEMOはこちら 「会社名」「部署名」「役割」の3つのセレクト項目があり、「会社名」で選択した

開発情報・ナレッジ ver.1 middle

検索フォームにカレンダー表示を実装する方法

スパイラルのWebアプリ機能を使えば、5分で検索機能のついた一覧表を作成することができます。 一覧表のデザイン設定方法は下記の2種類。 ・設定デザイン 「表形式」や「数値」を利用して、どなたでもデザインの設定を行うことが可能 ・ソースデザイン XMLやXSLの知識が必要ですが、

開発情報・ナレッジ ver.1 high

あなた専用のメール配信設定画面をつくろう

サポートデスクでは、日頃からスパイラルの設定について、たくさんのお問い合わせをいただき、お電話越しにご一緒に問題解決をさせていただいております。 そんな中、よくご意見をいただいているのが、メール配信の設定についてです。 スパイラルのメール配信機能(EXPRESS2)では、配信対象

開発情報・ナレッジ ver.1 middle

一覧表から選択して入力フォームに反映

フォームでデータを入力する際、こんなお困りごとありませんか? ・商品一覧のExcelファイルから商品コードをコピペするのが面倒 ・担当者の入れ替えがあり、その都度「担当者」の選択肢を修正しないといけない 今回は、一覧表とJavaScriptと組み合わせてデータの入力を簡単にするソース

開発情報・ナレッジ ver.1 middle

[フォームカスタマイズ vol.7]同意ボタンのチェックで送信ボタンを有効化させる

個人情報の取り扱いに関する同意ボタンをチェックした後、JavaScriptで送信ボタンを有効化させる方法をご紹介します。 DEMOは、こちら “個人情報利用目的について”を参照ください。 HTMLの設定 データベースは、択一のセレクト(ラジ

もっと見る