This topic is locked
[SOLVED]

 Custom input pages

10/6/2019 1:51:24 PM
PHPRunner General questions
S
Steve Seymour author

I create output PDFs using a PDF template (empty PDF form) and setasign FPDF/ FPDI.

Using setasign I can position field values accurately along with images (signatures).

This works very well.
I would like to be able to make the add/ edit pages resemble the PDF form/template, but I don't know

if its possible or where to start making the input pages (add/ edit) look like the output PDF.
Has anyone created custom Add/ Edit pages that resemble real PDF forms ... is it possible ?
Regards

Steve

lefty 10/6/2019



I create output PDFs using a PDF template (empty PDF form) and setasign FPDF/ FPDI.

Using setasign I can position field values accurately along with images (signatures).

This works very well.
I would like to be able to make the add/ edit pages resemble the PDF form/template, but I don't know

if its possible or where to start making the input pages (add/ edit) look like the output PDF.
Has anyone created custom Add/ Edit pages that resemble real PDF forms ... is it possible ?
Regards

Steve


See this link , you might have already .Click Here It was created from an excel template but you could use some of the code to output it with your own template also. Not sure PHPrunner will work to make add/edit pages resemble

pdf files though.The code will just output the pdf or you can use a dialog in javascript to open it . See the new Documentation on PDF API HERE this might help for your project. That may help using custom add pages to resemble a pdf file on custom add/edit.





Reason being - PHPrunner uses template lanquage so not sure how you can accomplish this.



I always used an html template but dosen't fit well with fpdf / fpdi , I am trying to use it to email on the fly or Output to browser. Not for add/edit pages themselves.

Where did you store the folder fpdf and fpdi as I cannot call it using
[color="#000088"]use;

Bad path . Not sure what the issue is .

S
Steve Seymour author 10/7/2019

... I put the setasign folder in the Source folder of the project.. andthe pdf template folder in the source too..
then at the top of my custom PHP script (called from a custom button (which passes a table name and an id))
<?php

//PHPR DB

include "include/dbcommon.php";

// PDF

require_once 'setasign/fpdf/fpdf.php';

require_once 'setasign/fpdi/src/autoload.php';
use \setasign\Fpdi\Fpdi;
....
Then actually using it to create a pdf...
// initiate FPDI

$pdf = new FPDI();

//$pdf->setSourceFile("z_wstemplate1.pdf"); // jobsheet template

$pdf->setSourceFile("cert_templates/jobsheet.pdf"); // jobsheet template

$tplidx = $pdf->importPage(1);

$pdf->addPage();

$pdf->useTemplate($tplidx, 0, 0, 210, 297);

// now write some text over the imported page

$pdf->SetFont('Helvetica', '', 10);

$pdf->SetFontSize(10);

$pdf->SetTextColor(0, 0, 0);
$pdf->SetXY(22,26);

$pdf->Write(0,$data["job_no"]);

$pdf->SetXY(102,26);

$pdf->Write(0,$data["po_no"]);

$pdf->SetXY(34,31.5);

$pdf->Write(0,$data["cust_name"]);

.......
This works very well and I've also used a blank PDF template in another project and built the PDF from table fields and

