SAP UI5のFeed Inputと通常のinputの使い分けについて

はじめに

担当する案件においてコミュニケーションを重視したコントロールを使用することとなり、適切なものを調査しました。
その結果、Feed Inputが最も適切であることが判明しました。この過程で、通常のinputとの使い分けとFeed Inputの実装について記述します。

InputとFeed Inputの違い

特徴	Input	Feed Input
用途	短いテキストや数値の入力に使用	ユーザー間の対話やコミュニケーションを促進するための入力フィールド
デザイン	シンプルで一般的なデザイン	ユーザー間のコミュニケーションに適したデザイン
組み合わせ	-	sap.m.FeedListItemなどのUI要素と組み合わせて使用することが多い

Feed Inputの実装の流れ

1.パネルの実装

まず、コンポーネントを設定します。

<Panel id="任意のパネルID" expandable="true">
    <headerToolbar>
        <OverflowToolbar>
            <Title text="コメント"/>
        </OverflowToolbar>
    </headerToolbar>
    <VBox id="任意のVBoxID">

2.Feed Inputの追加

次に、コンポーネントを追加します。
postイベントを使ってコメントが投稿されたときの処理を設定します。

        <FeedInput 
            post="onFeedInputReqonPost"
            class="sapUiSmallMarginTopBottom"  
            showIcon="false"/>

3. コメントリストの設定

最後に、コメントを表示するためのコンポーネントを追加します。
以下では入力されたコメントをリスト形式で表示します。

        <List id="任意のListID" class="sapUiSmallMarginTop"/>
    </VBox>
</Panel>

上記の1～3を組み合わせると以下のようになります。

<Panel id="任意のパネルID" expandable="true">
    <headerToolbar>
        <OverflowToolbar>
            <Title text="コメント"/>
        </OverflowToolbar>
    </headerToolbar>
    <VBox id="任意のVBoxID">
        <FeedInput 
            post="onFeedInputReqonPost"
            class="sapUiSmallMarginTopBottom"  
            showIcon="false"/>
        <List id="任意のListID" class="sapUiSmallMarginTop"/>
    </VBox>
</Panel>

実装すると以下のようになります。

・コメント投稿前

・コメント投稿後

最後に

この調査を通じて、SAPUI5のInputコンポーネントに関する理解が深まりました。
Inputの使い分けやFeed Inputの実装方法に関して悩まれている際に、本記事が参考になれば幸いです。