Формы с зависимыми списками в Oracle Visual Builder Cloud Service

Зависимые списки являются наиболее важным компонентом современных форм, где иногда требуется отображать список выбора, в котором раскрывающиеся значения зависят от значения, выбранного пользователем в предыдущем списке выбора. Типичным примером этого может быть список городов в соответствии со значением штата, выбранным пользователем. В этом блоге мы воссоздаем этот сценарий и продемонстрируем, как служба Visual Builder Cloud включает зависимые списки в форме опроса пользователей.

Модель данных

В этом блоге будет продемонстрирована модель данных, которая позволяет читателям понять различные объекты и значения данных одним из многих возможных способов структурирования модели данных для создания этой формы. Может быть несколько других способов моделирования данных, но базовые концепции останутся прежними.

Приложение использует три настраиваемых бизнес-объекта - Состояния, Города и SurveyInfo. Города ссылаются на государства через справочное поле, как показано на схеме.

Аналогичным образом SurveyInfo ссылается как на Штаты, так и на города. Это позволяет пользователю видеть список всех штатов и городов и уточнять значения городов в зависимости от выбранного значения штата.

Подробную структуру этих бизнес-объектов можно увидеть на схеме ниже.

Штаты и города были заполнены некоторыми выборочными данными, соответствующими штатам и городам США, аналогично тому, что показано на диаграмме.

Создать страницу и собственный код

На главной целевой странице выберите создание новой страницы типа «Создать». На этой странице мы создадим форму опроса.

При появлении запроса свяжите объект SurveyInfo с этой страницей.

Перетащите панель из палитры компонентов слева на холст, чтобы создать структуру для формы (это необязательно)

Щелкните значок «Данные» и перетащите на панель все необходимые поля бизнес-объекта, кроме городов.

Совместите метки, как показано на схеме ниже. Перетащите пользовательский код на панель чуть ниже раскрывающегося меню Состояние. Код Представление и модель для раскрывающегося меню Город представляет собой компонент поля со списком JET с небольшими изменениями для включения доступа к данным VBCS для настраиваемых бизнес-объектов http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html? component = combobox & demo = foreach

Скопируйте Модель и Шаблон или представленный ниже код в разделы «Модель пользовательского кода» и «Шаблон» соответственно.

Пользовательский код имеет три ключевых фрагмента кода:

1. Прислушиваемся к изменениям в родительском раскрывающемся списке.

Чтобы отслеживать изменения в выбранном значении «Состояние», код использует метод подписки. Каждый раз, когда значение State, выбранное из раскрывающегося списка, изменяется, вызывается метод подписки.

this._listener = this.pageViewModel.Observables.SurveyInfoEntityDetailArchetype. record.ref2State.subscribe(function(value) {..}

2. Использование API-интерфейсов VBCS для извлечения данных из настраиваемых бизнес-объектов.

Метод READ считывает все данные в соответствии с любым заданным условием. В соответствии с выбранным значением State, соответствующие города могут быть прочитаны с помощью API операции.

Более подробную информацию об API можно увидеть здесь: http://docs.oracle.com/en/cloud/paas/app-builder-cloud/abcsb/module-api_js_Operations.html

var condition = Conditions.SIMPLE(ref2State, Operator.EQUALS, value);
var operation = Abcs.Operations().read({
entity: cities, 
condition: condition
 });

Впоследствии observableArray с городами используется для привязки к полю со списком.

3. Установка значения для справки по городу

ValueChangeHandler - это метод, который вызывается при изменении параметра, и именно здесь значение поля устанавливается в записи архетипа. В полях ввода с перетаскиванием эти значения устанавливаются автоматически, но, поскольку мы используем собственный код для поля со списком, нам придется установить его вручную.

self.valueChangeHandler = function (context, valueParam) { 
if (valueParam.option == “value”) { 
var $SurveyInfoEntityDetailArchetypeRecord = self.pageViewModel.Archetypes.SurveyInfoEntityDetailArchetype. getRecord(); $SurveyInfoEntityDetailArchetypeRecord.setValue(‘ref2City’, valueParam.value[0]); 
}//End If 
};//End Handler

На этом дизайн страницы создания завершен. Проверьте сценарии зависимых списков, перейдя в режим «Живой» и введя значения в поля ввода.

Нажмите "Сохранить и закрыть". Это сохранит данные в настраиваемом бизнес-объекте SurveyInfo. Перейдите к Business Objects в меню, чтобы просмотреть данные.

На этом мы завершаем примерный сценарий формы с зависимыми списками. Код можно изменять в соответствии с различными сценариями и несколькими раскрывающимися списками.

Чтобы узнать больше об Oracle Visual Builder Cloud Service, перейдите по ссылке https://cloud.oracle.com/ApplicationBuilder

Взгляды, выраженные в этом посте, являются моими собственными и не обязательно отражают взгляды Oracle.