- navigateParentURL() メソッドの詳細については、こちらをクリックしてください こちら。
- このメソッドは、ウィジェットなどのページ要素に設定できます。
- このメソッドは、Creator の C5 および C6 バージョンの両方に適用されます。現在のバージョンを確認するには、こちらをクリックしてください こちら。
- ウィジェットを作成する
- ページにウィジェットを追加する
2. インストールが正常に完了したことを確認するために、次のコマンドを実行します。コマンドはパッケージのバージョンを返します。
注意: コマンドを入力する際、ドル記号($)を明示的に入力する必要はありません。デフォルトですでに表示されています。Mac OSではTerminal、WindowsではCommand Promptでコマンドを実行できます。
- $ npm install -g zoho-extension-toolkitをインストールします。
注意: 以下のコマンドを使用して、権限の問題が発生した場合:
sudo npm install -g zoho-extension-toolkit
インストールが成功したかどうかを確認するために、次のコマンドを実行します。 パッケージのバージョンが返されます。
5. 次のコマンドを使用してプロジェクトを作成します:
注意: 権限の問題が発生した場合は、次のコマンドを使用してください。
sudo zet init
「6.
Zoho Creator を選択してください。」
7. プロジェクト名を指定してください。Enterを押してください。
注意:
このプロジェクトは、ウィジェットをレンダリングするために必要なファイルを格納するためのフォルダです。アルファベットとアンダースコア文字のみを含めることができます。
8. プロジェクト/フォルダ名を入力し、Enterを押してプロジェクトディレクトリに移動します。
9. 次のコマンドを実行してください。
注意: これにより、ローカルマシンのポート番号5000でHTTPサーバーが起動します。サーバーを開始する前に、このポートが他のプロセスによって占有されていないことを確認してください。上記コマンドの実行により、関連する注意事項が表示される場合があります。
10. サーバーが正常に開始されたかどうかを確認するには、widget.htmlに移動し、ブラウザーで開きます。 widget.htmlファイルは、前に作成したフォルダ(プロジェクト)にあります。
注:
デフォルトでは、このファイルはアプリフォルダーにあります。
以下の手順に従ってwidget.htmlファイルにアクセスできます。
次の画面が表示されます。
11. プロジェクトフォルダ内のアプリフォルダを開きます。 同じフォルダ内にあるwidget.htmlファイルを見つけます。
12.
widget.html ファイルにコードを入力し、保存してダウンロードします。
Sublime、
VS Code、
Eclipseなどのサードパーティーアプリを使用して、htmlファイルのコードを追加または変更することができます。
widget.html ファイルには、ウィジェットの構造、デザイン、コンポーネントが含まれています。
「以下のサンプルコードを
widget.htmlファイル内にコピーすることで、
Verify widget内で正しいオプションを選択した後、
User Detailsフォームにナビゲートすることができます。
こちらの例を参照してください。
」
13. アプリ内にウィジェットを埋め込む必要がある場合は、設定ページに移動します。ウィジェットを選択します。
14. 「作成」ボタンをクリックしてください。
15. 新しいウィジェットパネルが表示されます。
16. ウィジェットの名前を入力してください。
17. 「ホスティング」のドロップダウンリストから内部を選択してください。
18. dist フォルダ内の ウィジェットファイル フィールドから、圧縮された zip ファイルをアップロードします。
19.「インデックスファイル」フィールドに/widget.htmlを入力します。/widget.htmlファイルは、インデックスファイルであり、このファイルがページ内のウィジェットとして組み込まれます。
20.「作成」をクリックします。作成されたウィジェットが、「ウィジェット」ページに追加されます。
21. このウィジェットは、アプリケーション内のすべてのページで、ページビルダー内のドラッグアンドドロップ要素として表示されます。
ページにウィジェットを追加する
1. アプリの編集モードに移動します。
2. 所要のページのビルダーを開きます。
3. 左側のペインからウィジェットを選択します。作成したウィジェットが表示されます。
4. ウィジェットをドラッグ&ドロップして、ビルダーエリアに配置してください。
5. 「完了」をクリックしてビルダーを終了します。
サンプルデータで開始しよう
開始を迅速に行うために、ウィジェットを作成するために使用してダウンロードできる
サンプルデータを提供しました!
関連トピック