Article

(View Disclaimer)

Please see the attached UseJQuery.pdf document and sample Provisioning Request Definition. It will be necessary to rename JQuery-CoolSolution.xml.txt to JQuery-CoolSolution.xml before it can be loaded into the Designer.

Using jQuery in Identity Manager Roles Based Provisioning Module Workflow Forms

by Joe Craddock, Bess Siegal, Steve Williams

Introduction

For increased styling, layout, and functionality flexibility, jQuery can be employed to greatly enhance your workflow request and approval forms. Two examples are outlined in this document. A Simple Example shows and hides blocks of fields using CSS and injects labels to the right of some fields. An Advanced Example creates tabs, places controls / fields on the tabs, and inserts a Google Map for obtaining latitude and longitude coordinates.

A. Simple Example

Figure A1

Click to view.

This is a sample workflow request form, comprised of two (2) sections, "Personal Information" and "Work Information." A true/false Radio Button control toggles the appearance of the "Work Information" section. It addresses some customers' specific needs, namely:

1. Include an image logo in the first column, such as a PeopleSoft icon when the workflow request is for access to PeopleSoft. In this example the Novell logo appears (does not require jQuery).
2. Include two (2) labels for a single control, such as English to the left of the field and Hebrew to the right of the field. In this example German labels are included for certain fields.
3. Hide and show blocks of fields using CSS.

Fields

The fields of the workflow form are shown in Figure A2.

Figure A2

Click to view.

Custom CSS class names have been applied to each control and label in the following manner:

The following lines of CSS can be added to theme.css of the custom theme, or you may add them as internal CSS using the "counter-wrapping" technique outlined in the Advanced Example (see Inclusion of jQuery UI CSS Framework).

