Monday, August 31, 2020

Timer or Timer Control in JavaScript with Start, Stop and Pause button

I gone through one of the Timer requirement in my project on case entity in D365 CRM, to achieve this we will use the below code in HTML web resource and then insert the web resource in entity form.

Below is the Image of this timer web resource.

Java Script code with HTML buttons:
<!DOCTYPE html>
<html>
<head>
<script>
var t;
var runningtime;
var sstime;
var tsec=0;
function startTime() {
  //document.getElementById('btnstop').disabled =false;
  //ocument.getElementById('btnpause').disabled =false;
  var d = new Date();
  var year=d.getYear();
  var month = d.getMonth();
  var day = d.getDay();
  var hours=d.getHours(); 
  var minutes=d.getMinutes(); 
  var seconds=d.getSeconds(); 
  var milliseconds=d.getMilliseconds();
  var today = new Date(year, month, day, hours, minutes, seconds, milliseconds);
      
  if(document.getElementById('sttime').innerHTML=='')
  {document.getElementById('sttime').innerHTML =today;
  sstime=today;}
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  runningtime=new Date(today);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;  
  t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
function calulatetime()
{
document.getElementById('sttime').innerHTML='';
var ttime= date_diff_inminutes(runningtime,sstime);
document.getElementById('totime').innerHTML =ttime;
tsec= date_diff_inseconds(runningtime,sstime) + tsec;
document.getElementById('tosec').innerHTML =tsec;
document.getElementById('btnpause').disabled =true;
//document.getElementById('btnstart').disabled =false;
document.getElementById('btnstop').disabled =true;
var tothour=document.getElementById('tosec').innerHTML/3600;
//var tothour=Math.floor(document.getElementById('tosec').innerHTML/3600);
//var tothour1=Math.ceil(document.getElementById('tosec').innerHTML/3600);
//alert("total hours spend " + tothour);
//alert("total hours spend " + tothour1);
alert("total hours spend " + tothour.toPrecision(6));
}

function calulatetimeinsec()
{
tsec= date_diff_inseconds(runningtime,sstime) + tsec;
document.getElementById('tosec').innerHTML =tsec;
document.getElementById('sttime').innerHTML='';
}

var date_diff_inseconds = function diff_seconds(dt2, dt1) 
 {
  var diff =(dt2.getTime() - dt1.getTime());  
  var seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  return seconds;  
 }
 
var date_diff_inminutes = function diff_minutes(dt2, dt1) 
 {
 var diff =(dt2.getTime() - dt1.getTime());
  /*var diff =(dt2.getTime() - dt1.getTime()) / 1000;
  diff /= 60;
  return Math.abs(Math.round(diff));  */
  
  
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  return days + "d " + hours + "h "  + minutes + "m " + seconds + "s ";
  
 }
 
var date_diff_indays = function(date1, date2) {
dt1 = new Date(date1);
alert(dt1);
dt2 = new Date(date2);
alert(dt2);
return Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate()) ) /(1000 * 60 * 60 * 24));
}
</script>
</head>

<body>
<button id="btnstart" onclick="startTime()">Start</button>
<button id="btnstop" onclick="clearTimeout(t);calulatetime();">Stop</button>
<button id="btnpause" onclick="clearTimeout(t);calulatetimeinsec();">Pause</button>
<div id="txt"></div>
<div id="sttime"></div>
<div id="totime"></div>
<div id="tosec"></div>

</body>
</html>




Steps to Start, build and create a PCF Control from Scratch

 Following are the high level steps to start and create a PCF control using Visual Studio 2017.

This is devided into three parts:-

1. Install the required software/Components

  • Install npm
  • Install PowerApps CLI
  • Install Visual Studio 2017 or later

2. Create a PCF Control

  • Create a new folder for the project.
  • Open Developer Command Prompt and Navigate the pointer to the folder created above.
  • Run the following command
  • pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type
  • Install the project dependencies using command (npm install) 
  • Update ControlManifest.Input.xml
  • Update index.ts
  • Build the project using (npm run build)
  • Start the Component (npm Start)
  • Create a folder for holding the solution zip and related files. Navigate to that folder and run the command. (pac solution init --publisher-name HKPublisher --publisher-prefix hk)
  • Add reference of the custom component in the solution (pac solution add-reference --path ../    ** Path of SolutionPackage Folder)
  • To create the Solution Zip File (msbuild /t:build /restore)

3. Import the Solution into your CRM Instance 

  • Import the solution file and use it inside Dynamics 365 CE


 


Split the String values with a special character in MS Flow to convert this into Array

 Many times we have a requirement to prepare the Mailing address for some of the documents, suppose there are Address Line1, Address Line2, ...