Unanswered

Need to create an address form in Portal Profile that auto populates based on what the user enters for zip code

(0) Share

Report

Posted on by kaOus

Hi! I am pretty new to Power Apps development. I am trying to get my Profile Web template address form to auto-populate based on what the user enters as a zip code. I have imported a solution with counties, cities, states, zip codes, and countries that are all mapped together. But I'm not sure if this is something that can be done in a portal. I've included and image. You'll see at the bottom I have went through and selected a zip code. I would like for this to auto-populate the rest of the form. Any suggestions?

Categories:

Power Apps portals

All responses (3)

Answers (0)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
Hi @kaOus

The best way I can think of is, you can call the web API on the profile page using the following JS.

<script> const getUserid = async () => { let response = await fetch([API Endpoint URL]); if (response.status === 200) { window.sessionStorage.setItem('tanids', await response.text()); console.log('read from API:' + window.sessionStorage.getItem('userid')); } } if (window.sessionStorage.getItem('userid') == null) { getUserid(); } else { console.log('read from session:' + window.sessionStorage.getItem(‘userid’)); } </script>

Note: This can be Google Maps API to get your address and map it to the relevant field once a response is received.

Personally, I haven't tried it yet but using JavaScript you can try calling the API of your choice and display it in the profile page

Hope it helps.
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.
kaOus 5 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @ragavanrajan, thanks for responding. Forgive me, I am extremely new to Power Platform development.
I've already imported a solution with data in it that includes the zipcode/address information as you can see here there are already zip codes to choose from in this look up. When I imported this data I mapped it together with the cities, countries, states, etc., so I was hoping I wouldn't need to use an API for Google Maps. I was hoping there was a way to implement JavaScript logic in saying if a specific zip code was selected then the city and state mapped to it would auto-fill.
kaOus 5 on at

Like
a
(0)

Report
Copy link

Link copied!
Here is what I've been able to code out in pure JS, this works. But I want to replicate this in the power portal. I'd like to fetch the JSON that I used in the below code.

<div class="container mt-5"> <div class="row"> <div class="col-md-4 m-auto"> <div class="form-group"> <div class="row"> <label>Zipcode</label> <input type="zip" id="search" value="" class="form-control-md" placeholder="Start with your zipcode.." /> </div> <div class="row"> <label>City</label> <input type="city" id="City" value="" class="form-control-md" placeholder="City name here.." /> </div> <div class="row"> <label>County</label> <input type="County" id="County" value="" class="form-control-md" placeholder="County name here.." /> </div> <div class="row"> <label>State</label> <input type="State" id="State" value="" class="form-control-md" placeholder="State name here.." /> </div> <div class="row"> <label>Country</label> <input type="Country" id="Country" value="" class="form-control-md" placeholder="Country name here.." /> </div> </div> <div id="match-list"></div> </div> </div> </div>
const search = document.getElementById('new_zipcode_name') const matchList = document.getElementById('match-list') console.log("working here line #44") console.log("working here line #45") $("#new_zipcode_name").attr("value","") console.log($("#new_zipcode_name").attr("value")) const searchStates = async searchText => { const res = await fetch('zipcodes.json'); console.log("working here line #45") console.log(search.value) const zips = await res.json(); let matches = zips.filter(zip => { const regex = new RegExp(`^${searchText}`, 'gi'); return zip.zipcode.match(regex) }); if (searchText.length === 0) { matches = []; matchList.innerHTML = ''; } outputHtml(matches) console.log(matches) } const outputHtml = matches => { if (matches.length > 0) { const html = matches.map(match => ` <div class="card bg-success"> <button class="addressBtn btn text-light p-3" type="button"> <p id="h4">${match.City.toUpperCase()}, ${match.State}, ${match.zipcode}, ${match.Country} </br>(${match.County.toUpperCase()} COUNTY) </p> `).join('') matchList.innerHTML = html console.log(html) const addressBtn = document.querySelector('.addressBtn') addressBtn.addEventListener('click', () => { search.value = matches[0].zipcode City.value = matches[0].City.toUpperCase() County.value = matches[0].County.toUpperCase() State.value = matches[0].State.toUpperCase() Country.value = matches[0].Country.toUpperCase() const card = document.querySelector(".card") card.style.display = "none" }) } } search.addEventListener('input', () => searchStates(search.value)) });