SharePoint & Dynamic365 Solution: August 2017

Tuesday, 15 August 2017

Export HTML to MS Word document

1. Below is HTML with word Header and Footer

<!doctype html>
<html>
<head>
<script type="text/javascript" src="../Style Library/website/jQuery-2.1.4.min.js"></script>
<script src="../Style Library/website/Print/FileSaver.js"></script>
<script src="../Style Library/website/Print/WordExport.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#btnWordExport").click(function (event) {
$("#page-content1").wordExport();
});
});
</script>
</head>
<body>
<div class="headerContent no-print">
<table class='no-print'>
<tr>
<td>
</td>
<td>
<p><input type="button" id="btnWordExport" value="Export to word" class='no-print'></p>
</td>
</tr>
</table>
</div>

<div>
<div id="page-content1">
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style>
v\:* {
behavior: url(#default#VML);
}

o\:* {
behavior: url(#default#VML);
}

w\:* {
behavior: url(#default#VML);
}

.shape {
behavior: url(#default#VML);
}
</style>
<style>
@page {
mso-page-orientation: portrait;
size: 21cm 29.7cm;
/* mso-page-orientation:portrait;
size: 29.7cm 21cm;*/
margin: 1cm 1cm 1cm 1cm;
}

@page Section1 {
mso-header-margin: .2in;
mso-footer-margin: .5in;
mso-header: h1;
mso-footer: f1;
}

div.Section1 {
page: Section1;
}

table#hrdftrtbl {
margin: 0in 0in 0in 900in;
width: 1px;
height: 1px;
overflow: hidden;
}

p.MsoFooter, li.MsoFooter, div.MsoFooter {
margin: 0in;
margin-bottom: .0001pt;
mso-pagination: widow-orphan;
tab-stops: center 3.0in right 6.0in;
font-size: 12.0pt;
}
</style>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser />
</w:WordDocument>
</xml>
</head>

<body>
<div class="Section1">
<p>

<table id="printsplit1">
<tbody id="perintbodyContent1" style="font-family:Arial;"></tbody>
</table>

</p>
<br />
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header;' id=h1>

<p class=MsoHeader>

<table border="0" width="100%" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #736D6E">
<tr>
<td width="100%" align="center">
<img align="center" src='/sites/website/SiteAssets/logo4.png' crossOrigin='Anonymous' />
</td>

</tr>
</table>

</p>

</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="border-top:1px solid #736D6E">
<tr>
<td width="50%" align="left">
Form Set / <label id="lblFormSetNo"></label>
</td>
<td width="50%" align="right">
<p class=MsoFooter>
<span style='mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '>
<span style='mso-no-proof:yes'></span> from <span style='mso-field-code: NUMPAGES '></span>

</span>
</p>

</td>
</tr>
</table>

</div>
<div style='mso-element:header' id=fh1>
<p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p></o:p></span></p>
</div>
<div style='mso-element:footer' id=ff1>
<p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'> <o:p></o:p></span></p>
</div>

</td>
</tr>
</table>
</div>

</body>
</html>
</div>
</div>
</body>
</html>

2. Generate HTML,which content has to be exported in Word Document

// generate Document Body in HTML
function GenerateDocumentBodyHTML() {

var singleTr = "";
var singleContentTD = "";
var singleTDQNO = "";
var contentDirection = "";
var leftPadding = "";
if (printType == "Arabic") {
contentDirection = ";direction:rtl;";
leftPadding = ";padding-right:30px;";
}
else {
leftPadding = ";padding-left:30px;";
}

//style of columns
var leftTDACSS = "style='width:100%;vertical-align: text-top;font-family:Arial;font-size:11px;border-top: 0px;border-bottom:0px;" + leftPadding + contentDirection + "'";
var leftTDBCSS = "style='width:0%;vertical-align: text-top;background:gray;color:white;" + contentDirection + "'";
//data can be any format
for (var i = 0; i < 10; i++)
{

var questionContentColumn1 = "hi testting";
var questionContentColumn2 = "hi testting";

singleContentTD = "<td " + leftTDACSS + " class='table_contentA'>" + questionContentColumn2 + "</td>";
singleTDQNO = "<td " + leftTDBCSS + " class='table_contentB'>" + questionContentColumn1 + + "</td>";

if (printType == "Arabic")
{
//add two columns in table in arabic view
singleTr = singleTr + "<tr>" + singleContentTD + singleTDQNO + "</tr>";
}
else
{
//add two columns in table in English view
singleTr = singleTr + "<tr>" + singleTDQNO + singleContentTD + "</tr>";
}
}

//append rows to body of table html for export functionality
$('#perintbodyContent1').append(singleTr);
// find img and set attribute for cross domain
$('img').each(function () {
$(this).attr('crossOrigin', 'Anonymous');
var url = $(this).attr('src');
// convert all image url to datauri
$(this).promise(callMethod($(this))).done(function (s) {
//do whatever you want here
});

});
}

function callMethod(imagepath)
{
var url = $(imagepath).attr('src');
var s = "";
convertFileToDataURLviaFileReader(url, function (base64Img)
{
$(imagepath).attr('src', base64Img);
s = base64Img;
});
return s;
}
function convertFileToDataURLviaFileReader(url, callback)
{
var xhr = new XMLHttpRequest();
xhr.onload = function ()
{
var reader = new FileReader();
reader.onloadend = function ()
{
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}

3. Below are supported js file

<script type="text/javascript" src="../Style Library/website/jQuery-2.1.4.min.js"></script>
<script src="../Style Library/website/Print/FileSaver.js"></script>
<script src="../Style Library/website/Print/WordExport.js"></script>

which can be download from below link FileSaver.js and WordExport.js

4. Result will be

Monday, 7 August 2017

Add Filter in HTML table header using jquery

1. If you have data in array list then copy below function and modify as per your requirement.

function ShowFinalTable()
{

var finalQuestionArrayList = new Array();
var questionNoArrayList = new Array();
var finalFormSetTableArrayList = new Array();
var itemInformationArrayList = new Array();
var difficlityArrayList = new Array();
var complexityArrayList = new Array();
var conareatextArrayList = new Array();
var subcontentareatextArrayList = new Array();
for (var i = 0; i < preTest_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = "Pre-Test";
formSet.Question = preTest_formSetsQuations[i];
finalQuestionArrayList.push(formSet);
}
for (var i = 0; i < anchor_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = "Anchor";
formSet.Question = anchor_formSetsQuations[i];
finalQuestionArrayList.push(formSet);
}
for (var i = 0; i < unique_formSetsQuations.length; i++)
{
var formSet = {};
formSet.FormSet = unique_formSetsQuations[i].FormSet;
formSet.Question = unique_formSetsQuations[i].Question;
finalQuestionArrayList.push(formSet);
}
var items = completeUniqueQuestionBankArray;
var txtquestionNo= "<br /><select type='text' id='txtquestionNo' class='rowSearchHeader' style='display:none' onchange='searchRows(tableFinalResult)'></select>";
var txtFormSet = "<br /><select type='text' id='ddlFinalFormSet' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtcontentArea = "<br /><select type='text' id='txtcontentArea' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtsubContentArea = "<br /><select type='text' id='txtsubContentArea' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtitemInformation = "<br /><select type='text' id='txtitemInformation' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtdifficulty = "<br /><select type='text' id='txtdifficulty' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";
var txtcomplexity = "<br /><select type='text' id='txtcomplexity' class='rowSearchHeader' onchange='searchRows(tableFinalResult)'></select>";

var tbody = "<div id='mainTablearea1'><table cellpadding='0' id='tableFinalResult' cellspacing='0' border='0' id='table' class='tinytable table table-bordered'></div><thead><tr style='background-color: #16629e;color: white;font-size: 11px;'><th class='nosort'>" + $('#colRequeNo').val() + txtquestionNo + "</th><th>FormSet" + txtFormSet + "</th><th>Content Area" + txtcontentArea + "</th><th>Sub Content Area" + txtsubContentArea + "</th><th>Item Information" + txtitemInformation + "</th><th>Difficulty" + txtdifficulty + "</th><th>Complexity" + txtcomplexity + "</th></tr></thead><tbody id='searchDatafinal' style='font-size: 11px;background-color: #fff;'>";
var tr = "<tr class='rowSearch'>";
var questionNo = "";
for (var i = 0; i < items.length; i++)
{
var indexValue = finalQuestionArrayList.findIndex(x => x.Question == items[i].ID);
var valueOfFormSet = "";
if (indexValue != -1)
{
valueOfFormSet = finalQuestionArrayList[indexValue].FormSet;
questionNo = items[i].ID;

var itemInformation = items[i].ItemInformation;
if (itemInformation == null) {
itemInformation = "";
}
var difficlity = items[i].DifficulityText;
if (difficlity == null) {
difficlity = "";
}
var complexity = items[i].ComplexityText;
if (complexity == null) {
complexity = "";
}
var conareatext = items[i].ContentAreaText;
if (conareatext == null) {
conareatext = "";
}
var subcontentareatext = items[i].SubContentAreaText;
if (subcontentareatext == null) {
subcontentareatext = "";
}
tr = tr + "<td><a>" + questionNo + " </a></td><td>" + valueOfFormSet + "</td><td>" + conareatext + "</td><td>" + subcontentareatext + "</td><td>" + itemInformation + "</td><td>" + difficlity + "</td><td>" + complexity + "</td></tr>";

if (questionNoArrayList.toString().indexOf(questionNo) == -1)
{
questionNoArrayList.push(questionNo);
}

if (finalFormSetTableArrayList.toString().indexOf(valueOfFormSet) == -1)
{
finalFormSetTableArrayList.push(valueOfFormSet);
}
if (itemInformationArrayList.toString().indexOf(itemInformation) == -1) {
itemInformationArrayList.push(itemInformation);
}
if (difficlityArrayList.toString().indexOf(difficlity) == -1) {
difficlityArrayList.push(difficlity);
}
if (complexityArrayList.toString().indexOf(complexity) == -1) {
complexityArrayList.push(complexity);
}
if (conareatextArrayList.toString().indexOf(conareatext) == -1) {
conareatextArrayList.push(conareatext);
}
if (subcontentareatextArrayList.toString().indexOf(subcontentareatext) == -1) {
subcontentareatextArrayList.push(subcontentareatext);
}
}
}
var completebody = tbody +tr + "</tr></tbody></table>";
var dvTable = $("#mainDivFinalTable");
dvTable.html("");
//Append HTML in Main Div Area
dvTable.append(completebody);

$('#txtquestionNo').append('<option value="0">Select...</option>');
for (var index = 0; index < questionNoArrayList.length; index++)
{
$('#txtquestionNo').append('<option value="' + questionNoArrayList[index] + '">' + questionNoArrayList[index] + '</option>');
}
$('#ddlFinalFormSet').append('<option value="0">Select...</option>');
for (var index = 0; index < finalFormSetTableArrayList.length; index++) {
$('#ddlFinalFormSet').append('<option value="' + finalFormSetTableArrayList[index] + '">' + finalFormSetTableArrayList[index] + '</option>');
}
$('#txtcontentArea').append('<option value="0">Select...</option>');
for (var index = 0; index < conareatextArrayList.length; index++) {
$('#txtcontentArea').append('<option value="' + conareatextArrayList[index] + '">' + conareatextArrayList[index] + '</option>');
}
$('#txtsubContentArea').append('<option value="0">Select...</option>');
for (var index = 0; index < subcontentareatextArrayList.length; index++) {
$('#txtsubContentArea').append('<option value="' + subcontentareatextArrayList[index] + '">' + subcontentareatextArrayList[index] + '</option>');
}
$('#txtitemInformation').append('<option value="0">Select...</option>');
for (var index = 0; index < itemInformationArrayList.length; index++) {
$('#txtitemInformation').append('<option value="' + itemInformationArrayList[index] + '">' + itemInformationArrayList[index] + '</option>');
}
$('#txtdifficulty').append('<option value="0">Select...</option>');
for (var index = 0; index < difficlityArrayList.length; index++) {
$('#txtdifficulty').append('<option value="' + difficlityArrayList[index] + '">' + difficlityArrayList[index] + '</option>');
}
$('#txtcomplexity').append('<option value="0">Select...</option>');
for (var index = 0; index < complexityArrayList.length; index++) {
$('#txtcomplexity').append('<option value="' + complexityArrayList[index] + '">' + complexityArrayList[index] + '</option>');
}

}

2. Copy below method and change the control header according to requirement .
in below script added the dropdown in header to filter the data but if you want to change to text box then replace select with input

function searchRows(tblId) {
var tbl = document.getElementById('tableFinalResult');
var headRow = tblId.rows[0];
var arrayOfHTxt = new Array();
var arrayOfHtxtCellIndex = new Array();

for (var v = 0; v < headRow.cells.length; v++) {
if (headRow.cells[v].getElementsByTagName('select')[0])
{
var Htxtbox = headRow.cells[v].getElementsByTagName('select')[0];
if (Htxtbox.value != 0) {
if (Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
arrayOfHtxtCellIndex.push(v);
}
}
}
}

for (var i = 1; i < tbl.rows.length; i++) {
tbl.rows[i].style.display = 'table-row';
for (var v = 0; v < arrayOfHTxt.length; v++) {
var CurCell = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
var CurCont = CurCell.getElementsByTagName('span')[0];
var reg = new RegExp(arrayOfHTxt[v] + ".*", "i");
if (!CurCont) {
CurCont = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
}
if (CurCont.innerHTML.match(reg) == null) {
tbl.rows[i].style.display = 'none';
}
}
}

}

3. Below will be result

Wednesday, 2 August 2017

Create Dynamic HTML Table with edit functionality using jquery

1.

<tr>

<td rowspan='2'>Content Area</td>

<td colspan='3'>Difficulty Level 1</td>

<td colspan='3'>Difficulty Level 2</td>

<td colspan='3'>Difficulty Level 3</td>

<td rowspan='2'>Action</td>

</tr>

<tr>

</tr>

</thead>

<td class="totalCol">Total:</td>

</tr>

</tfoot>

</table>

2.

$(document).ready(function () {

uniqeQuestions.AddMore();

uniqeQuestions.CellChangeTotal();

uniqeQuestions.CellMaxLengthValodation();

});

3.