Sathis Kumar Blog

In this blog, I will demo the capability of using the E-commerce quotation request possibility using jQuery Shopping Cart where the reference used from the following blog link.

To achieve this inside the CRM portal, we need to do some configuration inside Dynamics 365 Customer Engagement (D365 CE). Below steps, as mentioned below will help achieve this.
CRM Configuration:

1. In D365 CE, products Entity create a web file lookup and add the required image for the product.

• Create a web file lookup in Product entity

• Refer the webfile as image and add in the Product record.

1. Sample Web file record referred to the image
2. Create a new entity in Portal Quote. Using the D365 CE Quote entity will be difficult to achieve since it has a lot of configuration needs to be done, that is the reason we are using custom entity. Later using the Workflow/Plugin, we can able to request the Quote in CRM using the Product ID, Contact and Account Lookup.

• Following Fields are created in Portal Quote Entity

• Create a process to set the Portal Quote Name(Optional)

CRM Portal Configuration:

1. Download the Javascript(jquery.shop.js) from the Github. After downloading the javascript file. Create a web file in CRM and upload the javascript in notes. Javascript will be blocked in D365 CE and make the changes temporarily to allow the javascript files to upload in notes. In CRM Setting, remove .js to achieve this.

• Create a web file for javascript with the following configuration and upload in notes.

2. Create an entity form with Portal Quote Entity, refer to the following configuration.

• The configuration in Entity Form

• Associate Portal User in entity form
• Entity form metadata configuration

3.Create the following web template

Product Web Template – In this web template, it will populate the list of products from the price list item to get the price and using the webfile configured in the products it will display the Product.

Code:Product Page web template

Cart Web Template – Allow seeing the list of products, added to the quotation and also to helps to remove the products if not required.

Code:cart web template

Check out Web template – Will display the Final Products Quotation and helps to submit the Quotation. Allow the Create Quote entity form, will capture the JSON Value which will be stored as Product details added in the Quote.

Code:checkout web template

4. Associate the Page template with Web template, create the following Page template records in D365 CE.
5. create three web pages and associate the Page template.

6. Finally, add in the Primary Navigation to display the Product Page.

It will be displayed like this, after adding in the Primary Navigation.

Demo(screenshots):

Demo(video):

After submitting successfully, it will create a Portal Quote record in CRM, which will capture the Portal user details and JSON Value which will have the Product information.

Hope, this blog helps everyone and also gives the hint to implement the E-commerce in CRM Portal which is possible to make the big steps like integrating Payment gateway to use for the Orders and Invoice also.

Please take a note, it is just a concept and it is not a production ready solution.

Next blog, I will explain how to create an Actual Quote Record in CRM which will help the sales process in CRM using Portal Quote Record.

Display Notification in Portal increases productivity and user can able to know the information instantly.

In this blog, I have made the Proof of Concept to display the notification counter in CRM Portal using Alert Subscription Entity(adx_alertsubscription).

Finally, the result will be showing the notification counter at the end of Primary Navigation.

Please follow the below steps:

1. Create a System View for Alert Subscription Entity with the given condition.

2. Create a new Entity list for Alert Subscription Entity name it as “Alert List” and also configure the Entity permission with Read , Append and Append to.

Filter Condition for Entity list:

Create a Workflow to Change the status and as on-demand.

Call the workflow in Entity list as shown below.

3. Save the Entity List and Assign to Web Page with the following configuration as shown below.

4. After Creating a Web Page and Create a Primary Navigation.

Save the Primary Navigation it will show like this after saving the navigation.

Now time to identify the control for Navigation using Chrome Browser. Open the Portal in chrome browser, press F12 Key and selection the control.

Now we have identified the control by copy selector CRM Portal navigation doesn’t have any proper HTML id assigned and it is the only possible way to identify the control.

Test the notification counter using chrome first before implementing: Now you can able to see the counter in Portal and it is time to implement in Portal from CRM where the value will be populated dynamically.

5. Create a Web Template name it as FetchxmlAlert and configure the Configure Fetch and output as “application/json“.

Reason for using JSON to expose the counter:

• Not Possible to use the Liquid Template fetchxml in Javascript.
• Gives flexibility to call the function using REST Operation.

Configuration for Web Template:

Click the below link to view or download the Code for FetchXML Feed Web Template:
fetchxml feed

6. Create a Page Template name it as Alert Counter Page Template

7. Create a Web page as below and assign the above Page Template

8. After configuring the JSON for Alert Counter and Signing into the portal with a user account which has permission to read the Alert Subscription entity. Test the JSON by entering URL.

9. In Web Template, open the Footer Web Template and paste the below code at the end of Web Template.

<script>
$(document).ready(function ()
{
alertcheck();
});

setInterval(function(){
alertcheck()}, 60000);

