新規投稿
フォローする

kintone-PHP連携 外部公開フォーム作成 既存レコード情報の利用

以前ナレッジノートで、外部公開フォームの作り方を紹介しました。 今回は、既存レコード情報を利用する例を紹介します。

サンプル

イベントマスタと申込数をもとに、満員になっていない日程のリンクだけカレンダー表示します。

フォーム設定

イベントマスタ

コード

https://developer.cybozu.io/hc/ja/community/posts/360036275412で紹介したコードをもとに作成しました。同階層に下記「calendar.php」を追加します。また、「Field.php」の一部を変更します。 (「setting.php」、「index.php」、「submit.php」はそのまま流用します。)

・calendar.php

<?php
require 'setting.php';
define('EVENT_APP', ****); //イベントマスタアプリのID
$counts = array_reduce($api->records()->all(APP), function($counts, $record){
  if(isset($counts[$record['参加日']['value']])) $counts[$record['参加日']['value']]++;
  else $counts[$record['参加日']['value']] = 1;
  return $counts;
}, []);
$events = array_map(function($record) use ($counts){
  return [
    'date' => $record['開催日']['value'],
    'type' => !isset($counts[$record['開催日']['value']]) ?
      'empty' : ($counts[$record['開催日']['value']] < $record['上限']['value']) ?
        'empty' : 'full'
  ];
}, $api->records()->all(EVENT_APP));
?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= PAGE_NAME ?></title>
  <link rel="stylesheet" href="https://js.cybozu.com/fullcalendar/v3.9.0/fullcalendar.min.css">
</head>
<body>
  <h1><?= PAGE_NAME ?></h1>
  <div id="calendar"></div>
  <script src="https://js.cybozu.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://js.cybozu.com/momentjs/2.23.0/moment.min.js"></script>
  <script src="https://js.cybozu.com/fullcalendar/v3.9.0/fullcalendar.min.js"></script>
  <script>
    $('#calendar').fullCalendar({
      height: 500,
      events: JSON.parse('<?= json_encode($events) ?>').map(function(event){
        return {
          start: event.date,
          title: (event.type === 'empty') ? '受付中' : '満員',
          type: event.type,
          date: event.date,
          color: (event.type === 'empty') ? 'blue' : 'red',
        };
      }),
      eventClick: function(e){
        if(e.type === 'empty'){
          location.href = './?参加日=' + e.date;
        }else{
          alert('満員です。');
        }
      }
    });
  </script>
</body>
</html>

・Field.php(変更点のみ)

変更前

  private function _date($fieldCode){
    return '<input name="'.$fieldCode.'" id="'.$fieldCode.'" class="date">';
  }

変更後

  private function _date($fieldCode){
    if(isset($_GET[$fieldCode])){
      return '<input name="'.$fieldCode.'" id="'.$fieldCode.'" value="'.htmlspecialchars($_GET[$fieldCode]).'" readonly>';
    }else{
      return '<input name="'.$fieldCode.'" id="'.$fieldCode.'" class="date">';
    }
  }

「index.php」と「submit.php」に「calendar.php」へのリンクだけ追加しておくと親切かもしれません。

<p><a href="calendar.php">&lt;&lt;申し込み状況確認</a></p>
0

0件のコメント

サインインしてコメントを残してください。