(the PDF needed to be dynamic... as in sometimes longer / 2 pages.
I have thought of an idea of how to create much better input pages... all we need is the ability to place the edit controls

in a responsive table. It works in an old Laravel project, but I don't know how to get a responsive table onto a PHPRunner add/edit page...

That would solve multiple issues with Add/Edit layouts.

lefty 10/7/2019



... I put the setasign folder in the Source folder of the project.. andthe pdf template folder in the source too..
then at the top of my custom PHP script (called from a custom button (which passes a table name and an id))
<?php

//PHPR DB

include "include/dbcommon.php";

// PDF

require_once 'setasign/fpdf/fpdf.php';

require_once 'setasign/fpdi/src/autoload.php';
use \setasign\Fpdi\Fpdi;
....
Then actually using it to create a pdf...
// initiate FPDI

$pdf = new FPDI();

//$pdf->setSourceFile("z_wstemplate1.pdf"); // jobsheet template

$pdf->setSourceFile("cert_templates/jobsheet.pdf"); // jobsheet template

$tplidx = $pdf->importPage(1);

$pdf->addPage();

$pdf->useTemplate($tplidx, 0, 0, 210, 297);

// now write some text over the imported page

$pdf->SetFont('Helvetica', '', 10);

$pdf->SetFontSize(10);

$pdf->SetTextColor(0, 0, 0);
$pdf->SetXY(22,26);

$pdf->Write(0,$data["job_no"]);

$pdf->SetXY(102,26);

$pdf->Write(0,$data["po_no"]);

$pdf->SetXY(34,31.5);

$pdf->Write(0,$data["cust_name"]);

.......
This works very well and I've also used a blank PDF template in another project and built the PDF from table fields and

(the PDF needed to be dynamic... as in sometimes longer / 2 pages.
I have thought of an idea of how to create much better input pages... all we need is the ability to place the edit controls

in a responsive table. It works in an old Laravel project, but I don't know how to get a responsive table onto a PHPRunner add/edit page...

That would solve multiple issues with Add/Edit layouts.


I guess you would have to study the template language here or I know in 9 and under you were able to use freeform method to design your pages. It was tedious though. Not sure if you have older versions.

S
Steve Seymour author 10/7/2019

No, I dabbled with version 9 trial but its all quite new to me 10.2 was my first real effort.

I can see that the grid layout is quite easy to use, but doesn't work with long labels or table column type input forms.
A responsive table that replaced the grid layout - or possibly even the ability to place a responsive table in a grid cell could work.

My project needs to be available on Desktop, then in the field for engineers using a Tablet or mobile phone. While the grid layout

scales nicely to mobile, its not so good on Desktop/Tablet for multiple field edits, where a responsive table would hold everything together,

scale well and allow table edits/ entries thereby identifying fields without the need to label every one when it goes to mobile.
I'll have a look at the template language, but first glance suggests its really about output display rather than input display.

Admin 10/7/2019

This all is really puzzling. What are "real PDF forms"? What is "responsive table"?
In Page Designer you can modify your input forms any way you want. "much better input pages" - another puzzle, what is that?

S
Steve Seymour author 10/7/2019



This all is really puzzling. What are "real PDF forms"? What is "responsive table"?
In Page Designer you can modify your input forms any way you want. "much better input pages" - another puzzle, what is that?


With the existing grid layout, modifying add/edit pages for multiple inputs table like layout does not retain the table like layout but

adjusts to the size of the required label and/or disappears off the right of the screen (in the designer) when large label are needed.
The grid layout designer is fine for small tables, and for larger tables that suit responsive column collapse (individual labled fields) .

However, Its not possible to maintain a 'table like structure' during responsive collapse.
A responsive table can maintain the table structure across all break points.. reducing the visible input edit as required, and lengthening the

table column header (depth) to suit the required table column header.
I have forms in a Laravel application that look like their PDF counter parts and resize to suit the view-device... ie. they still resemble the pdf form that the

html/php/jscript attempts to replicate.
If it were possible to add a table into a cell in the designer, this would allow for the retention of the designed layout across view devices... the cell

responsively resizing its contents... and the table its.
This works and allows input forms to replicate PDF forms in appearance.
I hope this helps explain a little better.
Regards

Steve

Admin 10/8/2019

You are describing a beautiful sunset to a blind person. I'm the blind person here and I have no idea what "real PDF forms" do you mean or what " maintain a 'table like structure' during responsive collapse" means. Bootstrap takes care of resizing forms on different screens and it is impossible to understand what you talking about. You talking about PDF forms, input pages, tables and grids at the same time.

S
Steve Seymour author 10/8/2019



You are describing a beautiful sunset to a blind person. I'm the blind person here and I have no idea what "real PDF forms" do you mean or what " maintain a 'table like structure' during responsive collapse" means. Bootstrap takes care of resizing forms on different screens and it is impossible to understand what you talking about. You talking about PDF forms, input pages, tables and grids at the same time.


I've described the best I can. I have a working website written with Laravel that unfortunately I am unable to share because it is a companies private database.

The forms that engineers use in the field such as job sheets, risk-assessment forms, commission or installations etc were originally all A4 PDF forms. There are 21 such "certificates" some with up to 100 fields. These were duplicated as HTML/CSS/PHP/Javascript representations of the paper form (printed PDF). I am trying to find a way to do similar with PHPRunner - so far without success.
In my trials and tribulations, I considered that having the ability to place an HTML table within a PHPRunner designer cell (which could be a full page) may help solve the issue I'm faced with. Complex forms input fields held together in a visible table like structure that retains its appearance across all break-points - is the best description I can offer.
Attached is a link to example PDF (sensitive data and logo's removed) that I want to replicate the appearance of using PHPRunner designer. If this simply isn't possible with the designer that I have to accept that. If it is possible but I am not fluent enough with PHPRunner as I've been using it for less that 2 month that any pointer would be of great help. I get the output exactly as this, I want to get the input (Add/ Edit pages) to look like this
"http://www.steveseymour.co.uk/tmp/xcommission_certificate.pdf";
If I'm unable to describe what I'm trying to do enough for you to understand, then this matter should be consider closed. If I find a solution for the look I'm trying to achieve, I'll be sure to share it.
Thank you for your consideration.
All the best

Steve.

fhumanes 10/8/2019

Hello:

I will tell my experience and what I am working on.
My experience:

In a Public Administration (many forms and constant renewal of them) we are working with PDF forms (data entry) and the delivery of the form (output / copy of what they have provided) everything is working with PDF.

Problem: Validations and very poor dynamism. It is not possible to control all the values ​​that are delivered.

Advantage: The same entry form can be printed and filled out with a pen. The "classic" user is comfortable with the solution.
I am working:

As it has to be a very productive system (in a very short time the new form has to be in production) the code of the forms has to be reused, so the solution is:

  • I am analyzing structuring forms in blocks. These blocks will be the ones that will be reused between forms.
  • The presentation to the user, for the entry will be HTML + javascript, because I wish it can be used from any device and have the full power of data control.
  • Thus a form will consist of an ordered set of Blocks. These blocks may be one or more of the same (repetitions or data lines). Each Block will have its validations and at the PHPrunner level each block will be a table.
  • In the end, from the definition of these blocks and their detail, they will generate a PDF that will be presented to the user as verification of the data they have entered.
    This whole system is generalizable for my case and I think that for the case that is being treated in this forum thread.
    When I have it, I will post it on the forum, in case you want to use someone else.
    Greetings,

S
Steve Seymour author 10/8/2019



Hello:

I will tell my experience and what I am working on.
My experience:

In a Public Administration (many forms and constant renewal of them) we are working with PDF forms (data entry) and the delivery of the form (output / copy of what they have provided) everything is working with PDF.

Problem: Validations and very poor dynamism. It is not possible to control all the values ​​that are delivered.

Advantage: The same entry form can be printed and filled out with a pen. The "classic" user is comfortable with the solution.
I am working:

As it has to be a very productive system (in a very short time the new form has to be in production) the code of the forms has to be reused, so the solution is:

  • I am analyzing structuring forms in blocks. These blocks will be the ones that will be reused between forms.
  • The presentation to the user, for the entry will be HTML + javascript, because I wish it can be used from any device and have the full power of data control.
  • Thus a form will consist of an ordered set of Blocks. These blocks may be one or more of the same (repetitions or data lines). Each Block will have its validations and at the PHPrunner level each block will be a table.
  • In the end, from the definition of these blocks and their detail, they will generate a PDF that will be presented to the user as verification of the data they have entered.
    This whole system is generalizable for my case and I think that for the case that is being treated in this forum thread.
    When I have it, I will post it on the forum, in case you want to use someone else.
    Greetings,


Thank you for your reply.

Yes, there is a need for PDF type forms in-the-field, a problem with PDF forms is that they cannot be submitted to your own server from the "standard" PDF Reader (Adobe). There are many subscription services that charge per form per user, but this is not a viable solution in most cases. If Adobe allowed PDF forms to be signed (hand-written) and uploaded to your own server for processing this could be a solution, but again, validation could be an issue, but Adobe what you to use their premium service.
Replication of PDF looking forms in HTML is possible... I just want to use PHPRunner to do this. We can customize output with FPDF/FPDI... now we just need to customize input... then PHPRunner will be an unbeatable solution for database work.

Admin 10/9/2019

Thank you for providing a PDF file, it makes more sense now. I've tried to quickly replicate this form in Page Designer but ran out of fields. Anyway here is the sample Add page form that resembles PDF file layout.
Of course you need to make fields like ShipVia, OrderDate, ShipPostalCode and OrderID text areas, apply correct alignment, set borders etc.
Does it make sense?

S
Steve Seymour author 10/9/2019



Thank you for providing a PDF file, it makes more sense now. I've tried to quickly replicate this form in Page Designer but ran out of fields. Anyway here is the sample Add page form that resembles PDF file layout.
Of course you need to make fields like ShipVia, OrderDate, ShipPostalCode and OrderID text areas, apply correct alignment, set borders etc.
Does it make sense?



Thank you Sergey,
Yes - it makes sense, I have tried similar, and I will implement something along the lines of this.

What I need to overcome is a problem is with table entries..

i.e.

many rows of input columns, with column headers and a row description. Think of if you will as a spreadsheet, say, 7 columns with headers and 20 rows with a left side description in column 0. All the individual cells don't need/have a label, they are ref. by the column/row. As it stands when the screen collapses because of responsiveness, the ref. to the column/row is lost.
What is working in another project (Laravel) is that the table retains its structure right down to 600 pixels, the input field with reducing to suit.

I may be able to reproduce something similar in the PHPRunner designer by limiting the width of the individual columns, but its not ideal... it would be small on a desktop, and not easy to layout in the designer as the column headers would be larger than the edit fields.
Hence my thoughts about a table that retained its integrity.
This is in no way a criticism of PHPRunner which I find to be excellent, its just the one step that I'm struggling a bit with. as I have a large number of fields to work on.
Thank you for your help and excellent product.

S
Steve Seymour author 10/10/2019

Here is a crude example of what I was trying to explain... a table that retains its integrity when the view port size changes.

Resize the browser to see the table adjust.
This is the effect I want to achieve for the Add/edit page in PHPRunner
"http://steveseymour.co.uk/tmp/index.html";
Steve.

M
MikeT 10/12/2019

Did you look at modifying the included bootsrap themes? I'm not 100% up to date how tghis is handled in 10.3 since I did my last more complicated project in 9.8, but also with the included bootstrap themes, and somewhat heavily customizing them.

The themes are (were?) based on bootswatch (google for it). You can modify these, although it's a lot of work depending on what you're doing. I'm pretty sure you could mess around with breakpoints for example.
Just an idea.

S
Steve Seymour author 10/12/2019



Did you look at modifying the included bootsrap themes? I'm not 100% up to date how tghis is handled in 10.3 since I did my last more complicated project in 9.8, but also with the included bootstrap themes, and somewhat heavily customizing them.

The themes are (were?) based on bootswatch (google for it). You can modify these, although it's a lot of work depending on what you're doing. I'm pretty sure you could mess around with breakpoints for example.
Just an idea.


Thank you for your reply.

I could create external input pages and process the forms externally to PHPR, but I was looking to add a table in the designer so that PHPR could be used for the processing, validation, security etc.

M
MikeT 10/12/2019

OK, I was just thinking you'd like to modify how phpr handles tables via the included theme(s). I did not include external pages in my project back then, just modifying the themes of phpr itself (actually creating a new one by copying an included one and then modifying it).

You could achieve quite a bit by messing around with the included bootswatch themes, but it's probably a lot of work.

Admin 10/12/2019

I'm still yet to understand what is special about this table. Maybe you can elaborate a bit and provide the following screenshots

  1. How your Add/Edit page looks now in the Page Designer
  2. How the same page looks in a full-screen browser window
  3. How it looks in a resized browser window
  4. How it should look in this specific case

S
Steve Seymour author 10/13/2019

Thank you for your idea...
I could create separate php page's to handle the input, but I was looking to use PHPR to handle the validation/security etc while retaining the overall look of the app built with PHPR.

It may well be that I end up writing external pages to handle the input... hence my initial inquiry about the possibility of adding a table that maintained its integrity in the designer, but it doesn't seem possible. If it were with a snippet, putting a set of edits in the table, in a cell is probably more complex that writing it all externally.

S
Steve Seymour author 10/13/2019



I'm still yet to understand what is special about this table. Maybe you can elaborate a bit and provide the following screenshots

  1. How your Add/Edit page looks now in the Page Designer
  2. How the same page looks in a full-screen browser window
  3. How it looks in a resized browser window
  4. How it should look in this specific case


Existing Laravel project

Desktop view...


Exixting Laravel project

Mobile/tablet collapsed view

Admin 10/13/2019

I see what you saying. This can be done as well, with the help of custom CSS.

S
Steve Seymour author 10/13/2019



I see what you saying. This can be done as well, with the help of custom CSS.


OK, that's good to hear Thank you Sergey,

I'll persevere using the PHPR designer and look at pursuing a custom css route.
Thank you everyone for your consideration and advice - much appreciated.