Sandeep Adwankar: Sencha Power UI : Pivot Grid and App Templates

Sandeep Adwankar: Sencha Power UI : Pivot Grid and App Templates

Transcript

1. Sandeep Adwankar sandeep@sencha.com Sencha Inc. ©2015 Sencha Power UI : Pivot Grid and App Templates
2. Software — approaching a zero-day event! Delivery time Zero-day 2-4 months 12-18 months Forrester: Michael Facemire at Senchacon 2015
3. Dev Team Productivity Get Started Faster More Time to Code TIME PRODUCTIVITY
4. Power UI – Pivot Grid Sencha Inc. ©2015
5. What is a Pivot Grid? • A data summarization tool • Enables rapid summarization of large sets of data • Provides a simple way to perform basic analytics
6. Classic Ext JS Grid: Sales Data • What is John Doe's total order amount? • What are the total order amounts by country? • How did salespeople perform in a specific year?
7. Summarized Data Using Pivot Grid
8. Pivot Grid – Axes & Aggregator Left Axis Top Axis Aggregator
9. Pivot Grid Architecture Sencha Pivot Grid Component (Grid panel) Abstract Matrix Local Matrix (all calculations in the browser) Remote Matrix (all calculations remotely on the server) Left Axis Top Axis Results (Aggregation)
10. Matrix Configurations
11. Axes Configurations
12. Aggregator Configurations
13. Aggregation Methods • Sum • Average • Min • Max • Count • groupSumPercentage • groupCountPercentage • Variance • VarianceP • stdDev • stdDevP Or write your own custom aggregator function.
14. Out-of-the-box Features •  Sorting (case sensitive, using sort indexes) •  Sub-totals and Grand-totals •  Results Filtering (for labels and values) •  Results Grouping (using ranges) •  Renderers •  DrillDown Plugin •  Outline & Compact Layouts
15. Pivot Grid Configurator •  Drag-and-drop interface for end users to perform analytics •  Snaps to existing data stores •  Excel Export
16. Demo
17. Power UI – App Templates Sencha Inc. ©2015
22. Prepackaged themes Take Aways Makeover needed Beyond kitchensink
23. Bootstrap v/s Sencha
24. Flat Font icons Web fonts Responsive* New Theme Properties Imageless
25. Design First
26. Stencils for Designers •  Symbols used within Design tools (Illustrator, Omnigraffle, etc.) to convey ideas visually •  Sencha is bringing framework components closer to the designers, so they can align their designs with the capabilities of framework
32. Demo
33. Theme Hierarchy Base Neutral Neptune Neptune Touch Triton Crisp Crisp Touch Aria Classic Grey
34. Lighter Standard Resolution Change Colors Font Icons Advantages
35. Responsiveness Via Layouts
36. 1 2 3 4
37. 1 2 3 4
38. VBox Anchor 50% 50%
39. VBox Anchor with Display Block 100%
40. responsiveConfig  :  {              'width  <  1000'  :  {      width:  0,      visible:  false    },    'width  >=  1000  &&  width   <  1600’:  {      width:  230,      visible:  true    },    'width  >=  1600’:  {      width:300,      visible:  true    }   }   Responsive Config Code
41. Q & A