Aras Innovator の Toolbar Component を使ってカスタムUIを作る

Aras Innovator では、aras-toolbar を使うことでカスタムツールバーを作成できます。

この記事では、フォーム上に Toolbar Component を表示し、ボタンや入力欄を配置する方法をまとめます。

---

フォームに表示領域を用意する

まず、フォームに HTML フィールドを追加し、Toolbar を描画するためのコンテナを配置します。

<div id="toolbarContainer" class="aras-commandbar"></div>

---

onLoad イベントにクライアントメソッドを設定

フォームの onLoad イベントでクライアントメソッドを呼び出します。

---

クライアントメソッドで Toolbar を生成

let toolbar;

function initToolbar() {
    toolbar = document.createElement('aras-toolbar');

    const container = document.getElementById('toolbarContainer');
    container.appendChild(toolbar);

    const toolbarItemMap = new Map();

    const toolbarItems = [
        {
            id: 'refresh',
            type: 'button',
            image: '../images/Refresh.svg',
            label: aras.getResource('core', 'common.refresh'),
            tooltip_template: aras.getResource('core', 'common.refresh'),
            disabled: false,
            cssClass: 'aras-button_primary',
        },
        {
            id: 'separator-left',
            type: 'separator',
        },
        {
            id: 'text',
            type: 'textbox',
            value: '',
            size: 6,
        },
        {
            id: 'select',
            type: 'select',
            options: [
                { value: 'option1', label: 'Option 1' },
                { value: 'option2', label: 'Option 2' },
            ],
            value: 'option1',
        },
    ];

    toolbarItems.forEach(item => {
        toolbarItemMap.set(item.id, item);
    });

    toolbar.data = toolbarItemMap;

    toolbar.on('click', onToolbarClick);
}

---

クリックイベント

function onToolbarClick(itemId, event) {
    if (itemId !== 'refresh') {
        return;
    }
    
    console.log('refresh clicked');

    const textValue = toolbar.data.get('text').value;
    const current = toolbar.data.get('text');
    toolbar.data.set('text', {
        ...current,
        value: '書き換えました',
    });

    // 再描画をトリガー
    toolbar.data = toolbar.data;
}

---

Toolbar で使える主なコントロール

type によって表示されるコントロールが変わります。

button

{
    type: 'button',
    label: 'Click',
    image: '../images/icon.svg',
}

• image を指定するとアイコン表示

---

separator

{
    type: 'separator'
}

区切り線を表示します。

---

textbox

{
    type: 'textbox',
    value: '',
    size: 6
}

• size は rem 単位で幅指定
• invalid: true でエラー表示可能

---

select

{
    type: 'select',
    options: [
        { value: 'a', label: 'A' },
        { value: 'b', label: 'B' }
    ],
    value: 'a'
}

---

その他のコントロール（抜粋）

• date：日付入力
• dropdownMenu：メニュー付きボタン
• dropdownSelector：選択型ドロップダウン
• image：画像表示
• text：テキスト表示
• corporateTime：日付・時刻表示

内部実装は以下を参照してください。

• Innovator/Client/Modules/components/toolbar.ts
• Innovator/Client/Modules/components/toolbarTemplates.tsx

---

再描画について

Toolbar はデータを書き換えただけでは UI が更新されません。
data の setter に再描画の処理があります。

toolbar.data.set('text', newValue);
toolbar.data = toolbar.data;

👉 data を再代入することで再描画されます。

---

まとめ

• Toolbar は aras-toolbar で生成
• data(Map) にアイテム定義を渡す
• type によって UI が変わる
• 再描画は toolbar.data = toolbar.data が必要

---

次の記事

Grid と組み合わせることで、一覧＋操作UIが作れます👇

👉 Grid 編