How would you create this interface?

Bruce Gust
Bruce Gust used Ask the Experts™
on
I'll give you what the user wants, what I've built thus far and then you tell me how you would proceed given the realities that have recently been revealed.

What They Want...

Their are several users who are required to submit a weekly report that consists of three sections. In the past, this report has been nothing more than an email that consists of Rich Text Formatting (text that will be published in different colors, emboldened, underlined, etc) as well as portions of either an Excel spreadsheet or an online table that inevitably has some formatting as well (see below):

houston
Just as a quick aside, notice that the portion of the spreadsheet that is pictured above is truncated. Rarely, if ever, are the reports that are going out currently via email structured in a way where they can fit nicely on an 8.5 X 11 piece of paper.

What I've Done...

What I've accomplished thus far is pictured in part below:

system performance block
I built a page that has three sections like what you see above. The user can choose between a tinyMCE editor or an HTML option. There's some Javascript in place that reveals either a plain text block or the tinyMCE editor, depending in which option that user selects.

Initially, I was thinking I was being pretty, stinkin' clever. The tinyMCE editor gives the user the opportunity to format their text however they wish. I built another dynamic where the user can upload images and then reference them accordingly. This is going to be cake and ice cream, right?

Not so much.

The Excel spreadsheet dynamic gets kind of clunky. You can copy and paste what you have directly into the tinyMCE editor, but it doesn't reproduce any of the formatting you might have in place (colored cells, bold text, etc.). This is why I put the HTML text block in place. You can save your spreadsheet as an HTML doc, then copy and paste all of that code into the HTML text block and it looks great. But this is assuming the user is willing to do that and understands enough about HTML where they know what part of the code to grab.

Another thing you can do is put this all into an Outlook email and then display it in your web browser, grab the source code and you're all set. But that gets kind of clunky as well.

To make matters even more convoluted, exporting all of this into a pdf doc using PHP is doable PROVIDED THAT the architecture of your page / report is fixed. I can reproduce a webpage as a pdf doc easy enough, but I can't create tables and reproduce formatting on the fly. I can change the content, but not the structure (see http://www.experts-exchange.com/questions/28906224/Export-a-page-to-pdf-using-php.html)

What Would You Do...?

Here's what I'm thinking / needing some minds greater than my own to weigh in...

Spreadsheets need to be treated as attachments and not as entities displayed as inline objects for two reasons:
rarely are they structured to fit neatly and / or legibly within an 8.5 X 11 piece of paper
converting them into an HTML format is neither intuitive nor elegant

In light of each update varying in both content and architecture, writing code to export said page into a pdf format isn't an option. Rather, I have to provide for my user a page that is print friendly and from there they can print it as a pdf doc

I'm thinking those two thoughts satisfy my user's request for said interface. But what do you think and how do I provide for my user the ability to print a web based doc as a pdf? In the past, I've used PrimoPDF, but that's a separate download. Is there something out there that I'm not aware of that does the same thing? In other words, you go to print something and there's an option you can choose that prints your content as a pdf doc.

Can you smell what I'm cooking? What do you think?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
greetings  brucegust, , , , , , , I have not worked with Excel sheets in some years, , But your problem seems to be about a user that has their business statistics (column, row organization) in an Excel sheet, and you need to end up with a PDF format file, for an 8.5 x 11 paper print result, BUT you want the submit of the user sheet data to be streamlined but effective.

Although you conceived of a user doing there own HTML development writes to reformat the Excel info to a tinyMCE html output, , that would be a time consuming headache for even experienced HTML writers. The outlook email as HTML could be workable, but as you said thats a two or more step process, and would still require you say - "exporting all of this into a pdf doc using PHP is doable PROVIDED THAT the architecture of your page / report is fixed". . . .

It is my view that to get results into a PHP produced PDF file with any effectiveness in time to code this thing, you will need to have a limited number of possible user Excel data formats that can be submitted, , , Because your PDF size and setup seems to need certain data segments to be placed according to factors of column width.

If I were trying to get a sheet into PHP PDF, I might think along the lines of having 6 to 12 possible PRESET submission formats (number of columns, width of columns, color of headers, etc.), then have the Excel user export the sheet to a csv or text file, and then have the user copy and paste that csv or text fileText contents in to a <textarea> input, and submit that to PHP where the text could be parsed into a certain consistent preset PDF column format. ( or upload the file in a submit ). . .
You could also use the same parse operations in javascript to format a HTML table view, for the user to see in their browser <div> to verify the sheet transfer in correct.

If you can not have limited submission column number, type (width), and headers, , for your preset PDF layouts, then you may have a very long development process, to parse a HTML or csv submission in to a PROPERLY arranged PDF for printing in 8.5 x 11 .
Bruce GustPHP Developer

Author

Commented:
Happy New Year, slick!

It's your last paragraph that has me thinking that I need to eliminate the option of posting any HTML content and invite users to either upload their Excel spreadsheet as an attachment or copy and paste it into the tinyMCE interface. In other words, completely abandon the idea of asking my user to convert whatever they've got into HTML.

And as far as the need to save the web page as a pdf doc, what I'm going to do is set things up where th user isn't going to try and EXPORT anything into a pdf format, rather they'll PRINT it. Google Chrome has an option built into their browser by default and it's a part of most of my users' desktop environment. I'll have a print friendly page set up with instructions on how to print it in a Google Chrome environment and that should do the trick.

I appreciate your weighing in. I've got a phone meeting with my boss tomorrow and I wanted to have a plan and not just a problem.

Thanks!
Glad you got an idea and approach to the printing problem, I guess the PDF was not needed if a print was produced without it.
Yea, I have watched some people use a browser "what you see is what you get"  Text area like  tinyMCE  and they were so lost as to what to do even just to make a word BOLD, much less column and row formatting. but the single print Chrome trick, is something I hope he accepts.
Yea, New Year Gold for web development, , LOL.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial