I am sharing the code below please see the code,the selected cell values are storing in variable, I want to get this HTML variable and set that variable values in single line text field in CRM main form.I wrote this code in Web Resources HTML in MS CRM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hexagonal Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="jquery opensource hexgrid hex grid" />
<meta name="description" content="A simple jQuery Hex grid Widget, implemented using SVG, for prototyping hex-grid based games." />
<link href="netdna.bootstrapcdn.com/.../bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="netdna.bootstrapcdn.com/.../bootstrap-responsive.min.css" rel="stylesheet">
<link href="netdna.bootstrapcdn.com/.../font-awesome.css" rel="stylesheet">
<script src="code.jquery.com/jquery-2.1.4.min.js" ></script>
<script src="netdna.bootstrapcdn.com/.../bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="row">
<form class="form-horizontal" onsubmit="return false;">
<div class="control-group">
<label>Enter Number of Rows</label>
<div class="form-control">
<input class="input" id="rows" placeholder="Rows" value="5"/>
</div>
</div>
<div class="control-group">
<label>Enter Number of Columns</label>
<div class="form-control">
<input class="input" id="columns" placeholder="Columns" value="7"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="hidden" class="input" id="radius" placeholder="Radius" value="40"/>
</div>
<div class="control-group">
<div class="controls">
<button class="btn" id="rebuild" style="margin-top: -199px; margin-left: 183px;">Create Grid</button>
</div>
</div>
</div>
</form>
</div>
<div class="span6" style="text-align:center">
<div id="container"></div>
<div class="span6" style="text-align:center">
<div id="container"> </div>
<h2><small id="logger">Not at clicked</small></h2>
</div>
</div>
</div>
</div>
<div id="fb-root"></div>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<style>
.hexfield {
fill: transparent;
stroke: black;
stroke-width: 2;
}
.hexfield:focus {
outline:none;
}
.hexfield:hover {
fill: grey;
}
.hexfield:active {
fill: grey;
outline: none;
}
.hexfield.clicked{
fill: red;
}
.block-content {
margin: 0 auto;
padding: 40px 20px 1px;
max-width: 100%;
overflow-x: visible;
-webkit-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
</style>
<script>
$.fn.hexGridWidget = function (radius, columns, rows, cssClass) {
'use strict';
var createSVG = function (tag) {
return $(document.createElementNS('http://www.w3.org/2000/svg', tag || 'svg'));
};
return $(this).each(function () {
var element = $(this),
hexClick = function () {
var hex = $(this);
element.trigger($.Event('hexclick', hex.data()));
},
height = Math.sqrt(3) / 2 * radius,
svgParent = createSVG('svg').attr('tabindex', 1).appendTo(element).css({
width: (1.5 * columns + 0.5) * radius,
height: (2 * rows + 1) * height
}),
column, row, center,
toPoint = function (dx, dy) {
return Math.round(dx + center.x) + ',' + Math.round(dy + center.y);
};
for (row = 0; row < rows; row++) {
for (column = 0; column < columns; column++) {
center = {x:Math.round((1 + 1.5 * column) * radius), y: Math.round(height * (1 + row * 2 + (column % 2)))};
createSVG('polygon').attr({
points: [
toPoint(-1 * radius / 2, -1 * height),
toPoint(radius / 2, -1 * height),
toPoint(radius, 0),
toPoint(radius / 2, height),
toPoint(-1 * radius / 2, height),
toPoint(-1 * radius, 0)
].join(' '),
'class':cssClass,
tabindex:1
})
.appendTo(svgParent).data({center:center, row:row, column:column}).on('click', hexClick).attr({'hex-row': row, 'hex-column': column});
}
}
});
};
var rebuild = function () {
var
radius = parseInt($('#radius').val()),
columns = parseInt($('#columns').val()),
rows = parseInt($('#rows').val()),
cssClass = 'hexfield';
var anil=[];
$('#container').empty().hexGridWidget(radius, columns, rows, cssClass).on('hexclick', function (e) {
$('#logger').text('clicked [' + e.row + ',' + e.column + ']');
var data=('['+e.row + ',' +e.column+']');
anil.push(data);
anil = $.unique(anil);
console.log(anil);
document.getElementById("logger").innerHTML = anil;
});
$('#container .hexfield').click(function () {
this.classList.toggle('clicked');
});
};
$('#rebuild').click(rebuild);
rebuild();
</script>
<body>
</html>
The selected cells values are storing in anil variable , I want to get anil variable from HTML and set this anil variable values in Single line of text filed in D365 CRM.
