Sie sind auf Seite 1von 76

16

UI Maps

Copyright 2009, Oracle. All rights reserved.

UI Map Overview
A UI map is a meta-data object that holds the HTML that
appears in map zones to provide a more aesthetically
pleasing user experience
Foreshadowing:
BPA scripts (which will only be covered in the next chapter) make
extensive use of UI maps to capture data during update-oriented
business processes

This section describes the various UI map features and


design patterns

16 - 2

Copyright 2009, Oracle. All rights reserved.

Map Zones

Map zones contain display-only


information about a specific
instance of a BO along with buttons
that can initiate business processes
to change the BO

Info zones contain grids of


information related to the object
being displayed in a portal

We'll describe map zones in this section

16 - 3

Copyright 2009, Oracle. All rights reserved.

Base Package = Object Maintenance


Implementation = Portal Display and BPA Maintenance
The object maintenance pages are intentionally generic
so they can be used in many verticals and locales

UI maps allow your implementation to create a look


and feel that matches the customers business
16 - 4

Copyright 2009, Oracle. All rights reserved.

16
HTML Primer

Copyright 2009, Oracle. All rights reserved.

But Before We Start On UI Maps


The next several slides provide a brief overview of key
concepts that are employed to construct UI maps
When this section is complete, we'll describe how these
concepts are used in UI maps

16 - 6

Copyright 2009, Oracle. All rights reserved.

What Are the Pieces?


HTML
HyperText Markup Language
Used to define the structure of the page
Traditionally used to store the contents of the page as well. Not so
true in modern applications

CSS
Cascading Style Sheets
Used to define the look of the page
May be embedded in the HTML page or stored in a separate file
(both methods can be used)

Javascript
Used to enable actions against HTML elements or data on the page
May be embedded in the HTML page or stored in a separate file
(both methods can be used)
Is NOT Java (although there are some similarities)
16 - 7

Copyright 2009, Oracle. All rights reserved.

16
HTML

The Basic Elements

Copyright 2009, Oracle. All rights reserved.

HTML Skeleton
HTML is an XML document that a web browser will
understand
It contains a <head> element and a <body> element
<html>
<head>

The <head> will contain CSS


controls and Javascript
functions

</head>
<body>
</body>
</html>

16 - 9

The <body> will contain the


HTML elements that are visible
on the page. May also contain
CSS and Javascript

Copyright 2009, Oracle. All rights reserved.

Tables Allow For Easy Alignment


The easy way to structure information on an HTML page is
with the <table> element within the <body>
<body>
<table>
<tr>
<td>Aaa</td>
<td>Bbb</td>
</tr>
<tr>
<td>Ccc</td>
<td>Ddd</td>
</tr>

A <table> element contains rows


<tr> and cells <td>

</table>
</body>
16 - 10

Copyright 2009, Oracle. All rights reserved.

HTML Elements Have Attributes


(Just Like BO Elements)
HTML elements can also have attributes
<table border=1 cellpadding=7 cellspacing=7>
<tr>
<td colspan=2>Heading</td>
</tr>
<tr>

Notice how the first


row in the table
spans 2 columns

Border is 1 pixel

The Result
Cells have 7
pixels of space
around the data

<td>Aaa</td>
<td>Bbb</td>
</tr>
<tr>

Cells have 7
pixels of space
between them

<td>Ccc</td>
<td>Ddd</td>
</tr>
</table>

16 - 11

Copyright 2009, Oracle. All rights reserved.

Other Elements - <input>


The <input> element is used to capture data values

<body>
<input type=text/>
<input type=checkbox/>
<input type=button value=Press/>
</body>

There are other types


of <input> but these
three get a lot done

16 - 12

Copyright 2009, Oracle. All rights reserved.

Other Elements - <class>


The <class> element references functions that we supply
that perform dynamic processing at run time on the HTML
<body>
<table>
<tr>
<td class="oraLabel" oraLabel="approvalProfileBO/approvalProfile"> </td>
</tr>
</table>
The oraLabel class has logic that retrieves the label
</body>
from the element defined in the oraLabel attribute
and formats it using the standard label style (note,
this element's label source is controlled by the
object whose XML is injected into the HTML at run
time, e.g., it probably comes from the meta-data
field that's been set up to hold approval profile code)

16 - 13

Here's the placeholder that


will be populated with the
label of the approvalProfile
element at run time (based
on the user's language)

Copyright 2009, Oracle. All rights reserved.

<class> (continued)
Another <class>

<body>
<table>
<tr>
<td class="oraLabel" oraLabel="approvalProfileBO/approvalProfile"> </td>
<td><input type="text" class="oraInput" oraField="approvalProfileBO/description"> </td>
</tr>
</table>
</body>

The oraInput class has logic that retrieves a


value from the element defined in the oraField
attribute; it also has logic that populates this
element when the user continues

Here's the placeholder that will


be used to display / capture with
the value of the description
element at run time
There are other classes that
you'll be exposed to

16 - 14

Copyright 2009, Oracle. All rights reserved.

Other Elements - <span>


The <span> element is used to provide a placeholder for logic that
dynamically populates a value
Note, if there's a table declared, you rarely need a span as the td's are the
placeholders

For example, we have a function (oraPageTitle) that dynamically


retrieves a map's title from the field meta-data; this function needs a
span to know where to place the title's value as it's not in a table:
<body>
<span class="oraPageTitle" oraMdLabel="C1_APPR_PROF_LBL"> </span>
</body>

The oraPageTitle class has logic that


retrieves the label from the field defined
in oraMdLabel attribute and formats it
using the standard title style

16 - 15

Here's the placeholder that will


be populated with the label of
the C1_APPR_PROF_LBL field
at run time (based on the user's
language)

Copyright 2009, Oracle. All rights reserved.

Other Elements - <select>


The <select> element is used to create a drop-down; it is
the container for the <option> element
An empty option is provided by <option value=" "> </option>
<select>
<option value=" "> </option>
<option value=CA>California</option>
<option value=IL>Illinois</option>
<option value=NY>New York</option>
</select>

16 - 16

Copyright 2009, Oracle. All rights reserved.

Dropdowns Aren't Frequently Hard-Coded


Most dropdowns are derived at run time rather than being hard coded
(in English); there's a cool attribute called oraSelect that populates a
dropdown using several methods
<body>
<table>
<tr>
<td>
<select class="oraInput"
oraField="approvalProfileBO/approvalInfo/transferAdjustmentPrecedence"
oraSelect="lookup:C1_XFER_ADJ_PRECEDENCE_FLG;" >
<option value=' '> </option>
</select>
</td>
</tr>
</table>

The oraSelect attribute populates the option


values. In this example, it populates them
using the values of a lookup value
Lookups are just one way, you can use the
tips on the UI map for other ways to
populate the options values

</body>
16 - 17

Copyright 2009, Oracle. All rights reserved.

Putting It Together
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<td colspan="2">A Quick Person</td>
</tr>
<tr>
<td>Name</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State</td>
<td>
<select>
<option value="CA">California</option>
<option value="IL">Illinois</option>
<option value="NY">New York</option>
</select>
</td>
</tr>
</table>
16 - 18

Copyright 2009, Oracle. All rights reserved.

16
CSS

The Basic Elements

Copyright 2009, Oracle. All rights reserved.

Why CSS?

We finished the last section


with this panel
Functional but very bland

CSS will allow us to spice up


the panel with colors and fonts

16 - 20

Copyright 2009, Oracle. All rights reserved.

Element CSS
<table border=0" cellpadding="7" cellspacing="7 style="background-color:#BAD2F5; color:black;" >
<tr>
<td colspan="2 style=font-weight:bold>A Quick Person</td>
</tr>

A style attribute

<tr>
<td>Name</td>
<td style=background-color:red;><input type="text></td>
</tr>
<tr>
<td>State</td>
<td>
<select>
<option value="CA">California</option>
<option value="IL">Illinois</option>
<option value="NY">New York</option>
</select>
</td>
</tr>
</table>
16 - 21

Copyright 2009, Oracle. All rights reserved.

Extracting The CSS


As styles could be used on multiple elements, it would be good to
define them somewhere common
To do this, they need to be taken out of the HTML element and placed
into a <style> element
<head>
<style>
.tableStyle {
background-color: #BAD2F5;
color: black;

Notice that this is placed in the


<head> HTML element
mentioned earlier

}
.boldfont {
font-weight: bold;
}
</style>
</head>
16 - 22

Copyright 2009, Oracle. All rights reserved.

The New HTML


The same style can now be applied to many elements easily
And a single change to the style will affect ALL elements that use that style
<table border=0" cellpadding="7" cellspacing="7 class=tableStyle >
<tr>
<td colspan="2 class=fontBold>A Quick Person</td>
</tr>
<tr>
<td class=fontBold>Name</td>
<td style=background-color:red;><input type="text"></td>
</tr>
<tr>
<td class=fontBold>State</td>
<td>
<select> </select>
</td>
</tr>
</table>

16 - 23

Copyright 2009, Oracle. All rights reserved.

A class attribute

Application Common CSS

The <style> element may be removed from the HTML


completely and placed in a separate file (normally a .css
file)
This file can be referenced by your HTML page

Having a single CSS file for your application means that a


change to the external file will affect the entire system
WITHOUT needing to visit each individual HTML page
In fact, you have no choice as this is how the product is delivered
<head>
<link rel="stylesheet" type="text/css" href="../cm/myStyle.css">
</head>

16 - 24

Copyright 2009, Oracle. All rights reserved.

References

Colors - http://www.visibone.com/colorlab/big.html
CSS - http://www.blooberry.com/indexdot/css/
Easy Google Search is dot css"

16 - 25

Copyright 2009, Oracle. All rights reserved.

16
Javascript

Just The Basics

Copyright 2009, Oracle. All rights reserved.

Another HTML Attribute


The addition of the id attribute allows JavaScript to easily
reference HTML elements
<table border=0" cellpadding="7" cellspacing="7 class=tableStyle >
<tr>
<td class=fontBold>Name</td>
<td style=background-color:red;><input type="text id=name ></td>
</tr>
<tr>
<td class=fontBold>State</td>
<td>
<select id=state >
<option value="CA">California</option>

</select>
</td>
</tr>
</table>

16 - 27

Copyright 2009, Oracle. All rights reserved.

Basic Javascript Events


Javascript is an event-driven language
This means that something needs to happen in order to trigger a process

When using a browser, you are triggering MANY events every second
with even the smallest use
Some of the basic events are:

onMouseOver
onMouseOut
onLoad
onChange
onClick
onKeyPress
onBlur
onFocus
onUnload

16 - 28

There are more available to you. The most


common ones you will use normally are
onLoad and onClick

Copyright 2009, Oracle. All rights reserved.

A Basic JavaScript Function - 1


A very basic JavaScript function that takes a date and converts it to
local (User) format
Note, this is not a great example because, if you capture an element that's
defined as a date (in its schema or on the field meta-data), this function is
automatically applied)
<head>
<script type=text/javascript>
function initialLoad() {
var inDate = document.getElementById(inDate).innerText;
document.getElementById(date).innerText = oraConvertToLocalDate(inDate);
}
</script>
</head>

16 - 29

oraConvertToLocalDate() is a JavaScript
function that is made available through the
UI Map Framework

Copyright 2009, Oracle. All rights reserved.

A Basic Javascript Function - 2


The <body> element triggers the processing of the
initialLoad function by use of the onLoad event
The end result is the population of the second <span> with
a converted date
<body onLoad=initialLoad(); >
<span id=inDate>2007-05-01</span>
<br/>
<span id=date></span>
</body>

16 - 30

Copyright 2009, Oracle. All rights reserved.

Completing Our Panel


<table border=0" cellpadding="7" cellspacing="7 class=tableStyle >
<tr>
<td colspan="2 class=fontBold>A Quick Person</td>
</tr>
<tr>
<td class=fontBold>Name</td>
<td style=background-color:red><input type="text></td>
</tr>
<tr>
<td class=fontBold>State</td>
<td>
<select>
<option value="CA">California</option>
<option value="IL">Illinois</option>
<option value="NY">New York</option>
</select>
</td>
</tr>
<tr>
<td colspan="2>
<input type=button value=Submit style=width:100% onClick=oraSubmitMap(OK) />
</td>
</tr>
</table>

16 - 31

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

HTML and XML

Copyright 2009, Oracle. All rights reserved.

HTML (for formatting) + XML (for data values)


If you were to View Source on a map zone, you'd see two
logical sections

The 1st section contains the


HTML that controls how the
object is visually laid out

The 2nd section contains the XML


representation of the data
injected into the HTML (in this
example, it contains a BO)

16 - 33

Copyright 2009, Oracle. All rights reserved.

The Source Of The HTML


The HTML behind a map zone can come from one of the
following sources:
The system can render the HTML at run-time using attributes in a
schema (and this can be a BO, service script or business service
schema), OR
You can set up the HTML in the meta-data by creating a user
interface map (UI map) and then tell the system to retrieve the
HTML from the meta-data

Well describe the run-time rendering first

16 - 34

Copyright 2009, Oracle. All rights reserved.

Explicit Object Map Zone Type

Zone Type

Zone

Parameter
Type

Parameter

Map Zone Type

If you leave the UI map


parameter blank, the system will
render the HTML by interpreting
the BOs schema

Customer Map Zone

UI Map
Object Displayed

bo=Customer

XML Parm 1

sourceField=PER_ID targetPath=customerId

XML Parm 2
XML Parm 3
XML Parm

When you set up a map zone, you


declare
1) the type of business object thats
displayed (bo=) and
2) the name of BOs unique identifier
on the client (sourceField=)
3) where the BO's unique identifier
resides in the bos schema
(targetPath=)

