Filtering Lookup Fields in Power Apps Portals Based on Another Field's Value

 

Filtering Lookup Fields in Power Apps Portals Based on Another Field's Value

Introduction

In Power Apps Portals, a common requirement is to dynamically filter a lookup field based on the value of another field on the form. This functionality enhances the user experience by presenting contextually relevant choices, thereby streamlining data entry processes.

Scenario Overview

The requirement was to filter a lookup field named Reason based on the value of a checkbox field Non-Booked Case. The challenge was to implement this dynamic behavior in Power Apps Portals, where form configurations and behaviors are managed differently compared to Dynamics 365 CRM.

Challenge: Dynamic Field Behavior in Power Apps Portals

Initial attempts to use conditional logic in JavaScript to control the visibility and content of the Reason field led to rendering issues. Specifically, duplicating the Reason field on the form to represent different filtered states caused conflicts, as Power Apps Portals expects unique identifiers for each field.

Solution: Utilizing Two Lookup Fields with Different Views

To address this challenge, the following approach was adopted:

1. Create a Second Lookup Field: A new field (ConditionalReason) was created, targeting the same entity as Reason.

2. Configure Different Views in CRM: Different views were configured for each lookup field in Dynamics 365 CRM. These views were used to filter the data shown in each field.

3. Implement Conditional Logic in JavaScript: JavaScript was used to toggle the visibility of the Reason and ConditionalReason fields based on the Non-Booked Case checkbox value. This approach ensured that only one of the fields was visible at any time, depending on the context.

Implementation: JavaScript Code

The following JavaScript code was used to implement this solution:

// Function to toggle the visibility of fields based on the 'Non-Booked Case' checkbox

function toggleFieldsBasedOnNonBookedCase() {

    var isNonBookedCaseChecked = $('#kc_nonbookedcase_1').is(':checked');

    console.log('Non-Booked Case Checked:', isNonBookedCaseChecked);

    var reasonFieldContainer = $('#tri_courtappearancereasonid').closest('td.cell');

    var conditionalReasonFieldContainer = $('#kc_conditionalreason').closest('td.cell');

    if (!isNonBookedCaseChecked) {

        console.log('Showing tri_courtappearancereasonid, Hiding kc_conditionalreason');

        reasonFieldContainer.show();

        conditionalReasonFieldContainer.hide();

        clearLookupField('kc_conditionalreason');

    } else {

        console.log('Hiding tri_courtappearancereasonid, Showing kc_conditionalreason');

        conditionalReasonFieldContainer.show();

        reasonFieldContainer.hide();

        clearLookupField('tri_courtappearancereasonid');

    }

}

// Function to clear a lookup field

function clearLookupField(fieldName) {

    $('#' + fieldName + '_name').val('');

    $('#' + fieldName).val('');

    $('#' + fieldName).change();

}

$(document).ready(function () {

    toggleFieldsBasedOnNonBookedCase();

    $('#kc_nonbookedcase_0, #kc_nonbookedcase_1').on('change', toggleFieldsBasedOnNonBookedCase);

});

Explanation

• Visibility Toggle: The function toggleFieldsBasedOnNonBookedCase checks the state of the Non-Booked Case checkbox and toggles the visibility of Reason and ConditionalReason accordingly.

• Clearing Lookup Fields: The function clearLookupField resets both the display and the hidden input components of the specified lookup field.

• Event Listener Initialization: The script initializes by setting the visibility state and attaches an event listener to the Non-Booked Case checkbox for any changes.

Conclusion

This solution effectively demonstrates how to dynamically filter lookup fields in Power Apps Portals based on another field's value. By utilizing two lookup fields with different views and implementing conditional logic in JavaScript, the portal can provide a responsive and context-sensitive user experience. This approach also underscores the importance of understanding platform-specific behaviors and limitations when customizing Power Apps Portals.