トグル

サンプルアプリ

 
いいね機能などに使われ、アクティブ状態と非アクティブ状態それぞれに動作を設定することができる。トグルを使用する際は true/false タイプの項目や、テーブル同士のリレーションを予め設定する必要がある。

タイムライン(いいね)の実装

データベースに移動し、投稿内容を保存するためのテーブルと項目を作成する。「テーブルを追加」から「投稿テーブル」を作成する。
 
「Name」項目の名前を「投稿内容」に変更する。
 
投稿者が誰なのか分かるように「Users」テーブルとリレーションを組みます。「項目の追加」から「データの紐付け > Users」をクリックし、「投稿」と「Users」の関係を選択します。一番上に表示される選択肢「Userは複数の投稿sを保有します。投稿は1つのUserにしか属しません。」を選択して名前を「投稿者」とする。
 
次にいいね機能で使用するリレーションを組みます。「項目の追加」から「データの紐付け > Users」をクリックし、「投稿」と「Users」の関係性は一番下に表示される選択肢「投稿は複数のUsersを保有します。Userは複数の投稿sを保有します。」を選択して名前を「いいね」とする。
 
Users テーブルに移動し「レコードの追加」からユーザーデータを作成する。
 
投稿テーブルに戻り、「レコードの追加」から投稿データを作成する。「投稿者」には先ほど作成したユーザーデータを選択する。
 
キャンバス画面に戻り、カスタムリストを配置する。右ウインドウ「カスタム」タブを開き、「投稿」テーブルを選択する。
 
カスタムリスト内のシェイプを選択し、高さを調整する。
 
「Title」と書かれているテキストエレメントを選択し、カスタムテキストから「Current 投稿 > 投稿者 > Username」を選択する。
 
「Subtitle」と書かれているテキストを選択し、カスタムテキストから「Current 投稿 > 投稿内容」を選択する。
 
トグルアイコンをカスタムリスト内に配置する。
 
トグルの初期値を設定する。ドロップダウンから「Current 投稿 > いいね > includes Logged in User?」を選択する。これは「”投稿” の紐付け(いいね)に ”Logged in User” が紐づいている場合にアクティブと認識する」という設定である。
 
アクティブ/非アクティブ 時のアイコンを設定する。アクティブ時はスイッチがオンの時、非アクティブ時はオフの時であり、どちらもハートのアイコンを設定する。
 
右ウインドウ「スタイル」タブを開き、アイコンの色を変更する。「アクティブ時の色」を赤に変更する。
 
「ClickFlow」タブで「アクティブ/非アクティブ 時の動作」を設定する。「アクティブ時の動作」タブを開き「+ ClickFlowの追加」をクリックし、「更新 > Current 投稿」を選択する。
 
「投稿更新」タブを開き、「いいね」ドロップダウンに「Add > more… > Logged in User」を選択する。
 
「非アクティブ時の動作」タブを開き「+ ClickFlowの追加」をクリックし、「更新 > Current 投稿」を選択する。
 
「投稿更新」タブを開き、「いいね」ドロップダウンに「Remove > more… > Logged in User」を選択する。
※「Add」は追加、「Remove」は削除を意味する。
 
プレビュー画面を開き、動作確認を行う。