lundi 20 août 2018

How to create dynamic elements based on selection of dropdown

I have a use case where I want to showcase properties related to a cluster once the cluster is selected from a dropdown.

Eg : Initial state of dropdown : enter image description here

On selecting cluster3, a new field must be added to the modal to show properties related to the cluster. enter image description here

The route gets details about the clusters including the dynamic properties. These properties may differ in number depending on the cluster chosen :

clusters : this.store.query('cluster', {detailed: true})

The /clusters api response shows :

 {
  "data": [
  {
    "id": 1, 
    "type": "clusters",
    "attributes": {
      "clustername": "cluster1",
      "properties": {
        "queue.name": "name"
       }
     }
    },
    {
    "id": 2, 
    "type": "clusters",
    "attributes": {
      "clustername": "cluster2",
      "properties": {
        "os.name": "os"
       }
     }
    }
  ]
}

How do I achieve this?

I could create a block that has style of "display:none;" This will then be switched to "display:block;" on the click of the cluster name (in setSelection action).

But how do I populate the value beforehand?

My template file has contents for the cluster as follows :

<label class="form-label" for="cluster">Cluster</label>
<div class="dropdown form-control full" id="cluster" style="width: 100%; max-width: 600px;" >
<div class="selected-value" tabindex="0">
     <span>Select</span><span class="fa fa-caret-down"></span>
</div>
<ul class="dropdown-options">
     
          <li value=""></li>
     
 </ul>
</div>

And for the new field :


<div class="form-field" style=" display:none;">
 <label class="form-label" for="queuename">Queue name</label>
  <div class="dropdown form-control full" id="queuename" style="width: 100%; max-width: 600px;">
    <input id="QueueName" style="width: 100%; max-width: 600px; value= "/>
  </div>
</div>


How do I populate the values here based on what is selected in the clusters dropdown? Is this done in the actions method, setSelection?

what should I iterate over given the properties is a field within the clusters object?




Aucun commentaire:

Enregistrer un commentaire