Topics covered in this session: - Levels of embedding (options for embedding) - Embedding with Visualize.js - How embedding works in the demo app - Best practices & key takeaways

1. Your data in your app
(Part 4 / 5) Data as a Feature webinar series
Implementing interactive reports & data
visualizations in a React app

2. 2

3. 3
Hello from the project team!
3
Shane Swiderek
Product Marketing Manager, TIBCO
San Francisco, CA
Chad Lumley
Senior UI Developer, projekt202
Seattle, WA
Rachael Ross
Solutions Architect, projekt202
Seattle, WA
Crystal Phiripes
Program Manager, projekt202
Dallas area, TX
Sherman Wood
Director Solution Consulting WW, TIBCO
San Francisco, CA
Xavier Harrell
Sr. Experience Designer, projekt202
Dallas area, TX

4. 4
Agenda
4
Embedding options
overview
Embedding with
Visualize.js
Walkthrough of
embedding in demo app
Embedding best
practices

5. What is “Embedded”?
Your audience are Consumers!
Reports: Interactive and
distributed
Self Service: with
guard rails
Visualizations and
Dashboards
Deliver
© Copyright 2000-2019 TIBCO Software Inc.
Data for UX: APIs

6. 6
Not
Integrated
RESTful API
2
iFrame
Integration
3
visualize.js
41
Separate portal for
reporting & analytics
Mass reporting &
administration
Integration as separate app Seamless, in-page analytics
Analytic
s
Applicatio
n
Embedding options

7. 7
Agenda
7
Embedding options
overview
Embedding with
Visualize.js
Walkthrough of
embedding in demo app
Embedding best
practices

8. 8
● Projekt202 design approach for the bikeshare project
● Overview of development from a front-end perspective
○ State of modern web development
○ React project overview
○ Best Practices
● Overview of embedding Jaspersoft into the front-end
using Visualize.js
Recap of Webinar #2

9. 9
• Javascript API framework used to
embed JasperReport Server reports
& visualizations inside web
applications
• Lives in Global Scope of application
• Basic Embedding API used in app:
• Login and Logout
• Report
• Ad-Hoc View
• Input Controls
Visualize.js

10. 10
Agenda
10
Embedding options
overview
Embedding with
Visualize.js
Walkthrough of
embedding in demo app
Embedding best
practices

11. 11
• How do we interact with
Visualize.js?
• Hosted locally
• Using helper class
• Wrap responses in
Promises
Bikeshare Code Walkthrough
• Examples of Use
• Manager Dashboard
• Reports API
• Reports Page
• Ad Hoc View API
• Input Control API
• Self-service (iFrame)
• Driver Dashboard
• Interactive Reports
• Map, Popups
(JasperReports Server
REST API)

12. 12
Agenda
12
Embedding options
overview
Embedding with
Visualize.js
Walkthrough of
embedding in demo app
Embedding
best practices

13. 13
Key Takeaways
13
Get complimentary
eBook from
Jaspersoft.com
• Embedding using Visualize.js is simple and very
customizable
• Use the Bikeshare project as a guide for creating
your own application using Jaspersoft
• Aim for seamless embedding
• Think about how to secure information

14. 14
Get involved with the demo app
14
“How we built it” webinar
series
*Ongoing
Workshops and
documentation
* Coming soon
Guided demo app for on-
demand consumption
*Available on Jaspersoft.com
Access to source code for app
and dataset
* Available on Jaspersoft BikeShare GitHub repo

15. © Copyright 2000-2019 TIBCO Software Inc.

16. 16
● Embedding options overview (levels of embedding) - SHERMAN
● Embedding with Visualize.js - CHAD (abbreviated recap of what was
presented in webinar #2)
○ Embedding into React.js environment
● Embedded as it relates to demo app
○ Jaspersoft visualizations for app (visualize.js) - CHAD
○ Embedded map visualization for app - CHAD
○ Input controls for app - CHAD
○ Exposing data from Jaspersoft in application elements (pop ups) - CHAD
○ Embedded self-service - CHAD
● Best practices / Key Takeaways - SHERMAN AND CHAD
Working agenda

17. 17
● Embedding options overview (levels of embedding) - SHERMAN
● Embedding with Visualize.js - CHAD (abbreviated recap of what was presented in
webinar #2; dissect the API)
● Embedded as it relates to demo app
○ Jaspersoft visualizations for app (visualize.js) - CHAD (show code)
○ Embedded map visualization for app - CHAD (just explain process)
○ Input controls for app - CHAD (show code)
○ Exposing data from Jaspersoft in application elements (pop ups) - CHAD
○ Embedded self-service - CHAD
● Best practices / Key Takeaways - SHERMAN AND CHAD
Working agenda

18. 18
● Embedding options overview (levels of embedding) - SHERMAN
● Embedding with Visualize.js - CHAD (abbreviated recap of what was presented in
webinar #2)
● Embedded as it relates to demo app
○ Jaspersoft visualizations for app (visualize.js) - CHAD
○ Embedded map visualization for app - CHAD
○ Input controls for app - CHAD
○ Exposing data from Jaspersoft in application elements (pop ups) - CHAD
○ Embedded self-service - CHAD
● Best practices / Key Takeaways - SHERMAN AND CHAD
Working agenda

19. 19
● Recap of Webinar #2
● Today
○ Deeper look into Visualize.js
○ Show some embedding code examples from the
bikeshare demo
Agenda