Replacing Dialog in Model Driven Apps Part-1: Using Main Form Modal

Since the announcement of dialogue depreciation, I have been trying out different alternatives to replace dialog as I use them extensively in my projects. The first option I tried was using canvas apps as described in this post ,but I was not happy with that approach and tested other options and implemented those in my projects based on customer scenarios. I will be publishing these options as a series. This is the first post and let’s see how we can replace dialog with entity main form.

There are many gaps when we replace dialog with other alternatives, even though these gaps can be filled with workarounds, the maintainability is high when compared to a classic dialog. These issues can be handled to a great extend using main forms.

With the April 2020 preview release of the Unified Interface for model-driven apps in Power Apps you can now open a record in a dialog. The record will open in a modal dialog and users will have access to the command bar, header and tabs that you defined for the records main form.

We can us the above option replace classic dialog.

Scenario:

I have to request HR team to verify certain details about prospects, but HR team is not allowed to access contact details. I also need to capture feedback and remarks from HR team.

So I created an entity called “Requests(nj_dialoguebatchone)” , modified the main form as per my requirements and removed all the unwanted buttons using ribbon-workbench.

Next step is to call this form using JavaScript from contact form.

function loadDialogForm(executionContext) {

    formContext = executionContext.getFormContext();
    var pageInput = {
        pageType: "entityrecord",
        entityName: "nj_dialoguebatchone",
        formType:  2
// formType 2 opens a new record.
    };
    var navigationOptions = {
        target: 2,
        height: {value: 70, unit:"%"},
        width: {value: 35, unit:"%"},
        position: 1
//target: Number. Specify 2 to open the page in a dialog. 
//position:Number. Specify 1 to open the dialog in center.
    };
    Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function success(result) {
               
                // Handle dialog closed
        },
        function error() {
                // Handle errors
        }
    );
    

   

}

I hope the code is self explanatory, more details can be found in the following links.

Now you can bind this script with ribbon button or other form events Boom dialog is ready.

You can also use quick create forms, but main form gives you more flexibility in terms using business rule and other form level formatting and validations. You can also easily configure Workflows, FLOWS, or Plugins based on user input in this as record create and update events are available.

See the dialog in Action

P.S. Am a classic dialog fan 🙂

Aggregate Grid PCF

When you have to see the Sum, Count, AVG of numeric columns in a subgrid, what is the easiest way? Export to Excel right? Now, there is an easier way: Aggregate Grid PCF Control. View Aggregates directly from Subgrid. This PCF control will list all numeric and currency columns in the view at the footer area, you just have to select the required column. This is not a production-ready control(I wanted to give life to an idea that came in during COVID19 lockdown) you can get the source code and unmanaged solution from here.

CSS & Grid design is from hovering list By Danish Naglekar.

Let’s Learn PCF Together

After adding Aggregate Grid Control to PCF gallery, I received many LinkedIn messages saying they love to build PCFs but they cannot as they are not pro UI developers. Trust me, I am not a pro UI developer just know the basics only :(, with the help of Awsome Microsoftcommunity, I managed to build a couple of PCF controls and for the last 6 months, every month am adding a new control to the PCF gallery. So now I have started a short video series of PCF control tutorial for beginners. these are 5 mins videos released once in every 3 days covering only one point per video. Hope this will be helpful for beginners. This is my first YouTube video series so am sure there is a huge scope for improvement 😅

Toggle Next PCF Control

Community plays an important role in everyday work life, at-least fifty percentage of my D365 and power-platform knowledge is gained from community(Blogs, Videos, Forums Etc..), that is why I love being part of awesome MS community.

Recently one of my clients said he doesn’t want to use the next button in the business process flow but something similar in the form is required. I do not agree such requests but since they are not really using the business process flow, the request looked relevant. I had to show him a POC on the same day itself. This is were the community comes to help. I logged in to PCF Gallery and searched for something similar, within few seconds found this PCF mask with Fabric-UI Icons for two-option field by David Rivard.

Boom!! Cloned the git repo and POC is ready in an hour.

Added a client side script to change tab when the field value is toggled.

This is not a production ready control, its just a copy I made from a cloned Git repo.

You can get the source code from https://github.com/nijos/ToggleNext.

Hope this helps. Happy Power Building.

Smart Grid PCF

One of my customer complained during a UAT session that, it’s too difficult for her to add new record using + button in a sub-grid, as it takes her to a new record window and she has to perform too many navigation. She was happy, when I enabled the quick create forms.

But, I was not happy and I wondered why OOB editable grid is not supporting this. I thought to give it a try using PCF controls, and this is the result.

Initially, it was not easy as we need to query the metadata to get field type for each column in the view. Following are the steps to configure smartgrid.

  1. Get the solution from here
  2. Import solution
  3. Add control to sub-grid
  4. Give required parameters.
alt text
  • Primary Lookup: Logical name of the lookup field for the relationship. for example contact sub-grid in the account is “*parentcustomerid_account”.
  • Primary Entity Set: Entity set name of the current entity where the sub-grid is added

This is to set the related lookup using Web API, you can use Rest Builder to get these parameter values correctly, for example if contact sub-grid in account form is using parent customer relationship, to set the account lookup in contact following code is used var entity = {}; entity[“parentcustomerid_account@odata.bind“] = “/accounts(xxxxx-xxxx-xxxx)”;

Known bugs.

  • Does not support N:N
  • Validation for empty rows.
  • Does not support composite fields(customer lookup).
  • Poor CSS 🙂

Planned enhancements

  • Inline editing.
  • Validation for mandatory fields

This is not a perfect replacement for Quick create form, but you are always welcome to enhance and add features to Smart Grid Github Repo here.

Activity Summary Pro

So busy with year ending and 2020 plans. AsvI promised “The pro version will be released in two months”, I have to release the pro version today. Really sorry for the poor CSS, am actually bad at styling stuffs 😦 . But you can always improve the style and features in the Github, any updates are appreciated. Here is the github repo link.

New features added.

  • Click on Activity Name to Expand the list.
  • View activities as a chart
  1. Get the unmanaged solution file  Here
  2. Import the solution to your organization.
  3. Create a view with the required filters. If you do not require the control to consider certain activity types, you can exclude them in your view filter. The control will consider only the records returned by the view selected.
  4. Add sub-grid to the form with the created view.
  5. Add Activity Summary control to the sub-grid.
alt text
alt text

Note: If you need to exclude certain activity types, apply the same logic in the view filter.

Special mentions

Hari Narayanan Kumar for his Activity Analyzer which helped me to include the chart easily.

Andrew Butenko for his quick repleys and answers in the power users community 🙂

Happy New Year, let this be the year of Power Users