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
   

   View Slide

2. Software — approaching a zero-day event!
   Delivery time
   Zero-day
   2-4
   months
   12-18
   months
   Forrester: Michael Facemire at Senchacon 2015
   

   View Slide

3. Dev Team Productivity
   Get Started Faster
   More Time to Code
   TIME
   PRODUCTIVITY
   

   View Slide

4. Power UI – Pivot Grid
   Sencha Inc. ©2015
   

   View Slide

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
   

   View Slide

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?
   

   View Slide

7. Summarized Data Using Pivot Grid
   

   View Slide

8. Pivot Grid – Axes & Aggregator
   Left Axis
   Top Axis
   Aggregator
   

   View Slide

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)
   

   View Slide

10. Matrix Configurations
    

    View Slide

11. Axes Configurations
    

    View Slide

12. Aggregator Configurations
    

    View Slide

13. Aggregation Methods
    • Sum
    • Average
    • Min
    • Max
    • Count
    • groupSumPercentage
    • groupCountPercentage
    • Variance
    • VarianceP
    • stdDev
    • stdDevP
    Or write your own custom aggregator function.
    

    View Slide

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
    

    View Slide

15. Pivot Grid Configurator
    •  Drag-and-drop interface for
    end users to perform analytics
    •  Snaps to existing data stores
    •  Excel Export
    

    View Slide

16. Demo
    

    View Slide

17. Power UI – App
    Templates
    Sencha Inc. ©2015
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. Prepackaged themes
    Take
    Aways
    Makeover needed
    Beyond kitchensink
    

    View Slide

23. Bootstrap v/s Sencha
    

    View Slide

24. Flat
    Font icons
    Web fonts
    Responsive*
    New
    Theme
    Properties
    Imageless
    

    View Slide

25. Design First
    

    View Slide

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
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. Demo
    

    View Slide

33. Theme Hierarchy
    Base
    Neutral
    Neptune
    Neptune Touch Triton Crisp
    Crisp Touch
    Aria
    Classic
    Grey
    

    View Slide

34. Lighter
    Standard
    Resolution
    Change Colors
    Font Icons
    Advantages
    

    View Slide

35. Responsiveness
    Via Layouts
    

    View Slide

36. 1 2
    3 4
    

    View Slide

37. 1
    2
    3
    4
    

    View Slide

38. VBox
    Anchor
    50% 50%
    

    View Slide

39. VBox
    Anchor with
    Display Block
    100%
    

    View Slide

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
    

    View Slide

41. Q & A
    

    View Slide