Show Different Forms Conditionally In Model-Driven Apps [Solution Sunday #2]

In this post, I will show you how to apply JavaScript code to your Model-Driven App so that users can see different forms conditionally for the same entity, depending on that record's data. So, what do I mean by that?

The Problem

Imagine we've got a user who is using a Model-Driven app. They want to track their inventory and select the "Inventory Tracking" table on the left side of their navigation. They are shown the "Active Inventory Tracking" view and the records within it, containing columns such as "Quantity", "Price", and "Category". (see image below).

Focusing on the "Category" column, we've got all types of items here, from categories such as "Food" to "Furniture". We are also tracking different types of data for these different categories, for example, we'll be tracking the "Weight" of our furniture pieces, and the "Expiry Date" for our "Food" categories. It is clear that we wouldn't want to see the "Weight" field for "Food" items, and wouldn't want to see the "Expiry Date" for "Furniture" items.

Now, we could solve this with business rules, which work well in conditionally showing and hiding columns. But, if there are many more columns, this can get messy very fast. Situations that require different form structures for each category may also arise, which will prove this solution helpful as two different forms can be configured and conditionally shown automatically.

When a user clicks on any record, the form displayed currently looks like this:

As you can see above, we've got both the "Expiry Date" and "Weight" being shown in the form. The "Category" of the record is "Food", so we won't need to see the "Weight" field in the form. We've also decided that we want the structure of the forms to be different for both the "Food" and "Furniture" categories, so we will need to facilitate that.

It would be much simpler, rather than redesigning the current form, to show a new form entirely depending on the "Category" type to account for the different fields being shown and the form structure.

Introducing the solution...

Step 1: Create and design your new forms

To do this, we're going to need to create two forms. In my case, they will be:

• A form to track "Food".
• A form to track "Furniture".

{For demonstration purposes, we will ignore the other category types}

We can then design these forms how we want:

Newly designed "Food Form":

In my "Food Form," I've removed the "Weight" field and changed the structure of the form.

Newly designed "Furniture Form":

In my 'Furniture Form,' I've removed the field "Expiry Date," added "Material type," and changed the form structure.

Step 2: Customise the code to your needs

Now, we will write some code to show the two different forms depending on their category types. Simply put, I want the app to show me the "Food Form" whenever I select a record with the "Category" being "Food" and vice versa for "Furniture".

Before copying this code, you'll need to adapt it to your environment.

At the top of the script, you can see two comments with the "Food" and "Furniture" Form ID's. Power Apps uses these ID's to distinguish the different forms, and you'll need to find the ID's of the forms that you would like the script to switch between.

1. This can be done by entering your Power Apps environment and opening up your Model-Driven App.
2. Then, go into the form(s) that you want the script to switch between, and switch form using the out-of-the-box form switcher (see image 1b below). Doing this will show the Form ID in the URL.
3. Look into the URL and find the Form ID. It should be 'formid=' followed by a long code.
4. Once you have your Form IDs, I would suggest you comment on them at the top of your code, as I have.

Next, you will need the logical name of the table that contains your forms. In my case, the logical name is "crbd7_inventorytracking," but you'll need to replace this with yours.

To get the logical name of your table, find the table in your solution, click on it, and select 'Properties'. You should then see the logical name.

Replace where I have "crbd7_inventorytracking" in the code with your table name instead.

Now, you will need the column that the script will check to determine which form to show. In our case, it will be the?"Category"?column, as this is what distinguishes the "Food" from the "Furniture." Again, we will need the logical name.

To find the logical name of your column, go into your table (as we did in Step 2), select the column you need, and then select "Edit column".

You should then see a popup screen showing you the column's details. You will see the Logical Name under "Advanced Options".

Copy this column name, and feel free to open up the code in your editor. You can then find and replace "crbd7_category" with your column name.

Now, rename the following variables and parameters with names tailored to your solution. Below I have 'categoryID' and 'categoryIdValue'.

The code below checks the column you've specified (in my case,?"crbd7_category") and whether it equals a specified value. The number "373270000" is the choice value taken from my category column, which equates to the "Food" choice. If you want to check a string data type, it will need to be in quotation marks ("").

If your column is a choice, to find your choice value, go into the table, select "Edit column" (shown in Step 3), and the choice value should be under 'Choices' if it is a local choice.

If your choice is global, you can edit it, and you should see the values associated with each option.

Next, change the Form ID's in the code below to match your Form ID's.

If you decide to rename any variables (such as "categoryIdValue"), ensure this is consistent throughout the code.

// Food Form ID: a8f69dc0-e6f1-ee11-a1fd-0022481b214a
// Furniture Form ID: 57f15988-350b-ef11-9f89-0022481b214a

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

    // Ensure we're in the Inventory Tracking entity
    if (formContext.data.entity.getEntityName() === "crbd7_inventorytracking") {
        // Fetch the current forms ID
        var currentFormId = formContext.ui.formSelector.getCurrentItem().getId();
        // Check if the 'crbd7_category' column is available
        var categoryID = formContext.getAttribute("crbd7_category");

        if (categoryID) {
            // Extract the value from 'crbd7_category' column and store in 'categoryIdValue' to be used when deciding which form to show the user
            var categoryIdValue = categoryID.getValue();
            // Initialize 'targetFormId' to hold ID of target form.
            var targetFormId = "";

            // Determine the target form based on 'crbd7_category'
            if (categoryIdValue.length > 0 && categoryIdValue[0] === 373270000) {
                targetFormId = "a8f69dc0-e6f1-ee11-a1fd-0022481b214a"; // Show Food Form
            } else {
                targetFormId = "57f15988-350b-ef11-9f89-0022481b214a"; // Show Furniture Form
            }

            // Check if the current form matches the target form based on 'crbd7_category' before switching
            if (currentFormId !== targetFormId) {
                var listOfAvailableForms = formContext.ui.formSelector.items.get();
                listOfAvailableForms.forEach(function(element) {
                    if (element.getId() === targetFormId) {
                        element.navigate();
                        return;
                    }
                });
            }
        }
    }
}        

Step 3 Add the code to your form.

Now that you've got your code set up, it's time to bring it into your environment.

First, you will need to add the code to your solution. To do this, open up your solution > Select "+ New" > "More" > "Web resource". You should then see a popup prompting you to upload your file and give it a name (see image below).

Now that the code is in your environment, you will need to add it to the forms included in your "Form Switcher" Script. To do this, you will first need to add the script as a library in your form. Select?"Form Libraries"?from the left of your navigation > Select?"+ Add library"?> Search for your script name and select?"Add."

Next, you'll need to configure the event in your form. To do this, locate "Events" on the right-hand side of the form editor > Select?"On Load"?> Select?"+ Event Handler" >?Choose your unique library name in?"Library"?> Copy the rest of the properties I have in the image below.

You will have to repeat Steps 2 & 3 for all of the forms included in your solution.

Save and publish your forms and give them a test!