piromanas

How to build responsive HTML5 report with barcode from list item using Nintex Forms and Workflows

Blog Post created by piromanas on Oct 15, 2015

Hello Community again,

 

This time i want to share my knowledge and discovery how to build dynamic HTML 5 responsive reports from SharePoint list item.

 

I came up with this technique when i got a project to build a consignment process routine in SharePoint. The hardest part was how should I build a report if there is no reporting action or print form action in Nintex Forms or Wrokflows. And another problem was the Customer requirement that the report should be responsive (work in all type of screens) and in the report it's ID should be converted to barcode. So i started to think which tool deals the best with responsive design and the #1 was HTML5 and CSS3 with Twiter Bootstrap framework.

And the barcode requirement i solved with JS library BARCODE : JQUERY PLUGIN TO CREATE BARCODE ONLINE

 

 

So lets start.

 

1. First of all i build a list with corresponding data

All fields are single text line fields apart one which will be link to html report.

 

2. Build you custom form with repeating sections and all the data needed

3. Now we need to create HTML report template and put it in library (my HTML template looks like this:)

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Sample Invoice</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <style>

      @import url(http://fonts.googleapis.com/css?family=Bree+Serif);

      body, h1, h2, h3, h4, h5, h6{

      font-family: 'Bree Serif', serif;

      }

    </style>

      <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

      <script src="http://portal.wsy.lan/Sprendimai/vaztarasciai/HTMLTemplates/jquery-barcode.min.js"></script>

      <script>

          $(document).ready(function(){

                      $("#barcode").barcode("{ID}", "code128",{barWidth:5, barHeight:50});}

          );

      </script>

  </head>

 

  <body>

    <div class="container">

      <div class="row">

        <div class="col-xs-12 text-center">

          <h2>Krovinio važtaraštis</h2>

          <h2><small>Nr #{InvoiceNr}</small></h2>

        </div>

      </div>

      <div class="row">

        <div class="col-xs-5 pull-left">

          <div class="panel panel-default">

            <div class="panel-heading">

              <h4>Siuntėjas:</h4>

   <h5><a href="#">{FromName}</a></h5>

            </div>

            <div class="panel-body">

              <p>

                Reg. Adresas: {FromAddress} <br>

                PVM kodas: {FromPVMCode} <br>

                Įmonės kodas: {FromCompanyCode} <br>

                Ats. asmuo: {FromResponsible} <br>

                Tel: {FromTel} <br>

              </p>

            </div>

          </div>

        </div>

        <div class="col-xs-5 pull-right text-right">

          <div class="panel panel-default">

            <div class="panel-heading">

              <h4>Prekių / Paslaugų gavėjas:</a></h4>

   <h5><a href="#">{ToName}</a></h5>

            </div>

            <div class="panel-body">

                <p>

                    Reg. Adresas: {ToAddress} <br>

                    PVM kodas: {ToPVMCode} <br>

                    Įmonės kodas: {ToCompanyCode} <br>

                    Ats. asmuo: {ToResponsible} <br>

                    Tel: {ToTel} <br>

                </p>

            </div>

          </div>

        </div>

      </div>

      <!-- / end client details section -->

      <table class="table table-bordered">

        <thead>

          <tr>

            <th>

              <h4>Eil.Nr.</h4>

            </th>

            <th>

              <h4>Prekių/paslaugų pavadinimas</h4>

            </th>

            <th>

              <h4>Sutarties Nr.</h4>

            </th>

            <th>

              <h4>Užsakymo Nr.</h4>

            </th>

            <th>

              <h4>Matavimo vnt.</h4>

            </th>

  <th>

              <h4>Kiekis</h4>

            </th>

          </tr>

        </thead>

        <tbody>

          {RepSec1}

        </tbody>

      </table>

   <table class="table table-bordered">

        <thead>

          <tr>

            <th>

              <h4>Eil.Nr.</h4>

            </th>

            <th>

              <h4>Prekių/paslaugų pavadinimas</h4>

            </th>

            <th>

              <h4>Tikslas (remontas, eksplotavimas)</h4>

            </th>

            <th>

              <h4>Inventorinis Nr.</h4>

            </th>         

          </tr>

        </thead>

        <tbody>

          {RepSec2}

        </tbody>

      </table>

<div class="row">

    <div class="col-md-4 pull-right">

        <div class="pull-right" id="barcode"></div>

    </div>

</div>

 

 

      <div class="row">

        <div class="col-md-4 col-xs-12">

          <div class="panel panel-info">

            <div class="panel-heading">

              <h4>Krovinį išvežė</h4>

            </div>

            <div class="panel-body">

              <p>Vardas:</p>

              <p>Pavardė:</p>

              <p>Pareigos: </p>           

            </div>

          </div>

        </div>

        <div class="col-md-4 col-xs-12">

          <div class="span7">

            <div class="panel panel-info">

              <div class="panel-heading">

                <h4>Krovinį priėmė</h4>

              </div>

              <div class="panel-body">

   <p>Vardas:</p>

   <p>Pavardė:</p>

   <p>Pareigos: </p>           

   </div>

            </div>

          </div>

        </div>

  <div class="col-md-4 col-xs-12">

          <div class="span7">

            <div class="panel panel-info">

              <div class="panel-heading">

                <h4>Kontrolės tarnybos atžyma</h4>

              </div>

              <div class="panel-body">

   <p>Vardas:</p>

   <p>Pavardė:</p>

   <p>Pareigos: </p>           

   </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

 

Now lets look at code in lines where you see {someVariable} type text. This tags will be replaced with Nintex forms field values, so after a workflow which we will build in next step we will be able to generate dynamic HTML 5 reports.

One more thing about barcode. In line 15-19 there is a simple javascript using already mentioned jquery-barcode library which will let us to generate barcode from the form ID.

 

4. Building a workflow.

a) Get the repeating sections data to multiple line text variable

b) Parse repeating section fields to collections

c) Iterate through collections and dynamically build an HTML table

d) Get the template data with Web Request action GET method and save it to multi line text variable

e) Switch tags in template with fields from the form and generated HTML table

f) PUT the new generated report with Web request action into reports library

 

How it looks and what is important to look at:

 

a) in XML input parse the FormData using inline function XmlDecode

 

b) In this step we don't need inline function, because it is already in good format.

c) Now count one of your collections and use that count number to loop through all of them in one loop action:

In the end of the loop build you dynamic HTML table:

d) Getting the template data stream to multitext variable.

In URL address use link to the html template and request method GET.

e) Lets switch tags with RegExp actions:

f) And the last PUT the data stream through Web request action with HTTP method PUT. The URL will point to new reports library.

And the last thing is to update a link after report will be generated.

 

The update of the link type field uses syntax like that {URL},{Name of the link}

 

And the result is dynamic, responsive HTML5 report with barcode inside

Here you go. I hope it will save you a lots of time if you will bump in similar project. Why i like this technique so much is because it doesn't require expensive SSRS 2008 or other reporting tools, and is very easy achievable.

 

So like and share and let me know how do you liked or maybe you already had similar projects and what was your solution path.

P.S. Mine was painful but generous in terms of knowledge   I will also attach Nintex Form, workflow and report template in this post.

Outcomes