レスポンシブオーサリングのコンポーネントの構成

さまざまなフォームファクターのレスポンシブオーサリングを使用してページを作成する際、一部のコンポーネント構成オプションを調整して、小さいサイズでページの外観と動作を改善する方法を説明します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

ページの使いやすさを向上させる方法は、ブレークポイント間で異なる構成を使用してコンポーネントの外観をカスタマイズすることです。コンポーネント構成の使用方法は無数にあります。この手順では、より小さなフォームファクターに最適になるよう、リストコンポーネントの構成オプションを編集します。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. レスポンシブオーサリングでページを最初から作成します。
   ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. 上部にある [デスクトップフォームファクター (desktop form factor)] アイコンが選択されていることを確認します。
   
5. ステージで、[+ コンテンツを追加] を選択します。
6. [レイアウト] タブで、[単一列] を選択します。
7. 新しい列の中央にある [+] アイコンを選択して、リストコンポーネントを追加します。
8. [コンポーネント] タブで、[リスト] コンポーネントを見つけて選択します。
9. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
10. デスクトップフォームファクターでページを表示します。
    

    上部のアイコン、列数、下部のページネーション情報など、表示される要素を確認します。

11. [モバイルフォームファクター (mobile form factor)] アイコンを選択します。

    

    モバイルフォームファクターでは、リストコンポーネントが密集していて、垂直スクロールバーと水平スクロールバーの両方が含まれています。

    

    簡単な構成変更を行って、モバイルフォームファクターでの使いやすさと外観を改善します。

12. コンテンツツリーで [リスト 1] を選択します。
13. 構成パネルの [構成] タブで、[表示される列の数] フィールドを見つけて 1 と入力します。
    [数字] 列のみが表示されます。水平スクロールバーが削除されました。
14. 構成パネルの [構成] タブで、下にスクロールして [ヘッダー] セクションに次の変更を加えます。
    1. [サイズ] を [小] に変更します。
    2. [前回の更新情報を非表示] オプションを選択します。
    3. [リストアクションを非表示] オプションを選択します。
       
       変更を加えると、ステージが自動的に更新されます。ヘッダーのサイズが小さくなり、更新時間が削除され、[リストアクション] アイコンが削除されました。
    4. [保存] を選択します。
15. ステージで、モバイルビューの一番下までスクロールします。
16. 構成パネルの [構成] タブで、下にスクロールして [ページネーション] セクションで次の変更を行います (必要に応じて、[ページネーション] を選択してフィールドを展開します)。
    1. [範囲を非表示] オプションを選択します。
    2. [行数を非表示] オプションを選択します。
    3. [ページセレクターごとの行を非表示] を選択します。
    4. [保存] を選択します。
    範囲、行数、およびページセレクターごとの行が削除されました。(行数はモバイル画面の上部に引き続き表示されます)。

    

    構成パネルでは、編集したオプションとフィールドが [モバイルカスケード (mobile cascade)] アイコンとともにマークされます。

17. オプションまたはフィールドの横にある [モバイルカスケード (mobile cascade)] アイコンを選択して、値がモバイルフォームファクター用であることを確認します。
    
18. 上部にある [タブレットフォームファクター (tablet form factor)] アイコンと [デスクトップフォームファクター (desktop form factor)] アイコンを選択して、大きいフォームファクターに変更が加えられていないことを確認します。