You can also define where the value of sourceField


resides (you have the choice of the "global context"
or "portal context"). If you don't specify
sourceLoc=, the system looks in both places.
16 - 35

Copyright 2009, Oracle. All rights reserved.

BO Attributes Control The Formatting


- Using Field Metadata The algorithm that renders the HTML at run time uses several BO schema attributes that weve already
discussed:
mapField=. If you map an element to a field, the algorithm will use the fields data type and label (e.g., date, string,
money, lookup) to construct the HTML
mdField=. If an element references the optional mdField= attribute, the algorithm uses this field instead

IndividualTaxpayer Schema
<taxpayerId mapField="PER_ID" mdField="TP_ID"/>
<name />
<email mapField="EMAILID"/>
<socialSecurityNumber />
<homePhone />
<birthDate />

This elements label and formatting will be


derived from a field called TP_ID

This elements label and formatting will be


derived from a field called EMAILID on
the CI_PER table

16 - 36

Copyright 2009, Oracle. All rights reserved.

BO Attributes Control The Formatting


- Suppressing Elements The algorithm that renders the HTML will ignore elements
marked as either private=true or suppress=true
The base-package algorithm ignores
elements marked as suppress=true"
IndividualTaxpayer Schema
<taxpayerId mapField="PER_ID" mdField="TP_ID"/>
<email mapField="EMAILID"/>
<version mapField="VERSION" suppress=true" />
<perBusFlag mapfield="PER_OR_BUS_FLG" default="P" private=true" />
...

