Skip navigation
All Places > Getting Started > Blog > Authors piromanas

Getting Started

2 Posts authored by: piromanas

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.

Hi everyone,

 

Not so long ago i was asked to build a report from List which used Nintex Froms with repeating section. I thought that it is almost impossible until i found few blog posts about using XML as sub-report  data source, so i will try to show you all how simple and how powerful it can be.

 

1. Create a SharePoint list with Nintex Forms with repeating section. In my case i was creating Welding certificates list with information about welder and his techniques.

As you see the table below which i call WeldingProcessTable is repeating section.

2. Create a Report with Reporting Services (SSRS) i use 2008 version.

There is data source to sharepoint list and you can see a subreport in last column of the table. This subreport will point to the repeating section report which we will build in next step.

 

3. Now i am building a subreport called WeldingProcessTable (Just add new report item to the project):

Now for the subreport create Data source with type XML: and save it.

Now we need to add a dateset. The question which i asked my self in first place was How do i create those fields in dataset. There are 2 ways.

a) Doing it by adding all fields one by one:

Or

b) Doing it in good IT lazy fashion Copy XML data from your repeating section column. But to be able to do that your Repeating section must be connected with list column of type Multiple lines of text. Then add this column to your view and you will be able to see XML of your repeating section:

So when you copy this XML of your repeating section add it to that data set query (<Query><XmlData><Root>{Your Repeating section XML}</Root></XmlData></Query>) and fields will be auto populated.

Next click fx button nect to the query input and replace XML with this text:

="<Query><XmlData><Root>"&Parameters!XMLData.Value &"</Root></XmlData></Query>"

 

Now create Parameter with name "XMLData", and you almost there.

 

What have you done is you created subreport with dynamic data source which will get data from parameter XMLData.

 

4. Edit subreport properties in main report:

Give a name and set a report as subreport like in picture above.

Then go to Parameters tab and add parameter.

In the value field select your Multiple line text field which is connected to your repeating section.

And you almost Done.

 

5. Last thing which took me some time to realize is when you will publish your project to SharePoint you will need to go to subreport edit his embeded datasource and set custom windows user for authentication.

Done. I hope this will help you saving some time

Filter Blog

By date: By tag: