7
Views
1
Comments
ZIPCODE Details
Application Type
Mobile, Reactive

Hello everyone,

I need to auto-populate City and State/Region when a user enters a ZIP/postal code — for any country (international). I want the behaviour to be:

  • Enter postal code (and optionally country) → City and State fields auto-fill.

  • Should validate results and allow manual override if needed.

What’s the recommended approach in OutSystems (best practice)? Could you share an example implementation (REST setup, mapping, and client-side behaviour)? Any recommended APIs with good international coverage? 
Thanks



2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

To auto-populate City and State/Region fields based on ZIP/postal code input for international addresses in OutSystems, you can make use of a third-party API that provides location details based on a ZIP/postal code. Here’s a high-level guide on how you can achieve this, including REST setup, mapping, and client-side behavior:

  1. Choose an API: Use an API that supports international ZIP/postal codes. Examples include:

  2. Set Up a REST Integration:

    • In Service Studio, create a new REST Integration under the "Logic" tab.
    • Use the chosen API's endpoint (e.g., http://api.zippopotam.us/{country}/{postalcode} for Zippopotam).
    • Test the integration using sample data, such as a valid ZIP/postal code, to ensure it's working.
  3. Map API Response:

    • Map the API's response to your application structure. For example, if the API returns city and state/region in JSON format, map these to your entity or local variables.
  4. UI Interaction for Auto-Population:

    • On the input field for ZIP/postal code, add an "On Change" event.
    • Create a client or server action that calls the REST API using the entered postal code.
    • Parse the response to extract city and state/region information, and assign them to the respective input fields.
  5. Optional Client-Side Logic:

    • If you use APIs that support client-side calls, ensure to handle latency and errors appropriately.
    • Use JavaScript or OutSystems Client Actions to call the API and update the DOM.
  6. International Addresses:

    • Ensure the API used has broad international coverage, as some might be region-specific.
    • Consider fallback options, such as asking the user to fill in their city and state manually if no data is returned.

Performance and User Experience:

  • To enhance user experience, display a loading indicator while querying the API.
  • Cache responses for commonly entered ZIP/postal codes to reduce API calls.

While there isn’t a ready-made forge component for this exact requirement, you can combine APIs like Zippopotam and Postal Pincode API with OutSystems' capabilities to achieve the desired behavior. Let me know if you need more help with a specific part of this!

This answer was AI-generated. Please read it carefully and use the forums for clarifications
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.