注意：本機能は、Performance, Efficiency および Teamwork  エディションのみに適用できます。

概要

レイアウトのドキュメントページで説明しているように、UI デザイナーで既存のアプリケーション レイアウトをカスタマイズすることも可能です。

たとえば、次のことができます。

• ログインボックスを追加する
• メニューを変更しサイドメニューを追加する
• フッターを追加する

デフォルトのリビング アプリケーション レイアウトをカスタマイズするための前提条件：

• Java script の基礎知識
• AngularJS の基礎知識
• Bootstrap の基礎知識
• UI デザイナーの基礎知識
• 既存のリビング アプリケーション（修正したレイアウトをテストするために必要）

次の例では、アプリケーションのデフォルトの最上部のメニューをサイドメニューに変換する方法を説明します。
手順は次のとおりです。

• Bonita ポータルからデフォルトのアプリケーション レイアウトをエクスポートする
• UI デザイナーにデフォルトのアプリケーション レイアウトをインポートする
• インポートしたレイアウトを変更する
• リビング アプリケーションにカスタマイズしたレイアウトを適用する

Bonita ポータルからデフォルトのアプリケーション レイアウトをエクスポートする

1. Bonita ポータルを開き、管理者のプロファイルにマッピングされた誰かのユーザ名とパスワードでログインします。
2. 「リソース」のメニューをクリックします。
3. フィルターで「レイアウト」を選択します。
4.  Default layout の項目を選択します。
5. 「エクスポート」をクリックして、この Default layout をファイルシステム上に保存します。

UI デザイナーにデフォルトのアプリケーション レイアウトをインポートする

Default layout は変更を容易にするため、 UI デザイナーで構築されています。次に、変更を行うために UI デザイナーにインポートする必要があります。

1. UI デザイナーを開きます。
2. 「インポート」ボタンをクリックします。
3. インポートして Default layout を取得します。

UI デザイナーを使用してデフォルト レイアウトを編集する

UI デザイナーに Default layout をインポートすると、それは３つの生成物で構成されていることがわかります。

1. LivingApplicationLayoutPage
2. LivingApplicationLayoutPage のメニューを表示する LIVINGAPPLICATIONMENU カスタム ウィジェット
3. LivingApplicationLayoutPage のページコンテンツを表示する LIVINGAPPLICATIONIFRAM カスタム ウィジェット

したがって、ここでは LIVINGAPPLICATIONMENU カスタム ウィジェットをサイドメニューに変換する方法について説明します。

UI デザイナーで：

1. LIVINGAPPLICATIONMENU カスタム ウィジェットの エディタを開くには、「カスタ ム ウィジェットを編集」をクリックします。
2. このカスタ ムウィジェット内の「テンプレート」を次のコンテンツに置き換えます。

<div class="container" style="height:100%">
        <div class="row">
                <div id="leftCol">
                        <div class="well">
                                <ul class="nav nav-stacked" id="sidebar">
                                        <li ng-class="{active:ctrl.pageToken===menu.applicationPageId.token}" ng-repeat="menu in ctrl.filterChildren(-1)" dropdown>
                                                <a ng-if="!ctrl.isParentMenu(menu)" ng-href="../{{menu.applicationPageId.token}}/" ng-click="ctrl.reload()" >{{menu.displayName}}</a>            
                                                <a ng-if="ctrl.isParentMenu(menu)" dropdown-toggle>{{menu.displayName}}<span class="caret"></span></a>
                                                <ul ng-if="ctrl.isParentMenu(menu)" class="dropdown-menu">  
                                                        <li ng-repeat="childMenu in ctrl.filterChildren(menu.id)">
                                                                <a ng-href="../{{childMenu.applicationPageId.token}}/" ng-click="ctrl.reload()">{{childMenu.displayName}}</a>
                                                        </li>
                                                </ul>
                                        </li>
                                </ul>
                        </div>
                </div>  
        </div>  
</div>

3. 「保存」をクリックします。
4. UI デザイナーのホームページに戻ります。
5. リビング アプリケーションの「レイアウト」ページをクリックします。
6. 既存の LIVINGAPPLICATIONMENU カスタム ウィジェットを LIVINGAPPLICATIONIFRAM の左側にドラッグ＆ドロップします。
7. LIVINGAPPLICATIONMENU の幅を 2 に設定しサイズを変更します。
8. LIVINGAPPLICATIONIFRAM の幅を 10 に設定しサイズを変更します。
9. 「保存」クリックします。

ファイルシステム上のサイドメニュー レイアウトをエクスポートする

変更を行った後、新しいレイアウトを新しい名前で保存し、それをエクスポートします。

1. その名前を SideMenuLayout に変更します。
2. 「保存」をクリックします。
3. 「エクスポート」ボタンをクリックします。

サイドメニュー レイアウトをポータルにインポートする

1. Bonita ポータルを開き、再度、管理者のプロファイルにマッピングされた誰かのユーザ名とパスワードでログインします。
2. 「リソース」のメニューをクリックします。
3. 「追加」をクリックします。
4. 新しく作成した SideMenuLayout を追加します。
5. 「次へ」をクリックします。
6. 「確認」をクリックします。

変更されたレイアウトを使用するリビング アプリケーションを設定する

1. 「アプリケーション」メニューをクリックします。
2. 「アクション」をクリックし、あなたのリビング アプリケーションを編集します。
3. 「ルック＆フィール」セクションの「レイアウト」のリンクをクリックします。
4.  SideMenuLayout を選択します。
5. 「✔」ボタンをクリックします。
6. あなたのリビング アプリケーションに移動するため、アプリケーション詳細セクションの「URL」のリンクをクリックします。
7. サイドメニューを使用した新しいアプリケーションのレイアウトを確認します。
8. あなたのニーズに合ったレイアウトにさらに改善します。