function alertcheck(){

$('#spancounter').remove();
$('#navbar > div.navbar-right.menu-bar > ul > li:nth-child(13) > a').append('<span id="spancounter" class="badge badge-notify"></span>');

// document ready
$.ajax({
method: "GET",
async:false,
url: "/alert-counter/"
})
.done(function(results) {

$.each(results, function(index, element) {
counterstring=element.count;

var counter = parseInt(counterstring);
$('#spancounter').text(counter);

});
});

}
</script>

Reason for using the code in the Footer Web Template:

jQuery doesn’t work with Header Template.

10. Create some Alert subscription records in CRM and set the Regarding Portal user contact lookup to display some alerts in Portal.

11. Now you can see the notification counter with an update value. Also, try to click the notification it will display the Alert List and select Mark as read it will reduce the counter.

Demo:

Some of the Feature of the Alert Notification:

1. A function will be running asynchronously so the user will be the notification if any new record created in CRM.

2. “Mark as Read” ensures that user has clicked the notification in Portal.

3.Works flawlessly in mobile tablet and desktop.

Hope you have enjoyed my blog. Please shared the post if you like it.

Recently I have faced the challenging and interesting task to implement the Signature pad in CRM Portal/ADX Studio.

This blog demonstrates how to implement the HTML5 Signature Pad in CRM Portal/ADX Studio. It is possible? Yes, with some tricks it is possible and please follow the steps below to achieve it.

Signature Pad Reference:

Please use the below link for the example and GitHub Code which used as a reference to Embedded the Signature Pad in CRM Portal.

Step 1:

In CRM, create a new Entity name it as “Signature” and create the following fields as mentioned below:

Information Form in Signature Pad Entity(CRM):

Step 2:

Create a new Entity Form record referring “Signature” Entity and Respective Information Form related to “Signature” Entity in Dynamics CRM:

Step 3:

By Default, .js file is blocked in CRM Attachments. To Upload a JavaScript as Web files in CRM it is possible, please use the below Blog for more information which will explain how to upload a .js file in CRM Notes.

https://community.dynamics.com/enterprise/b/colinvermandermicrosoft/archive/2017/05/17/dynamics-365-portals-javascript-as-web-files

After enabling the “.js” file in CRM

• Create a new Web file in CRM

Download the JavaScript from the GitHub Link and Upload the JavaScript file in CRM Notes related to ““signature_pad.js” Web File Record:

• Again, a Create New Web file record in CRM and use the following configuration as mentioned below for “app.js” Web File Record.

Download the JavaScript from the GitHub Link and Upload the JavaScript file in CRM Notes related to ““app.js”

• Create New Web file record in CRM and use the following configuration as mentioned below for “signature-pad.css” Web File Record.

Upload the following below CSS in notes Attachment. I have slightly modified the code from the Github by removing the background in CSS:

.m-signature-pad {

  position: absolute;
  font-size: 10px;
  width: 700px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -200px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
}

.m-signature-pad:before, .m-signature-pad:after {
	position: absolute;
  z-index: -1;
  content: "";
	width: 40%;
	height: 10px;
	left: 20px;
	bottom: 10px;
	background: transparent;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	-moz-transform: skew(-3deg) rotate(-3deg);
	-ms-transform: skew(-3deg) rotate(-3deg);
	-o-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
	left: auto;
	right: 20px;
	-webkit-transform: skew(3deg) rotate(3deg);
	-moz-transform: skew(3deg) rotate(3deg);
	-ms-transform: skew(3deg) rotate(3deg);
	-o-transform: skew(3deg) rotate(3deg);
	transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 80px;
  border: 1px solid #f4f4f4;
}

.m-signature-pad--body
  canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
  }

.m-signature-pad--footer {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 60px;
}

.m-signature-pad--footer
  .description {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 1em;
  }

.m-signature-pad--footer
  .left, .right {
    position: absolute;
    bottom: 0;
  }

.m-signature-pad--footer
  .left {
    left: 0;
  }

.m-signature-pad--footer
  .right {
    right: 0;
  }

@media screen and (max-width: 1024px) {
  .m-signature-pad {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-width: 250px;
    min-height: 140px;
    margin: 5%;
  }
  #github {
    display: none;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .m-signature-pad {
    margin: 10%;
  }
}

@media screen and (max-height: 320px) {
  .m-signature-pad--body {
    left: 0;
    right: 0;
    top: 0;
    bottom: 32px;
  }
  .m-signature-pad--footer {
    left: 20px;
    right: 20px;
    bottom: 4px;
    height: 28px;
  }
  .m-signature-pad--footer
    .description {
      font-size: 1em;
      margin-top: 1em;
    }
}

Save the CSS as “signature-pad.css” and Upload in CRM Note Attachment:

Step 4:

Create a new Web Template Record in CRM, use the following configuration as mentioned below:

Use the below Liquid Template to paste in the Source Field in “Create Signature Web Template” Record.

Liquid Template Code:

Please download the complete liquid template from here : liquid_code

<div class="alert alert-success">
  <strong>Signature Captured Successfully.</strong></div>