Создание Web приложения с помощью фреймворка SAPUI5 (4)

В предыдущей заметке по обозначенной теме, я вывел информацию по работникам в представление (View), которое используется в моем приложении.

См заметку Создание Web приложения с помощью фреймворка SAPUI5 (1)

См заметку Создание Web приложения с помощью фреймворка SAPUI5 (2)

См заметку Создание Web приложения с помощью фреймворка SAPUI5 (3)

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

Control SearchField

См. SearchField

Контрол, который будет применяться для поиска/фильтра по таблице, нужно добавить в представление (View)

Проверяю изменения

Событие onSearch. Controller

Для обработки введенной пользователем строки поиска/фильтра, необходимо определить событие onSearch в контроллере приложения. Фильтр будет применен к столбцу, в котором содержится фамилия работника

См. Filter

Проверяю

Fragments

В модели данных employee содержится несколько больше информации, чем представлено в основной таблице. Чтобы отобразить недостающую информацию пользователю я воспользуюсь фрагментом, который будет загружаться по нажатию на пиктограмму из столбца Additional info

Fragments support the definition of light-weight stand-alone UI control trees. This class acts as factory which returns the UI control tree defined inside the Fragments. When used within declarative Views, the Fragment content is imported and seamlessly integrated into the View.

Fragments are used similar as sap.ui.core.mvc.Views, but Fragments do not have a Controller on their own (they may know one, though), they are not a Control, they are not part of the UI tree and they have no representation in HTML. By default, in contrast to declarative Views, they do not do anything to guarantee ID uniqueness.

But like Views they can be defined in several Formats (XML, declarative HTML, JavaScript; support for other types can be plugged in), the declaration syntax is the same as in declarative Views and the name and location of the Fragment files is similar to Views. Controller methods can also be referenced in the declarations, but as Fragments do not have their own controllers, this requires the Fragments to be used within a View which does have a controller. That controller is used, then.

Фрагмент может находиться, например, по следующему пути структуры проекта в SAP WebIDE.

/webapp/fragments/DetailedEmployeeInfo.fragment.xml

Обрабатываться он будет тем же контроллером, откуда выполняется его вызов.

См. Form

Загрузка фрагмента

По моей задумке, фрагмент должен быть загружен по нажатию на пиктограмму в столбце Additional info. Чтобы выполнить загрузку фрагмента, нужно отловить нажатие пользователем этой самой пиктограммы, которая расположена в основном представлении (View)

/webapp/view/Default.view.xml

Определяю событие onOpenDialog в контроллере приложения

Проверяю

Закрытие фрагмента

Удобное закрытие фрагмента может быть выполнено через добавление одноименной кнопки, и события в контроллере приложения, которое закончит начатое пользователем действие. Без наличия таковой, фрагмент может быть закрыт нажатием на клавишу Esq.

Код события onCloseDialog в контроллере

Проверяю