Private fields are not accessible by any


service (in fact, they wont appear in the
XML representation of the BO) and
therefore will never appear on a map

16 - 37

Copyright 2009, Oracle. All rights reserved.

BO Attributes Control The Formatting


- Overriding Field Metadata If you have a demo and want to avoid setting up field meta data, several other attributes can be used to control
formatting
As described in the BO chapter, dataType= overrides how the element value is validated; it also controls how the
elements value is displayed
label= is used to override the label used for display

IndividualTaxpayer Schema
...
<creditThreshold mapField="ADHOC_CHAR_VAL"
dataType="money" label="Threshold">
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="THRHLD" />
<EFFDT default="%CurrentDate" />
</row>
</creditThreshold>
...

This method is FORBIDDEN


in released software; it is
meant for demo's
16 - 38

IndividualTaxpayer Schema
...
<creditThreshold mapField="ADHOC_CHAR_VAL"
mdField="THRESHOLD">
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="THRHLD" />
<EFFDT default="%CurrentDate" />
</row>
</creditThreshold>
...

Both do the same thing - the right side means that youve set up a metadata
field with a type of "money" and a label of "Threshold"; this is more work up
front, but it allows for a multi-lingual and translatable application
Copyright 2009, Oracle. All rights reserved.

Additional Attributes Are Sometimes Needed


Some dataTypes require additional attributes, for example:
dataType="lookup" requires lookup="LOOKUP_FIELD"
dataType="money" can optionally support currencyRef="elementName"; if currencyRef is not specified the currency
defined on the installation record is used

Again, for base-package software, the mdField is the way to go

