HTML Based Certificate Generation using REST API in SharePoint Online

Introduction

As Microsoft is going away from InfoPath, developers are seeking to leverage other technologies to create their forms. HTML based forms in SharePoint is the best alternative for InfoPath forms. It needs a more tech savvy person to create and maintain them, but the prize is valuable. Our HTML form in SharePoint will be responsive and you can use it on mobile devices without any problem, something that Microsoft InfoPath is not good at it.

In the previous article, I have presented a way about the REST API trick to generate InfoPath Form programmatically. In this Article, I would like to demonstrate a different approach to use REST API with the help of OOB SharePoint features.

This is also a scenario based article to understand the use of the client side REST API with the help of JavaScript, HTML, CSS and OOB SharePoint online rich text field feature.

Problem Statement: We have created a training module on SharePoint online for a university. Students can use Microsoft SharePoint inline to answer multiple choice questions and based on their score, they will receive certificates (Either PDF/Printable format was fine with them).

The final HTML based certificate in SharePoint online should look like this:

Technical Approach:

I have a SharePoint online list containing certificate columns. SharePoint online list has below columns:

Title (Certificate Title – Single line of text)
Certificate Type (choice type)

Certificate Schema (Multiline text – Enhanced rich text)

Let’s add a certificate to the list.

Make sure to click on the Edit source as we need to insert HTML to Certificate Schema field

Copy and Paste the below HTML based certificate code to Certificate Schema field

<div style="border: 10px double #DB0E0E; padding: 50px 30px 40px 30px; margin: 0px auto 10px auto; text-align: center; font-family: Helvetica, Arial, sans-serif; width: 800px;">
		<div class="logo"><img src="/sites/demo/Style%20Library/logo1.png"></div>
		<p style="font-family: 'Times New Roman', serif; font-size: 33px; font-weight: bold; color: #DB0E0E !important; margin: 35px;">SharePointJunkies Certificate</p>
		<p style="font-size: 16px;">To: <strong>[User Name]</strong></p>
		<p style="font-size: 16px;">This certificate is issued to [User Name] for completing the exam [Quiz Name].</p>
		

		<hr style="margin: 20px 20px 20px 20px; border: double; color: #DB0E0E; height: 4px;">

		<h3>Thank you for taking the time to complete [Quiz Name]</h3>
		<h2>You got this certificate because you have successfully completed this certification.</h2>
		<p>This certificate is created by SharePointJunkies and Can be used to demonstrate your SharePoint skills.</p>		
	</div>

<p style="font-family: 'Times New Roman', serif; font-size: 33px; font-weight: bold; color: #DB0E0E !important; margin: 35px;">SharePointJunkies Certificate</p>

<p style="font-size: 16px;">This certificate is issued to [User Name] for completing the exam [Quiz Name].</p>

<h3>Thank you for taking the time to complete [Quiz Name]</h3>

<h2>You got this certificate because you have successfully completed this certification.</h2>

<p>This certificate is created by SharePointJunkies and Can be used to demonstrate your SharePoint skills.</p>

</div>

Save the list item, the item should look like below:

As mentioned earlier, we have a training completion page to end users. Which looks like below:

We have already placed appropriate HTML attributes to the page. From above page we are trying to retrieve user information with the help of JavaScript as below:

On click of the Get Certificate Button, we have attached an event to generate certificate which can be printed as well as saved as PDF. We have achieved it with the help of below code (Code can be used from a content editor web part):

<script type="text/javascript" src="https://sharepointjunkies.sharepoint.com/sites/demo/Style Library/jquery-1.9.1.js"></script>

<style type="text/css">
    input[type=button] {
        padding: 15px 15px;
        background: #ccc;
        border: 0 none;
        cursor: pointer;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        margin-left: 0px !important;
        font-size: large;
    }
</style>


<h1 class="quizuser" quizuser="Farshid">Hi Farshid,</h1>

<h1 class="qzname" quizname="70-480">Thank You for completing the Exam 70-480.</h1>

<h1 class="quizscore" quizscore="856/1000">We are pleased to inform you that you have acheived 856/1000.</h1>

<h1>Kindly click below to get your certificate.</h1>
<br />
<input class="getCertificate" name="getCertificate" type="button" value="Get Certificate" onclick="return false;" />

<br />
<div class="certPlaceholder"></div>

