🎃
Power Pages でテーブルのデータをカードっぽいビューで表示する( Liquid 使用)
Power Pages (Power Apps portals)では、Dataverse のテーブルに保存してあるデータをリストで表示するコンポーネントが備わっています。
検索機能などもポチポチしていけば作成できるので、これはこれでよいのですが、見た目の加工ができにくいものになっています。
それでは物足りない、どうしても見た目を加工したい！って場合には、HTML CSS だけでなく Liquid や JavaScript を使ってページを作成することでかなり自由に加工することができます。
今回はそのサンプルとして、HTML CSS Liquid を使って見た目を加工し、カードっぽいビューで表示してみました。
完成イメージ
サンプル
以下に作成したサンプルを記載しますので、利用してみたい場合は、取引先企業テーブルにデータをいくつか登録(ロゴ画像付きがお勧め)し、アクセス権を設定した状態で、以下を design studio から貼り付けて保存してみてください。
-
貼り付ける場所
-
貼り付ける値
<div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: 50px; padding: 8px;">
<div class="container" style="display: flex; flex-wrap: wrap;">
<div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px; margin: 60px 0px;">
{% assign onepage_disp_num = 6 %}
{% assign prev_and_next_num = 2 %}
<h3>Account List</h3>
<div class="row">
{% assign current_page = 1 %}
{% if request.params.page.size > 0 %}
{% assign current_page = request.params.page | round %}
{% endif %}
{% fetchxml get_items %}
<fetch version="1.0" mapping="logical" count="{{ onepage_disp_num }}" page="{{ current_page }}" returntotalrecordcount="true">
<entity name="account">
<attribute name="name" />
<attribute name="primarycontactid" />
<attribute name="entityimage" />
</entity>
</fetch>
{% endfetchxml %}
{% for res in get_items.results.entities %}
<div class="col-sm-6 col-md-4" style="text-align: center;">
<div class="thumbnail">
<div style="background-color: rgb(134, 142, 150);"><img src="{{ res.entityimage.url }}" alt="logoimage" style="max-width: 100%; height: 200px; width: auto;"></div>
<div class="caption" style="white-space: nowrap;">
<h3 style="overflow: hidden; text-overflow: ellipsis;">{{ res.name }}</h3>
<p style="overflow: hidden; text-overflow: ellipsis;">{{ res.primarycontactid.name | default: "No Data" }}</p>
<p><a href="#" role="button" class="btn btn-primary" style="overflow: hidden; text-overflow: ellipsis;">Button</a></p>
</div>
</div>
</div>
{% endfor %}
</div> <!--/row-->
{% if get_items.results.Total_Record_Count != 0 %}
<div class="row" style="text-align: center;">
{% assign last_page = get_items.results.Total_Record_Count | divided_by: onepage_disp_num %}
{% assign last_page_disp_num = get_items.results.Total_Record_Count | modulo: onepage_disp_num %}
{% if last_page_disp_num != 0 %}
{% assign last_page = last_page | plus: 1 %}
{% endif %}
{% assign first_paging_num = current_page | minus: prev_and_next_num %}
{% assign last_paging_num = current_page | plus: prev_and_next_num %}
<nav>
<ul class="pagination">
{% if current_page != 1 %}
<li>
<a href="./?page={{ current_page | minus: 1 }}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{% for index in (first_paging_num..last_paging_num) %}
{% if 0 < index %}
{% if index <= last_page %}
{% if index == current_page %}
<li><span style="font-size: 1.2em;font-weight:bold;line-height: 1em;">{{ index }}</span></li>
{% endif %}
{% if index != current_page %}
<li><a href="./?page={{ index }}">{{ index }}</a></li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% if current_page != last_page %}
<li>
<a href="./?page={{ current_page | plus: 1 }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div> <!--/row-->
{% endif %}
{% if get_items.results.Total_Record_Count == 0 %}
<div class="row" style="text-align: center;">
<p>No Data.</p>
</div> <!--/row-->
{% endif %}
</div>
</div>
</div>
設定値を変更すれば、接続するテーブルを変更したり、カードに表示させる値を変更することが可能です。
参考
Discussion