Custom HTML Page for Microsoft CRM
To create custom Button using HTML
<html><head><meta><meta></head><body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<style>
table.crmTable {
font-family: 'Segoe UI';
background-color: #D3D3D3;
width: 350px;
height: 50px;
text-align: left;
border-collapse: collapse;
text-wrap: avoid;
-webkit-box-shadow: 5px 5px 15px 5px #000000;
box-shadow: 5px 5px 15px 5px #000000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
table.crmTable td, table.crmTable th {
border: 0px;
padding: 2px 15px;
}
table.crmTable tbody td {
font-size: 11px;
font-weight: bold;
color: #040404;
}
table.crmTable tfoot td {
font-size: 14px;
}
table.crmTable tfoot .links {
text-align: right;
}
table.crmTable tfoot .links a {
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
.btncls {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #450039;
width: 150px;
height: 35px;
font-family: 'Segoe UI';
color: white;
font-weight: bold;
}
.success-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
visibility: hidden
}
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
.required {
color: red
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script>
var userName = "";
var userId = "";
window.onload = function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('fileupload').addEventListener('change', handleFileSelect, false);
var userSettings = parent.Xrm.Utility.getGlobalContext().userSettings;
userId = userSettings.userId;
userName = userSettings.userName;
var _header = ", use this window to raise ticket for issue";
document.getElementById("userName").innerHTML = "Hello "
+ userName + _header;
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
var image = "";
var filename = "";
function SendData() {
document.getElementById('errormessage').style.visibility = "hidden";
parent.Xrm.Utility.showProgressIndicator("Creating Your request....");
var obj = validateForm()
if (obj == false) {
return;
}
var title = document.getElementById("topic").value;
var description = document.getElementById("description").value
var optionSelected = document.getElementById("entity").value
if (document.getElementById("fileupload").files.length > 0)
filename = document.getElementById("fileupload").files[0].name
console.log(title + '\n' + description + '\n' + optionSelected + '\n' + image + '\n' + filename);
/// Call the API
var req = new XMLHttpRequest();
req.open('POST', "https://prod-45.westus.logic.azure.com:443/workflows/b0566fc0a91b4d25bed65886cf6384e2/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=V-9mTS5GsSxgCVv4g1l1Mps3v6_f_lmo4OkUR75PJNU");
req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");
req.setRequestHeader("Accept", "*/*");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.setRequestHeader("Prefer", "odata.include-annotations=\"*\",return=representation");
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
parent.Xrm.Utility.closeProgressIndicator();
document.getElementById("record").style.visibility = "visible";
document.getElementById("successmessage").style.visibility = "visible";
document.getElementById("record").innerHTML = "Your Ticket Number: " + ' ' + this.response;
document.getElementById("btnsenddata").disabled = true;
} else {
parent.Xrm.Utility.closeProgressIndicator();
document.getElementById('errormessage').style.visibility = "visible";
document.getElementById('requiredfields').style.visibility = "visible";
document.getElementById('requiredfields').innerHTML = this.response;
document.getElementById("btnsenddata").style.visibility = "visible";
}
}
};
req.send(JSON.stringify({
"isdocument": true,
"mimetype": "text/plain",
"documentbody": image,
"filename": filename,
"new_facingissuewith": parseInt(optionSelected),
"new_name": title,
"new_issuedescription": description,
"owner": userId.replace("{", "").replace("}", "")
}));
}
var handleFileSelect = function (evt) {
var files = evt.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload = function (readerEvt) {
var binaryString = readerEvt.target.result;
image = btoa(binaryString);
};
reader.readAsBinaryString(file);
}
};
function reset() {
//// Reset Data
document.getElementById('topic').value = ''
document.getElementById('entity').value = '--Select--'
document.getElementById('description').value = ''
document.getElementById('fileupload').value = ''
document.getElementById('record').value = ''
document.getElementById('requiredfields').style.visibility = "hidden"
document.getElementById('successmessage').style.visibility = "hidden";
document.getElementById('errormessage').style.visibility = "hidden";
document.getElementById('record').style.visibility = "hidden";
}
function validateForm() {
//// Reset Data
var a = document.getElementById("topic").value;
var b = document.getElementById("entity");
var c = document.getElementById("description").value;
if (a === null || a === "" || b.options[b.selectedIndex].value == "--Select--" || c === null || c === "") {
parent.Xrm.Utility.closeProgressIndicator();
document.getElementById('errormessage').style.visibility = "visible";
document.getElementById('requiredfields').style.visibility = "visible";
document.getElementById('requiredfields').innerHTML = "* Fields Required";
return false;
}
else {
document.getElementById('requiredfields').style.visibility = "hidden";
document.getElementById('record').value = '';
document.getElementById('record').style.visibility = "hidden";
return true;
}
}
</script>
<meta>
<meta>
<table class="crmTable">
<tbody>
<tr>
<td colspan="25" align="center">
<span id="userName" name="User Name"> </span>
</td>
</tr>
<tr class="success-msg" id="successmessage" style="visibility:hidden">
<td>
<i class="fa fa-check" id="record" style="visibility:hidden"></i>
<span id="record" style="visibility:hidden;font-family:'Segoe UI';font-size:14px;font-weight:normal;text-align:left;float:left"></span>
</td>
</tr>
<tr class="error-msg" id="errormessage" style="visibility:hidden">
<td>
<i class="fa fa-times-circle" id="requiredfields" style="visibility:hidden"></i>
<span id="requiredfields" style="visibility:hidden; text-align:center" name="Fields Required"> </span>
</td>
</tr>
<tr>
<td colspan="2">Issue Title <span class="required" id="spantopic">*</span> :</td>
<td colspan="2">
<input id="topic" style="font-family:'Segoe UI';font-size:11px;width:250px" required="" type="text" placeholder="Enter Title For Your Issue">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
Category Of Sales App Module<span class="required" id="spantopic">*</span>:
</td>
<td colspan="2">
<select id="entity" style="font-family:'Segoe UI';font-size:12px;width:250px" required="">
<option value="--Select--">--Select--</option>
<option value="2">Account</option>
<option value="5">Contact</option>
<option value="3">Lead</option>
<option value="1">Opportunity</option>
<option value="4">CE APP</option>
<option value="6">Access Issue</option>
<option value="7">Dash Boards</option>
<option value="8">Impediment Log</option>
<option value="9">PBL</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td valign="top" colspan="2">
Description Of The Issue<span class="required" id="spantopic">*</span> :
</td>
<td colspan="2">
<textarea id="description" style="font-family:'Segoe UI';font-size:11px;width:350px" required="" placeholder="Enter Issue Description..." rows="12" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">
Upload Issue Image (This Format jpg,png,jpeg Only):
</td>
<td>
<input class="btn success" id="fileupload" type="file" accept="image/*">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td align="right" colspan="25">
<input type="submit" value="Submit Issue" onclick="SendData()" class="btncls" id="btnsenddata">
<input onclick="reset()" type="button" value="Reset" class="btncls">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body></html>
No comments:
Post a Comment