CPQ JET Deep Dive

Best Practices and Customization

Shirin Lange
Manager of User Experience
CPQ, CX Design
December 2, 2020
Safe harbor statement

Statements in this presentation relating to Oracle’s future plans, expectations,

beliefs, intentions, and prospects are “forward-looking statements” and are subject
to material risks and uncertainties. A detailed discussion of these factors and other
risks that affect our business is contained in Oracle’s Securities and Exchange
Commission (SEC) filings, including our most recent reports on Form 10-K and Form
10-Q under the heading “Risk Factors.” These filings are available on the SEC’s
website or on Oracle’s website at http://www.oracle.com/investor.

All information in this presentation is current as of December 2020 and Oracle

undertakes no duty to update any statement in light of new information or future
events.

2 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

 Shirin Lange

Manager of User Experience

CPQ, CX Design

3 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Introduction to JET UI
What it is
Who should use it
Where it’s going

4 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

What is JET?

Oracle’s JavaScript Extension Toolkit (JET)

• Heavily researched, ‘Mobile First’ UI Framework
based on modern JavaScript, CSS3 and HTML5
design and development principles
• Provides a clean, streamlined user experience -
fully responsive across desktop, tablet and phone
devices.
• Open source JavaScript libraries along with a set of
Oracle contributed JavaScript libraries make it
simple to build and extend cloud-based, client-side
applications.
• Over the next years will replace all Legacy UIs as
CPQ’s modern standard for UIs.

5 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JET UI
Modernized User Experience

Benefits
• Streamlined, intuitive, modern user experience
• Fully responsive, one layout, any device
• Mobile device users benefit from features and functionality
available to the desktop users
• Enhanced table usability, including Line Items, arrays and
part lists
• No full screen refreshes – pages update only data impacted
by the user’s actions
• Loading Indicators and Progress Indicators show users immediate
reaction
• Subscription Ordering support
• Deal Management visuals
• Integration support
• Oracle Sales Cloud
• Salesforce (Classic or Lightning Embedded)
• Microsoft Dynamics 365

6 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JET Transaction UI: Line Item Grid Enhancements

Benefits
• JET Tables: Stronger, Faster, Better and Smoother
Features
• Enhanced rendering performance and
responsiveness
• Faster refresh of table while editing
• Smoother row selection and row edit modes
• Easy column resize and freeze
• Wrap cell content option
• Rows will expand as needed to fit additional lines of
content
• Existing table features, upgraded with…
• Checkbox selection
• Reorder Columns
• Expand All/Collapse All
• Select All

7 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Commerce Dynamic Menus – Upcoming JET UI Enhancement

• Benefits
• Simple menu option maintenance through a Commerce
defined source such as Data Tables Menu
Attribute
• Dynamic menu option filtering based on other
Commerce attribute values and user input.
• Features Static Menu Dynamic Menu
• Use Data Table entries as the domain of values
• Available with JET UI on Main and Sub
Fixed entries Data Tables
Documents
• Supported features
• Commerce rule actions and conditions
• BML & Formulas
• Document & Email Designer Templates
• Translations
• Available in REST services (V11+)

8 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JET Transaction UI: Next-level responsive experience

Features
• Update pages with only data impacted by the user’s
action to eliminate full screen refreshes
• User preferences persisted across sessions and
transactions
• Units conversion support in JET UI
• Quick Add Search on additional attributes
• HTML Attributes in LIG
• Drag and Drop line resequencing
• Action Icons on LIG Lines
• JET Favorites
• JET Transaction Manager
• AJAX Recommendation Rules with Configuration
arrays

9 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JET UI Administration : Next-level responsive experience

Benefits
• Enhanced UI designer with responsive
capabilities for commerce layouts
• Provide better usability and admin
experience by adopting new redwood
paradigm

Features
• Allows admins to easily customize both
commerce legacy and JET layouts
• Drag and drop capabilities for UI elements
such as attributes, actions, layout elements
• UI elements previewed similar to what
users will be presented in the transaction
UI
• Easier access to unified Settings tab that
includes various settings options for
selected element
10 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted
Quote Preview in Config

Benefits
• Enhanced JET based seamless shopping cart
experience
• Avoid multiple transitions between config and
commerce
• Ability to create/view quote while staying in config
UI

Features
• Add to Quote button will add selected
configuration to the Quote while staying in config
• View modal to preview the number of items and
the total amount added to the quote
• Go to Quote button on the view modal and config
will take the user to the transaction

11 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Enabling and Adoption Tips
How to do it
Things to consider

12 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Who Should Adopt the JET UIs?

Everyone!
• New features such as Transaction Arrays and Collaboration will only be available in JET
Adoption is a matter of timing
• Volume of JavaScript customization
• Extremely large models with thousands of parts per branch (pagination)
• Couple with other roadmap projects involving UI
• Mobile Layouts will require care to switch in 19A
Transition selected groups of users incrementally to ease training and change management
requirements.

