Need help on pdf templating

[nusilmar]

I need to format my pdf template to the most possible ressemblance to my "real" output, so i need to know how to pull the following :

- remove buttons from PDF ( don't know why but i have a "Return" button on my form and he shows in my pdf)
- insert images on the template
- correctly define page header and most important page footer ( to maintain page size equal even if the content varies)
- Define label and field positions, so that matches my real output
- Add boxes around fields

The idea is to make the pdf the most equal to my real paper form...

The information in the wiki does not help me much.

 

[troester]

You need to create a custom details template and use this as PDF template.
In HTML/CSS you can define width, height, positions in px or cm, so you should be able to position all you need.

http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/
http://fabrikar.com/forums/index.php?wiki/pdf-output/

 

[nusilmar]

Thank you for your help, unfortunely i didn't understood on how should i define the fields css on custom_css.php

So , i have in /components/com_fabrik/views/details/tmpl/mypdftemplate a custom_css.php with this code :

<?php
header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
$rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
$form = $view . '_' . $c;
if ($rowid !== '')
{
    $form .= '_' . $rowid;
}
echo "
 
* {font-family:arial!important}
 
#$form .foobar {
    display: none;
}
body {margin-top:0.1em;margin-bottom:0.1em}
#headerdompdf {
    display:block;
    position: fixed;
    top: 0px;
    width:100%;
    height:1.1em;
    border-bottom: 1px solid red;
}
#footdompdf {
    display:block;
    position: fixed;
    bottom: 0px;
    width:100%;
    height: 1.1em;
    border-top: 1px solid red;
}
#footdompdf .pagenum { position:absolute;
    right: 20px;}
#footdompdf .pagenum:after {
  content: counter(page) ; //This is including the page number at bottom right
}
#footdompdf .footleft {
    color:red;
}
 
#{$view}_$c fab_guia___numero_guia {
    border:1px solid black;
}
 
#{$form} .fabrikElementContainer.span12 {position:relative;margin-bottom:10px}
#{$form} .fabrikElementContainer .span4 {position:absolute;}
#{$form} .fabrikElementContainer .span8 {position:relative;top:0;left:32%;width:}
 
";
?>

And the "#{$view}_$c fab_guia___numero_guia { border:1px solid black;}" part is not working ( BTW : fab_guia___numero_guia is one of the fields i need to use)

So my question is :

I need to position each label and each field on the output to match the form we use in paper. How do i do it ?

 

[troester]

Depends on what you want to style, best is to select your PDF template for detais, too and examine with a dev tool like Firebug which class or id you have to use.
E.g. the element container (=label + content) in a details view has the CSS class fb_el_table___element_ro
so you would need
#{$form} .fabrikElementContainer .fb_el_table___element_ro {...}

 

[nusilmar]

Eureka !!! Finally someone explain how to use it !!!!!

BTW : Explanations on wiki not even near this explanation. Have to realize that i'm a little noob on this matters.

 

[nusilmar]

Bump :: No good, afterall. I guess i launched the fireworks to soon .

I'm putting this code (

#{$form} .fabrikElementContainer .fb_el_fab_guia___numero_guia_ro {
    position: fixed;    top: 30px;    right: 5px;    width:500px;    border:1px solid black;    margin-bottom:2px;}

but theres no change on the output .

This is my custom_css :

<?php
 
header('Content-type: text/css');
$c = (int) $_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
$rowid = isset($_REQUEST['rowid']) ? $_REQUEST['rowid'] : '';
$form = $view . '_' . $c;
if ($rowid !== '')
{
    $form .= '_' . $rowid;
}
echo "
*{font-family:arial!important}
body {margin-top:1.5em;margin-bottom:1.5em}
#headerdompdf {
    display:block;
    position: fixed;
    top: 0px;
    width:100%;
    height:1.1em;
    /* border-bottom: 1px solid red; */
}
#footdompdf {
    display:block;
    position: fixed;
    bottom: 0px;
    width:100%;
    height: 5em;
 
}
#footdompdf .pagenum { position:absolute;
    right: 20px;}
#footdompdf .pagenum:after {
  content: counter(page) ; //This is including the page number at bottom right
}
#footdompdf .footleft {
    color:red;
}
 
