Answered

Pre-populate form lookup-value using query string parameters

(0) Share

Report

Posted on by Community Power Pla...

Hi there,

We have a use-case which requires the use of a QR code to direct a user to a pre-populated form in a Power Pages website. The QR code will contain a link with some query string parameters that relate to the form. The field that needs to be populated is a Lookup value. For example, we need to pre-populated the Product field on a form which creates a new ProductEnquiry row in the ProductEnquiry table. The Product field is a lookup on the Product table.

I can pre-populate the email address and other text-based fields of the ProductEnquiry form using JavaScript-> See Solved: Populate fields in form - Power Platform Community (microsoft.com)

I can also use this method to prepopulate the hidden html form fields related to the Product field.

product_name
product (The GUID of the product)
product_entityname (The name of the Product table)

I would like to know if there is a better way of doing this in Power Pages?

Kind Regards,

Jason.

All responses (5)

Answers (1)

Community Power Pla... on at

Like (0)

Report
Re: Pre-populate form lookup-value using query string parameters

Thanks @Fubar,

I landed up using the WebAPI approach. Using AJAX to call the endpoints inside the $( document ).ready() function.

For anyone else trying this approach. Remember to add the site settings to enable Web API access to the entity/table -> Site settings for the Web API - Power Apps | Microsoft Learn

Here is an example of how we used the WebAPI.
function callEventsWebAPI(name) { return new Promise((resolve, reject) => { $.ajax({ url:`/_api/cr0a1_events?$select=cr0a1_name,cr0a1_type&$top=1&$orderby=createdon desc&$filter=contains(cr0a1_name,'${name}')`, method:"GET", success: function(response) { if (!response.value.length) { console.log(`No events for ${name}`); console.log(response); } else { resolve(response.value[0]); } }, error: function (error) { reject(error) } }) }); }
ziyad2023 4 on at

Like (0)

Report

Re: Pre-populate form lookup-value using query string parameters

Hi Fubar,

I am new to power apps in general and working on a proof of concept project, I have a portal application with a web page having a multistep form, each step is loading a form from a separate table, I need some values from first step to be auto populate in the second step, sample screenshot here:

I can get the stepid but not sure how find the entities part, I appreciate any help.

Thank you.
Verified answer

Fubar 7,955 Super User 2025 Season 1 on at

Like (1)

Report
Re: Pre-populate form lookup-value using query string parameters

Create a custom Web Template
Get the GUID from the REQUEST

{% assign id = request.params['id'] | escape %}

Have a FetchXML statement to retrieve the Name (you already know the entity type as you are just dealing with products), or just load the Record itself directly as you already have the GUID

//below is for an account but you will get the idea {% assign account = entities.account['936DA01F-9ABD-4d9d-80C7-02AF85C822A8'] %} {{ account.name }}

You can achieve the same with JS, but the retrieve of the Name may cause a longer screen 'flicker' as you have to wait (document.ready) for the DOM to be created before calling your Ajax to do the population vs with a Web Template the values are retrieved server side and so the user is not waiting on the Ajax call.

There are 2 approaches if using Ajax (do not call endpoints you did not create)
Web API https://learn.microsoft.com/en-us/power-apps/maker/portals/web-api-overview
If you look at the Create, Update Delete you will also see some sample code (including safeAjax) https://learn.microsoft.com/en-us/power-apps/maker/portals/write-update-delete-operations#web-api-ajax-samples
Tutorial includes sample code (including safeAjax function)
Old style, create a custom Web Template (that runs a FetchXML statement and outputs a JSON object) and Page Template turn off the Header and Foot and set mime type, Setup a new Web Page to use the Page Template, and your Ajax calls that Web Page.
(Note: in both the JS approaches you would use JQuery document.ready and then run your code inside it. I don't know for sure but it feels like you may be trying to populate the Lookup before the DOM is created)
Community Power Pla... on at

Like (0)

Report
Re: Pre-populate form lookup-value using query string parameters

Thanks Oliver,

Using this method requires the name and entity name to be passed as query string parameters as well. Ideally, I would like only the entity's GUID to be passed in and the other attributes can be looked up automatically.

For example:
var record = $("tr").find(`[data-id='${PID}']`); if(record) { $("#cr0a1_product").val(record.attr("data-id")); $("#cr0a1_product_name").val(record.attr("data-name")); $("#cr0a1_product_entityname").val(record.attr("data-entity")); } else { console.log(`Unable to find Product with ID: '${PID}'`); }

The code does work but only after the "Launch Lookup Modal" button next to the Product Field on the form is clicked. When clicked, a request is made to the following URL: https://example.powerappsportals.com/_services/entity-lookup-grid-data.json/{ENTITY_GUID}. This then populates the table in the modal with the available Product Entity records. I have tried to call this endpoint using AJAX without much success yet.

Do you know if there is any easy way of retrieving this information on page load (and without having to load the modal)?

Thanks,
Jason.
oliver.rodrigues 9,315 Most Valuable Professional on at

Like (0)

Report

Re: Pre-populate form lookup-value using query string parameters

the best way would be via JavaScript