Reportfile Number Two
Reportfile Number Two
Reportfile Number Two
Report
or
Document
Viewer
The
report
viewer
application
was
created
to
provide
a
mechanism
for
viewing
collections
of
sample
reports.
A
design
goal
for
this
application
was
for
it
to
be
completely
standalone
not
requiring
any
additional
software
or
web
server
to
view
the
documents.
parse_csv.pl
is
a
perl
script
that
was
written
to
create
a
javascript
object
notation
assignment
(JSON)
used
to
populate
a
treeview
control
for
the
purpose
of
displaying
example
pdf
reports
with
previews.
In
order
to
use
this
package
to
create
your
own
custom
file
or
report
viewer,
you
must
create
a
comma
separated
value
(CSV)
file
with
the
following
values.
REPORTFILE,PREVIEW,GROUP,TITLE,DESCRIPTION
Column
1
-
Report
file
specifies
the
name
of
the
PDF
report
file
that
will
be
downloadable
from
within
the
viewer.
Column
2
-
Preview
file
specifies
the
name
of
the
preview
or
thumbnail
image
that
will
be
presented
in
the
details
pane
of
the
viewer
application.
Column
3
-
Group
specifies
the
treeview
group
where
this
report
will
be
grouped.
You
should
sort
your
csv
file
so
that
groups
are
stored
together.
Column
4
-
Title
specifies
the
title
of
the
report
and
will
be
displayed
in
the
details
pane
of
when
the
user
clicks
on
the
report
in
the
treeview.
Column
5
-
Description
specifies
the
details
of
what
the
report
will
show.
Example
REPORTFILE,PREVIEW,GROUP,TITLE,DESCRIPTION reportfile_number_one.pdf,preview_of_report_file_one.png,Group One,Example of a Report File One,This report shows some serious stuff. reportfile_number_two.pdf,preview_of_report_file_two.png,Group One,Example of a Report File Two,This report shows some more serious stuff. reportfile_number_three.pdf,preview_of_report_file_three.png,Group Two,Example of a Report File Three,This report shows some more serious stuff. reportfile_number_four.pdf,preview_of_report_file_four.png,Group Two,Example of a Report File Four,This report shows some more serious stuff. reportfile_number_five.pdf,preview_of_report_file_five.png,Group Two,Example of a Report File Five,This report shows some more serious stuff. reportfile_number_six.pdf,preview_of_report_file_six.png,Group Three,Example of a Report File Six,This report shows some more serious stuff. reportfile_number_seven.pdf,preview_of_report_file_seven.png,Group Three,Example of a Report File Seven,This report shows some more serious stuff.
You may include the column headers in your file - however, ensure that you use
the --skipheader flag when executing the parse_csv.pl script. Requirements Perl. The parse_csv.pl script is written in perl so you will need an environment were you can execute perl scripts. A subrequirement is that I'm using some libraries that you may not have installed in your perl environment. Checkout http://search.cpan.org if you get some errors about missing libraries. Here's an overview of the process to create your own custom document viewer. 1. Download the docviewer package. This will contain everything you need to create and customize your own self contained document viewer. Self contained means that you don't even need to host these documents and the viewer on a web server... you can simply open the index.html file from a browser. 2. Review the directory tree for the example package. . |-- css Style Sheets |-- extjs Javascript Library for the treeview and panel components |-- images Various supporting image files (like icons, etc.) |-- js Javascript source files |-- reports Report directory - this is where you'll place the reports, pdfs and preview thumbnail files that will be displayed in the viewer. `-- scripts Scripts used to create and customize your viewer 3. Since you'll be creating your own document or report viewer, you'll probably want to delete the contents of the reports directory. 4. Create the report files that youll be displaying in the document viewer. Report files can be PDF, PowerPoint (ppt) or Word Document (doc) files. Typically, the report file examples are multi-page pdf files. Once you have the report files, copy them into the reports directory in the base of the example package. 5. Create a screenshot, or preview image that will be displayed in the preview section of the details panel when viewing the report. zScreen is a great, free utility that lets you capture portions of your screen and save them to files. I prefer png format because of smaller size. Youll need to create one preview image for each report you plan to display in the document viewer. Copy or place these preview image files into the reports directory along side the actual pdf or ppt report files. 6. Now you'll need to create a comma-separated file that contains the names of your report files, the groups they'll be displayed in, the document titles and a description of each. As previously mentioned the format for this file is REPORTFILE, PREVIEW, GROUP, TITLE, and DESCRIPTION. You can find an
example
in
the
scripts
directory
in
a
file
called
example.csv.
7. Create
the
documents.js
file.
This
is
the
file
which
contains
the
Javascript
Notation
(JSON)
which
is
used
to
populate
the
treeview
control
as
seen
in
this
image.
The
package
contains
a
script
named
parse_csv.pl
and
can
be
found
in
the
scripts
directory
of
the
example
package.
This
script
should
be
run
from
the
main
directory
of
the
archive
and
must
be
provided
several
command
line
options
in
order
to
execute
properly.
The
following
is
an
example
execution
of
the
script:
scripts/parse_csv.pl --csvfile scripts/example.csv --outputfile js/documents.js
This was executed from the base directory of the example archive file. The csvfile argument tells parse_csv.pl where to file the csv file that you created in step 5. The outputfile argument tells parse_csv.pl where to write the json. It is important to note that the script assumes that you have not modified the directory layout and that you are storing your reports and previews or thumbnails in the reports directory. You may run the script with help to obtain additional information and options.
$ scripts/parse_csv.pl --help Usage: scripts/parse_csv.pl --csvfile <filename> [--outputfile <filename.js>] [--outputfile <outputfilename>] controls the output javascript filename defaults to stdout [--reportdir <reportdirectory>] specifies the directory where the pdf files may be stored [--thumbdir <thumbnailedirectory>] specifies the directory where the thumbnail or preview image files may be stored [--htmltitle <htmltitle>] specifies the title to be used in the report viewer html file [[--overwrite] | [--nooverwrite]] - controls whether the output file will be overwritten
is report shows some more serious stuff.","size":"16.23 KB","published":"01-292012","iconCls":"pdf","preview":"reports/preview_of_report_file_seven.png","text":"Example of a Report File Seven","id":"7","leaf":"true"}],"id":0.119647523478733},{"iconCls":"group","text":"Group Two","children":[{"content":"reports/reportfile_number_three.pdf","description":"This report shows some more serious stuff.","size":"16.23 KB","published":"01-292012","iconCls":"pdf","preview":"reports/preview_of_report_file_three.png","text":"Example of a Report File Three","id":"3","leaf":"true"},{"content":"reports/reportfile_number_four.pdf","description":"T his report shows some more serious stuff.","size":"16.23 KB","published":"01-292012","iconCls":"pdf","preview":"reports/preview_of_report_file_four.png","text":"Example of a Report File Four","id":"4","leaf":"true"},{"content":"reports/reportfile_number_five.pdf","description":"Th is report shows some more serious stuff.","size":"16.23 KB","published":"01-292012","iconCls":"pdf","preview":"reports/preview_of_report_file_five.png","text":"Example of a Report File Five","id":"5","leaf":"true"}],"id":0.423250772097287}] var htmltitle='Example Report Viewer;'
Notice that the script determines the proper filetype and assigns the appropriate icon class pdf for pdfs, ppt for ppts, etc. Also note that the script determines the file size and date created. These attributes are displayed in the details panel when viewing the documents.