How to get SubGird Record Count with Webresource in Dynamics CRM

Introduction:

In this Blog, we will see how to Get SubGrid Record Count in MSCRM or Model Driven App using WebResource.

Implementation Steps:

 

1. Navigate to https://make.powerapps.com

 

2. Create or Open any Existing Solution

 

3. Open the Table/Entity where you want to get count of SubGrid in my case am taking Account Table

 

 

4. As per the ScreenShot there is 4 Records available so i need to show as a popup with Count as 4

 

5. So First Step i will take the Sub Grid Name

 

6. Open the Form where your SubGrid Exists 

 

 

 

7. Based on the Above ScreenShot the Name of the SubGrid is Contacts

 

8. Now Lets Start Writing the JavaScript

 

9. Open Your Visual Studio or VS Code and Write the Below Function

 

function getsubgridcount(executionContext) {
    setTimeout(function () {
        var formContext = executionContext.getFormContext();
        if (formContext !== null && formContext != "undefined") {
            var accountgridname = "Contacts";
            var count = formContext.getControl(accountgridname).getGrid().getTotalRecordCount();
            alert(count);
        }
    }, 15000);
}

 

10. Now Create a JavaScript (Web Resource) in CRM 

 

 

11. Click Save and Publish

 

12. Now Open the Same Account Form and Add the JavaScript Library in the Form

 

 

13. Now Add Function in the OnLoad Operation

 

 

14. Once Done Click Save and Publish

 

15. Now Open the Account Table and Open a Record you will see the alert message over there 

 

 

 

That's it 

How to Create Model Driven Apps With Security Role Restriction

Introduction: 

In this Blog we will see how to Create Model Driven Apps with Security Role Restriction.

Implementation Steps:

 

1. Navigate to https://make.powerapps.com

 

2. Click Apps

 

3. Now Click on New App and Select Model Driven App

 

 

4. Then Input the Name for the Model Driven App and click Create

 

 

 

5. Once Done Click Add Page and Select the Page which you want to display, for demo am selecting Dataverse table and click Next

 

6. Now select Existing table and select the table and Click Add

 

 

7. Once Done click Save and Publish

 

 

8. Once the App Gets Created now Click Play it will open a Popup with the App Which we have created.

 

9. Now Click on Settings and Select Advance Settings

 

 

10. Once Page Opened Select the Setttings and Click Apps

 

 

 

11. You can see the App which you have created now Select the three dots and select Manage Roles

 

 

12. Once Selected it will Open the Roles --> select the Roles and Click Save

 

 

13. Once Save done.

 

The Respective Model Driven App will Load if the Logged in user contains that Specific Security Role which we have selected in Step 12.

That's it 

How to Set Model Driven App theme in PowerApps Canvas

Introduction:

In this Blog we will see how to set Model Driven App theme in PowerApps Canvas

Implementation Steps:

 

Model Driven Apps:

 

1. Navigate to https://make.powerapps.com

 

2. Click Gear Icon at the Top --> Select Advance Settings 

 

3. Once the Page Loaded --> Click Customization --> Select Theme --> You will see Default Theme ( You can see only one default theme for an Application)

 

COPY THE NAME OF THEME

 

 

4. Now go to https://make.powerapps.com

 

5. Click App --> And Provide the Name for the App and select Tablet or Phone Mode based on your needs --> In this i have selected Tablet Mode

 

 

6. Click DataSource --> Select Theme DataSource

 

 

7. Once the DataSource Added In the On Start of App Paste the below code

 

Set(getThemeValues,LookUp(Themes_1,'Default Theme'='Default Theme (Themes_1)'.Yes));

 

1. Get the Value from Lookup in Theme with Default Theme as Yes

 

8. Add Multiple Labels in the Form

 

 

9. Now Based on the Theme we can load the values(getThemeValues)

 

10. Now Add one by one to the LABEL : FILL and Label Text

 

 

ColorValue(getThemeValues.'Legacy Accent Color')
ColorValue(getThemeValues.'Navigation Bar Fill Color')

 

11. Based on the Above code we can use the color in different places according to Model Driven App

 

Final Output

 

 

 

That's it 

 

Hide Command Bar using JavaScript in Model Driven App

Introduction:

In this Blog, we will see how to hide Navigation Bar in Model Driven App using JavaScript.

Implementation Steps:

 

When ever you tried to create a new Record, you will be redirected to a page like below

 

 

Red Color Highlighted Called Command Bar

 

If we want to hide that Command Bar follow below steps to achieve the same.

 

1. Navigate to https://make.powerapps.com

2. Click Solutions --> Create a new Solution

3. Click New --> Click More --> Select Web Resource and add a new Web Resource

 

4. Write below code in Web Resource

 

 

function onLoadHideCommandBar(executionContext) {
    var formContext = executionContext.getFormContext();
    formContext.ui.headerSection.setCommandBarVisible(booleanValue);
}

 

 

booleanValue : pass true or false as an option

 

true - visible Command bar

false - hide Command bar

 

Once Code Published:

 

Load or Open a new Record

 

 

Now you cannot see the Navigation Bar.

 

That's it 

 

Side Panes in Model Driven Apps

Introduction:

 

In this Blog, we will see what are the features and how we can use Side Panes in Model Driven Apps.

Implementation Steps:

 

Consider a scenario, on click of a Button I need to show a HTML page in the Form. Initially we have used Dialog to display the same in the form but Microsoft have introduced a new feature to display a SIDE PAN in the Form

 

Syntax:

 

Xrm.App.sidePanes.createPane(paneOptions)

 

PanOptions:

You can refer to https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-app/xrm-app-sidepanes/createpane

Sample Code to Open HTML Page:

 

Check Weather the pane is already opened or not. If opened Close the pane

 

 

var currentPane = Xrm.App.sidePanes.getSelectedPane();
if (currentPane !== null && currentPane !== undefined && currentPane.paneId === "PANIDUNIQUENAME") {
var promotionPane = Xrm.App.sidePanes.getPane("PANIDUNIQUENAME");
promotionPane.close();
}

 

 

Below code for Opening the HTML page in Side pan

 

try {       
        Xrm.App.sidePanes.createPane({
            title: "PANID",
            paneId: "PANIDUNIQUENAME",
            canClose: true
        }).then((pane) => {
            pane.navigate({
                pageType: "webresource",
                webresourceName: "/webresources/yourhtmlpage.html"
            });
        });
    }
    catch (e) {
        throw e;
    }

 

 

If you want to pass any parameter from form to HTML in Side Pan

 

 

try {      
var formContext = primaryControl;
var qs = "guidofRecord=" + formContext.data.entity.getId().replace('{', '').replace('}', ''); // guidofRecord = you can pass any dummy variables
        Xrm.App.sidePanes.createPane({
            title: "PANID",
            paneId: "PANIDUNIQUENAME",
            canClose: true
        }).then((pane) => {
            pane.navigate({
                pageType: "webresource",
                webresourceName: "/webresources/yourhtmlpage.html"
                data: encodeURIComponent(qs)
            });
        });
    }
    catch (e) {
        throw e;
    }

 

 

Thats it.

Conclusion:

This is how we want to display HTML image using Side Pan in DataVerse/MSCRM