IndividualTaxpayer Schema
...
<custType mapField="ADHOC_CHAR_VAL"
dataType="lookup" label="Customer Type"
lookup="CUST_TYPE_FLG" >
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="CUSTTYPE" />
<EFFDT default="%CurrentDate" />
</row>
</custType>
...

Again, this method is


FORBIDDEN in released
software; it is meant for demo's
16 - 39

IndividualTaxpayer Schema
...
<custType mapField="ADHOC_CHAR_VAL"
mdField="CUST_TYPE" >
<row mapChild="CI_PER_CHAR">
<CHAR_TYPE_CD is="CUSTTYPE" />
<EFFDT default="%CurrentDate" />
</row>
</custType>
...

Both do the same thing - the right side means that


youve set a field up front to define the lookup value

Copyright 2009, Oracle. All rights reserved.

fkRef=
If the element is a foreign key to another table and you
want the FK's context menu and info string to be
displayed, you can add the attribute fkRef="FK Reference
Code"
IndividualTaxpayer Schema
...
<obligationId mapXML="BO_DEFN_AREA" label="Obligation" fkRef="SA" />
...

This will cause the SA's context menu and info string
to be displayed

16 - 40

Copyright 2009, Oracle. All rights reserved.

Inserting Section Headers


If you place a label on a group or list element a section
header will be displayed
Everyone knows that product developers must
use an mdField= rather than label=

IndividualTaxpayer Schema
<header type="group" label="Individual Taxpayer"/>
<taxpayerId />
<name />
<socialSecurityNumber />
<birthDate />
<contactInformation
type="group" label="Contact Information"/>
<email />
<homePhone />
</contactInfo

The label on the group element causes the section


header to be rendered
The style
"oraSectionHeader"
formats the HTML

16 - 41

Copyright 2009, Oracle. All rights reserved.

How This Works At Runtime


When the server gets a request to build a map zone:
It renders the HTML that controls the layout of the zone
This rendering is performed by an XSL thats defined on the zone type
This XSL uses attributes on the BO schema to create the appropriate
HTML to show the elements in their appropriate format

It then retrieves the identified business objects XML representation


and injects it into the rendered HTML
The "injected HTML" is then returned to the caller for presentation

The browser merges the XML elements into the


appropriate place in the HTML and the zone is ready for
display
If you click "View source" you can see both the BOs XML
and the rendered HTML
16 - 42

Copyright 2009, Oracle. All rights reserved.

Team Walk Through (45 Minutes)


During this exercise, you will use the following:
Admin Zone
User Preferences Portal Preferences

Please note, your workbook has detailed instructions for


this one; we might suggest that you try to write down what
you think you'd have to do to add this zone before you
peak at the answer

16 - 43

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

Suppressing Zones Using Service Scripts

Copyright 2009, Oracle. All rights reserved.

Use Service Scripts To Suppress A Zone


The query, info and map zones can be configured to call a
service script before they are displayed on a portal
This script will return a value of true (meaning to show the
zone on the portal) or false (meaning to suppress the zone
on the portal)
You'd use this feature if a zone should only be displayed if
some condition is true, for example:
Only display a display-only map zone that contains the details of a
bill if the user has broadcast a bill ID from another zone
Only display a "cancellation zone" if the state of the object that was
broadcast is "cancelled"

16 - 45

Copyright 2009, Oracle. All rights reserved.

Team Walk Through (30 Minutes)


During this exercise, you will use the following:
Admin Zone
Admin Script

Please note, your workbook has detailed instructions for


this one; we might suggest that you try to write down what
you think you'd have to do to introduce this script before
you peek at the answer
Hint, there's a parameter on the map zone (and you don't have to
write this script the framework has one for you)

16 - 46

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

UI Maps Contain Pre-specified HTML

Copyright 2009, Oracle. All rights reserved.

Some Base-Package UI Maps Are Not Generated At


Run-Time
If you need something special in your HTML (e.g., some event driven
logic or a button), you cannot use the dynamic rendering feature
described in the prior section (at least for now)
Rather, the HTML is entered by a developer and resides in the metadata, this is because some UI maps are a little more interesting than
just a list of fields
UI Map

The UI map contains the


predefined HTML (i.e., the HTML
is NOT rendered at run time)

