第2章 ページのオーサリング
ページは、パースペクティブとしても知られていますが、以下のコンポーネントの集まりです。
- コアコンポーネント
- ナビゲーションコンポーネント
- レポーティングコンポーネント
ページには、コンポーネントをいくつでも追加できますが、必ずしも追加する必要はありません。Page Editor ツールを使用してページを編集します。
ページには、Fluid スタイルまたは Page スタイルのいずれかがあります。Fluid スタイルは標準的な Web ページで、ページの縦の長さが表示できる長さを超えた場合は垂直スクロールバーが使用されます。Page スタイルの Web ページは、縦の長さが常にウィンドウの長さに一致します。
2.1. ページの作成
Pages パースペクティブを使用して、異なる種類のコンポーネントで構成されるページを作成できます。ページを作成し、すべてのコンポーネントをページに定義したら、Page Editor を使用して、必要に応じてページの保存、削除、名前変更、またはコピーを行います。
以下の手順は、ページの作成方法と、必要なコンポーネントをページに追加する方法を説明します。
手順
- Business Central で、Menu → Design → Pages に移動します。
- Pages パネルで、New をクリックします。または、Page Editor ペインで New Page をクリックします。
- New Page ダイアログボックスでの Name フィールドに値を入力し、必要なスタイルを選択します。
- OK をクリックすると、Page Editor に新しいページが開きます。
- Components ペインで、コンポーネントを展開し、必要なコンポーネントタイプをエディターのキャンバスにドラッグします。
- ページにコンポーネントを配置したら、Properties ペインからプロパティーを編集します。
- Save をクリックし、再度 Save をクリックします。
2.2. ページの保存中、削除中、名前の変更中、またはコピー中
ページを作成して定義したら、必要に応じて Page Editor を使用してページの保存、削除、名前変更、またはコピーします。
手順
- Business Central で、Menu → Design → Pages に移動します。
- Pages パネルからページを選択します。Page Editor にページが開きます。
- 必要な操作を実行し、Page Editor の右上から Save、Delete、Rename、または Copy を選択します。
図2.1 ページの保存、削除、名前変更、またはコピー
2.3. ナビゲーションツリー
Workbench ナビゲーションツリーには、Business Central の Main メニューに表示されるエントリーが含まれます。このナビゲーションツリー構造への変更は、ホームページの Main メニューに反映されます。このメカニズムを使用して、たとえば新しいページを公開できます。
また、追加のナビゲーションツリーを作成できます。このカスタムツリーを使用して、ページ内にナビゲーションコンポーネントを設定できます。Navigation パネルから Workbench ツリーを削除することはできませんが、要件を満たすために Workbench ツリー階層を編集することはできます。この機能を使用すれば、新しいページを使用して Business Central の Main メニューをカスタマイズできます。
Navigation パネルにデフォルトで表示される Workbench ツリーは、Business Central のメイン メニュー です。
2.3.1. ナビゲーションツリーの作成
カスタムのナビゲーションツリーを必要な数だけ作成できます。カスタムのナビゲーションツリーは、デフォルトの Workbench ナビゲーションツリーとは一点だけ異なります。カスタムツリーは Business Central から削除できますが、デフォルトツリーは削除できません。デフォルトツリーには、Workbench ツリーのデフォルトのグループおよびエントリーと、ユーザーが作成したグループおよびツリーが含まれます。
前提条件
- ナビゲーションツリーの作成に必要なユーザー権限がある。
手順
- Business Central にログインし、Menu → Design → Pages に移動します。
- Navigation パネルを選択し、New をクリックします。
- 新しいナビゲーションツリーの名前を入力し、チェックマークアイコンをクリックするか、Enter を押します。
- 保存 をクリックします。
2.3.2. ナビゲーションツリーの編集
Pages パースペクティブから Navigation パネルを使用して、カスタムのナビゲーションツリーを編集します。グループ、ディバイダー (仕切り)、およびページエントリーの追加、またはツリーからの特定のエントリーの削除、エントリーの順序変更、名前変更、削除を行い、ツリーをさらにカスタマイズできます。
前提条件
- ナビゲーションツリーの編集に必要なユーザー権限がある。
2.3.3. ナビゲーションツリーへのグループ、ディバイダー、ページエントリーの追加
ナビゲーションツリーにグループ、ディバイダー、およびページエントリーを追加できます。
手順
- Business Central で、Menu → Design → Pages に移動します。
- Navigation パネルをクリックして、エントリーを追加するナビゲーションツリーを選択します。
- ツリーのギアアイコンをクリックし、New Group、New Divider、または New Page の順に選択します。
新しいグループまたはページの名前を入力し、チェックマークアイコンをクリックして Enter を押します。
注記ディバイダーエントリーには名前プロパティーはありません。
- 保存 をクリックします。
2.3.4. ナビゲーションツリーの並べ替え
Navigation パネルで、ナビゲーションツリーとそのエントリーの並べ替えができます。
ツリーエントリーの並べ替えオプションは、ツリー階層における場所によって異なります。
ナビゲーションツリーの並べ替え
手順
- Business Central で、Menu → Design → Pages に移動します。
- Navigation パネルをクリックし、並び替えるナビゲーションツリーを選択します。
ツリーのギアアイコンをクリックし、必要に応じて上下に移動します。
注記ナビゲーションツリーの最初のエントリーおよび最後のエントリーで利用可能な並べ替えオプションは 2 つしかありません。
- 保存 をクリックします。
ナビゲーションツリーのエントリーの並べ替え
手順
- Business Central で、Menu → Design → Pages に移動します。
- Navigation パネルをクリックして、ナビゲーションツリーを展開します。
- 並べ替えるエントリーのギアアイコンをクリックし、必要に応じて上下に移動します。
- 任意で、Goto Page をクリックして選択したページを表示します。
- 保存 をクリックします。
2.3.5. ナビゲーションツリーの名前変更
Workbench ツリー以外のナビゲーションツリーの名前をすべて変更します。
手順
- Business Central で、Menu → Design → Pages に移動します。
Navigation パネルをクリックし、名前を変更するカスタムのナビゲーションツリーを選択します。
注記ツリーエントリーの名前を変更し、ツリーを展開して、名前を変更するエントリーを選択します。
- ツリーまたはツリーエントリーの編集アイコンをクリックします。
ツリーの新しい名前を入力し、チェックマークアイコンをクリックします。
注記ディバイダーエントリーの名前を変更することはできません。
- 保存 をクリックします。
2.3.6. ナビゲーションツリーの削除
Pages パースペクティブの Navigation パネルから、Workbench ツリー以外のナビゲーションツリーを削除できます。
手順
- Business Central で、Menu → Design → Pages に移動します。
- Navigation パネルで、削除するナビゲーションツリーを選択し、削除アイコンをクリックします。
- 保存 をクリックします。
2.3.7. ナビゲーションツリーのエントリーの削除
ナビゲーションツリーのエントリーを削除できます。
手順
- Business Central で、Menu → Design → Pages に移動します。
- Navigation パネルをクリックします。
- 削除するエントリーを含むツリーを展開します。
- エントリーの削除アイコンをクリックします。
- 保存 をクリックします。
2.4. コンポーネント
ページには、さまざまなコンポーネントが含まれます。ページには、以下のコンポーネントタイプを使用できます。
- Core コンポーネント: カスタムの HTML 情報を指定、または既存ページを表示するのに使用します。コアコンポーネントは 2 種類があります。
表2.1 Core コンポーネントのサブタイプ
Core コンポーネントのサブタイプ | 説明 |
---|---|
HTML |
このコンポーネントは、HTML エディターウィジェットを開きます。テキスト、イメージ、テーブル、リンク、色などを使用して HTML ページを作成します。要件に応じてページをカスタマイズできます。 |
Page |
このコンポーネントを使用すると、新しいダッシュボードに以前作成したページを追加できます。このコンポーネントを使用して、ダッシュボードに作成してあるカスタムページをネストできます。 |
コアコンポーネントは必須ではありません。
- Navigation コンポーネント: ページ間を移動するのに使用します。ナビゲーションコンポーネントの種類は 6 つあります。
表2.2 ナビゲーションコンポーネントのサブタイプ
ナビゲーションコンポーネントのサブタイプ | 説明 |
---|---|
Target Div |
このコンポーネントは、タブリスト、メニューバー、ツリーナビゲーターコンポーネントが、エントリーを表示し、クリックした最後の項目を追跡するのに使用します。 |
Menu Bar |
このコンポーネントは、メニューバーの形でナビゲーションツリーのエントリーを表示します。Business Central でサポートされるレベルの数には制限がありません。 |
Tile Navigator |
このコンポーネントは、タイルの形でナビゲーショングループを表示します。グループはフォルダーとして表示されますが、選択する代わりにコンテンツが表示されます。 |
Tree |
このコンポーネントは、垂直のツリー構造フォーマットでエントリーを表示します。 |
Carousel |
円形やスライドショーなどで選択したページを表示するか、循環させます。 |
Tab List |
このコンポーネントは、コンポーネントの上部に、選択したメニューページをタブとして表示します。 |
ターゲット Div 設定は、円形、タイルナビゲーターなどの非ターゲット Div には必要ありません。
Reporting コンポーネント: グラフ、テーブル、マップなどの形でデータセットのデータの表示に使用されます (「データセットのオーサリング」セクションを参照)。レポーティングコンポーネントのタイプは 10 種類あります。レポーティングコンポーネントは New Displayer ウィジェットを使用して設定できますが、ウィジェットには以下の 3 つのタブが含まれます。
- Type: カスタムデータをグラフィカルに表示する方法を選択します。
- Data: Settings メニューで利用可能な Data Sets セクションから作成したカスタムのデータセットの一覧から、データセットを選択します。
- Display: タイトルを追加し、色、サイズなどを変更することでコンテンツを表示する方法を編集してカスタマイズします。
2.4.1. ページエディターにコンポーネントを配置してページの作成
ページを作成するには、Pages パースペクティブの Editor キャンバスにコンポーネントをドラッグする必要があります。ページに必要なコンポーネントをすべて配置したら、Save をクリックします。
2.4.2. Preview タブを使用してページのプレビュー
ページの作成または編集時に、Page Editor の Preview タブをクリックして、保存する前にページをプレビューします。
2.4.3. コンポーネントのプロパティー
ページに使用されるコンポーネントには、コンポーネントに関連するさまざまなプロパティーが含まれます。Properties パネルで以下のプロパティーを編集して、コンポーネントをカスタマイズできます。
- Panel プロパティー: Width、Height、Background Color など、コンポーネントパネルプロパティーをカスタマイズします。
- Margin プロパティー: Top、Bottom、Left、Right など、コンポーネントのマージンプロパティーをカスタマイズします。
- Padding プロパティー: Top、Bottom、Left、Right などのコンポーネントパディングプロパティーをカスタマイズします。
また、HTML コンポーネントには、コンポーネントの Alignment、Decoration、Color、Size、および Weight プロパティーをカスタマイズする追加テキストプロパティーもあります。