Skip to main content

 

 

 

 
Language:
 
Service Studioバージョン :
 
 
OutSystems

画面テンプレートの作成

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

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

画面テンプレートを環境に追加するには、まず、いずれかの画面テンプレートコンポーネントを複製する必要があります。

  • Custom Screen Templates Reactive(リアクティブWebアプリ用)
  • Custom Screen Templates Mobile(モバイルアプリ用)

  • Service Studioで[outsystems]タブに移動し、Custom Screen Templatesを検索します。結果リストに、モバイルアプリ用、リアクティブアプリ用、Webアプリ用のコンポーネントが1つずつ表示されます。

    ForgeのCustom Screen Templatesの検索結果

  • いずれかのコンポーネントをクリックし、[Open Module]をクリックします。

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

    Service Studioで新しいタブが開き、警告メッセージが表示されます。

  • Open a Clone]をクリックします。

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

    数秒でモジュールが複製されます。

  • Close]をクリックします。

    複製を閉じることを確認するダイアログボックス

  • この手順は必須ではありませんが、実行することを強く推奨します。

    Interface]タブに移動し、要素ツリーでモジュールのタイトルをクリックし、Nameプロパティを「MyCustomScreenTemplatesWeb」や「MyCustomScreenTemplatesMobile」などに編集します。

    モジュール名の変更

    これにより、複製されたモジュールの名前がわかりやすくなります。

  • モジュールをパブリッシュします。

    Development]タブの[Independent Modules]でモジュールを利用できるようになります。

    Independent Modules

    複製されたモジュール

  • カスタム画面テンプレートモジュールを[Independent Modules]から使用するアプリケーションに移動します。

    これを行うには、[Move module]アイコンをクリックし、テンプレートを移動するアプリケーションを選択して[Move]をクリックします。

    Move module

    アプリケーションの選択

    これで、選択したアプリケーションにテンプレートモジュールが含まれるようになりました。

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

  1. 新しい画面テンプレートを追加するカスタム画面テンプレートモジュールを開きます。該当するモジュールがない場合は、手順に従ってモジュールを作成してから、このセクションに戻ります。

  2. Interface]タブのUI Flowsフォルダで、画面テンプレートのUIフローを右クリックして[Add Screen]を選択します。

    新しい画面の追加

  3. New Screen]ウィンドウで、テンプレートをブートストラップするためのコンテンツを含む画面テンプレートを選択するか、[Empty]を選択して、[Create Screen]をクリックします。

    この例では、[Empty]を選択しています。

    新しい画面のタイプの選択

    新しい画面が開き、「You are editing a Screen Template. Check the guidelines.」という警告メッセージが表示されます。

    警告メッセージ

  4. UI Flowsフォルダに移動してCommonフォルダを展開し、Layoutブロックを画面にドラッグします。

    Layoutブロックの画面へのドラッグ

    注記: この手順は、前の手順で[Empty]画面を選択した場合にのみ適用されます。

  5. プレビュー画像を設定し、画面テンプレートのメタデータを入力します。

  6. モジュールをパブリッシュします。

    環境内のすべての開発者が画面テンプレートを利用できるようになります。

    画面テンプレートの編集

画面テンプレートの編集

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

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

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

  1. 手順に従って、カスタム画面テンプレートモジュールを作成します。

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

  3. 手順に従って、新しい画面テンプレートを作成します。

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

このセクションの記事

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