James Jara Portfolio 2014 - Enterprise datagrid - Part 3

1. James Jara Arroyo – White Paper – Portfolio 2014
Case Study for my portfolio
Enterprise Advanced DataGrid

2. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Contact name James Jara
E-mail address Jamesjara@gmail.com
Phone number (506) 87944598
Website Www.jamesjara.com
Solution offering Innovate data management of the grid
Project name or title Pv Gwt
Company AKQA – SEOREV – O.S.C – Pview Software
Case Study
AQKA
SearchRev is one of the Top 10 SEM firms and was acquired bydigital agency AKQA on
September 2007. AKQA is an advertising agency that specializes in creating digital services and
products. AKQA has offices in London, San Francisco, New York, Paris, Washington, D.C.,
Amsterdam, Berlin, Shanghai, Tokyo, Atlanta and Portland, with 1,200 full-time employees.
Business situation
They wants to improve one of his products, this case: PrecisionSuite is a line of web-based
applications that allow advertisers to create and manage large pay-per-click campaigns in a
streamlined fashion while being able to take advantage of SearchRev’s unique multivariable
targeting system. Backed by a dedicated management team, and a powerful optimization
algorithm, PrecisionSuite makes it possible to greatly enhance profit on search engine marketing
accounts.
PrecisionView presents a single campaign data model to the user, and then automatically adapts
this model for each ad network, google , yahoo, bing, etc. This presents a singular interface that
communicates to its user while still maintaining the nuances of individual networks in execution.
This also speeds cloning a campaign on an existing network to another, making it quick and easy
to transition over so the user can immediately focus on tailoring the account to whatever specifics
they may desire for that channel.
Technical situation
Core language mixed with obsolete technology and outdated versions. The main problem was the
use of old paradigm of TPL and php.
But I identify during the evaluation of its systems, that the technical challenges the costumer was
facing, were the was not possibility to update core language version, the fact that the system can
not be offline.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 2

3. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Solution
As I cant touch the current php code because it is to risky, I get into the solution to create an
isolated project, the solution were implement as a new branch linked into the current software but
not inside. So for the user it is in the same place, same menu, but is NOT same code, even is not
same Branch.
For the data, substantial evidence suggests the possibility to Hook the code, the TPL function in
php side.
So basically any TPL library, contains an final print function, I found it , so I extend this function
overwriting to print all vars as array rather than HTML. The benefits of this was huge, because we
don’t rewrite the sql, we don’t need to prepare data summarization, we don’t get into a lot of
process, because that was already developed and working.
I just convert the code into a REST server.
For the front end I take the choice to use SMARTCLIENT GWT in JAVA.
Benefits – General perspective.
– Significantly reduces the amount of computing resources and processing time to load,
view, and take action on large datasets. Marketers will experience a faster, more agile
user interface that supports
– More fluid numeric and text-based filtering
– The new Supergrid, providing improved “analytics to action” through an intuitive workflow
for finding and selecting multiple rows objects
– Expedited one-time reports for faster at-a-glance reporting and analysis
– A new, advanced and more intuitive calendar and date range selector
– A searchable and more consolidated View Builder
Current Features of the Super grid.
There are gifs images attached to the document displaying how it works each feature. The Grid
is by far the most sophisticated available, with support for:
The SuperGrid control expands on the functionality of the standard DataGrid control to add data
visualization features to your Adobe Flex application. These features provide greater control of
data display, data aggregation, and data formatting. The AdvancedDataGrid control is like a List
control except that it can show more than one column of data, making it suited for showing
objects with multiple properties.
Some of the features:
• Columns that the user can resize at run time.
• Columns that the user can reorder at run time.
• Optional customizable column headers.
• Ability to use a custom item renderer for any column to display data other than text.
• No coding needed , because its generate from metadata of the backend, Inline editing,
Frozen columns, Local sorting, Grouping by status, Auto-fitting, Inline filtering, User
defined formula columns, User-defined views, Exports and charting, Deep customization
in every aspect of a view., Full Screen mode. The Supergrid control is intended for
viewing big data stuff with infinite scroll, and not as a layout tool like an HTML table.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 3

4. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Local inline filtering
Makes it easier to analyze and view your
data by hiding the data that you
temporarily want to take out of view.
Begin typing an Item name in the filter
box above the "Item" column (for
example type "Cars") . When the dataset
becomes small enough, the grid will
switches to client-side filtering
automatically.
Delete part of the item name to see the super grid automatically switch back to server-side filtering.
Working with views
The views allow the user to create multiple scenarios. A grid view is the state of the grid: sorting,
grouping, derived columns, columns visibility, columns titles. Any view can be shared with other users.
SuperGrid provides a unified Offline browser storage API that your programs can use for any client-side
persistence task. In this example, we store the Super grid viewState to browser-local storage. Try resizing
or reordering some columns in the grid, click "Save view", then press F5 to reload, or close and re-open
the browser; your changes have been remembered. Try adding a formula field to the grid and reload
again. Persisting a user's preferences like this is a compelling addition to any application, and in this case
we don't even need a server.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 4
Illustration 1: animated gif inline filtering
Illustration 2: animated gif Working with views

5. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Working with
formulas
Custom column formulas are
dynamic columns created using
math formulas from other
columns and fixed values.
Launch the Formula Builder and
enter the title of the new field,
and the desired formula. For
example, enter I.V.A taxes for the
field name and in the formula
field enter A / B. As indicated in
the dialog, A represents the Price
field, and B represents the taxes
percent field.
Notice that you can now sort on
this newly added iva taxes field
just like any other field. Click the
help icon to view the various
supported math functions.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 5
Illustration 3: animated gif Working with formulas

6. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Exporting views
Views are designed to be exported as they are shown. Following items will be persisted in case of export:
● Column
ordening,
visibility and
caption.
● Data filtered.
● Data sorting.
● Custom formula
columns.
● Grouping
● and others
Custom Column Titles
Now it is possible to change title of any column, this
change will be persisted in the view, will be reflected
in the chart and will also be reflected in the export.
Titles can be directly edited in place by your
application's end users.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 6

7. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Frozen Column
Freezing column allows you to keep some of your data(eg: product name) in the same place as you scroll
through the rest of your data.
This is particularly useful if you have critical column that you'd like to keep in one place as you scroll
through a large data set.
AutoFit columns Essentially autofit automatically sizes the column first to the content, then
to the title caption size in order to always have visible the values of all columns, this is activated by
default.
Data Grouping
Ability to group by the any column, allowing
the user to manage data in custom groups.
Grouping will be persisted in the view, if user
updates a row, the row will automatically
move it to the new group.
For this example the grouping was by status
column (active,paused,deleted).
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 7
Illustration 4: in this case the grouping was
by status column

8. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Hiding and unhiding columns without refreshing
You can now hide columns in your grid without having the entire page refresh, column visibility will be
persisted in the current view. - How to: right click on any column header, then click on “columns”, and
check or uncheck to show or hide.
Support displaying summaries
SuperGrid support displaying summaries of the current data set in various ways:
Fields from individual records can be summarized into a
single field value. In this example the "Total" field
displays a summary value calculated by multiplying the
"Quantity" and "Price" fields.
Summaries can also be displayed for multiple records.
This example shows a summary row at the end of each
group in the grid as well as an overall summary row with
information about every record in the grid. Note that in
addition to standard summary functions such as "sum"
to generate a total, or "count" to generate a count of
records, completely custom functions may be used. This
is demonstrated in the "Category" field where a custom
function determines how many categories exist in this
dataset.
Inline data editing without refreshing full page
In the common webpages when a user makes a change, the page will be refreshed, losing the grid focus,
which implies wasting time because of the time that takes the page reload, with this new update page
reload no longer occurs, instead a progress bar is shown while the update is in progress, a friendly popup
will be shown indicating error or success. Then the user can continue editing. - How to: to edit a row just
double click on desired value, then you will see the boxes to edit those values., the just click on save
green button.
New: Whenever user accidentally or manually closes the browser, user will get an alert about “pending
changes” in order to avoid losing data.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 8

9. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
Hiliting row based on rules
SuperGrid allow end-users to create 'hilites' with rules based on the values of data., hilites, allow a single
critera based on a single field to affect a single target field (the same one) .
Click the "Edit Hilites" button below to show the HiliteEditor interface. To set up a simple hilite, click on
the "Area (km2)" record in the list to the left. When the simple hilite rule appears on the right, select the
"greater than" operation from the drop-down box, type "5000000" into the value textBox, select a color
from the 'Color' picker widget and click 'Save'. You'll see that all "Area (km2)" values in the grid that
exceed 5000000 are now hilighted in your chosen color
Columns headers always visible
When you are working with a large dataset with many rows and columns the SuperGrid will keep the
column headings always visible on the screen as you scroll down through the rows.
Custom FullScreen Mode
Fullscreen mode helps the user to focus on the grid, hiding all the elements unrelated to the data grid
interaction, fullscreen is not the full screen mode(f11) of the browser, this fullscreen is specially created
for the user, for example unlike the fullscreen mode of the browser, this allows the user to switch
between tabs even with this fullscreen mode.
Advanced Chart (zoom, local navigation)
The navigator is a small section below the main series, displaying a view of the entire data set. It provides
tools to zoom in and out on parts of the data as
well as panning across the dataset.
The zoom selector is a tool for selecting ranges to
display within the chart. It provides buttons to
select preconfigured ranges in the chart, like 1 day,
1 week, 1 month, 3 month’s, 6 month’s , Year to Date, Year, All time.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 9

10. ENTERPRISE DATAGRID CONTROL FOR SEOREV – AKQA – PVIEW SOFTWARE.
and the best... Dynamic grid datasource I thing this is the best part for
any developer, this grid will be generate all columns and configuration from the back end.
Java code:
Php code:
Final comparison between old and new grid UI.
And this is so far what can I show about this project, please check out my other white paper about my
work in Kinetos, transforming a desktop apps into a Cloud Operating System.
WWW.JAMESJARA.COM CONFIDENTIAL PAGE 10