Dynamic Dropdown in Power Pages

When you are filling out a form, have you ever wished the dropdown could just understand what you want to pick, or let you type something custom if it's not there? 

Recently I was building power pages site, where dropdown was fetching data from Dataverse table, but business team asked some modification- they wanted user to select their own dropdown entry, I thought it would be more challenging, but things turn out easier than expected! In this article I will show you, how to build custom dropdown which loads live data from Dataverse and still users can add custom choices on the spot! A simple clean solution which makes your form work for you! 

Scenario 

Let’s say you're building a form (like I did recently for a client). You want the user to pick a location from a list, but if their location isn’t listed? They should be able to type it in! 

Sounds simple??? but Power Pages doesn’t give us that out of the box. So… what do we do? 

We build a custom dropdown that lets users select from options AND type their own value. All using JavaScript + jQuery + Dataverse.  

Cool, right? 

Let’s walk through the steps  

Step 1:  Make Sure Your Data Is Ready

You’ll need two fields for your current form 

1. Location - a text column in your Form

2. Site Location - Dataverse table  

Create Location (Text Column) in your main Form (This text field is what the user actually types into and what gets saved in main form table)

Create Site Location Dataverse table- here we need logical name of Site Name for firing JS query

Step 2: Add the magic: JavaScript 

• Now it’s time to bring the dropdown to life. This is where things get exciting, because we're making your form smart enough to suggest locations from your Dataverse table as the user types. 

• Instead of dumping code here, let me walk you through the algorithm 

1. When the page loads: 

   • Wait until the DOM (web page structure) is fully ready. 

   • On page load, your yourprojectname.en-US.customjs.js wires up jQuery UI Autocomplete to that text field.

2. Create an empty list (an array) to store location names. 

   • Think of it like an empty basket where you'll drop all the site names. 

3. Send a GET request to your Dataverse API: 

   • Use the Dataverse Web API to get records from your Site Location table. 

   • Only fetch the name field (here I am using logical name of Site Name field). 

4. Loop through the API results: 

   For each record returned from the table: 

   • Extract the name. 

   • Add it to your list of location names. 

5. Enable autocomplete on the Custom Location input: 

   • Use jQuery UIs autocomplete () function. 

   • Set the source of suggestions to the list you just created. 

   • Set minLength to 0 so suggestions appear immediately when the user clicks or types. 

 What Should the Output Look Like? Let’s Imagine the Scenario… 

When you visit your Power Pages form. You are the user, trying to submit a request. 

You arrive at the “Location” text field. You start typing “Syd…” and... a dropdown appears with: 

Sydney 

Sydney North 

Sydney Industrial Zone 

You think, “Perfect! It’s suggesting locations from the database as I type!” and hit enter  

OR 

what if, your location is not there. So, you just finish typing: “Sydney Harbour West” 

Done. You’ve just entered a custom location that wasn't in the system, and it works.  

Form is getting submitted to a Dataverse table and we will get all selected from dropdown locations OR custom typed locations listed out in a table 

Wait... It's not working??? 

• Use the logical name of your input field to connect your script. 

• You need Web API Access Configuration To enable Web API access from your Power Pages JavaScript 

  
  

Stuck? Don’t worry. 

If this feels like a lot or if you run into issues, drop me an email or comment below. I’d love to help you get it working. You’re one step away from making your forms truly interactive!