13 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

What’s Involved in Adopting CPQ JET Uis?

New features mean a new experience

• Users will use CPQ differently
• A bit of learning curve may require some training/change management
Enable the JET UI for test users
Optimize your JET Layout
Define your JET CSS
• Now consolidated into a single stylesheet specifically for all JET UIs
Refactor JavaScript Customizations
• HTML Document Object Model (DOM) has changed

14 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

 Behavioral Differences in the CPQ JET UI

• Multiple Main Documents in a Commerce Process are • File Attachment Merge sequencing is suboptimal
not supported • Previous and Next navigation is not available in Line
• Action Icons do not display on the LIG lines (ex. Details
reconfigure). Actions are taken via LIG toolbar • Pagination is only option – but filtering may address
actions after keyboard selection of single or multiple user requirements
lines.
• Line Item Grid Colum Header Labels truncate but
• Drag and drop of LIG lines is not supported. LIG lines display on hover. End user can choose to Wrap Cell
can be re-sequenced by editing the line Sequence Content from the View menu options.
Number.
• ‘Auto’ LIG Column width = default of 100 px. Admins
should specify the appropriate width

15 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JET Responsive Transaction UI

1. Enable JET for a limited group of users to start

2. Enable the new JET Responsive layout while maintaining the existing Legacy Desktop layout and
assigning user access to the layouts based on user type and user group.
3. With both layouts enabled, existing customers can make the transition to the JET Responsive layout
at their own pace.
• For example: Customers may decide to gradually transition the sales team and initially enable the
JET Responsive layout for select sales users and sales managers in limited scenarios, such as
when reviewing and approving quotes.
4. Administrators do not need to log an SR to enable the JET Transaction UI

Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How to Enable the JET UI

1. CPQ’s JET Transaction UI is enabled on the Commerce Process Administration

page

17 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How to Enable the JET UI

1. Grant Access by User Type and User Group

18 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Layout Editor - Transaction

JET Layout is cloned from the

existing Desktop Layout
Modifications to JET Layout affect
only JET UI
Layout is retained even if JET is
disabled
➢ JET Layout editor is different
from Legacy Layout editor
➢ Can be discarded and re-
generated

19 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Coexistence of JET UI with the Mobile Layout

• Mobile Layout overrides the JET Transaction UI

• Delete the Mobile Layout for Commerce when you are
ready to enable JET for all users on all devices
• JET Configuration UI can be set to override the Mobile Layout
• Use an emulator to test JET UI on mobile devices
• JET framework is tested and supported on the following
mobile devices
• IOS : Safari
• Android : Chrome
• Windows : Chrome, Firefox

20 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Layout Editor - Configuration
➢ One Layout, generates both JET and Legacy UI
➢ Layout editor has additional options that apply only to JET or Legacy
➢ Attribute Definitions have additional options that apply only to JET or Legacy or both
➢ Best practice: select display options in Attribute Definitions

21 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Optimizing layouts for JET
Getting the most out of JET
Best Practices

22 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Optimize the Line Item Table
Set line item grid columns wide enough to show the header text

• By default text does not wrap, so try to abbreviate or shorten labels

• Users can choose to Wrap Cell Content
• Start with a width that suits the content for each column
• Set default widths in px especially for columns with a large amount of content or long
labels
• Design the layout for wide screens, let the responsive behavior adapt the content for
smaller screens. Use 3-5 columns of form inputs when possible.

23 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Optimize the Line Item Table
Move all Line Item table-related actions into the Line Item table specific toolbar.

Set Line item grid table height to the minimum necessary.

✓ Depending on your users’ average screen size, they should be able to see 15-20 line items, plus
pagination controls
✓ For large models anticipate user interaction (ex. what level of detail must they see at the same
time?)
✓ Remember that users can filter to view a subset of line items

24 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Rethink the Layout
Design for a widescreen layout

JET layout is responsive, panel columns will wrap and redistribute on smaller screens. Design the layout
for wide screens, let the responsive behavior adapt the content for smaller screens.
✓ Use 3-5 columns of form inputs
when possible.
✓ More than one set rows in panel
column groups can result in a
jumbled layout
✓ Group related content under
sub-headings
✓ Use custom class to create fixed
columns as needed

25 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Optimize the Layout

1. Use only one set of panel columns per panel

• JET layout is responsive, panel columns will wrap and redistribute on smaller screens
• More than one set of panel columns in a single panel can result in a jumbled layout

2. Add ‘toolbars’ to contain sub-header labels and actions

• Use toolbars with labels for Sub-headers inside panels
• Move any buttons from content area to these toolbars.

3. Consider your mobile users

• Display labels at ‘Top’ for readability

