Skip to main content

 

OutSystems 11オンラインヘルプ

 

 

OutSystems

画面テンプレートの作成

新しい画面テンプレートを作成し、カスタム画面テンプレートモジュールに追加して、環境内で利用できるようにします。

カスタム画面テンプレートモジュールの作成

新しい画面テンプレートを環境に追加するには、まず、Custom Screen Templates WebまたはCustom Screen Templates Mobileを1つ以上複製する必要があります。

  1. Service Studioの[Forge repository]タブに移動し、Custom Screen Templatesを検索します。結果リストに、モバイルアプリ用とWebアプリ用の2つのコンポーネントが表示されます。

    ForgeのCustom Screen Templatesの検索結果

  2. コンポーネントを選択して次の画面に進みます。[Open Module]をクリックして続行します。Service Studioで新しいタブが開きます。

    Forgeコンポーネントの詳細ページ

  3. モジュールが読み込まれるのを待ち、ダイアログの[Open a clone]をクリックします。

    複製を開くことを確認するダイアログ

  4. モジュールの複製が作成されたら、[Close]をクリックして確認ダイアログを閉じます。

  5. この手順は必須ではありませんが、実行することを強く推奨します。[Interface]タブに移動し、ツリーでモジュールのタイトルをクリックし、Nameプロパティを「MyCustomScreenTemplatesWeb」や「MyCustomScreenTemplatesMobile」などに編集します。これにより、複製されたモジュールの名前がわかりやすくなります。

  6. モジュールをパブリッシュします。[Applications > Independent Modules]でモジュールを利用できるようになります。

  7. Independent Modules]に移動し、カスタム画面テンプレートモジュールを別のアプリケーションに移動します。マウスポインタをモジュール名の上に移動し、[Move to ]コマンドを表示してクリックします。

    Independent Modules

新規の画面テンプレートの作成

画面を新規作成するには、以下の手順を実行します。

  1. 新しい画面テンプレートを追加するカスタム画面テンプレートモジュールを開きます。該当するモジュールがない場合は、手順に従ってモジュールを作成してから、このセクションに戻ります。
  2. Interface]タブに移動し、UI FlowsフォルダのScreenTemplatesフローを右クリックします。コンテキストメニューで[Add Web Screen](または[Add Mobile Screen])を選択します。
  3. New Screen]ウィンドウで、テンプレートをブートストラップするためのコンテンツを含む画面テンプレートを選択するか、[Empty]を選択します。[Create Screen]をクリックします。新しい画面の上部に「You are editing a Screen Template」というメッセージが表示されます。
  4. 前の手順で[Empty]を選択した場合は、UI Flowsフォルダに移動し、Commonフォルダを展開し、Layoutブロックをドラッグして画面にドロップします。
  5. プレビュー画像を設定し、画面テンプレートのメタデータを入力します。
  6. モジュールをパブリッシュします。環境内のすべての開発者が画面テンプレートを利用できるようになります。

画面テンプレートの編集

画面テンプレートの編集

カスタム画面テンプレートモジュールで画面テンプレートを編集します。モジュールを再パブリッシュして、環境内の画面テンプレートを更新します。既存の画面テンプレートを編集しても、その画面テンプレートからすでに作成された画面には影響を及ぼしません。

カスタムテーマを使用した画面テンプレートの作成

各カスタム画面テンプレートモジュールで異なるテーマを使用することができます。画面テンプレートはテーマからスタイルを継承します。

  1. 手順に従って、カスタム画面テンプレートモジュールを作成します。
  2. モジュールを編集して、テーマを使用するようにします。Forgeのカスタム画面テンプレートモジュールは、OutSystems UIのデフォルトテーマであるBaseThemeを使用しています。
  3. 手順に従って、新しい画面テンプレートを作成します。

独自のスタイルガイドや画面テンプレートを作成する際は、OutSystemsが提供する以下のForgeコンポーネントが役立ちます。

このセクションの記事

  • 画面テンプレートの仕組み
    画面テンプレートの仕組みについて学習します。
  • 画面テンプレートの作成に関するガイドライン
    優れたUXを備え、安定した使いやすい画面テンプレートを作成するには、こちらのガイドラインに従ってください。
  • メタデータ参照
    画面テンプレート作成時にメタデータを入力しておくと、開発者が画面を作成する際に最適な画面テンプレートを選択することができます。
  • サンプルデータ
    画面テンプレートには、バックオフィスで管理できるサンプルデータが含まれています。独自データの表示、リセット、追加ができます。
  • Was this article helpful?