Show and hide form sections based on form type in model driven apps and Dynamics 365

In this post, weā€™ll be taking a look at how you can use a very simple OnLoad event on a Dataverse form to determine whether form sections show or hide based on the form type for example whether the form is creating a newā€¦ READ MORE [https://lewisdoes.dev/blog/show-and-hide-form-sections-based-on
black screen with code
Photo by Antonio Batinić on Pexels.com
In: Low Code Lewis Content šŸš€

In this post, weā€™ll be taking a look at how you can use a very simple OnLoad event on a Dataverse form to determine whether form sections show or hide based on the form type for example whether the form is creating a new record, or editing a current record. Weā€™ll go through writing the JavaScript for this form event, step by step, understanding each line and testing as we go.

Starting with some JavaScript

So letā€™s start by writing a little bit of JavaScript, not a lot, but just a bit to test the first little thing out. The first thing I want to test out is whether or not I can find out the type of form I have open using a JavaScript event. Iā€™ll test this by writing the outputs of a command to a variable which iā€™ll then make visible by logging them in the browser console.

Using JavaScript in Dynamics 365 and model driven apps requires us to work with functions, which are like tasks formed up by a set of steps or lines of code. So effectively I could have one JS file with multiple functions in it to save me creating lots of web resources, then I just need to reference the function I want to use in my form event rather than using a completely separate JS file.

Anyway, Iā€™m going to use Visual Studio Code to write my JS. Letā€™s start by creating a new file and setting the language to JavaScript.

Iā€™m selecting ā€˜New Text Fileā€™

Now Iā€™m going to select ā€˜Select a languageā€™ and choose JavaScript. Now Iā€™m ready to start writing some code.

Letā€™s start by defining a function using the ā€˜functionā€™ keyword to create one, a name for our function and rounded brackets to store parameters weā€™ll need to pass into the function. Then at the end Iā€™m going to add open and closed curly brackets. Inside of these curly brackets will be where we add our code for the function to run.

function RetrieveFormType() {};

Weā€™re not completely ready to start adding steps into our function yet. Prior to that we need to pass some data into our function using a parameter so that we have some information about our form to work with. We can do this using executionContext which gives us an object which lets us then use further methods to return a range of detail about things like our form and more.

See more details about executionContext here ā€“ Execution context (Client API reference) ā€“ Power Apps | Microsoft Learn

To pass in the executionContext parameter we just need to simply add this inside of our rounded brackets. So now weā€™re working with something more like this.

function RetrieveFormType(executionContext) {};

Awesome! Okayā€¦ now weā€™ve written a first line of code, but this wonā€™t really do anything yet or return anything that we can see to know if things are working. Letā€™s start adding some tasks to our function. Inside the curly brackets Iā€™m going to use one of the methods provided by our executionContext parameter to retrieve some context about our form. Iā€™m going to set a variable with the results of this command to. So letā€™s add the followingā€¦

let formContext = executionContext.getFormContext();

Now here Iā€™m setting a variable called formContext with the data returned by the getFormContext method provided by the executionContext parameter we passed in earlier. Now Iā€™ve got hold of some information about my form.

Your code should look something like this by nowā€¦

function RetrieveFormType(executionContext) {
    let formContext = executionContext.getFormContext();
}

Cool! So now weā€™ve got a variable storing some information about our form, but I want further specific detail. Weā€™re now going to use the following codeā€¦ formContext.ui.getFormType() to get the type of form we have open using the reference returned by getFormContext currently held inside our formContext variable.

To do this, lets set another variableā€¦

let formType = formContext.ui.getFormType();

So now our code should something a little like thisā€¦

function RetrieveFormType(executionContext) {
    let formContext = executionContext.getFormContext();
    let formType = formContext.ui.getFormType();
}

Finally I want to be able to test out that my formType variable is holding the type of form I have open currently. To do this letā€™s write the value inside our variable to the browser console using console.log()

Our code should now look like thisā€¦

function RetrieveFormType(executionContext) {
    let formContext = executionContext.getFormContext();
    let formType = formContext.ui.getFormType();
    console.log(formType)
}

Now letā€™s start to bring things into Power Apps, to test things out. Give your file a save ensuring you set the file type to JavaScript and head over to Power Apps.

Applying the event to a form

Okay so now letā€™s take a look at making this work on a form when the form has loaded. Iā€™ve added my account table, and a model driven app to a solution to make some customisations. Now I need to bring my JavaScript file into Power Apps. Letā€™s select new, then web resource and upload the file.

Very simply upload your file that we just created in VS Code, then give your web resource a name and if not already set, set the type to JavaScript. If you like you can give the web resource a description which is definitely recommended if you work in a development team of more than 1 person, then click save.

Now we can go and edit our form to include this JavaScript as an OnLoad event.

Here Iā€™ve created a new main form for my account table which Iā€™m going to edit.

On loading the form editor my form is already selected so Iā€™m not going to click anything inside of my form so that I stay selected at the form being the top level. Iā€™m then in the right hand pane going to select Events and then open up the On Load dropdown to add a new event.

Now I need to add the JavaScript library I uploaded into Dataverse to this form so I can use it in the events here. Select ā€˜add libraryā€™.

Search for your web resource and then select it and click ā€˜Addā€™.

Now we need to do a few things to configure our event. First select the library you just added to your form and which we created earlier as a web resource.

Following that we need to tell the event the function to run in our library. Remember how I said we can have one file or ā€˜libraryā€™ with lots of functions in it and then we choose which one we want to runā€¦ well thats exactly what weā€™re deciding at this point. Here we need to supply this input with the name of our function which is the string we used after the ā€˜functionā€™ keyword in our file prior to our rounded brackets holding input parameters.

Make sure you have the enabled checkbox ticked as well as the following one to pass execution context in to our function.

Now our JavaScript should be running when we load our form! Wellā€¦ donā€™t forget to save and publish all customisations first šŸ˜‰

Testing getting our form type

Letā€™s test things out now that weā€™ve saved and published everything. If we now open our model driven app and navigate to the table we applied the changes to, prior to opening a record or creating a new one, lets do a right click anywhere in our browser and open up the developer tools by selecting Inspect. Then we need to open the console.

Now we can see everything that is being logged in the console of our browser to see the outputs of our JavaScript code running in our form event. Now we can go and open the form to see the form type returned using console.log()

Cool! I can see something has appeared in my console and Iā€™ve got my web resource name right next to it! This is what Iā€™ve written to the console in my RetrieveFormType function being run by my form event. So this is saying the form type is 1ā€¦ what does that mean though?

Form types in Dynamics 365

So letā€™s take a look at what the numbers returned by our form type actually mean so we can use them in later code and if statements.

Undefined0
Create1
Update2
Read Only3
Disabled4
Bulk Edit6

Here we have the type of form against the number JavaScript will return. So we know that above I had opened a create form by clicking the ā€˜Newā€™ button to create a new record.

Now we can go back to Visual Studio Code and start adding some more tasks to our function to do things based on the form type weā€™re looking atā€¦

Hiding the timeline if our form is in create mode

So now lets bring in a scenario to achieve a requirement. If my form is in create mode, I wonā€™t be able to use the timeline yet. So instead of showing an ā€˜almost thereā€™ message or something like that which is the behaviour out the box, why donā€™t we just completely hide the timeline for now! You might not want to do this, but hopefully itā€™ll give you an idea as to how we can use this functionality.

So first, to be able to control the section that the timeline is within, we need to know the name of this section on the formā€¦ so lets grab that before we go and edit our codeā€¦

Letā€™s go back into our form editor and select the section we want to hide, and take note of the name of it.

Okay, so the name of my section is ā€œSOCIAL_PANE_TABā€. Weā€™ll need this in a moment.

Now, lets go back to Visual Studio Code with the file we created earlier openā€¦

Inside of our function, so before the last curly bracket / ā€˜}ā€™, letā€™s add some more code. Weā€™ll start with an if statementā€¦

