メインコンテンツへスキップ

スマートサンプル（名刺情報検索）

  • 更新

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

本サンプルは、スマートデバイスオプションを利用して、一覧画面から詳細画面へ遷移し、詳細画面から電話発信を行うまでの一連の操作を確認できるサンプルをご紹介します。

本サンプルで確認できる主な操作は以下のとおりです。

  • 名刺情報一覧画面にて、「会社名」または「氏名」で対象データを検索
  • 検索結果から名刺情報詳細画面へ遷移し、電話発信を行う 

2. 利用条件

この機能を利用するには、スマートデバイスオプションの有償ライセンスが必要です。

3. サンプル機能の内容と確認ポイント

本サンプルでは、「名刺情報一覧画面」から「名刺情報詳細画面」へ、「他画面呼出」機能を使用した画面遷移と、名刺情報詳細画面にて電話番号発信を実現します。

設定の手順は次の通りです。

  • 「名刺情報詳細画面」の作成
    名刺情報の個別詳細を表示するための単票ブロックを作成し、以下の設定を行います。
     
    1. Client-side JavaScript設定
      電話番号発信項目を設定します。
      　- setTelCallObjectName：電話番号発信項目を指定（スマートデバイスオプション専用API）
       
    2. フリーレイアウト設定
      機能タイトルなどの表示を調整します。（必要に応じて）
       
  • 「名刺情報一覧画面」の作成
    名刺情報を一覧表示するための明細ブロックを作成し、以下の設定を行います。
     
    1. 「探す区分」ラジオボタンに応じた切替
      「明細ブロック設定 > SELECT式」タブにおいてバインド変数を使用しています。
      ここではラジオボタンの選択値に基づき、「検索条件に用いるDBカラム」および「一覧の表示内容」を下記のように切り替えます。

      　- 「会社名で探す」選択時：
      　　　・検索対象カラムを会社名
      　　　・会社名 + 氏名を表示

      　- 「氏名で探す」選択時：
      　　　・検索対象カラムを氏名
      　　　・氏名のみを表示
       
    2. 他画面呼出ボタンの設定
      「明細ブロック設定＞他画面呼出」タブで、「名刺情報詳細画面」へ遷移するためのボタンを作成します。
      また、手順1で切り替えた表示内容を「ボタン名表示式」へ設定します。
       
    3. CSS設定
      他画面呼出ボタンをリンク表示に見せるためのスタイルを設定します。
      ※このとき設定するクラス名は、後述のフリーレイアウト設定で指定します。
       
    4. フリーレイアウト設定
      クラス名およびデザイン調整を設定します。
      • 他画面呼出ボタンに、CSSで設定したクラス名を指定
      • 機能タイトルや検索条件の表示調整（必要に応じて）


!++++

使用テーブルCreate文ファイル：SQLファイルZIP
※上記ファイルはMySQL環境のものになっております。ご利用の環境に合わせて修正しご利用ください。

!----

 

🔍 確認いただけるポイント

  1. 名刺情報一覧画面から名刺情報詳細画面へ遷移できること
  2. 名刺情報詳細画面で指定項目が電話番号発信項目として表示されていること

4. 画面イメージ

【名刺情報一覧画面】

名刺情報一覧画面.png

【名刺情報詳細画面】

名刺情報詳細画面.png