Unit 14: Adding Additional Pages to your

Application

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 2
Lesson Objectives

After completing this lesson, you should be able to create, customize, and
use the following in your application:
• Oracle JET Charts
• Calendars
• Trees

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 3
Creating Charts

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 4
Creating Charts: Area Chart

SQL query used for the

chart series

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 5
Creating an Area Chart: Steps
1
2

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 6
Creating an Area Chart: Steps
4

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 7
Creating Charts: Bar Chart

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 8
Creating a Bar Chart: Steps
1

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 9
Creating a Bar Chart: Steps 4

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 10
Creating a Bar Chart: Steps

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 11
Editing Chart Attributes

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 12
Creating Charts: Line Chart

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 13
Creating a Line Chart: Steps
1 3

4
2

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 14
Creating a Line Chart: Steps
6
5

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 15
 Altering the Display of a Line Chart

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 16
Creating Charts: Pie Chart

SQL query used for the chart series

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 17
Creating a Pie Chart: Steps
1 3

4
2

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 18
Creating a Pie Chart: Steps
6

5
Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 19
Altering the Display of a Pie Chart
Specify the effect applied when
a pie is selected in the chart

Select the behavior to be applied when hovering over

data items on the chart.
Select the hide and show behavior that is
performed when clicking on a legend item
Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 20
Creating a Range Chart: Example

SQL query used for the chart

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 21
Creating a Range Chart: Steps
1 3

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 22
Creating a Range Chart: Steps 6

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 23
Customizing the Display of a Range Chart
2

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 24
Creating Calendars
• Oracle Application Express has an integrated calendaring component
• Calendars in APEX are based on a table or SQL query you provide

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 25
Creating a Calendar 1

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 26
Creating a Calendar

4 5

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 27
Editing Calendar Attributes in Property Editor

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 28
Enabling the Dragging and Dropping of Data: Example

Drag and drop

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 29
Enabling the Dragging and Dropping of Data: Steps

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 30
Creating Trees
• A tree is a hierarchical navigation mechanism
• Trees are implemented using a single hierarchical query that identifies the
row to be used as the start of your query, and the relationship between
parent rows and child rows of the hierarchy

SQL used for the Employees Tree

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 31
Creating a Tree: Example 2
1

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 32
Creating a Tree: Example

6
Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 33
Creating a Tree: Example

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 34
Modifying a Tree
BLAKE

CLARK

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 35
Summary

In this lesson, you learned how to create and customize:

• Oracle JET Charts
• Calendars
• Trees

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 36
Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 37
Hands-on Lab

Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 38
Copyright © 2019 Oracle and/or its affiliates. All rights reserved. Licensed under the Creative Commons Attribution 4.0 International License as shown at https://creativecommons.org/licenses/by/4.0/legalcode. | 39