Dynamic label for form fields in Power Pages MultiStep Form

[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?

[seanhodkinson]

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

[Shig]

Hi @seanhodkinson,

Thanks for the reply.

Yes, the javaScript code was added to the Custom JavaScript Section of the form. Still not working.

[seanhodkinson]

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.

[Shig]

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.

[Fubar]

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)

[Shig]

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.

[Fubar · Accepted solution]

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");

[Shig · Accepted solution]

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.