4. Use custom class to create fixed columns as needed

26 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Visual Elements

Show, Don’t Tell

Visuals express more than words and are
appealing to the eye.

✓ Clean, clear images

✓ Aesthetic Consistency
✓ Deal Management visuals
✓ Customer’s products
✓ Customer branding

27 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Minimize Text

Keep it light
Short sentences are easier to read.
If you bombard visitors with text all over the
screen — and make those sentences hard to
read, they won’t know where to start reading and
won’t be able to digest your content.
✓ Avoid presenting users with all the available
options on a single page.
✓ A sequence of pages/panels is less dense and
more lightweight in appearance.

28 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Use the right Display type
YES NO
Dropdown menu
• Best for single selection when there are a
large number of choices
• Multi-select menus with many choices can be
difficult to use, break out the choices into
multiple menus
Radio buttons / Checkbox groups
• Best when there are 2-5 options
• Great for showing what all the options are at
once
• When the choices are all short in length,
horizontal layout may be preferable
• When the choices are long in length, vertical
layout may be preferable

29 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Use the right Display type

Filmstrips
• Great when space is limited
• Can show a large number of options
• Multi or Single Select
• With or without images
Cards
• Great for showing all options at all times
• With or without images
• Images work best when all are consistent in size and
style
Select Menu – with Images
• Best when space is very limited, shows images while
selecting, only label shows once selected.

30 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Use the right Display type

Slider
• Only for numbers within a range
• Best for showing selection in relations to
min/max
Switch
• Best option for all Booleans
• Mobile friendly
Number Spinner
• Best for Integers
• Mobile friendly

31 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

TEST!!!!

1. Test with a variety of transactions, using different computers

2. Use an emulator to test different browsers and devices

32 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Styling and Customization
How to do it
Tips & Tricks

33 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How do I customize the JET UI?

1. A new JET CSS file can be uploaded on the stylesheet administration page.
2. Applies to all JET UIs in CPQ site-wide
3. Legacy CSS files will not affect the new JET UIs

34 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How do I create CSS for JET UI’s?

1. As with Legacy UI, you can apply styling to Classes, ID's, and HTML elements.
2. The ID tags created by CPQ for each attribute, action, product families, product lines, models, and
custom classes all remain the same in the JET HTML structure.
3. However, the HTML structure itself is very different from the Legacy UI because of the new
framework used to create the HTML.
4. Additionally, classes in JET are distinctly different from Legacy classes. Classes in JET for the
different UI components and content are prefixed with the ‘oj’ for Oracle JET.
5. If you are new to creating CSS, additional help documentation with general guidelines for clean CSS
creation can be provided upon request.

35 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How can I force content to stay in a fixed position?

Use the min-width property, this disables responsive behavior, content will scale and stretch in the
fixed position.

.fixedcolumn{
min-width:100px;
}

36 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How do I style tabs?

In the Layout Editor, tabs can be set to display as Vertical or Horizontal

.oj-tabbar-horizontal .oj-tabbar-item.oj-selected a.oj-tabbar-item-content .oj-tabbar-item-label,
.oj-tabbar-horizontal .oj-tabbar-item.oj-hover a.oj-tabbar-item-content .oj-tabbar-item-label {
font-weight: 700;
color: #FF0000;/*branding color*/
text-transform: uppercase;}

