Hi again! I have been successful in creating widgets that hold the images on the catalog form inside the Service Portal. I have also been able to create a PDF with "blank" images and attach it to a record. The only problem I am having now is to get the image from the widget to be added to the PDF. Does anyone have some experience/knowledge on how to do this?
I have created a widget that has a button to create PDF:
HTML Template:
<form class="form-horizontal">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div>
Click Button to create a PDF
<button class="btn btn-primary" ng-click="createPDF(true)">Create PDF</button>
</div>
</form>
Client Script:
function($scope) {
/* widget controller */
var c = this;
var g_form = $scope.page.g_form;
var field = $scope.page.field;
// See all the methods available
console.log(g_form);
$scope.createPDF = function(bool) {
// Build pdf document and filename
// Format size is based on provided sample business card pdf
var newfields = g_form.getFieldNames();
console.log("newfields is" + newfields);
for (var i in newfields) {
var field_obj = g_form.getField(newfields[i]);
var value = g_form.getDisplayValue(newfields[i]);
if (newfields[i] == 'cardfront') {
//alert('c.options.pdf_name is ' + c.options.pdf_name);
//c.options.pdf_name = value;
}
if (newfields[i] == 'cardback') {
//alert('c.options.pdf_name is ' + c.options.pdf_name);
//c.options.pdf_name = value;
}
if (newfields[i] == 'PDFpreview') {
//alert('c.options.pdf_name is ' + c.options.pdf_name);
//c.options.pdf_name = value;
}
}
var filename = g_form.getValue("name").toString() + '.pdf';
if(filename=='.pdf') {
filename = 'NoName.pdf';
}
html2canvas(document.getElementById('previewFront'), {
onrendered: function (canvas) {
console.log('canvas is ' + canvas);
var img = canvas.toDataURL("image/png");
//alert('img is ' + img);
var doc = new jsPDF({
orientation: 'landscape',
unit: 'in',
format: [2.25, 3.75]
});
alert('In html2canvas function');
//doc.addImage(img, 'PNG', 2.25, 3.75);
//doc.addPage();
// Create record on u_db_pdf table to hold PDF attachment
var ga = new GlideAjax('CWTPDFAjax');
ga.addParam("sysparm_name", 'createRecord');
ga.addParam("sysparm_filename", filename);
ga.getXML(function(response) { attachPDF(response, filename, doc); });
}
});
}
}
function attachPDF(response, filename, doc) {
var answer = response.responseXML.documentElement.getAttribute('answer');
console.log('answer is ' + answer.toString());
//console.log('doc.output() is ' + doc.output());
var dataObject = {
"agent": "AttachmentCreator",
"topic": "AttachmentCreator",
"name": filename+":application/pdf",
"source": "u_db_pdf:"+answer.toString(),
"payload": btoa(doc.output())
};
//alert('In Function attachPDF!');
// Create attachment linked to the newly created u_db_pdf record
jQuery.ajax({
type: "POST",
url: "/api/now/table/ecc_queue",
headers: {"Accept": "application/json", "Content-Type": "application/json", "X-UserToken": window.g_ck},
data: JSON.stringify(dataObject)
}).fail(function(jqXHR, textStatus) {
console.error('Attachment request failed: ' + jqXHR.responseText.error.detail);
});
console.log('Logging Message after jQuery!');
}
This is the PDF that gets attached. I am unsure if the image was put in this document and then a blank one overwrote it or if it never put the image in this document. I provided the HTML code and client code in the button widget. The images are on the page but in a different widget. I think my code grabs the image, but I am having trouble getting the image to the PDF. Hopefully someone here on the community can assist me in what I might be missing?