Letā€™s open our statement using if () and then add curly brackets after it to add in the lines to run if the outcome of the statement is true.

Inside our rounded brackets of our statement lets write our statement. I want this to say that if the form type is create then hide the social pane section. We can write this like thisā€¦

if (formType == 1)  {
        let tabObj = formContext.ui.tabs.get("SUMMARY_TAB");
        let sectionObj = tabObj.sections.get("SOCIAL_PANE_TAB");
        sectionObj.setVisible(false)
    }

Here you can see Iā€™m getting my tab from my formContext which is holding the reference to my form, then Iā€™m getting my section from my tab using sections.get which Iā€™m then able to use to set the visibility of the section to false.

We have to get the tab object first so we can then get access to the sections object unlike being able to access controls using getControl() with a single command where we can just supply a name or index of the control in the form.

Anywayā€¦ our code should now look a little more like this. You can ignore the text on line 5 starting with //ā€¦ this is just a comment.

function RetrieveFormType(executionContext) {
    let formContext = executionContext.getFormContext();
    let formType = formContext.ui.getFormType();
    console.log(formType);
    let tabObj = formContext.ui.tabs.get("SUMMARY_TAB");
    let sectionObj = tabObj.sections.get("SOCIAL_PANE_TAB");

// If form is create form, hide timeline section held in sectionObj
    if (formType == 1) {
        sectionObj.setVisible(false)
    }
}

We now need to edit our web resource in Dataverse / Dynamics 365. Lets go back to our solution and upload the new file.

Here Iā€™m just uploading a new file and clicking save. Now weā€™ve got our new JavaScript in Dataverse, our form is already referencing the web resource and the function that weā€™ve updated, lets publish all customisations and test things out in our app again.

As you can see from the moving image above, when I open an existing record my timeline appears and when I go to create a new record my if statement outcome is true and my further JS code hides the timeline section!

I hope you liked this post which explained how to hide specific form sections based on the type of form being opened in a model driven app or Dynamics 365 CE. If you didnā€™t understand something, or something isnā€™t quite working for you, let me know in the comments below!

Happy Power Apping!

Written by
Lewis Baybutt
Microsoft Business Applications MVP ā€¢ Power Platform Consultant ā€¢ Blogger ā€¢ Community Contributor ā€¢ #CommunityRocks ā€¢ #SharingIsCaring
Comments
Great! Youā€™ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to LewisDoesDev.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.