.oj-tabbar-horizontal .oj-tabbar-item {
border-width: 2px 1px 1px 1px!important;
border-radius: 6px 6px 0 0!important;
border-color: #0000FF #0000FF #FF0000 #0000FF!important;
background-color: #EEEEEE;}

.oj-tabbar-horizontal .oj-tabbar-item.oj-selected {
background-color: #FFFFFF;
border-color: #FF0000 #FF0000 #FFFFFF #FF0000!important;}

.oj-tabbar-vertical .oj-tabbar-item {
border-width: 1px 1px 1px 2px!important;}

.oj-tabbar-vertical .oj-tabbar-item.oj-selected {
border-color: #FF0000 #FFFFFF #FF0000 #FF0000!important;
border-width: 1px 3px 1px 3px!important;}

.tab-panel-container-vertical .tab-content.oj-panel {
border: 1px solid #FF0000!important;}

.tab-panel-container-vertical .oj-tabbar {
border-right: 1px solid #00FF00!important;
margin-right: -3px!important;}

37 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How do I style buttons?

Buttons can be styled individually, or for all buttons. In JET Transaction, actions can be set to display
as a menu button, or as separate buttons.
.oj-button {
background-color: #0000FF!important;
background-image: none!important;
border-color: #0000FF;
color: #FFFFFF;
}
.oj-button.action-submit_t {
background-color: #00FF00!important;
background-image: none!important;
border-color: #00FF00;
}

.oj-button-label{
color: #FFFFFF;
font-weight: 700;
}

38 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

What else can I style?

Content text Attributes in the Line Item table

To change the way text is styled in the UI, the Individual columns in the Line Item table can be
best practice is to use the html elements as color-coded, or otherwise custom styed, simply
selectors. Below is an example of how the text be using the attribute variable name as the
could be styled for Headings and labels. selector. By adding the prefix “col-“ before the
attribute name, this tells the JET UI that you wish
h1, h2, h3, h4, h5 {
to style table columns that contain that attribute.
color: #00ff00;
font-family: Courier;
.col-pricePeriod_l{
font-style: italic;
background: #ff0000!important;}
font-weight: 700!important;}

39 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

What else can I style?

Panels and Page background Example:

All of the non-tabbed panels in JET UI are generated
with the same class ‘oj-panel’. This makes it easy to set #top-toolbar,
the same border and background settings for all #main-panel{
border: 0px solid transparent;
panels, everywhere. background: transparent;
Tabbed panels are all generated with the class ‘oj-tabs- .oj-panel,
.oj-tabs-panel{
panel’. The main panel that contains all of the page border: 1px solid #000000;
content also has a unique ID ‘main-panel’ which allows background: #ffffff;}
you to style this one separately from the others.
Finally, the title bar at the top of the page also has a
unique ID ‘top-toolbar’.

40 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

What else can I style?

Specific tabs li.oj-tabs-tab:nth-child(3) {

border-color: 2 #FF0000 solid;
Individual tabs can be styled differently from the background: #00FF00;}
others if desired. The most reliable way to do this
is by using the Nth-child selector. Below is an
example of styling the 3rd tab differently from the
others.

41 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

How do I change the icons in the Alta Navigation?

This is an example of how CSS can be applied to the Alta Navigation so that the commerce process icons render
alternative images for each state, these images are uploaded using the File Manager. Additional styling centers
the title content vertically

#cpq-alta-header #cpq-header-tb .cpq-nav-threepages[aria-labelledby="ui-id-4"] .cpq-nav-icon::before { #cpq-alta-header > span{ align-items: center!important;}

content: url("../../image/Icons/navi_process1_24_ena.png")!important;} #cpq-alta-header > span > img,

#cpq-alta-header #cpq-header-tb .cpq-nav-threepages[aria-labelledby="ui-id-5"] .cpq-nav-icon::before { #cpq-alta-header > span > p {margin: 0 5px!important;}

content: url("../../image/Icons/navi_process2_24_ena.png")!important;}

#cpq-alta-header #cpq-header-tb a.oj-hover[aria-labelledby="ui-id-4"] .cpq-nav-icon::before {

content: url("../../image/Icons/navi_process1_24_hov.png")!important;}

#cpq-alta-header #cpq-header-tb a.oj-hover[aria-labelledby="ui-id-5"] .cpq-nav-icon::before {

content: url("../../image/Icons/navi_process2_24_hov.png")!important;}

#cpq-alta-header #cpq-header-tb a.cpq-selected[aria-labelledby="ui-id-4"] .cpq-nav-icon::before {

content: url("../../image/Icons/navi_process1_24_act.png")!important;}

#cpq-alta-header #cpq-header-tb a.cpq-selected[aria-labelledby="ui-id-5"] .cpq-nav-icon::before {

content: url("../../image/Icons/navi_process2_24_act.png")!important;}

42 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

JavaScript Customizations in JET

1. We strongly advise on minimizing JS!

2. JS is not warrantied to work, especially on upgrade
3. However, we know customers do use it…
• HTML DOM has changed
• Attributes hidden from the user are directly accessible by JS as of Release 2020D
• Modifications to the CPQ JavaScript Framework files bm-framework.js and commerce.js will no
longer work
• Include JavaScript in a Commerce HTML attribute or in the Header or Footer
4. Important Considerations:
• Be aware of timing. To run scripts after the layout is fully loaded, call scripts from an HTML attribute
that appears on the layout. This must be on a panel/tab that is visible by default.
• Use setTimeout to defer a script until current threads are completed.
• Avoid overuse of JavaScript, as it can affect performance.
• Enlist an experienced JavaScript developer to implement customizations on the JET UIs.

43 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Resources
Customer Connect – Events and Forum
https://cloudcustomerconnect.oracle.com/

My Oracle Support (MOS)

CPQ Cloud JET Transaction UI: Planning for Adoption

[2455080.1]

CPQ Cloud JET Transaction UI: Refactoring Existing JavaScript

Customizations [2490016.1]

CPQ Cloud JET CSS: Branding and Styling [2462711.1]

44 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Thank you
Questions?

45 Copyright © 2020, Oracle and/or its affiliates | Confidential: Restricted

Our mission is to help people see
data in new ways, discover insights,
unlock endless possibilities.