web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : nZ3bHSAN67Fo2tzMs3E1iA
Power Pages - General Discussions
Answered

Set a Lookup Value using Javascript on Power Pages

Like (0) ShareShare
ReportReport
Posted on 23 Dec 2022 11:13:42 by 28

Hi All,

 

On page 1, I have an list to an entity called Event. When I select one of the Events, I go to a new page with a different entity called Request.

 

On the second page I have a form for the Request table. I have a lookup to the Event table on the form.

 

How do I set the Event lookup on the Request form automatically? 

I'm happy to use JS / Liquid or OOB method.

 

Thanks for the Help!

Categories:
  • Verified answer
    D_McCann1 Profile Picture
    28 on 04 Jan 2023 at 10:45:04
    Re: Set a Lookup Value using Javascript on Power Pages

    Hi @Inogic 

     

    Thanks again for the help,

     

    I got it working with the following code:

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

    <p>{{eventguid}}</p>

    <div class="container" style="margin:100px">

    {% fetchxml accountlist %}

    <fetch version="1.0" output-format="xml-platform" mapping="logical" no-lock="false" distinct="true">

    <entity name="COMPANYNAME_event">

      <attribute name="COMPANYNAME_eventid"/>

      <attribute name="COMPANYNAME_eventcode"/>

     

    <filter type="and">

    <condition attribute="statecode" operator="eq" value="0"/>

    <condition attribute="COMPANYNAME_eventid" operator="eq" value="{{ eventguid }}" />

    </filter>

    </entity>

    </fetch>

    {% endfetchxml%}

    {% for result in accountlist.results.entities %}

    <p>{{result.COMPANYNAME_eventcode}}</p>

    <script>

      $(document).ready(function() {

       

    $("#COMPANYNAME_eventlookup_name").attr("value","{{result.COMPANYNAME_eventcode}}");

    $("#COMPANYNAME_eventlookup").attr("value","{{result.COMPANYNAME_eventid}}");

    $("#COMPANYNAME_eventlookup_entityname").attr("value","COMPANYNAME_event");

      });

    var result1 = "{{result.COMPANYNAME_eventid}}";

    alert("testing" + result1);

    console.log("testing"+ result1);

    </script>

    {% endfor %}

    <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: 10px; padding: 8px;">

      <div class="container" style="display: flex; flex-wrap: wrap;"><div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px; margin: 60px 0px;">{% entityform name: 'Portal Main Form Testing Liquid' %}</div></div>

    </div>
    something to point out for anyone else stuck on this: 


    FetchXML
    Make sure you grab the id and the primary key:
     
     <attribute name="COMPANYNAME_eventid"/>
     <attribute name="COMPANYNAME_eventcode"/>

    Targeting the lookup:

     

    When you get to these 3 lines, make sure you are calling the name of the field on the form page.

    $("#COMPANYNAME_eventlookup_name").attr("value","{{result.COMPANYNAME_eventcode}}");
    $("#COMPANYNAME_eventlookup").attr("value","{{result.COMPANYNAME_eventid}}");
    $("#COMPANYNAME_eventlookup_entityname").attr("value","COMPANYNAME_event");

     

  • Inogic Profile Picture
    1,043 Super User 2025 Season 2 on 04 Jan 2023 at 08:34:35
    Re: Set a Lookup Value using Javascript on Power Pages

    To set lookup value below is the corrected code:

    • The below highlighted in BOLD should be eventid and NOT event as you have written in your code

    $("#eventid_name").attr("value","{{result.eventid}}");

    $("#eventid").attr("value","{{result.eventid}}");

    $("#eventid_entityname").attr("value","event");

     

    Also try to check if your fetch xml is working correctly

     

    You can also check using alert what are the results that you are getting from fetch XML as highlighted in screenshot below.

    Inogic_0-1672821068340.jpeg

    And still if it is not working, also try to set lookup using hardcoded value.

     

    Hope this helps.

     

    If you find this solution helpful, please mark it as accepted solution.

     

    Thanks!
    Inogic Professional Services
    An expert technical extension for your techno-functional business needs
    Power Platform/Dynamics 365 CRM
    Drop an email at crm@inogic.com

    Service: http://www.inogic.com/services/
    Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/

  • D_McCann1 Profile Picture
    28 on 03 Jan 2023 at 14:41:04
    Re: Set a Lookup Value using Javascript on Power Pages

    Firstly Thank you @Inogic  for the detailed response!

     

    I am still having an issue after following your steps.

    I am getting this error: "Liquid error: Exception has been thrown by the target of an invocation."

    I think it's because I am calling the Lookup incorrectly.

    Here is the code I'm using based on your code:

     

     

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

    <div class="container" style="margin:100px">

    {% fetchxml accountlist %}

    <fetch version="1.0" output-format="xml-platform" mapping="logical" no-lock="false" distinct="true">

    <entity name="event">

    <attribute name="eventid"/>

    <filter type="and">

    <condition attribute="statecode" operator="eq" value="0"/>

    <condition attribute="COMPANYPREFIX_eventid" operator="eq" value="{{ eventguid }}" />

    </filter>

    </entity>

    </fetch>

    {% endfetchxml %}

    {% for result in accountlist.results.entities %}

    <script>

    $(document).ready(function() {

    $("#eventid_name").attr("value","{{result.eventid}}");

    $("#eventid").attr("value","{{result.eventid}}");

    $("#event_entityname").attr("value","event");

    });

    </script>

    {% endfor %}

    <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">

    <div class="container" style="display: flex; flex-wrap: wrap;"><div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px; padding: 16px; margin: 60px 0px;">{% entityform name: 'Portal Main Form Testing Liquid' %}</div></div>

    </div>

    the bit in particular I think I'm calling incorrectly is this bit :

    $("#eventid_name").attr("value","{{result.eventid}}");
    $("#eventid").attr("value","{{result.eventid}}");
    $("#event_entityname").attr("value","event");

     

    Do you have any advise on how to correctly call the Lookup?

     

    Thanks a lot for your help!

     

  • Inogic Profile Picture
    1,043 Super User 2025 Season 2 on 27 Dec 2022 at 07:21:05
    Re: Set a Lookup Value using Javascript on Power Pages

    To Set a Lookup Value using JavaScript on Power Pages you can follow below steps to achieve this functionality .

    Step 1) Create a list and pass id as ID Query String Parameter in your list form.

    By passing id you will basically be sending the current record id to the next form.

     

    Inogic_0-1672125579615.jpeg

     

     

    In the same list form under Option tab add button and select TargetType as “WebPage” and mention Redirect to Webpage column with the WebPage that we will create in below step (5) .

     

    Inogic_1-1672125579628.jpeg

     

     

    Step 2) Clear your portal Cache and view the result you will able to see the list and by clicking on the item actions you will able to see ADD INCIDENT button which will direct to another page as shown in below screenshot.

    Inogic_2-1672125579637.jpeg

     

     

    Step 3) Create a Web template with below code in order to set lookup value.

    To set lookup value currently we are only having id that we passed in above step (1) , we will retrieve name using that id in order to set the lookup value as we need id, name to set lookup value.  

    Save this web template.

    Inogic_3-1672125579649.jpeg

     

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

    <div class="container" style="margin:100px">

    {% fetchxml accountlist %}

    <fetch version="1.0" output-format="xml-platform" mapping="logical" no-lock="false" distinct="true">

    <entity name="account">

    <attribute name="entityimage_url"/>

    <attribute name="name"/>

    <filter type="and">

    <condition attribute="statecode" operator="eq" value="0"/>

    <condition attribute="accountid" operator="eq" value="{{ account }}" />

    </filter>

    </entity>

    </fetch>

    {% endfetchxml %}

    {% for result in accountlist.results.entities %}

    <script>

      $(document).ready(function() {

    $("#customerid_name").attr("value","{{result.name}}");

    $("#customerid").attr("value","{{result.accountid}}");

    $("#customerid_entityname").attr("value","account");

      });

    </script>

    {% endfor %}

     

    Step 4) Create a Page Template and add the above web template that we created in step (3) as shown in below screen shot.

     

    Inogic_4-1672125579657.jpeg

     

     

    Step 5) Create a Web pages and add the Page template that we created in above step and your Basic or Multistep Form into it as shown in below screenshot.

    In my case I have Multistep form.

     

    Inogic_5-1672125579666.jpeg

     

     

    Clear your portal cache and view the result.

    When you will click on ADD INCIDENT button it will redirect to another webpage where you will find the lookup value that is already been set.

    Inogic_6-1672125579673.jpeg

     

    Hope this helps!!!

    If you find this solution helpful, please mark it as accepted solution.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Lucas001 Profile Picture

Lucas001 60 Super User 2025 Season 2

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 2

#3
surya narayanan Profile Picture

surya narayanan 35

Loading complete