Custom JavaScript Not Working

(1) Share

Report

Posted on by BF-02121120-0

I am having issues with a JavaScript script that I have built to work with a PowerPages site. The JS references a Component lookup column to extract the component part name and component part number. The script works perfectly when using the model driven app backend when testing, however when I run the same process from the PowerPages site (create a record) it doesn't do what is expected.

Has anyone else come across this issue before or is anyone able to point me in the right direction to solve it? I believe that once I assign the JS in the form I don't need to do anything in PowerPages?

Thanks in advance

Categories:

Design & build

I have the same question (0)

All responses (3)

Answers (0)

Suggested answer

Fubar 8,487 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
You may need to show some of the code, but generally speaking the JavaScript for the portal is not the same as that you would write for a Model Driven App (the execution/form context or Xrm objects are not exposed on the portal).

Note: JQuery is often used and most examples you find will make use of it as the portal provides it. And code should generally be placed inside an onready / onload block (so objects exist when your JS runs).

This link has an example of setting the value of a field on the the form

https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript

Lookups are a complex data type and have name, id, and table type but unlike the model driven app these are separate tags and not in an array.

// where 'yourlookupfield' is the lowercase logical schema name of the dataverse column var lookupId = $("#yourlookupfield").val(); var lookupName = $("#yourlookupfield_name").val(); var entityName = $("#yourlookupfield_entityname").val(); // can also access via attr, eg. var lookupName = $("#yourlookupfield_name").attr("value");

Was this reply helpful? Yes No
BF-02121120-0 8 on at

Like (0)

Report
Copy link

Link copied!

@Fubar please find the code below

function setComponentDetails(executionContext) {
var formContext = executionContext.getFormContext();

var lookupValue = formContext.getAttribute("collab_component").getValue();

if (lookupValue != null && lookupValue.length > 0) {
var componentId = lookupValue[0].id.replace("{", "").replace("}", "");
var entityName = lookupValue[0].entityType;

// Retrieve the lookup record fields using Web API
Xrm.WebApi.retrieveRecord(entityName, componentId, "?$select=collab_name,collab_number,collab_averageprice").then(
function success(result) {
// Always set collab_componentpartname
formContext.getAttribute("collab_componentpartname").setValue(result.collab_name);

// Always set collab_componentpartnumber
formContext.getAttribute("collab_componentpartnumber").setValue(result.collab_number);

// Always set collab_componentavgprice
formContext.getAttribute("collab_componentavgprice").setValue(result.collab_averageprice);
},
function(error) {
console.error("Error retrieving component details: " + error.message);
}
);
} else {
// If lookup is cleared, clear the dependent fields as well
formContext.getAttribute("collab_componentpartname").setValue(null);
formContext.getAttribute("collab_componentpartnumber").setValue(null);
formContext.getAttribute("collab_componentavgprice").setValue(null);
}
}

Will this code need to be changed to conform with JQuery? And in terms of running the code, is not not enough to have the JS running onsave of the form? Do I need to add it to the "Custom JavaScript" section in Additional Settings of the Basic Form?

I'm very new to this so just trying to figure it out as I go.

Thanks

Was this reply helpful? Yes No
Suggested answer

Fubar 8,487 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!

The code will need to be redone to work with the portal. As I previously mentioned executionContext, formContext, Xrm objects are not exposed so you can't use them on the portal (and the values for the Lookup is not an array).

You are also making a retrieveRecord call - for this you would make use of the Portal Web API (note: this is not the dataverse web api that you use in the MDA)

https://learn.microsoft.com/en-us/power-pages/configure/web-api-overview

https://learn.microsoft.com/en-us/power-pages/configure/write-update-delete-operations#wrapper-ajax-function

(use the safeAjax in the second link rather than trying to write your own ajax code)

Often JavaScript/JQuery will go into the Custom JavaScript section of the Form or Step - but technically it can also go in other places e.g. the Web Page has a similar section and it could also go in the Content section if wrapped in script tags, can also go in Web Templates if wrapped in script tags, or can be uploaded as a Web File and then included in your Web Page, Template etc.

As for when you would run your code, that all depends on what you need. If it needs to run on change then in your code you would hook up onchange/change events on the respective fields. The on save event is not exposed to you, so for an on save you may need to add to validation

https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript#additional-client-side-field-validation

(however, you may have issues adding the Web API call into validation and may need to work around it by either forcing it to occur before enabling the Submit button or moving to doing it in a realtime plugin or workflow rather than JS)

Was this reply helpful? Yes No