コンテンツにスキップ

カスタムアプリスタジオ (Custom App Studio)

カスタムアプリスタジオは、Teknora EAM に組み込まれたローコード構築ツールです。コードを書くことなく、データモデル・一覧画面・詳細画面をまとめた新しい「アプリ」を追加し、ドラッグ&ドロップでレイアウトを組み、システムの11言語のいずれにも翻訳できます。

スタジオの概要

主な領域

画面は3つの領域に分かれています。

領域 機能
上部バー(フィールドタイプパレット) 現在のタブに新しいフィールドを追加するボタン —— テキスト、テキストエリア、数値、日付、日付と時刻、はい/いいえ、選択、リンク、テーブル、画像
キャンバス(中央) フォームのライブ(WYSIWYG)プレビュー —— ここで見えているものが、実行時にユーザーが見る内容そのものです
プロパティパネル(右側) キャンバス上で何をクリックしたかに応じて自動的に切り替わります —— フォーム全体、タブ、セクション、またはフィールド

フォームのプロパティ

キャンバス上部の「Form Properties」バーをクリックすると、アプリ全体のプロパティが表示されます。

  • タイトル:アプリの主要な名前(サイドバーと上部メニューに表示されます)。
  • 翻訳:アプリ名を11言語のうち任意の数だけ翻訳できます —— 翻訳された言語で操作しているユーザーには、翻訳された名前が自動的に表示されます。
  • アイコン:lucide-react ライブラリのアイコン名。
  • カテゴリ:「Custom Applications」内でのアプリの分類。
  • フォームにタイトルバーを表示:詳細画面のヘッダーにアプリ名 + 主フィールド + 説明フィールドを表示するかどうかを制御します。
  • 非表示:削除せずに、サイドバーとメニューからアプリを非表示にします。
  • 添付ファイルを許可:詳細画面のヘッダーに添付ファイルアイコン(📎)を追加します。
  • ワークフローを許可:現時点では意図を示すフラグのみです —— 実際のワークフローエンジンはまだ接続されていません。
  • レポートあり:詳細画面で実際の「Print Reports」ボタンを有効にし、Report Designer でこのアプリをデータソースとして選択できるようにします。
  • ステータス変更を許可:実際のステータス変更システム(資産画面や作業指示画面と同じもの)を有効にします —— ステータス値の取得元となるドメイン(例:ASSETSTATUS)を選択するよう求められます。

タブ (Tabs)

タブのプロパティ

キャンバス上の任意のタブをクリックしてプロパティを編集します。

  • 名前:ユーザーに表示されるタブのラベル。
  • アイコン:選択可能なアイコングリッドを備えたドロップダウン —— このアイコンはキャンバス内のタブ名の横、および実行時の詳細画面に表示されます。
  • 翻訳:タブ名を任意の言語に翻訳します。
  • 非表示:内部のフィールドを削除せずに、タブ全体を詳細画面から非表示にします。

最後のタブの横にある「+」をクリックすると、新しいタブを追加できます。

セクション (Sections)

セクションのプロパティ

各タブはセクション(フィールドのグループ)に分かれています。任意のセクションのタイトルをクリックすると次のことができます。

  • 名前の変更と翻訳。
  • 列数の設定(1、2、または3)—— これはおおよその見た目ではなく、フォームの構築に使われる実際の CSS Grid を制御します。
  • セクションの削除 —— 中のフィールドは削除されず、「未分類」になります。

フィールド (Fields)

テキストフィールドのプロパティ

任意のフィールドをクリックして編集します。

  • ラベルフィールド名(フィールド名は自動生成され、編集できません)。
  • 翻訳 —— タブと同じ考え方です。
  • フィールドが表示されるタブセクション
  • 必須:実際の(ネイティブ HTML)検証を有効にします —— 入力なしではレコードを保存できません。
  • 一覧に表示:この列が一覧画面に表示されるかどうかを制御します。
  • プライマリ:レコードの「タイトル」を表す主フィールド —— 本文中で繰り返す代わりに詳細画面のヘッダーに表示され、初回保存後はロックされて編集できなくなります。
  • 読み取り専用(Read Only):フィールドは表示されるだけで手動編集はできません —— Action Script が制御するフィールド(自動計算される合計など)に便利です。