<script type="text/javascript">


    $(document).ready(function () {

        //Bind event to generate certificate button
        $('.getCertificate').click(function () {
            var appWebUrl = "https://sharepointjunkies.sharepoint.com/sites/demo/";
            var listName = "Certificates";
            var username = $('.quizuser').attr('quizuser');
            var quiz = $('.qzname').attr('quizname');
            var score = $('.quizscore').attr('quizscore');

            var certURL = appWebUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=ID,Title,CertificateType,CertificateSchema&$filter=(CertificateType eq '" + quiz + "')";
           
            $.ajax({
                url: certURL,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    getCertificateSchema(data.d.results);
                },
                error: function (data) {
                    alert(JSON.stringify(data));
                }
            });

            function getCertificateSchema(data) {
                dLength = data.length;
                if (dLength >= 0) {
                    for (var i = 0; i < dLength; i++) {                       
                        var extData = data[i].CertificateSchema;
                        extData = extData.replace(/\[User Name\]/gi, username);
                        extData = extData.replace(/\[Quiz Name\]/gi, quiz);
                        extData = extData.replace(/\[User Score\]/gi, score);
                        printCert(extData);
                    }
                }
            }
        });

    });


    //Print or save certificate
    function printCert(certdata) {
        //Get Original Content
        var originalContents = document.body.innerHTML;
        //Print Document
        var printContents = certdata;//jQuery('.certPlaceholder').html();
        var objDoc = "";
        objDoc += "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
        objDoc += "<html>";
        objDoc += "<body>";
        objDoc += "<head>";
        objDoc += "<title>";
        objDoc += "</title>";
        objDoc += "</head>";
        objDoc += printContents;
        objDoc += "</body>";
        objDoc += "</html>";
        document.body.innerHTML = objDoc;
        window.print();
        document.body.innerHTML = originalContents;
        window.location.reload();
    }
</script>

input[type=button] {

padding: 15px 15px;

background: #ccc;

border: 0 none;

cursor: pointer;

-webkit-border-radius: 0px;

border-radius: 0px;

margin-left: 0px !important;

font-size: large;

}

</style>

<h1 class="quizuser" quizuser="Farshid">Hi Farshid,</h1>

<h1 class="qzname" quizname="70-480">Thank You for completing the Exam 70-480.</h1>

<h1 class="quizscore" quizscore="856/1000">We are pleased to inform you that you have acheived 856/1000.</h1>

<h1>Kindly click below to get your certificate.</h1>

<br />

<br />

$(document).ready(function () {

//Bind event to generate certificate button

$('.getCertificate').click(function () {

var appWebUrl = "https://sharepointjunkies.sharepoint.com/sites/demo/";

var listName = "Certificates";

var username = $('.quizuser').attr('quizuser');

var quiz = $('.qzname').attr('quizname');

var score = $('.quizscore').attr('quizscore');

var certURL = appWebUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=ID,Title,CertificateType,CertificateSchema&$filter=(CertificateType eq '" + quiz + "')";

$.ajax({

url: certURL,

method: "GET",

headers: { "Accept": "application/json; odata=verbose" },

success: function (data) {

getCertificateSchema(data.d.results);

error: function (data) {

alert(JSON.stringify(data));

}

});

function getCertificateSchema(data) {

dLength = data.length;

if (dLength >= 0) {

for (var i = 0; i < dLength; i++) {

var extData = data[i].CertificateSchema;

extData = extData.replace(/\[User Name\]/gi, username);

extData = extData.replace(/\[Quiz Name\]/gi, quiz);

extData = extData.replace(/\[User Score\]/gi, score);

printCert(extData);

}

});

//Print or save certificate

function printCert(certdata) {

//Get Original Content

var originalContents = document.body.innerHTML;

//Print Document

var printContents = certdata;//jQuery('.certPlaceholder').html();

var objDoc = "";

objDoc += "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";

objDoc += "<html>";

objDoc += "<body>";

objDoc += "<head>";

objDoc += "<title>";

objDoc += "</title>";

objDoc += "</head>";

objDoc += printContents;

objDoc += "</body>";

objDoc += "</html>";

document.body.innerHTML = objDoc;

window.print();

document.body.innerHTML = originalContents;

window.location.reload();

}

</script>

On click of Get Certificate, you will be prompted to print or save the certificate as per your performance.

HTML based forms are the best alternative for InfoPath forms in SharePoint online. You may need to put more time to design them, but you have total flexibility on your end result and your HTML based form in SharePoint online is fully responsive, good for handheld devices!

SharePoint Junkies

HTML Based Certificate Generation using REST API in SharePoint Online

Introduction

About SharePoint Junkies

One thought on “HTML Based Certificate Generation using REST API in SharePoint Online”

Leave a Reply Cancel reply

Introduction

Share this:

About SharePoint Junkies

One thought on “HTML Based Certificate Generation using REST API in SharePoint Online”

Leave a Reply Cancel reply