Need a special offer?Find out if your project fits.
+

adding a custom title to a pdf report.

Answered
Cedric Gaines asked on March 30, 2020

Good day,
How would I go about capturing the text out of a textbox and adding this string / title to a pdf export?
So basically I have a text box, and need it to be included in a pdf export.  (basically a custom header / label of an pdf / image export).
Thanks,

3 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster March 31, 2020

Hi Cedric,
 
Thank you for reaching out to us!
 
The desired behavior can be achieved by adding the corresponding header property of the options object and specifying the latter as the parameter of the exportTo() API call:
 

function exportPDF() {
var headerCaption = "Hello World!"
var options = {
header: headerCaption
}
pivot.exportTo('pdf', options);
}

 
We've prepared a quick JSFiddle example to demonstrate this functionality: https://jsfiddle.net/flexmonster/orm6Lw72/
 
Please let us know if this helps.
 
Best regards,
Mykhailo

Public
Cedric Gaines March 31, 2020

If possible is it possible to customized the title utilizing the button included in the control.  I would prefer not to have 2 export to pdf buttons on the application. (a custom one, and the one included in the app).  Is there something I can do to have the same effect youve shown using the default button,
 
OR 
Can I remove the export to image and pdf options form the control so that I only have one export to pdf and image button(s).
 
Thanks,

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 1, 2020

Hi Cedric,
 
We would like to confirm that both of the mentioned scenarios are possible to achieve in Flexmonster.
 
This can easily be done using the beforetoolbarcreated event handler, which allows you to customize the toolbar as you wish. To use it, you will need to define beforetoolbarcreated as a property of Flexmonster object when initializing the pivot table:
 

var pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true,
    beforetoolbarcreated: customizeToolbar,
... });

After this, you will need to define the customizeToolbar function itself. Since the default toolbar is represented by an array of objects (tabs), it all comes down to simple manipulations with arrays. For example, to remove some of the options from the Export dropdown menu, we can filter the tabs array by the tabs' titles:
 

function customizeToolbar(toolbar) {
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {

let exportTab = tabs.filter(tab => {
return tab.title == "Export";
});

exportTab["0"].menu = exportTab["0"].menu.filter(item => {
return item.title == "To Image" ||
item.title == "To PDF";
});

return tabs;
}
}

 
In a similar manner, you can also replace the default handler function of a tab (or an option from the tab's drop-down menu) by redefining it in the customizeToolbar function:
 

        ....
exportTab["0"].menu[1].handler = function() {
let headerCaption = prompt("Enter your header: ");
pivot.exportTo('pdf', {
header: headerCaption
});
}

return tabs;

 
A detailed description of this functionality can be found on the corresponding documentation page: https://www.flexmonster.com/doc/customizing-toolbar/
 
We've also prepared a quick JSFiddle example to illustrate the described approach: https://jsfiddle.net/flexmonster/8g1drLkq/
 
We hope this helps!
 
Best regards,
Mykhailo

Please login or Register to Submit Answer