.cust-personal{
}
.cust-field{
font-size: 10px;
}
.cust-label{
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.cust-deLabel {
font-size: 12px;
font-style: italic;
padding-left: 5px;
}
.cust-job{
}
.cust-radio-label {
font-weight: bold;
font-size: 12px;
white-space: nowrap;
background-image: url(images/N_logo_22.png);
background-position: 0px 0px;
background-repeat: no-repeat;
height:30px;
padding-left:20px;
padding-top:3px;
}
.cust-radio {
font-size: 12px;
}
.cust-radio input {
width: 1em;
margin-left: 3em;
text-align: left;
}

Scripts

All the jQuery injection is done from the Scripts tab of the Forms tab (see Figure A3) in Designer.

Figure A3

Click to view.

Logo

The Novell logo appears next to the radio button label by specifying the cust-radio-label class name as described above.

jQuery

External script with Id of "Script" is the google library to load jQuery. It's value is:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Hide/Show "Work Information"

Inline Script

Inline script with Id of "Script1" is the simple jQuery to hide or show fields and labels that have the "cust-job" class or the "headingcust" ID. "Script1" is below:

//Show/Hide 'job' related fields
function showWork(show)
{
$(".cust-job").each(function() {
var td = $(this).parent();
var tr = td.parent();
if (show) {
tr.show();
$("#_headingjob").show();
} else {
tr.hide();
$("#_headingjob").hide();
}
});
//show/hide tr holding field with class-name "cust-job"
//since whole tr gets hidden with display:none anyway
//title cannot have custom class, so get it by ID
}

onchange event

The onchange event of the radio button has the following code:

if (field.getValue() == 'true')
{
showWork(true);
}
else if (field.getValue() == 'false')
{
showWork(false);
}

Pre-Activity

The Pre-Activity of the Start activity on the Data Item Mapping tab has "false" specified for the Source Expression of radio.

Add Labels to the Right

Inline script with Id of "Script2" is script using jQuery to insert the German labels to the right of some fields by adding an extra table column where needed. "Script2" is below:

// insert right labels
$(document).ready(function(){
var fld = ["FirstName", "LastName", "HomePhone", "JobTitle", "WorkPhone"];
var de = ["Vorname", "Zuname", "Haus Telefonnummer", "Job-Titel", "Arbeit
Telefonnummer"];
for (var i = 0; i < 5; i++) {
var td = $("#_" + fld[i]).parent();
var tr = td.parent();
tr.append("<td class=\"cust-deLabel\">" + de[i] + "</td>");
}
});

B. Advanced Example – Tabs and Google Map

Figure B1

Click to view.

Building on the Simple Example, the Advanced Example adds a Google Map to determine latitude and longitude coordinates. In addition, tabs are added putting the Home and Work Information of the Simple Example into the last tab.

Fields

Additional fields need to be inserted (see Figure B2). The naming convention of the tabs is used in the Scripts section.

Figure B2

Click to view.

Scripts

All the jQuery injection is done from the Scripts tab of the Forms tab (see Figure B3) in Designer.

Figure B3

Click to view.

Inclusion of jQuery UI CSS Framework

The value of script with Id of "Script3" above is used to inject jQuery UI CSS framework into the workflow form. This will allow tabs to be created. It is slightly modified so that input fields will remain consistent with the rest of the application with font-size: 11px instead of 1em. "Script3" is shown below:

</script>
<style type="text/css">
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3;
text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both;
visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute;
opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; backgroundrepeat:
no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height:
100%; }
/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?
ffDefault=Verdana,Arial,sansserif&
fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgText
ureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHe
ader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.p
ng&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorConte
nt=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=7
5&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=d
adada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHo
ver=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&
bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=4545
45&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55
&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorEr
ror=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a
&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_fla
t.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=
01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShad
ow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
*/
/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { fontfamily:
Verdana,Arial,sans-serif; font-size: 11px; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/uibg_
flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/uibg_
highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; fontweight:
bold; }
.ui-widget-header a { color: #222222; }
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid
#d3d3d3; background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50%
repeat-x; font-weight: normal; color: #555555; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color:
#555555; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widgetcontent
.ui-state-focus { border: 1px solid #999999; background: #dadada
url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal;
color: #212121; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none;
outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa;
background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
font-weight: normal; color: #212121; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color:
#212121; outline: none; text-decoration: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid
#fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50%
repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a;
background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35;
filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7;
filter:Alpha(Opacity=70); font-weight: normal; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/uiicons_
222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/uiicons_
222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/uiicons_
222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/uiicons_
888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image:
url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/uiicons_
454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/uiicons_
2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image:
url(images/ui-icons_cd0a0a_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius:
4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius:
4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-leftradius:
4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-rightradius:
4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius:
4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-leftradius:
4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-rightradius:
4px; }
.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-rightradius:
4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-rightradius:
4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius:
4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png)
50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa
url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .
30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px;
}/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margintop:
1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .
5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top:
50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margintop:
-2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto;
display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover
{ top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margintop:
-8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; textalign:
center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px
0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse;
margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold;
border: 0; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; textalign:
right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0
0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .
2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto;
overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-leftwidth:
0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { borderleft-
width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }
/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-rightwidth:
0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { borderright-
width:0; border-left-width:1px; }
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
display: none; /*sorry for IE5*/
display/**/: block; /*sorry for IE5*/
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;
}
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%;
width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebarclose:
focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none;
overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0;
background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0;
cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto;
overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/* Progressbar
----------------------------------*/
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* Resizable
----------------------------------*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display:
block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizablehandle
{ display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px;
}
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left:
0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height:
100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%;
}
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px;
bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom:
-5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top:
-5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top:
-5px;}/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em;
height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em;
display: block; border: 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom:
-.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
----------------------------------*/
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width:
0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottomwidth:
0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-statedisabled
a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabsselected
a { cursor: pointer; } /* first selector in group seems obsolete, but
required to overcome bug in Opera applying cursor: text overall if defined
elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0;
background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
nv_hidden {visibility:hidden}
</style>
<script>

Note that the value yields syntax and invalid XML errors in Designer, which you may ignore. This is because the form renderer is expecting valid ECMA Script, so it wraps all its contents within <script> and </script> tags. To get around that, the internal CSS is "counter-wrapped" to begin with </script> and end with <script>.

jQuery UI

External script with Id of "Script4" is the google library to load jQuery UI. It's value is:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js

Google Maps API

External script with Id of "Script5" is the Google Maps API. It's value is:
http://maps.google.com/maps/api/js?sensor=false

Create Tabs

Inline script with Id of "Script6" converts each Title control with Form Field Name of tabNtitle to a tab using jQuery with each of the controls under the tab-title on its respective tab (see Figure B2). Script6 is below:

// transform the input, placing in tabs
$(document).ready(function(){
// obtain all rows in table
var trGuys = $("form table tr");
try {
var tabNumber = 0;
var foundFirst = false;
for (index=0; index < trGuys.size(); index++) {
var currentRow = trGuys.get(index);
var tabTitle = $("#_tab" + (tabNumber+1) + "title", currentRow);
if (tabTitle.size() > 0) {
tabNumber = tabNumber + 1;
foundFirst = true;
// if this is our first tab, start to build the structure
if (tabNumber == 1) {
$('<div id="tabs"><ul id="tabTitlebar"></ul>').insertAfter("#uiform
input[name='uasess']");
}
var tabLi = $("<li></li>");
var anchor = $("<a id='tab" + tabNumber + "anchor' href='#tabs-"+ tabNumber
+"'>" + "</a>");
tabLi.append(anchor);
tabLi.appendTo("#tabTitlebar");
//as of jQuery 1.3.2 (currently working in FF but not IE)
//$("'#_tab" + currentTab + "title'", currentRow).appendTo("[href=#tabs-"
+ currentTab + "]");
//so instead append and remove
$(currentRow).remove();
anchor.append(tabTitle);
//Add the div wrapper for jquery tabs
//and the table wrapper for the tab contents (ie, the table rows of form
controls)
$("<div id='tabs-" + tabNumber + "'><table cellspacing='2' cellpadding='0'
border='0' id='tab" + tabNumber + "-content'></table></div>").appendTo("#tabs");
} else {
//place the buttons in a table by themselves
if ($(":has(':button')", trGuys.get(index)).size() > 0) {
$("<table id='jquery-action-buttons' align='center'
width='180px'></table>").insertAfter("#tabs");
trGuys.slice(index, index+1).appendTo("#jquery-action-buttons");
} else if (foundFirst == true) {
trGuys.slice(index, index+1).appendTo("#tab" + tabNumber + "-content");
}
}
}
} catch (e) {
alert(e);
}
function init() {
$('#tabs').tabs();
}
// transform the input, placing in tabs
init();
});

Add Google Map

Inline script with Id of "Script7" inserts a Google Map onto the first tab. The regular form controls are repositioned to be to the right of the map. A Click listener is added to the map so that the latitude and longitude are put into the form's locationLatitude and locationLongitude fields,
respectively. "Script7" is below:

//Add Google Map
$(document).ready(function(){
var map;
var marker;
// place the google maps control to be used as a tower location chooser
// on the first tab on left side of page, move existing juice controls
// to right side of page
function addLatLongHelper() {
$('<table cellspacing="2" cellpadding="0" border="0"><thead><tr
valign="top"><td><div id="map_canvas" style="width: 400px; height:
400px"></div></td><td><div
id="insertControlsHere"/></td></tr></thead></table>').insertBefore("#tabs-1
table");
var removedElement = $("#tabs-1 table:nth-child(2)").remove();
$('#insertControlsHere').append(removedElement);
var myLatlng = new google.maps.LatLng(39.034271,-77.174936);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
// function to add lat/long to page
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
if (marker == null ) {
marker = new google.maps.Marker({
position: location,
map: map});
marker.set_draggable({flag:true});
} else {
marker.set_position(location);
}
try {
// get lat/long from the click
var lat = Math.round(location.lat()*Math.pow(10,4))/Math.pow(10,4);
var lng = Math.round(location.lng()*Math.pow(10,4))/Math.pow(10,4);
// set lat/long on form
$('#_locationLatitude').val(lat);
$('#_locationLongitude').val(lng);
} catch (ex) {
alert(ex);
}
}
// functions have been defined, call them
addLatLongHelper();
});

Conclusion

With the ability to import external JavaScript libraries, you can utilize jQuery to manipulate your form's look and layout. In addition, you can also capitalize on other libraries such as Google's Map API.

Disclaimer: As with everything else at Cool Solutions, this content is definitely not supported by Novell (so don't even think of calling Support if you try something and it blows up).

It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test, test, test before you do anything drastic with it.