空の結果メッセージの設定

空の結果メッセージの設定

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

UIをツアーした場合、検索コンテナにメッセージが表示されたり、場合によってはアニメーションが表示されたりすることがあります。

図1:これは、Webコンテンツポートレットの空の結果アニメーションからの静止フレームです。

liferay-frontend:empty-results-message タグのおかげで、空の結果メッセージとアニメーションも使用するようにアプリを構成できます。

次の手順を実行します:

  1. liferay-frontend taglib宣言をポートレットの init.jsp追加します。

    <%@ taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %>
    
  2. empty-result-message タグ をポートレットのビューに追加します。

    <liferay-frontend:empty-result-message
    />
    
  3. タグの属性を設定して、アニメーションまたは画像の有無にかかわらず、検索コンテナの空の結果メッセージを定義します。 属性については、次の表で説明します。

    属性説明
    actionDropdownItems使用可能なアクションの数に応じて、ドロップダウンメニュー、リンク、またはボタンで空の結果に対して表示するアクションを指定します。
    animationTypeアニメーションのCSSクラス。 四つの値は、これらのCSSクラスでデフォルトで利用可能である: EmptyResultMessageKeys.AnimationType.EMPTYタグライブラリエンプティ状態)、 EmptyResultMessageKeys.AnimationType.SEARCHタグライブラリ検索状態)、 EmptyResultMessageKeys.AnimationType。成功taglib-success-state)、および EmptyResultMessageKeys.AnimationType.NONE。 必要に応じて、カスタムCSSクラスを指定することもできます。
    componentIdactionDropdownItems コンポーネント(ドロップダウンメニュー、リンク、またはボタン)のIDを指定します
    descriptionメインメッセージの下に表示する説明テキスト。
    elementTypeメインメッセージの言語キー no-x-yetx パラメーターを置き換える要素のタイプ。

    構成例を以下に示します。

    <liferay-frontend:empty-result-message
      actionDropdownItems="<%= FragmentPermission.contains(permissionChecker, scopeGroupId, 
      FragmentActionKeys.MANAGE_FRAGMENT_ENTRIES) ? fragmentDisplayContext.getActionDropdownItems() : null %>"
      animationType="<%= EmptyResultMessageKeys.AnimationType.NONE %>"
      componentId="actionsComponent"
      description='<%= LanguageUtil.get(request, "collections-are-needed-to-create-fragments") %>'
      elementType='<%= LanguageUtil.get(request, "collections") %>'
    />
    

empty \ _state.gif:

図2:空の状態のアニメーションを使用して、検索するエントリがないことを示します。

search \ _state.gif:

図3:検索状態アニメーションを使用して、検索結果が見つからなかったことを示します。

success \ _state.gif:

図4:成功状態のアニメーションを使用して、検索結果が見つかったことを示します。

すばらしいです\! これで、空の結果メッセージを表示するようにアプリを構成する方法がわかりました。

関連トピック

« アプリケーションのタイトルとバックリンクの構成管理ツールバーの実装 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています