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

Share Records with Permission using Web API in Dataverse or MSCRM

Introduction 

In this Blog we will see how to share a Row/Record with permission using Web API JavaScript

Scinario:

Consider we have an Contact Field in Account Entity. then On save of record i need to take the Respective Contact and Share the Account Owner to Contact Owner.

Parameter For Sharing Record

Read : ReadAccess

Write : WriteAccess

Append : AppendAccess

Append To : AppendToAccess

Create : CreateAccess

Delete : DeleteAccess

Share : ShareAccess

Assign : AssignAccess

JavaScript code for Implementing:

function shareUserOrTeamtoRecord(executionContext) {
    var context = executionContext.getFormContext();
    var target = {
        "contactid": "ACAAB842-21C7-E811-A96F-000D3A16A41E", // Pass your respective Record id
        "@odata.type": "Microsoft.Dynamics.CRM.contact" // Pass your respective Entity Logical name record type
    };

    // Sharing with Team
    var principalAccess = {
        "Principal": {
            "teamid": "d272654b-57f5-4564-8d0b-36d0d4c426c4",
            "@odata.type": "Microsoft.Dynamics.CRM.team"
        },
        "AccessMask": "ReadAccess, WriteAccess"
        //Access Mask Sample "ReadAccess, WriteAccess, AppendAccess, AppendToAccess, CreateAccess, DeleteAccess, ShareAccess, AssignAccess"
    };

    // Sharing with User
    var principalAccess = {
        "Principal": {
            "teamid": "d272654b-57f5-4564-8d0b-36d0d4c426c4",
            "@odata.type": "Microsoft.Dynamics.CRM.team"
        },
        "AccessMask": "ReadAccess, WriteAccess"
        //Access Mask Sample "ReadAccess, WriteAccess, AppendAccess, AppendToAccess, CreateAccess, DeleteAccess, ShareAccess, AssignAccess"
    };

    var parameters = {
        "Target": target,
        "PrincipalAccess": principalAccess
    };

    var req = new XMLHttpRequest();
    req.open("POST", context.getClientUrl() + "/api/data/v9.0/GrantAccess", true);
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.onreadystatechange = function () {
        if (this.readyState === 4) {
            req.onreadystatechange = null;
            if (this.status === 204) {
                //Success - No Return Data - Do Something
            } else {
                var errorText = this.responseText;
                //error response
            }
        }
    };
    req.send(JSON.stringify(parameters));
}

Conclusion:

That's it :) This is how we need use above JavaScript to implement Record Sharing using WebApi.

 

Open URL in PowerApps/Dataverse/MSCRM form Using JavaScript

Introduction:

In this blog we will see how to write Javascript to Open URL in PowerApps/MSCRM/Dataverse Environment.

Implementation Steps:

 

Syntax:

 

 

Xrm.Navigation.openUrl(url,openUrlOptions)

 

 

 

Consider am having a field in an Account Entity Called URL. Then in Onload of Page, if URL Field Contains Data Open another Page with URL

 

To Begin with i created a Field Called URL in Account Form

 

Then Create a WebResource File with Type as JS

 

function openURLOnLoad(executionContext) {
    var formContext = executionContext.getFormContext();
    if (formContext.getAttribute("cr608_url").getValue() != null) {
        var URL = formContext.getAttribute("cr608_url").getValue();
        var openUrlOptions = {
            height: 800,
            width: 800
        };
        Xrm.Navigation.openUrl(URL, openUrlOptions);
    }
}

 

Then Call the function in OnLoad Opearation

 

 

Save and then Publish

 

Create a Record in Account Entity 

 

Save then Refresh the Form

 

 

That's it 

Video For your Reference: Watch it and Subscribe it 

How to Create and Customize Sitemap in Model Driven App / Dataverse / MSCRM

Introduction:

In this Blog, we will see how to Create and Modify Site map in Model Driven Apps/ Dataverse Environment

Implementation Steps:

 

Consider you have 2 Different teams available in your Organization, 

 

1. Sales Team

2. Pay Roll Team

 

If Sales Team Logged into Dataverse environment they need to see only their Respective Entities in Site Map, the same way for Pay Roll Team as well.

 

So Come across this scenario, we can create 2 different Model-Driven Apps and we can share the same to Respective Teams.

 

To Create a Model-Driven Apps

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

 

2. Click On Apps

 

 

3. Then Select Model Driven Apps

 

4. Once You Selected it will prompt you with two option, 

          a. Classic Mode

          b. Modern App Designer.

 

 

 

Lets Start looking Classic Mode

 

1. Once You selected ok for Classic Mode it will take you to App Creation page, Enter your App Name, Unique name will be auto populated from App name.

 

If you have any Images you can select and click on Done

 

 

2. App Designer Page will gets loaded, Click on site map to Add the Entities

 

 

3. Enter the Area name, Group name 

 

 

4. Then Click On New Subarea and Select the Entities

 

 

That's it, Click on Save and Publish then Run the App to view the Designers

 

b. Modern App Designer

 

1. Once you select Modern App Designer, You will be request to Enter Model Driven App name

 

 

2. Click Add Page button in the Body of screen

 

3. Then Select Weather you want Table based View and form / Dashboard / Custom

 

If you select Table view and form pages you will be popped up with below screen. Select the Entities and Click Add by Selecting Show in Navigation

 

After clicking ok you can see the selected Entities in the Navigation

 

 

To add a new page click Add Page and you will be Popped with the Selection Screen Again

 

 

That's it.. this is how we need to Create Model Driven App in Dataverse Environment.

How to Use Open Entity Form in Dataverse Environment

Introduction:

In this blog we will see how to Open Entity/Quick Create Form from Dataverse/Model Driven Apps

There are two type of Forms Available

1. Main Form

2. Quick View Form

 

1. Main Form:

 

Consider you have a Ribbon Button and on Click on Button you want to Open a Main Form. So for that you can write the below JavaScript command to achieve the same

var parameters = {

};

parameters["cr608_logicalName1"] = Value1ForLogicalName1;

parameters["cr608_logicalName2"] = Value2ForLogicalName2;

Xrm.Utility.openEntityForm("cr608_EntityLogicalName", null, parameters);

 

2. Quick View Form:

 

Consider I have an account Entity and I want to Create an Contact Against that Account for that

 

First Retrieve Account Value and store in a Temporary Variable.

 

var retrieveAccountValue = null;

var accountId = null;

var account = primaryControl.getAttribute("parentaccountid"); // you can use formContext from Form. From Ribbon you need to pass Primary Control as Parameter

if (account != null) {

  retrieveAccountValue  = account.getValue();

  if (retrieveAccountValue  != null) {

    accountId = accountValue[0].id;

  }

}

 

Then Create a Variable to set the Account Values

 

var parentAccountForContact = {

  entityType: "account",

  id: accountId

};

 

then you can Call the below code to open a Quick Create Form

 

// Create a Parameter

var parameters = {};

//Open Quick Create Form

Xrm.Utility.openQuickCreate("contact", parentAccount, parameters).then(function (ValueOutput) { successCallback(ValueOutput); }, function (error) { errorCallback(error);});

// Success Call

function successCallback(success) {

  alert("Success");

}

// Error Call

function errorCallback(e) {

  alert("Error: " + e.errorCode + " " + e.message);

}

 

That's it

Conclusion:

This is how we need to user Open Entity Form in DataVerse/Model-DrivenApps/CRM Environment.