Thursday, July 6, 2017

Generate pdf documents for iOS, Android & Windows UWP using Xamarin Forms and Syncfusion Essentials–Part 2

Part 1 of the post can be found here
There I talk about getting started, and generating a simple pdf invoice.

The updated source code is in the same repository here
Code of interest is in the GenerateInvoiceCommand, the PdfGenerator & PdfExtensions

Today, I’m going to be talking about generating line items for the invoice. Here’s a screenshot of the generated result on all three platforms:
image
    
With Syncfusion Essentials Pdf, there are two main options for this: PdfLightTable & PdfGrid

After having implemented both, I don’t really see why both exist – the effort and functionality is about the same for both options.
I can say though, that PdfGrid definitely seems the more stable of the two – I found a few bugs in PdfLightTable along the way.

A look at the result: PdfLightTable on the left, and PdfGrid on the right

imageimage

Some things to consider (included in the sample code above)

More documentation on pdf grid and light table can be found here

Adding data

Both types used direct data-source methodologies.

Grid:
image

LightTable:
image

Sizing columns to content

Unfortunately this isn’t as simple as it should be. Static widths are easy – content not so much.
I created extensions for both LightTable and PdfGrid here (currently LightTable doesn’t appear to work)
Currently we have to cycle through all the column data, and measure which is the longest text, and then set the width to the max content width, hence the need for data, page width and font used.

image

Styling the table

PdfGrid has some built-in styles, as well as customization
image

LightTable you can customize the same as with PdfGrid – I created an extension to apply the most common properties to mimic the built-in style of the PdfGrid
image

Paginating the data

This applies to both table types, although again, LightTable seems to have some trouble honoring the PageinateBounds property – which is needed to the table doesn’t render over any footer data.
image

Drawing the pdf document

image

simple enough.

There’s tons more functionality in syncfusion’s pdf library – go check it out.

Clone the repo and play around with the code - and log an issue if you find any bugs in there :)

And don’t forget syncfusion’s awesome community license that  offers their controls free for indie hackers and small businesses.

No comments: