Unanswered

Dynamic label for form fields in Power Pages MultiStep Form

(1) Share

Report

Posted on by Shig

I have created a multistep form in power pages with 2 steps both referring to the same dataverse table.

I am saving the data from 1st step while moving to the 2nd. And the 2nd step form is updating the existing record ie created from 1st step. I have a dropdown column in 1st step which I wanted to use to determine the label of the column (form field) in the 2nd step.

eg: Step 1 form -

Name:

Designation:

Step 2 form:

If the designation is 'Engineer' then the column name should be "Engineering College"

If the designation is 'Doctor' then the column name should be "Medical College"

I have tried implementing this by creating 2 forms in the dataverse table. I added a JavaScript function on the 2nd forms onload Event. And the function was working fine from the Model driven app. But it is not working from the power pages.

JavaScript function that I added to the dataverse form:

function onChangeField(executionContext) {

var formContext = executionContext.getFormContext();

if (formContext.getAttribute("column_Designation").getValue()="Engineer") {

formContext.getControl('column_institute').setLabel('Engineering College');

} else {

formContext.getControl('acolumn_institute').setLabel('Medical College');

}

Why this is not getting executed from the power pages? Does anyone have any idea?

Categories:

General topics

I have the same question (0)

All responses (8)

Answers (2)

SeanHod 92 on at

Like (1)

Report

Hi @Shig ,

did you add the Javascript to the Custom JavaScript section of the Form Options tab in the Form Step within the Power Pages Management app?
Thanks,
Seán

Was this reply helpful? Yes No
Shig 29 on at

Like (1)

Report

Hi @seanhodkinson,
Thanks for the reply.
Yes, the javaScript code was added to the Custom JavaScript Section of the form. Still not working.

Was this reply helpful? Yes No
SeanHod 92 on at

Like (1)

Report
Please try something like the below. You will also need to change =='Engineer' to the guid or the choice value, depending on whether the field is a choice field or a lookup field.
$(document).ready(function() { // Replace 'yourFieldDesignation' and 'yourFieldInstitute' with your actual field IDs $('#yourFieldDesignation').on('change', function() { if ($(this).val() == 'Engineer') { $('#yourFieldInstitute').text('Engineering College'); } else { $('#yourFieldInstitute').text('Medical College'); } }); });

Also be aware that the javascript is case sensitive for field names.

Was this reply helpful? Yes No
Shig 29 on at

Like (0)

Report

I replaced the field name with logical name of the column.
In order to check whether the code is getting executed or not, I just put true as the condition for if clause. And it seems like the code is not working.
I tried putting the designation and institution column in the same form and checked by changing the value of the designation column. Still its not working.

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (1)

Report

If you have multiple forms/steps for each type, you can change the Label by adding a Metadata record to the form/step.

With JavaScript/JQuery if your selection is on the first Step, and the label is on the 2nd, there there will be no onchange event. You could try adding the selection field to the 2nd step (and hide it with CSS - adding a class in a metadata record) then put the code in a document ready block.

(note: the portal side of things does not have things like execution/form context, you just use plain JavaScript or JQuery)

Was this reply helpful? Yes No
Shig 29 on at

Like (0)

Report

Hi @Fubar ,
How can I add JavaScript code to the metadata of the field. I don't see any box to add custom code to it.

Note: I have multiple columns in my 2nd step. Each column label is determined by the selection made from the column in 1st step.

Was this reply helpful? Yes No
Verified answer

Fubar 8,338 Super User 2025 Season 2 on at

Like (2)

Report
Not JS in the meatadata, metadata was if you have a separate step for Engineer and a different one for Doctor etc. (and use a condition step after the 1st to load the respective next step)

If you are using only 1 step after the first one you will have to do it via JS in the Steps Custom JS area.

If doing it via JQuery to change the Label will be something like

// put inside a JQuery document ready block // column scheema name with "_label" suffix $("#columnscemaname_label").text("Foooo");

Was this reply helpful? Yes No
Verified answer

Shig 29 on at

Like (1)

Report
Thank you so much @Fubar

The code that worked for me:
$( document ).ready(function() { if ($("#fk_Designation").val() == '60000002-9001-0001-000o0oooob') { $("#cr_Instituition_label").text("Engineering College"); } else { $("#cr_Instituition_label").text("Medical College"); } });
Also, I added the designation column in to the 2nd step of the form as well. Otherwise, the code was not reading its value.

1 people found this reply helpful.

Was this reply helpful? Yes No