Display the cards based on Dropdown selection

Question

I'm working on PowerApps portal. There I have scenario to display the card based on drop down selection.

I have "pathway" entity. In that entity I have location sub-grid. Based on query string params I'm retrieving all sub-grid location values and displaying in card as semicolon separated using fetchxml and liquid.I added the query to display pathway locations below.

`{% fetchxml PathwayLocations %}
 <fetch distinct='true'>
  <entity name="leap_track">
    <!-- Filter By -->
    <filter type="and">
        <condition attribute="leap_trackid" operator="eq" value="{{ pathwayitem.leap_trackid }}" />
    </filter>
    <!-- Many To Many Relationships -->
    <link-entity name="leap_leap_track_leap_location" from="leap_trackid" to="leap_trackid" >
        <link-entity name="leap_location" from="leap_locationid" to="leap_locationid" alias="location" >
            <attribute name="leap_name" />
        </link-entity>
    </link-entity>
</entity>
 </fetch>
{% endfetchxml %}
{% assign pathwayLocation=PathwayLocations.results.entities %}


<div style="font-size: 13px;margin-top:3%">
Pathway Locations : <span id="pathway-location" >{% for pathwayslocation in 
 pathwayLocation %}
{{pathwayslocation["location.leap_name"]}}{% if forloop.last != true %}; {% endif %}
 {% endfor %}
 </span>
 </div>`.

Also I have a dropdown in my page which will display all the location values of "Location" entity.

`{% fetchxml getlocation %}
  <fetch distinct='true'>
  <entity name='leap_location'>
  <attribute name='leap_locationid'/>
   <attribute name='leap_name'/>
   <attribute name='createdon'/>
   <order attribute='leap_name'/>
  <filter type='and'>
  <condition attribute='statecode' operator='eq' value="0"/>
 </filter>
</entity>
 </fetch>
{% endfetchxml %}
{% assign location = getlocation.results.entities %}



  {%- if location.size &gt; 0 -%}
{% assign locationItems = location %}
 <label style="padding-top: 1.25rem;padding-bottom: 1rem; font-size: 16px;">Select a 
Location: &nbsp;</label>
<select id="location-select" aria-label="Location" style="width:30%; font-size: 16px; ">
    {% for items in locationItems %}
        <option>{{items.leap_name}}</option>             
    {% endfor %}
 </select>`

Now I need to display the card based on dropdown selection. For example I have two card in attached image. One card has pathway locations : Australia, New Zealand and Americas. Other card has Australia and New Zealand.

If I select Americas from dropdown it will display the card which has Americas. Other cards should be hidden.

Can anyone help me to achieve this scenario using liquid or fetch-xml.

pls check image : https://i.stack.imgur.com/0RQ6D.png

Display the cards based on Dropdown selection

0 Answers0