This map zone contains buttons


these require specific HTML
(at least for 2.2)

16 - 48

Copyright 2009, Oracle. All rights reserved.

Defining The HTML Rather Than Rendering It Real Time

Zone Type

Parameter
Type

Zone

Parameter

Map Zone Type

Customer Map Zone

UI Map

map=CustomerMap

Object Displayed

bo=Customer

XML Parm 1

sourceField=PER_ID targetPath=customerId

XML Parm 2
XML Parm 3
XML Parm

16 - 49

If you specify a "UI map", the


system uses the HTML defined
on the UI map rather than
rendering it real-time

Copyright 2009, Oracle. All rights reserved.

UI Map Meta Data


The UI map contains the
predefined HTML (i.e., the HTML
is NOT rendered at run time)

HTML

The maps schema defines the


fields whose values are "injected"
into the map at run time

UI Map

This is HTML, it is NOT metadata that constructs HTML

Schema
<conservationProgram type="group">
<includeBO name="C1-ConservationProgram"/>
</conservationProgram>

The oraField= and oraLabel= attributes reference the


element names in the associated schema and will INHERIT
ALL OF THE ELEMENT'S FORMATTING FROM THE
RELATED SCHEMA (and this is why you don't have to
define oraType's in this UI map)
16 - 50

Notice in this example that weve


just "included" the schema of the
Conservation Program BO (so if
you change this BO, you dont have
to change the maps schema)

Copyright 2009, Oracle. All rights reserved.

Runtime Logic Is Almost Identical


When the server gets a request to build a map zone that
references a UI map:
It retrieves the HTML defined for the map
It then retrieves the identified business objects XML representation
and injects it into the retrieved HTML
The "injected HTML" is then returned to the caller (e.g., the clients
browser) for presentation

The browser merges the XML elements into the


appropriate place in the HTML and the zone is ready for
display
If you click "View source" you can see both the BOs XML
and the HTML

16 - 51

Copyright 2009, Oracle. All rights reserved.

Team Walk Through (45 Minutes)


During this exercise, you will use the following:
Admin UI Map
Admin Zone

In this walk-thru, each team will:


Create a UI map to gain more control over how the information is
displayed in your map zone
Change your map zone to reference your UI map

Please note, your workbook has detailed instructions for


this one; we might suggest that you try to write down what
you think you'd have to do to add this zone before you
peak at the answer

16 - 52

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

It's Not That Painful

Copyright 2009, Oracle. All rights reserved.

You Don't Have To Write HTML From Scratch


You may have noticed on the UI map page a dashboard
zone called Generate HTML
Clicking one of these buttons will invoke the XSL that is
used to dynamically render a UI map at run time except, in
this case, it updates the UI map's HTML with the results
And you can subsequently change the HTML as desired

To take advantage of this feature:


Create a UI map and include the necessary objects in its schema
Save the UI map
Press the desired button
Creates the display-only version of
the HTML that you've been using in
this chapter

16 - 54

Creates the input / output version of


the HTML that you'll be using in the
next chapter

Copyright 2009, Oracle. All rights reserved.

But It's Not A Magic Wand


After generating the HTML, you will frequently have to
update it to handle idiosyncratic JavaScript or anything
else special

16 - 55

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

HTML Fragments

Copyright 2009, Oracle. All rights reserved.

HTML Fragments Allow Reuse


Let's say you have many UI maps that share a common
look (e.g., you might have many maps with OK and Cancel
buttons)
Rather than repeat the HTML / JavaScript in all of your UI
maps, you can do the following:
Create a UI map and indicate it's an HTML Fragment (rather than a
Complete HTML Document)
In this UI map, just define the common HTML / JavaScript

In your "real" UI maps, include the fragment UI map


This is a real-time include so any changes to the UI map fragment will
instantly apply to all UI maps that include it

This technique can drastically decrease redundant HTML /


JavaScript in your UI maps (and decreasing redundancy
increases maintainability)
16 - 57

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

Help Text

Copyright 2009, Oracle. All rights reserved.

The Help Icon Appears When There's Help For A


Section Or A Field
If the field that's behind this section label has
Help Text (defined on Field Main), the
framework will show the help icon

If the user clicks it, the help text appears

16 - 59

Copyright 2009, Oracle. All rights reserved.

