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

HTML、CSS、JavaScriptを使用して、Tulipで独自のウィジェットを作成します。

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

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

はじめに

アプリにドラッグ＆ドロップするアイテムは「ウィジェット」と呼ばれます。ウィジェットには、ボタン、画像、入力ボックス、その他ツールバーから利用できるものがあります。

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

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

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

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

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

**イベント：**イベントは、ウィジェットがアプリケーションに送信できるシグナルです。イベントは、アプリケーションがトリガーで応答することを可能にし、情報を一緒に運ぶことができます。

カスタムウィジェットは、App EditorのCustom downセレクタからアクセスできます。

ウィジェットの作成

:::(Warning) (警告）カスタムウィジェット編集UIにアクセスできるのは、アカウント設定にアクセスできるユーザ（アカウント所有者）のみです：

ウィジェットエディタ画面は4つのセクションに分かれています。左下のセクションに書いたコードは、プレビューセクションをクリックすると、プレビューセクションに表示されます。Propの値は、テスト目的でプレビューセクションで直接変更できます。

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

小道具の値の取得

:::(Warning) (警告) ウィジェットによって使われるプロップがそのウィジェットがロードされる前にロードされることは保証されないので、テーブルのレコードフィールド、アグリゲーション、その他の動的な値に関連するすべてのプロップは、ウィジェットがロードされる時点で null のケースをサポートするロジックを含むべきです。プロップが変更されたときにロジックをトリガする詳細については、このセクションを参照してください。
:::

// プロップの値を取得する getValue('My Prop');``// プロップを変数に格納する let myVariable = getValue('My Prop')；

Prop が変更されたときに何かを行う

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

プロップの値の設定

プロップの値を設定する setValue('My Prop',value_to_set)；

//テキスト Prop の値を 'hello!' に設定する setValue('My Text Prop', 'hello!')；

//オブジェクトのアイテムの値を設定する setValue('My Object Prop', { 'オブジェクト内部のキー': '新しい値' }); ````.

イベントを発生させる

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

// ペイロードなしでイベントを発生させる fireEvent('My Event')；

// ペイロード付きのイベントを発生させる fireEvent('My Event', myVariable); ```.

ウィジェットのビルド例

アプリのインポート/エクスポート

エクスポート

1. カスタムウィジェットの概要から、エクスポートしたいウィジェットの横にある3つの点を選択します。

1. Export "を選択します。

インポート

1. カスタムウィジェットの概要画面から、一番上の3つの点を選択します。

1. インポート "を選択します。

1. .jsonカスタムウィジェットファイルを見つけてください。

外部ライブラリの有効化

外部ライブラリは、カスタムウィジェットでできることをさらに拡張します。外部ライブラリは、JavaScriptで直接htmlを記述する際の面倒な作業の多くを処理します。外部ライブラリを使用したい各ウィジェットで、外部ライブラリを有効にする必要があります。

1. ウィジェットで、リボンの3ドットメニューをクリックします。

1. 外部ライブラリを有効にする "を選択します。

1. 有効にしたい拡張機能を選択します。

以下は、それぞれの機能についての基本的な説明です。

• jQuery- 要素の操作とともに、より合理的なhtml要素の選択を可能にします。
• **D3 -**データのビジュアライゼーションのためのゴールドスタンダード。
• **Google Visualization -**その名の通り、ビジュアライゼーションを行うための素晴らしいツール。
• **javaascript-Ip-solver -**Ip ソルバーは、方程式を解くための複雑な計算を処理できる外部ライブラリです。
• **Lodash -**Lodash は javascript のデータ型を簡単に扱うためのツールをたくさん提供しています。
• **ChartJS -**シンプルなグラフライブラリ。
• **Moment -**Moment は日付や時刻を扱うためのたくさんのツールを提供しています。