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.

Preview Send-In App notifications

 Step 1:

    Create a trial Environment Link for Reference

Step 2 :

    Open the trial Environment (You cannot see App Notification Button)

Step 3:

    Go to https://make.powerapps.com

    Click Solutions 

    Create a New Solution

    Create a New Model Driven App by selecting New--> App --> Model-Driven App  --> Copy the UNIQUE Model Driven App name
    

Step 4:

    Open the Created Model Driven Apps --> Click F12 Button --> and Navigate to Console and Run the below code

fetch(window.origin + "/api/data/v9.1/SaveSettingValue()",{ method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify({AppUniqueName: "Your app unique name", SettingName:"AllowNotificationsEarlyAccess", Value: "true"}) });

Note:

Change "Your app unique name" to your Model Driven App Name

Step 5:

    To make the notification triggering point --> Create a webresource like below and call the function from the ONload of any entity

function OnLoad(executionContext) {

    var formContext = executionContext.getFormContext();

    var systemuserid = formContext.context.getUserId().replace("{","").replace("}","");

    var notificationRecord =

    {

        "title": "Welcome",

        "body": "Welcome to the world of app notifications!",

        "ownerid@odata.bind": "/systemusers(" + systemuserid + ")",

        "icontype": 100000000, // info

        "toasttype": 200000000 // timed

    }

    // Create notification record

    Xrm.WebApi.createRecord("appnotification", notificationRecord).

        then(

            function success(result) {

                console.log("notification created with ID: " + result.id);

            },

            function (error) {

                console.log(error.message);

                // handle error conditions

            }

        );

}

Youtube Link for your reference
Microsoft Link for your reference

Subscribe

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 

 

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