Formatting issue with pdfCreatePagesGroup

ThePolymorph

Hi,

I've come across an issue where if the data being passed to a header footer form contains a long text string it is impacting the page width. In my case the data contains an encrypted URL which is hundreds of characters long.

If I look at the HTML generated by pdfCreatePagesGroup with a short string I get:

<span style='position:absolute;text-transform: none;opacity: 0.01;fontsize:1.1px'>group@@@InBvdGF0byI=@@@</span>

and this if the data contains a really long URL

<span style='position:absolute;text-transform: none;opacity: 0.01;fontsize:1.1px'>group@@@eyJTZXR0aW5ncyI6eyJnZW5iZ3RoZW1lY29sb3IiOiIjNDE2YzkwIn0sIlNjaG9vbCI6eyJJZCI6MSwiVW5pcXVlSWQiOiI0Y2E2OTMzYy1hOGY5LT (gets cut off on the page due to its length but spans the entire page and throws the width)

Is this a known issue and is there an easy work around?

Thanks again.
(I'm using chrome-pdf and jsrender)

jan_blaha

It is a limitation. I will document it.

Try to pass small values, just ids or indexes to an array.

ThePolymorph

Thanks @jan_blaha The value being passed is a link to an image in azure storage which varies per report so I'm not sure how that will help. Is there any way to override the <span> width?

jan_blaha

How do you assemble the image url? I think there is a way to have image urls on the root data and pass just an index as group value.
You can use custom script and beforeRender hook to modify the input data as you need.

ThePolymorph

Hi @jan_blaha

Can you please give me some more direction on that solution please.

Here are the details of how we are using the URL.

The URL is assembled in .Net and passed through in JSON format as follows:

{
    "Data": [
        {
            "HeaderFooter": {
                "Student": {
                        "Id": 9,
                        "ImageUrl": "https://website/folder-path/filename.jpg?securitytokendetail"
                    },
				"School": {
					"EmblemUrl" : "https://website/folder-path/filename.jpg?securitytokendetail"
					}				
		},
		"LotsofOtherSections": {}

in .Net jsreport is called like this:

            var PDFreport = await rs.RenderByNameAsync("reportname", reportJson, cancellationToken);
                return File(PDFreport.Content, "application/octet-stream");
            }

In jsreport in the main template we use this:

{{:~pdfCreatePagesGroup(HeaderFooter)}}

In the header footer the URL is referenced like this, note this is one example, the student image can also be displayed.

 <img src={{:School.EmblemUrl}} onerror="this.onerror=null;this.src='{#asset blankschoollogo.png @encoding=dataURI}';" class="logo" />

Thanks again.

jan_blaha

This post is deleted!

jan_blaha

Extend for example HeaderFooter with an Id attribute when you prepare the reportJson.
In main template do {{:~pdfCreatePagesGroup(HeaderFooter.Id)}}
In the merged operation search the root data Data array for HeaderFooter with the passed Id.
Get the ImageUrl and use it.

ThePolymorph

@jan_blaha Thanks for that I get the concept but I'm not sure how to do the second part i.e. searching for the id in the merged operation. For the sake of time we ended up implementing a URL shorterning service but I think your solution would make life easier going forward. We're now finding that using {{if}} fails if we reference any of the values e.g. {{>~root.$pdf.pages[#index].group.Student.Student.FullName}} will return the value we need but wrap it in an if statement and we get Cannot read property 'group' of undefined at Object.callbackRequests. Is this a known issue with a workaround (I have checked the forum for other {{if}} issues but cannot find this one specifically.)

ThePolymorph

Looks like the answer is to use helpers instead. That gets me moving forward at least. I'm now wrapping sections in <div style={display:{{:~helpername(mysettings)}} to return "block" or "none" which works pretty well.

ThePolymorph

@jan_blaha would you be able to provide an example of how to search the root data in the merged operation using jsrender? Thanks again.

ThePolymorph

Hi @jan_blaha with regards to your comment "In main template do {{:~pdfCreatePagesGroup(HeaderFooter.Id)}} In the merged operation search the root data Data array for HeaderFooter with the passed Id." How do you search for the id the merged operation? is there an example somewhere I can reference?

jan_blaha

Something like this could work

function findSomething(root, id) {
  return root.items.find(i => i.id ===id)
}

{{:~findSomething(~root, ~root.$pdf.pages[0].group).name}}