Creating HTML Web Resource To Show Image Attached In Notes Using Web API

https://www.c-sharpcorner.com/article/creating-html-web-resource-to-show-image-attached-in-notes-using-web-api/

Some time back, I wrote a post for retrieving an image attached to notes using OData, as now for Dynamics 365 CE, we use Web API. So, I am going to share how we can do it using Web API.

Microsoft Dynamics CRM stores all the notes and attachments in annotation entities. Most out of the box entities used to have a relationship with this entity, but while creating our custom entity we can specifically select if we want to associate our custom entity with notes or not use the following option under Communication & Collaboration. Keep in mind once you enable this option, there is no way to disable this option, but if you are not sure, if you need notes or not at the time of your entity creation it's better to leave this option un-selected, so that you can select this option after sometime if required.

Note
The default size for notes attachment is 5 MB but if required, you can increase this limit to up to 32 MB.

We are going to implement following two steps,

Get entity image from notes
Create and deploy html web resource

Get entity image from notes

Similar to earlier versions we can upload the image to notes in Dynamics 365 CE.

Once image is attached to notes, we can retrieve it using Web API retrievemultiple request where we can query notes based on ObjectId field, we need to pass entity id field for objectid field in notes. We can using following code, in our html webresource,

<html><head>  
<script type="text/javascript">  
//check if document is loaded or not  
var imgControl = document.createElement("IMG");  
//Check if documented loaded fully  
document.onreadystatechange = function () {  
   if (document.readyState == "complete") {  
      getnotesImages();  
   }  
}  
   
//this function is used to get image from notes  
function getnotesImages()  
{  
 //get regarding object id  
   var regardingObjectId=window.parent.Xrm.Page.data.entity.getId().substring(1, 37);  
   
   //prepare URL  
   var webapiURL=window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/annotations";   
   
   //prepare query  
   var webapiQuery ="?$select=annotationid,documentbody,mimetype&$filter=_objectid_value eq "+regardingObjectId+" and  isdocument eq true and startswith(mimetype, 'image/')";  
   
//call image  
var req = new XMLHttpRequest();  
req.open("GET", webapiURL+webapiQuery, 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.setRequestHeader("Prefer", "odata.include-annotations=\"*\",odata.maxpagesize=1");  
req.onreadystatechange = function() {  
    if (this.readyState === 4) {  
        req.onreadystatechange = null;  
        if (this.status === 200) {  
            var results = JSON.parse(this.response);  
           if(results.value.length>0) {  
                var annotationid = results.value[0]["annotationid"];  
                var documentbody = results.value[0]["documentbody"];  
                var mimetype = results.value[0]["mimetype"];  
                //set image  
                imgControl.src="data:" + mimetype + ";base64," + documentbody;  
                document.getElementById('imagediv').appendChild(imgControl);  
            }  
        } else {  
            Xrm.Utility.alertDialog('Error while retrieving image details');  
        }  
    }  
};  
req.send();  
}  
</script>  
<head><body style="zoom: 1; word-wrap: break-word;">  
   
<div style="width: 100px;" id="imagediv"></div>  
   
</body></html>  

Create and deploy html web resource

Now, we need to create an HTML web resource and use the above code under Text Editor.

After that, we can put this web resource to our required Entity Form and we should be able to see the first attached image in web resource after refreshing the page.

Next we will explain how to create a HTML web resource and use our JavaScript method to get and display the image. We need to implement the following two steps:

· Create HTML page

· Deploy HTML page and SDK.REST.js using web resource

Create HTML page

Create a HTML page using a HTML editor. Use the following code for the HTML page:

<html lang="en-us"><head>  
 //Reference clientglobalcontest.js to get context information
 <script src="../ClientGlobalContext.js.aspx"></script>
 //add SDK.Rest.js reference
 <script type="text/javascript" src="SDK.REST.js"></script>  
 <script type="text/javascript">  
  //check if document is loaded or not  
   var imgControl = document.createElement("IMG");  
   //Check if documented loaded fully  
   document.onreadystatechange = function () {  
   if (document.readyState == "complete") {  
        getnotesImages();  
   }  
  }  
//this function is used to get image from notes  
function getnotesImages()  
{  //get regarding object id  
   var regardingObjectId=window.parent.Xrm.Page.data.entity.getId();  
   //assign notes entity name  
   var entitySchemaName="Annotation";  
   var odataQuery = "?$top=1&$select=AnnotationId,DocumentBody,MimeType&" +  
                    "$filter=ObjectId/Id eq guid'" + regardingObjectId +  
                    "' and IsDocument eq true and startswith(MimeType,'image/') ";  
   //call retrieveMultipleRecords method in SDK.REST javascript script library  
   SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});  
}  
//process callbanck result  
 function getnotesImagesCallback(resultSet)  
    {  
        if (resultSet.length > 0) {  
            var mimeType = resultSet[0].MimeType;  
            var body = resultSet[0].DocumentBody;  
            imgControl.src="data:" + mimeType + ";base64," + body;    
            document.getElementById('imagediv').appendChild(imgControl);  
            }  
    }  
 </script>  
<meta charset="utf-8"></head><body style="zoom: 1;">  
<div style="width: 100px;" id="imagediv"></div>   
</body></html>  

Deploy HTML page and SDK.REST library using web resource

Use following procedure to deploy a HTML page and SDK.REST library in Microsoft CRM.

Navigate to Settings -> Customization-> Customize the System from the top navigation bar
Navigate to Components -> Web Resources-> New
Fill in the details as in the following screen:

Click on the browse button and select your HTML web resource.
Click on Save and then Publish
Navigate to Components -> Web Resources-> New
Fill in the details as in the following screen:

Click on browse and select SDK.REST.js from Microsoft CRM SDK

Note: Please refer to my previous article for the SDK.REST.js location.

Now we can place our HTML web resource in the account entity form by navigating to Insert -> Web Resource options. Save your changes and then publish the account entity form.

When you try to open your account record you should be able to see the attached images loaded into the HTML web resource.

Show or hide the 'Add New' button on form sub-grid based on the value on the form

https://ribbonworkbench.uservoice.com/knowledgebase/articles/489288-show-or-hide-the-add-new-button-on-form-sub-grid

How do I show or hide the 'Add New' button on form sub-grid based on the value on the form.

You cannot use the ValueRule because the context of this rule must be run from a form Command Bar - so we must use a custom JavaScript rule.

Solution:

1. Create a JavaScript webresource that contains the function:

function ClientHooks_Ribbon_OpportunityRibbon_SubGridEnableRule() {
    var attribute = Xrm.Page.getAttribute('<your attribute logical name here>');
    return attribute.getValue() != null; // Return true to enable the button
}

This function will be used to enable the sub-grid add button when there is a value in the attribute you reference.

2. Add the child entity that you want to change the sub-grid behaviour for to a solution. Also add the webresource with the javascript function above and then load the solution into the Ribbon Workbench.

2. Select the child entity from the Entities panel and identify which button you need to customise:]

3. Right-Click on the button and click Customize Command

4. The new command will show in the Solution Elements Panel and additionally all the referenced EnableRules and DisplayRules will also be added. Since we don’t need to customise these, we can select each one in turn and set IsCore=True in the properties panel.

5. Now to add the new ValueRule. Right click on the new customised command and click Edit Enable Rules.

6. Click Add New and then Add Step. Select Custom Javascript Rule and set the properties:

· FunctionName = ClientHooks_Ribbon_OpportunityRibbon_SubGridEnableRule

· Library = <Select the library you added above>

7. Click Publish

Refreshing the subgrid command bar

You will find that when the form is loaded, if there is a value in the attribute you have referenced in your enable rule, the Add New button will be visible. If however the value changes, the sub-grid command bar will not automatically refresh to reflect the new state. Upon adding or deleting rows in the sub-grid the command bar is refresh – but this isn’t much use in this case.

The main form command bar can be refreshed using Xrm.Page.ui.refreshRibbon() however this will not refresh sub-grid command bars. Instead, we can add an onchange event to the fields that are used in our VaueRule and call:

Xrm.Page.data.save();

This will refresh the sub-grids and re-evaluate any of the EnableRules however it will also save any other dirty attributes and so should be used with caution if you do not have auto-save enabled.

[Demo - Step by step] Power Pages & SharePoint File Upload

Just show the different parts from the previous demo which was finished by using Power Apps Portal.

[Demo step by step] Power Apps Portal & SharePoint File Upload

Demo step by step:

Power Apps Portal with several steps of process flow by using Advanced Form (Web Form)

Support SharePoint Documents upload.

Power Apps Portal issue: "Server Error in '/' Application

Power Apps Portal "Server Error in '/' Application

"a connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond"

The below solution could be a reference for you.

1. Go to portal app setting:

2. Go admin page:

3. Try "Update Dynamics 365 URL" firstly, if still doesn't work.

Then try "Restart Portal". After several minutes, the portal may recover.

Hide "New folder" button of SharePoint in Power Apps Portal

When integrated SharePoint to Portal, there will be two buttons for document management: "Add files" and "New folder".

If you don't hope the user to be able to create new folders, you may follow below steps to hide "New folder" button.

1. Find the specific Entity form your Share Point document upload grid located at within your Portal Management.

2. Switch to "Additional settings" tab.

3. Go to the "Custom JavaScript" section part, then type the following JavaScript code:

$(document).ready(function(){
    $('a.add-folder.btn.btn-info.action').hide()
})

4. Go to your Portal Designer, click "Sync Configuration"-> "Browse website" button, then launch your Entity form again, the "New Folder" button would disappear:

Power Apps Portal : How to add Advanced Form / Web Form into webpage

Power Apps Portal : How to add Advanced Form / Web Form into webpage

Precondition: An advanced form(web form) and a basic form (entity form) have been created.

Step 1: Add a basic form (entity form) into a section of the webpage.

Step 2: Update the script:

Change "entityform" to "webform"

Change the form name to the advanced form's name

Step 3: Browse website

Power Apps Portal - Entity Form / Basic Form Doesn't show in the published webpage

Issue: Power Apps Portal - Entity Form / Basic Form Doesn't show in the published webpage

Reason: Form doesn't support the current webpage template.

Solution: Change the webpage template.

Installing and Configuring the Free COVID Vaccine Tracker Test Uploader for Power Apps Portals

Package for download:

https://github.com/Pragmatic-Works/Vaccine-Tracker-Power-App

Conditionally Show/Hide fields on Power Apps Portal by Using JavaScript

$(document).ready(function () {

$("#prag_manufacturer").change(onDisplaySectionChange); onDisplaySectionChange(); }); function onDisplaySectionChange() { var varManuf = $('#prag_manufacturer').find("option:selected").text(); if (varManuf === "Other") { $('#prag_othermanufacturer').parent().parent().show(); } else { $('#prag_othermanufacturer').parent().parent().hide(); } }