tumblr counter

This blog entry is about finding a prompt on a page and from there you can dynamically manipulate the html object. ie. resizing, style, setting focus (making the cursor default to that prompt) etc. This is a simple piece of DHTML (javascript) and very useful.

1. Setup the Dashboard Page with your prompts
In this example I have a simple dashboard page with one prompt on it. The prompt name is “Search”.

Why do I need to Find a Prompt?
In order to manipulate the prompt you need to find it in the HTML source. Every time the page is requested from the OBIEE presentation server it renders the prompts on the page with unique IDs making it difficult to locate and manipulate prompts. For this reason we need a piece of javascript to iterate through the dashboard page (HTML source) and look for the specific prompt and then return ID value.
You can do this yourself by clicking “View Source” in your browser and then searching for all occurrences of the prompt name, in this case “Search”.

This input box is the target, we want to find it and return the ID.

In this example we’re going to use the “Search” Edit Box prompt as seen in the screenshot above.

There are no easy ways to manipulate the input box prompt via the properties in OBIEE Dashboards. Yes you can manipulate the CSS style but it is limited. You can’t perform the following via style sheets:
1. uppercase/lowercase the input field before submitting to the database;
2. set focus/highlight the text onload;
3. adjust properties of the text field automatically;
4. perform javascript validations before executing database query;
5. add/remove custom events to the input box; etc

This blog post will demonstrate how to “find” the prompt on the page and then open up a world of options to you via javascript. In this example we will perform the following:
1. onload, injection of the “findTextPrompt” function into the HEAD of the document;
2. set the width of the Search Prompt so it looks good and longer than 10 chars;
3. set the colour of the text (why not) 😉
4. set focus so the user can start typing straight away without having to click inside the text box;
5. on “Enter” the field is submitted to the database;

Step 1. Add the Javascript to your dashboard page
(if you’re not sure how to add Javascript to your page please read my other blog posts ie. Adding a Dynamic Banner).

<script type="text/javascript">

Created By: Leigh Wilson (leigh@wilson-is.com)


This code is tested on Internet Explorer 6, 7, 7 and 9.


function injectJavascriptIntoHead(scripttext) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = scripttext;
return false;
} //injectJavascriptIntoHead

var findinputboxer = '';
findinputboxer += 'function findTextPrompt(fieldname) {\n';
findinputboxer += '// this function will traverse the DOM and return the input element that matches the search field.\n';
findinputboxer += ' var spans = document.getElementsByTagName("span");\n';
findinputboxer += ' for (var i=0;i<spans.length;i++) {\n';
findinputboxer += ' if (spans[i].className == \'GFPCaption\' && spans[i].innerHTML == fieldname) {\n';
findinputboxer += ' //ok, we\'ve found the field but the input box is in the next SPAN so let\'s get the next span\n';
findinputboxer += ' //alert(spans[i+1].innerHTML);\n';
findinputboxer += ' var inputbox = spans[i+1].innerHTML;\n';
findinputboxer += ' var pos = inputbox.indexOf("id=");\n';
findinputboxer += ' var pos2 = inputbox.indexOf(" ", pos+1);\n';
findinputboxer += ' var id = inputbox.substr(pos+3, pos2 - (pos+3));\n';
findinputboxer += ' id = id.replace( new RegExp(\'"\', \'g\'), \'\');\n';
findinputboxer += ' return id;\n';
findinputboxer += ' }\n';
findinputboxer += ' }\n';
findinputboxer += ' return \'\';\n';
findinputboxer += '}\n';


var searchjs = '';
searchjs += 'function listen(evnt, elem, func) {\n';
searchjs += ' if (elem.addEventListener) \/\/ W3C DOM\n';
searchjs += ' elem.addEventListener(evnt,func,false);\n';
searchjs += ' else if (elem.attachEvent) {\n';
searchjs += ' \/\/ IE DOM\n';
searchjs += ' var r = elem.attachEvent("on"+evnt, func);\n';
searchjs += ' return r;\n';
searchjs += ' } else window.alert(\'Error: cant listen on event!!!\');\n';
searchjs += '} \/\/listen\n';
searchjs += '\n';
searchjs += 'function checkIfEnterPressed(e) { \n';
searchjs += ' if (!e) { e = window.event; if (!e) { e = event; } }\n';
searchjs += ' var key = e.keyCode ? e.keyCode : e.charCode\n';
searchjs += ' if (key == 13) { \n';
searchjs += ' global_go();\n';
searchjs += ' return false;\n';
searchjs += ' } \// if\n';
searchjs += '} \//checkIfEnterPressed\n';
searchjs += '\n';
searchjs += '\n';
searchjs += 'function loadSearchPage() {\n';
searchjs += ' NQOnLoadEvent(); \/\/we need to call the default OBIEE onload event first\n';
searchjs += ' var searchfield;\n';
searchjs += ' \n';
searchjs += ' searchfield = document.getElementById(findTextPrompt(\'Search\'));\n';
searchjs += ' searchfield.value = searchfield.value.toUpperCase();\n';
searchjs += ' \n';
searchjs += ' \//Set the search field so that on key press it will clear the hidden prompts of any values.\n';
searchjs += ' \n';
searchjs += ' searchfield.size="70";\n';
searchjs += ' searchfield.style.backgroundColor="black";\n';
searchjs += ' searchfield.style.color="white";\n';
//searchjs += ' listen("keypress", searchfield, checkIfEnterPressed);\n';
searchjs += '\n';
searchjs += ' searchfield.focus(); \//set focus\n';
searchjs += ' searchfield.select(); \//auto select the text\n';
searchjs += '}\n';


listen("load", window, function() { loadSearchPage(); });

Step 2. Modify the code accordingly
The only place you need to modify the code is the name of the prompt. In this post the prompt (Label) is “Search” and must be the only prompt on the page with that specific name.

searchjs += ' searchfield = document.getElementById(findTextPrompt(\'Search\'));\n';

Make sure the findTextPrompt function contains the name of the prompt you are searching for.

I customised the prompt using the following piece of code:

searchjs += ' searchfield.size="70";\n';
searchjs += ' searchfield.style.backgroundColor="black";\n';
searchjs += ' searchfield.style.color="white";\n';

Then the last piece of sexy code sets the prompt as the focus and selects the text inside it (if any). In the context of an input box, “Set Focus” is the term used when setting the cursor to default to this field so it’s ready for the user to start typing. They don’t need to click on it or in it to start typing their search results.

searchjs += ' searchfield.focus(); \//set focus\n';
searchjs += ' searchfield.select(); \//auto select the text\n';

The end result is a very cool looking Search Page….
The user types in “andrew”…

On Enter…the page uppercases the text, submits to the database and the report runs. As the page refreshes the text is “set focus” and the user can continue searching quickly without the need for clicking around. The way it should be!!

Give me a shout if you would like me to demo some other events/customisations. If i have time I will reply with an example post.

L out.

No Comment.

Add Your Comment