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.

blog-2-html

 

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:

HTML form SharePoint 6

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)

HTML form SharePoint 1

 

  • Certificate Schema (Multiline text – Enhanced rich text)

HTML form SharePoint 2

 

  • 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

HTML form SharePoint 3

 

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

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

HTML form SharePoint 4

 

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

HTML form SharePoint 5

 

  • 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:

HTML form SharePoint 7

 

  • 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):

 

  • 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!

About

View all posts by

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

  1. AwesomeSauce !! You are a gem of a Coach… Please do more articles like this.. Please update your blog with more articles !!

Leave a Reply