Перейти к основному содержимому

Переход между экранными формами приложения

Формулировка задачи​

По нажатию строки в списке сущностей на экранной форме А перейти на экранную форму В с подробной информацией о выбранной сущности.

Предварительные требования​

Создана экранная форма А со списоком сущностей и экранная форма B, отображающая информацию об одной сущности.

Рекомендуемое решение задачи​

Существуют следующие способы перехода к экранной форме:

  • с использованием History API браузера;
  • с использованием метода executeAction() JS-библиотеки FrontendCore.

Настройка маршрутизации с использованием History API браузера​

  1. Настройка маршрутизации для экранной формы B.

    Имена параметров указываются в URL-адресе после символа двоеточия, например, /project/:Id.

  2. Вызов метода goToUrl() на экранной форме A с URL-адресом в качестве параметра.

    OnRowClick={async (item) => {
       goToUrl('/project/:Id', {Id: item.Id}); // значение будет доступно через getValue('History.params.Id')
    }}

    На экранной форме B значение параметра из URL-адреса будет доступно в переменной History.params.<имя параметра>, например, History.params.Id.

Настройка маршрутизации с использованием метода executeAction()​

  1. Создание действия типа Static для перехода от экранной формы A к экранной форме B.

  2. Вызов метода executeAction() на экранной форме А с именем действия и параметрами действия.

  3. Получение доступа к параметрам на экранной форме B через переменную Request.<имя параметра>, например, Heap: Request.rowId.

    OnRowClick={async (item) => {
       executeAction('goToAddProj', { Id: item.Id }); // значение будет доступно через getValue('Request.Id')
    }}