この記事では、gusuku Everysiteのページ内処理を使用して、罫線・ヘッダーなしテーブルにkintoneアプリのレコードを表示する方法をご紹介します。

表示例

kintoneの設定

kintoneのアプリでは下記のフィールドを用意します。

また、APIトークンを用意します。「アクセス権」は「レコード閲覧」をチェックします。

エブリサイトの設定

画面デザイン画面

タイルにウィジェット「罫線・ヘッダーなしテーブル」を配置します。

接続設定

kintoneの設定で取得したAPIトークンを設定します。

ページ内処理

アクション1で、やること「クエリで条件を指定して kintone からレコードを取得する」でkintoneから罫線・ヘッダーなしテーブルに表示したいレコードを取得します。

その後アクション2で、やること「テーブルの表示内容をセットする」でアクション1で取得したレコードを罫線・ヘッダーなしテーブルにセットします。

やること「テーブルの表示内容をセットする」の「表示内容」ではkintoneアプリのフィールドコードを

=フィールドコード

のように指定します。

具体的な例としては、アイテム「会社名:テキスト」にkintone会社名の値をセットしたい場合は

=kintone会社名

と指定します。

ウィジェット編集画面

下記のアイテムを「列になるアイテム」にドラッグ&ドロップで配置します。

また、「表示するレコード」は指定しません。

アイテムパラメーター入力カラム

下記アイテムを設定します。なお「テキスト」は指定しません。

まとめ

この記事ではエブリサイトのページ生成時処理で罫線・ヘッダーなしテーブルを表示する方法をご紹介しました。

エブリサイトのドキュメントページやサポートページもぜひご活用ください。