Help Text Lives In The Field Meta Data


This is the HTML behind the section with the
help icon shown on the previous slide

If there's a field behind an element on a UI


map and that field has help text, the
framework will show the help icon and
present the help text if the user clicks the icon

16 - 60

Copyright 2009, Oracle. All rights reserved.

We Typically Put Help On Sections Rather Than


Individual Fields
You'll notice that the help text is defined on
the section rather than the individual fields
This is a convention as you can put help
text on a field on the map and the help
icon will appear after the field's label

16 - 61

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

Populating The Dashboard

Copyright 2009, Oracle. All rights reserved.

Syncing The Dashboard


The map zone type can be configured to broadcast fields
to the dashboard (so the dashboard reflect the information
displayed in the portal)

16 - 63

Copyright 2009, Oracle. All rights reserved.

Team Walk Through (15 Minutes)


Update your map zone to sync the dashboard with the
global context data displayed in your map zone

16 - 64

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

Consistency

Copyright 2009, Oracle. All rights reserved.

Enforcing Consistency
We ship a sample style sheet so your HTML can inherit the
look and feel from a single spot
We also ship a library of JavaScript functions to handle
things like monetary formatting, date formatting,
defaulting, etc.
It's important that your UI maps include these so users are
presented with a consistent look and feel

16 - 66

Copyright 2009, Oracle. All rights reserved.

Use The Tips


The UI Map "tips" describe good ways to produce simple
HTML that looks consistent with the rest of the system
The tips are not an HTML reference
You should pursue other avenues for more sophisticated HTML
And that does NOT include asking product development to write this for
you

Another good source of HTML are the UI maps that are


supplied with the base-package
We've include many different examples just so you'd have
something to copy from

16 - 67

Copyright 2009, Oracle. All rights reserved.

16
User Interface (UI) Maps

Multiple BOs On A Map

Copyright 2009, Oracle. All rights reserved.

Elements From Multiple BOs On A Map


At this point, you now know how to construct a map zone
that contains a BOs elements
Next, youll learn how to construct a map zone that
contains elements from multiple BOs
During this section, well build a zone that shows a given
accounts main person and premise information

16 - 69

Copyright 2009, Oracle. All rights reserved.

Service Script Refresher


Invoker

Query Zone

Web / Application Server

Query
Zone

Validate
User Parms

Service
Script

In the Query Zone chapter, you created a service


script to validate the fields entered by the user on
the query zone; you then updated your query
zones parameters to indicate this script should
be invoked to validate the input values

16 - 70

Copyright 2009, Oracle. All rights reserved.

Database

Map Zone Refresher


Invoker

Map Zone

Web / Application Server

Map
Zone

1. Generate HTML
2. Retrieve XML

Business
Object

Earlier in this chapter, you created a map zone that


a) rendered HTML by interpreting a BOs schema, and
b) created an XML document containing a specific
BOs elements

16 - 71

Copyright 2009, Oracle. All rights reserved.

Database

Map Zones and Service Scripts


Invoker

Map Zone

Web / Application Server

Map 1. Generate HTML


Zone 2. Retrieve XML

Service
Script

Database

Business
Object

In this section, rather than communicate directly with a


single BO, youll set up a service script to communicate
with multiple BOs; the superset of their XML
documents will be injected into the HTML that displays
elements from the BOs

16 - 72

Copyright 2009, Oracle. All rights reserved.

Refresher: A Service Script Defines Its API And Its


Logic

Script
(Service)

API
(Script
Schema)

The scripts schema


defines the services
input and output

<includeBO name="Account"/>
<includeBO name="Person"/>
<includeBO name="Premise"/>

Step

Youll be using two commands:


1) Read BO
2) Move

In this example, the script will return


information about 3 BOs (that are
coincidentally named like their MOs
this is just coincidence)
And the service scripts input will be an
account ID (which is passed as one of
the Account BOs elements)

16 - 73

Copyright 2009, Oracle. All rights reserved.

Team Walk Through (90 minutes)


Analyze a display UI map
Break up into teams and follow the instructions in the workbook

16 - 74

Copyright 2009, Oracle. All rights reserved.

Review Questions

16 - 75

Copyright 2009, Oracle. All rights reserved.

16 - 76

Copyright 2009, Oracle. All rights reserved.