数値フィールドのプロパティ:読み取り専用 + 数値フォーマット

フィールドタイプが数値の場合、追加のオプションが表示されます。

  • 数値フォーマット整数(デフォルト)、小数(Float)、または通貨 —— 小数または通貨を選択すると、ブラウザに「無効」と判定されることなく、小数(450.75 など)を通常どおり入力できます。

フィールドタイプ

単純なタイプ(テキスト、数値、日付、はい/いいえ、リストからの選択)に加えて、2つの高度なタイプがあります。

リンクフィールドのプロパティ

自由記述のテキストではなく、他の場所にある実際のレコードを指すフィールドです。以下のいずれかを指すよう選択できます。

  • ドメイン:システム内の任意のドメイン。
  • システムテーブル:資産(Assets)、場所(Locations)、品目(Items)、労務(Labors)などの実際のテーブル。
  • カスタムオブジェクト:あなたが作成した別のカスタムアプリ。

「現在のサイトで結果をフィルタ」オプションもあります —— 有効にすると、検索はユーザーと同じサイトに属する結果のみを返します。

テーブルフィールド (Table)

テーブルフィールドのプロパティ

1つのレコード内に複数行を追加できるフィールドです(資産画面のスペアパーツ表のようなものです)。定義方法は3通りあります。

  1. 列を手動で定義:独自の列を追加します —— 各列はテキスト/数値/日付/はい・いいえ/リスト、あるいは実際のレコードを指すリンク(資産テーブルの検索を開く「資産」列など)にすることもできます。
  2. オブジェクトにリンク:テーブルは別のカスタムアプリのフィールドから自動的に列を取得します。
  3. ドメインにリンク:テーブルは特定のドメインの値から行を追加できるようにします。

テーブル列のプロパティ:幅、読み取り専用、リストの選択肢、通貨フォーマット

手動で定義した各列には、追加のプロパティがあります。

  • 幅(Width):相対的な数値です(ERPNext の列システムと同様)—— 幅 2 の列は幅 1 の列の2倍のスペースを取ります。固定ピクセル数ではありません。
  • 読み取り専用:フィールドレベルと同じ考え方ですが、列単位で適用されます —— スクリプトによって自動計算される列(行合計など)に便利です。
  • リストタイプ:カンマ区切りの値を入力する「Choices」ボックスが表示されます —— 実行時にこの列はそれらの値を持つドロップダウンとして表示されます。
  • 数値フォーマット:列が数値の場合、通常の数値フィールドと同様に整数/小数/通貨を選択できます。

実行時のテーブル:リスト列と通貨列を含む行

実践的な手順

1. 新しいカスタムアプリを作成する

「Custom Applications」一覧から新規アプリをクリックし、名前とカテゴリを入力してから、上部バーからフィールドの追加を始めます。

2. フォームを整理する

フィールドをドラッグして並べ替え、論理的なタブとセクションにグループ化し、各セクションの列数を設定します。

3. 翻訳する

異なる言語を使う複数のユーザーが見る必要があるフィールド/タブ/セクションについては、「+ Add language」をクリックして必要な翻訳を追加します —— 11言語すべてを翻訳する必要はなく、必要な言語だけを選べば構いません。

4. 公開する

完了したら、画面上部のPublished(公開済み)をクリックします —— 公開されるまで、このアプリはユーザーのサイドバーや上部メニューには表示されません。

5. 権限

新しいアプリの読み取り/作成/更新/削除の権限を、ロール(Roles)画面から追加する必要があります —— 各カスタムアプリには自動的に権限キー(custom_<アプリ名>)が割り当てられます。

公開する前に

公開する前に、必須フィールド(Required)と主フィールド(Primary)がすべて正しく設定されていることを確認してください —— ユーザーがデータ入力を始めた後にこれらを変更すると、混乱を招く可能性があります。


戻る:カスタムアプリケーション ←