#{$form} .fabrikElementContainer .fb_el_fab_guia___numero_guia_ro {
    position: fixed;
    top: 30px;
    right: 5px;
    width:500px;
    border:1px solid black;
    margin-bottom:2px;
}
body {margin-top:0.1em;margin-bottom:0.1em}
";
?>

And this is my default.php :

<?php
 
defined('_JEXEC') or die('Restricted access');
?>
<div id="footdompdf">
    <span class="footleft"><?php echo $this->table->label;?></span>
    <span class="pagenum"><?php echo "<img src='http://www.mindafil.pt/images/imgpdf/rodape.jpg' height='100%' width='100%' />" ;?></span>
</div>
<div id="headerdompdf">
    <span class="headleft"><?php echo $this->table->label;?></span>
    <span class="pdfdate"></span>
</div>
 
 
<?php
$form = $this->form;
$model = $this->getModel();
 
if ($this->params->get('show_page_heading', 1)) : ?>
    <div class="componentheading<?php echo $this->params->get('pageclass_sfx')?>">
        <?php echo $this->escape($this->params->get('page_heading')); ?>
    </div>
<?php
endif;
 
if ($this->params->get('show-title', 1)) :?>
<div class="page-header">
    <h1><?php echo $form->label;?></h1>
</div>
<?php
endif;
 
echo $form->intro;
echo '<div class="fabrikForm fabrikDetails" id="' . $form->formid . '">';
echo $this->plugintop;
//echo $this->loadTemplate('buttons');
echo $this->loadTemplate('relateddata');
foreach ($this->groups as $group) :
    $this->group = $group;
    ?>
 
        <div class="<?php echo $group->class; ?>" id="group<?php echo $group->id;?>" style="<?php echo $group->css;?>">
 
        <?php
        if ($group->showLegend) :?>
            <h3 class="legend">
                <span><?php echo $group->title;?></span>
            </h3>
        <?php endif;
 
        if (!empty($group->intro)) : ?>
            <div class="groupintro"><?php echo $group->intro ?></div>
        <?php
        endif;
 
 
        $this->elements = $group->elements;
        echo $this->loadTemplate($group->tmpl);
 
        if (!empty($group->outro)) : ?>
            <div class="groupoutro"><?php echo $group->outro ?></div>
        <?php
        endif;
        ?>
    </div>
<?php
endforeach;
 
echo $this->pluginbottom;
echo $this->loadTemplate('actions');
echo '</div>';
echo $form->outro;
echo $this->pluginend;

They're both in /public_html/components/com_fabrik/views/details/tmpl/pdfmindafil

And i know i'm changing the right css file, because if i add this :

#{$form} .fabrikElementContainer.span12 {position:relative;margin-bottom:10px}
#{$form} .fabrikElementContainer .span4 {position:absolute;width:30%}
#{$form} .fabrikElementContainer .span8 {position:relative;top:0;left:31%;width:68%;width:450px;border:1px solid black;margin-bottom:2px;}

i get the result intended

Please see pdf so that you know what i'm talking about ( sorry but pdf is not in english , but you get the idea)
As you can see in the pdf all changes are working (includind span changes above) except the first field , that is the one with

#{$form} .fabrikElementContainer .fb_el_fab_guia___numero_guia_ro {position: fixed;top: 30px;right: 5px;width:500px;border:1px solid black;margin-bottom:2px;}

 

[nusilmar]

Still working on this, but some improvements already made :

Remember that i say on my first post that on my PDF was showing a BACK button ??

well my early workaround was to disable that button on the form, but that looses functionality on form , just so that it shows good on pdf. So what i came out now was to edit default_actions.php on the pdf template folder and removed the div where calls the buttons.

As for the rest still need help but i'm also trying to figure it out by my self, whatever comes first

 

[troester]

Yes, in your custom PDF template you can just stop displaying all buttons etc.
One means to debug the PDF template is to select it as details template and then use a browser dev tool.

 

[nusilmar]

Now there is one problem :

I re-wrote default.php and put the fields directly, so now i have exacly what i want BUT only in debug, when i create the PDF most of the spans and divs are completely misplaced. Is there a limitation ? Should i use ( ugh) TABLES ???