Продолжаю тему совершенствования Oracle Business Intelligence Enterprise Edition Plus. В этой заметки я расскажу как можно реализовать автозаполнение (autocomplete) для формы с параметрами (prompt).
Пусть у вас есть промпт с параметрами, вы можете указать способ выбора значения в виде поля ввода (input field), комбо-бокса (combobox) или селектора (multiselect). Штатные средства Oracle BI EE+ не всегда подходят при реализации проектов или не очень нравятся заказчикам. Поэтому можно придумать новый компонент для выбора параметров. На сегодняшний день существует целый ряд свободно распространяемых JavaScript библиотек, например YUI, в которых есть готовые компоненты для реализации динамического автозаполнения для поля ввода (input). Выглядит такой компонент очень эффектно, а главное соотвествует современным тенденциям Web 2.0. Учитывая архитектуру и широкие интеграционные возможности платформы Oracle BI EE+ объединить в едином порыве две технологии оказывается легко и просто.
Итак, самый главный принцип, на котором построен весь процесс интеграции -- это уникальность идентификаторов для всех объектов в Oracle BI EE+, расположенных на интерактивных панелях. Если войти в систему, открыть любую страницу интерактивной панели и посмотреть исходный код HTML-страницы, которую вернул сервер можно увидеть много чего интересного. Все объекты разметки страницы (Dashboard Objects): секции, отчеты, промпты, текст, ссылки и т.д. имеют уникальные, а главное постоянные! идентификаторы вида: %d:dashboard~p:%. Приведу примеры таких идентификаторов:
<div id="Embedd:dashboard~p:b066kq3ar62rn9em~s:4re2i3152f3cf9jv" minimized="false" rendered="false">
<table id="d:dashboard~p:b066kq3ar62rn9em~s:4re2i3152f3cf9jvContents" style="width:100%;">
<div id="d:dashboard~p:b066kq3ar62rn9em~s:4re2i3152f3cf9jv~g:tq884vk2228ff5otNavDone"><div id="d:dashboard~p:b066kq3ar62rn9em~s:4re2i3152f3cf9jv~g:tq884vk2228ff5otResult" result="Prompt">
Так вот, любой промпт на странице -- это форма, которая также имеет уникальный идентификатор. Использую JavaScript в связке с DOM можно "привязать" к любому полю промпта компонент AutoComplete.
Порядок работы очень простой, вы создаете вашу страницу с промтом/ами и отчетами, сохраняете ее, а потом смотрите идентификаторы форм, а далее пишите небольшой код на JavaScript, который добавляет к полям ввода функционал YUI по автозаполнению.
Пример такого кода:<script language="javascript" type="text/javascript">
YAHOO.example.BasicRemote = function() {
var prtFrm = document.getElementById('d:dashboard~p:q7q92hth31ekk10c~s:lu6stvlkcujn8lj2~g:b07h1h367v1fu8m2form');
var inputFld = prtFrm.elements[0];
inputFld.size=30;
var spanContainer = inputFld.parentNode;
var divList = document.createElement('div');
divList.id = inputFld.id + '_list';
var divContainer = document.createElement('div');
divContainer.id = spanContainer.id;
divContainer.class = spanContainer.class;
divContainer.appendChild(inputFld);
inputFld.parentNode.insertBefore(divList,inputFld.nextSibling);
spanContainer.parentNode.replaceChild(divContainer,spanContainer);
var oDS,oAC;
var connectionCallback = {
success: function(o) {
var xmlDoc = o.responseXML;
oDS = new YAHOO.util.DataSource(xmlDoc);
oDS.responseType = YAHOO.util.DataSource.TYPE_XML;
oDS.responseSchema = {
resultNode: "R",
fields: ["C0"]
};
oAC = new YAHOO.widget.AutoComplete(inputFld.id,divList.id,oDS);
},
failure: function(o) {
alert('Fail to retrieve customer list');
}
};
var getXML = YAHOO.util.Connect.asyncRequest("GET","saw.dll?Go&SQL=SELECT+%22D1%20Customer%22.%22C1%20%20Cust%20Name%22+FROM+%22Sample%20Sales%22&format=xml&userid=Administrator&nqpassword=Administrator",connectionCallback);
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
Все очень просто.
Я реализовал пример на стандартной схеме Samples Sales, c которой по умолчанию поставляется Oracle BI EE+. Я добавил новую интерактивную панель "04 Custom", на которой разместил две страницы. Первая страница -- пример промпта с одним параметром и отчетом, связанным с этим параметров, вторая страница -- пример промпта с несколькими параметрами. За основу я взял стандартную страницу History из веб-каталога Samples Sales. Посмотреть как это выглядит в жизни можно тут:
В состав примера входят:
- Ресурсы -- библиотека YUI (с моими правками скина для autocomplete);
- Веб-каталог -- Sample Sales;
Для развертывания примера нужно сделать следующее:
- Записать папку yui из архива в ресурснуб папку Oracle BI EE+ (oc4j_home/applications/analytics/analytics/res);
- Подключить веб-каталог из примера к Oracle BI EE+;
- Пароль администратора -- стандартный (Administrator).