エブリサイトでは、メニューで画面が切り替わるようなサイトを作成可能です。また画面にはkintoneから取得したレコードを表示したり、逆にkintoneへレコード追加も可能です。


この記事では、売上管理システムをベースページを使って作成し、kintoneへのレコード追加ではルックアップフィールドに値をセットする設定例を紹介します。


最初に

エブリサイトを構成する要素など、基本部分の説明はこちらのページにまとめてあります。ぜひご活用ください。

エブリサイトの基本


完成イメージ

今回はベースページを使うので、画面はベースページとページで構成するデザインになります。


全体図


この画面だと、以下のように上側がベースページになります。

画面デザインページは以下のようになっています。


ベースページ

上がタイトルで、下がメニューです。3つ目はページに置き換える指定になります。


ページ

この画像はダッシュボードのタイルです。


ダッシュボードでは、当日・当月・全体の3つの集計があるので、集計値を横並びで表示しています。その下に、直近3件の売上を表示するためにシンプルテーブルを配置しています。


なお、「ベースページのタイルも表示する」をONにすると両方のタイルを表示することも可能なので、全体を確認しやすくなります。ただ、全体のレイアウトを表示するだけなので、その画面から設定に進むことはできません。


ベースページの設定

ベースページの中で主な設定を紹介します。


リンクテキスト（下線なし）

B2のタイルではいわゆるグローバルナビゲーションとして、各ページにリンクしたメニューを作るために、「シンプル横フォーム」に「リンクテキスト（下線なし）」を横並びにしています。「リンクテキスト（下線なし）」はリンク先URLを設定するとそのURLへ遷移します。


そのURLは、ページの基本設定で入力したURLです。ただし、入力したURLに　.html　を追加する必要があります。その点だけご注意ください。


ページ生成時処理でkintoneからレコード取得

ベースページの場合、アクション番号には頭に B が付きます。


そのアクションの結果は以下のように $B1 で参照可能です。

今回はアプリに保存されているレコードがテスト用の1レコードだけなので全レコード取得のクエリを指定しています。

実際には店舗コードを渡すようなURLで遷移してきて、「URLからハッシュを取得する」で取得した値をクエリに指定するという作りも考えられます。


リッチテキストで以下の画像のように指定しておくとページ生成時にアクションの結果が反映されます。


ページの設定

今回は4ページ作成していますが全てを紹介すると冗長になるので、設定の中で主なものを紹介します。


システムTOP

ダッシュボードに3つの集計値を表示しています。


現状では取得したレコードを絞り込む方法がないので、3回レコードを取得してから集計して表示しています。ここでは1つだけ紹介します。


「SUM関数」では取得レコード数が0件の場合にエラーになるので、「append関数」を使うことでエラーを回避します。
= sum(append(0, $1.金額))

このような式にすると、必ず 0 が追加されるので「SUM関数」がエラーになりません。


そして、その集計結果を,区切りでフォーマットした結果をリッチテキストで表示しています。


売上登録

この画面では、売上明細をkintoneにレコード追加したり、「現在の売上明細」の下の部分は当日の商品のみを表示して集計値も計算しています。


「売上を登録」のボタンを押すと、登録先アプリの赤枠の３フィールドに値をセットします。


ポイントとしては、「商品コード」がルックアップということです。kintoneの仕様としてレコード更新でルックアップフィールドに値をセット可能なのですが、その際はレコード更新をするアプリと共にルックアップで取得する他アプリの方のAPIトークンも必要なことです。

そのため、接続設定のAPIトークンでは2つのAPIトークンを,区切りで設定する必要があります。APIトークンのイメージとしては以下のような感じです。


ページ内処理

処理内容は以下の通りです。

  • 画面を表示した時に当日のレコードを取得して集計表示する

  • ボタンを押すと売上管理にレコードを追加する

    • フィールドに値が未入力だとエラー表示で終了

  • レコード追加後は最新のレコードを取得して集計表示する


全体の設定はこちらです。

以下では、全体の中のポイント部分を解説します。


入力するフィールドには必須設定をしているので、やること「入力エラーをチェックする」で空欄のチェックが可能です。


2つのフィールドの両方に値が入力済みの場合だけ実行するように設定するので、条件「入力アイテムにエラーがあるならば」を反転して「入力アイテムにエラーがないならば」の時だけレコード追加します。

条件の反転は次の反転ボタンをクリックすると実現できます。



条件「いずれかのアクションの実行が完了した時」を使うと、画面表示時とレコード追加後のどちらかの時に当日の集計表示が可能になります。繰り返し処理はうまく使うとアクションを減らせるので工夫すると良いでしょう。


このような設定で、ページを表示した時や売上を通貨後に最新の情報を表示できるようになります。


最後に

今回の設定は使うシーンが多いと思います。「シンプル横フォーム」に「リンクテキスト（下線なし）」を追加するだけで、メニューをいくつも追加できますし、「シンプル横フォーム」を追加すれば２段にすることも可能です。

実際に作成する内容に合わせて設定をお試しください。


また、別タイプのページの作り方は、エブリサイトのドキュメントページやサポートページで紹介していますので、ぜひご活用ください。