カスタムウィジェットの概要

更新日 17 Sep 2022
1 読む分
寄稿者

印刷する
共有

Article Summary

HTML、CSS、JavaScriptを使ってTulipで独自のウィジェットを構築する

カスタムウィジェットの概要

HTML、CSS、JavaScriptを使用して、Tulipに独自の機能を構築します。
ライブラリウィジェットはこちら: https://tulip.co/library/?query=Widgets

はじめに

アプリにドラッグ＆ドロップで追加できるアイテムを「ウィジェット」と呼びます。ボタンや画像、入力ボックスなど、ツールバーから利用できるものはすべてウィジェットになります。

{height="" width=""}.

カスタムウィジェットでは、独自のコードを記述して、独自のウィジェットを作成し、アプリケーションにドラッグ＆ドロップして操作することができます。この機能により、TulipのユーザーはTulipで可能なことの境界を広げることができます。

この記事では、カスタムウィジェットがどのように機能するかについて、簡単に説明します。

カスタムウィジェットの基本

カスタムウィジェットの管理画面は、アカウント設定ページ内にあります。ここでは、ウィジェットの作成と削除を行うことができます。カスタムウィジェットエディタでは、ウィジェットコードの記述、小道具とイベントの作成、ウィジェットのプレビューを行うことができます。以下は、プロップとイベントが何であるかを説明する図です。

{height="" width="800"}.

プロッププロップは、カスタムウィジェットとTulipアプリケーションの間で共有されるデータです。プロップはアプリケーションエディターで公開され、アプリケーションエディターがどの変数、テーブルレコード、または他の情報をプロップに関連付けるかを選択できるようになります。

{height="" width="550"}.

イベントイベントとは、Widgetがアプリケーションに送信できるシグナルです。イベントによって、アプリケーションはトリガーで応答することができ、情報を一緒に運ぶことができます。

{height="" width="550"}.

カスタムウィジェットは、アプリエディタの "Custom "ダウンセレクターからアクセスできます。

{height="" width="800"} カスタムウィジェットは、App EditorのCustomダウンセレクタからアクセスできます。

ウィジェットの作成

:::(警告) (警告)
カスタムウィジェットの編集UIは、アカウント設定にアクセスできるユーザー（Account Owners）のみがアクセス可能です。
:::

Widgetの編集画面は、4つのセクションに分かれています。左下のセクションに書き込んだコードは、プレビューセクションにクリックすると表示されます。Propの値は、テスト用にプレビューセクションで直接変更することができます。

{height="" width=""}.

小道具やイベントを操作するための特別な関数です。

小道具の値の取得

//小道具の値を取得する getValue('私の小道具');
//小道具を変数に格納する myVariable = getValue('My Prop')とします。

//プロップの値が変わるたびに何かする getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

プロップの値を設定する

Prop の値の**設定**
setValue('My Prop',*value\_to\_set*); 


//Set value of a text prop to 'hello!
setValue('My Text Prop', 'hello!');


// オブジェクトの項目の値を設定する
setValue('My Object Prop', { 'Key inside object': 'new value' });

イベントを発生させる

**イベントを発生**させる 
fireEvent('event',*payload*); 


// ペイロードを指定せずにイベントを発生させる
fireEvent('私のイベント');


// ペイロードを持つイベントを発生させます
fireEvent('My Event', myVariable);