Tag: web resource

Adding a Logo or Custom Image to a Model-Driven App Tile

PowerApps are a great way for you to streamline the user experience in Dynamics 365. Available for Dynamics 365 Online Customers, creating an App is easier than ever with the PowerApps interface and drag-and-drop App Designer.

Today, let’s show you in a few simple steps how you can replace the Default Image for your App to be a custom image. In this example, I will use the Reenhanced logo. You can use your company’s logo or any image that works for the App you are building.

The default PowerApp Image Tile. This is what your users see when they select an App in Dynamics 365.

1. If your image/logo does not yet exist as a Web Resource, the first thing we need to do is add it. In a Dynamics 365 Solution File, add a new Web Resource.

Adding a new Web Resource to a Dynamics 365 Solution File.

Name your Web Resource and upload file. Save, then Preview to ensure it looks right. Finally, Publish your Web Resource.

2. Open your Model-Driven App. Navigate to Properties in the control panel on the right-hand side of your App Designer.

3. Under Icon, uncheck the box next to Use Default Image.

Uncheck Use Default Image under the Properties tab, highlighted here.

4. In the search box above App Tile, find the Web Resource you added in step #1 and select it.

Select your new Web Resource and preview App Tile.

Once you Save and Publish the changes in your App, your App Tile will be updated with the new image!

September 12, 2019
How to embed Audit History directly into an Entity Form
Recently, I helped a CRM Developer learn how to embed a view of his Audit History directly into his form. Keep reading for a step-by-step process explaining exactly how this is done and find a code sample you can download and use to power the same behavior inside your entity forms as well.

First, let’s look at what we’re inserting. Our view of the audit history will be the same view that you see when you select Audit History from the Form Navigation. If you’re using v9, it looks like this:

The Audit History that we want to show inside our form.

Now that we’re on the audit history page, let’s take a closer look at how this is displayed. If you use the Developer Tools for your browser, you’ll find that this view is shown inside an IFRAME which is how a lot of the components in Dynamics are displayed.

So now what we need to do is grab the URL for the IFRAME that’s showing the audit history. We will use this to build a web resource that we’ll be able to embed into our form. From the Audit History page, if using Chrome press Control + Shift + J to open the developer tools, then scroll to the iframe in the elements tab.

This IFRAME source will look something like this:
```
/userdefined/areas.aspx?formid=e3b6ddb7-8df0-4410-ac7b-fd32e5053d38&inlineEdit=1&navItemName=Audit%20History&oId=%7b5D5C1423-DEB2-E811-A96A-000D3A37062B%7d&oType=4&pagemode=iframe&rof=true&security=852023&tabSet=areaAudit&theme=Outlook15White
```
Hold on to this, because we’ll be using it to customize your web resource that will handle the embed of this IFRAME.

Open your favorite text editor and paste in the following in a file called web-resource.html:
```
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body style="height: 100%">
    <iframe src="" id="areaAuditFrame" name="areaAuditFrame" scrolling="auto" isarea="1" frameborder="0" style="width: 100%; height: 100%"></iframe>
    <script>
        let auditLoader = window.auditLoader || {};

        auditLoader.setIframe = function() {
            const search = new URLSearchParams(window.location.search);
            const recordId = search.get('id');

            let element = document.getElementById('areaAuditFrame');

            // TODO: Modify this with your url from the iframe
            // Make sure you modify it to add ${recordId} where needed
            element.src = `/userdefined/areas.aspx?formid=e3b6ddb7-8df0-4410-ac7b-fd32e5053d38&inlineEdit=1&navItemName=Audit%20History&oId=${recordId}&oType=4&pagemode=iframe&rof=true&security=852023&tabSet=areaAudit&theme=Outlook15White`;

        };

        auditLoader.setIframe();
    </script>
</body>
</html>
```
Note: For the script above we have all of the code and display components in the same file. It’s a good idea to do this when possible because it will be easier to maintain the system if each modification is self-contained. If you ever need to remove this, you can remove the web resource and there are no further steps. Always think about how to minimize dependencies as you build your modifications.

What the code above does is the following:
1. It creates a blank IFRAME that takes up 100% of the space in the displayed Web Resource
2. It uses parameters passed to the web resource to set the src attribute of the IFRAME to the Audit History page, customized to load the correct record for the form where it is embedded.
You will need to change the element.src line to match the IFRAME url you copied above, making sure to replace the oId= section with oId=${recordId}.

Once you have your file, save it to your local machine. The next step is to upload this into your entity form. In our example, we add a section to the bottom of our form that will hold the Audit History because this component requires a lot of space to display.

Some things to note when you do this:
1. Mark the Web Resource type as HTML so that Dynamics knows the right way to display it.
2. Make sure you click the box inside Web Resource Properties to Pass record object type code and unique identifier as parameters. The script uses this to know what audit records to show.
You can reuse the script above to display any iframe you like into any entity form, all you need to do is change the element.src property.

Happy Modifications! If you liked this, please leave a comment.
August 14, 2019

Tag: web resource

Adding a Logo or Custom Image to a Model-Driven App Tile

How to embed Audit History directly into an Entity Form