Создание свойств фрагмента экранной формы и передача значений свойствам

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

Например, в приложении Электронная Библиотека на одной странице вы хотите отображать только список книг отечественных авторов, а на другой — только список книг зарубежных авторов. Вы хотите, чтобы фоновое изображение при отображении каждого из списков менялось. Тогда вы можете задать фоновое изображение во фрагменте экранной формы и создать свойство фрагмента экранной формы. Затем вы можете передавать в качестве значения свойства фрагмента тип списка: книги зарубежных или отечественных авторов.

Чтобы создать свойства фрагмента экранной формы:

В проекте выберите файл фрагмента экранной формы.
В верхей части Редактора Форм нажмите кнопку (Свойства фрагмента).
На панели Свойства фрагмента нажмите Добавить.
В списке типов свойств, который отображается, выберите один из следующих типов:
- Number;
- String;
- Boolean;
- Array;
- Object;
- Function.
На панели Свойства фрагмента в поле ввода введите имя добавляемого свойства.

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

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

Чтобы на родительской экранной форме использовать созданные свойства фрагмента экранной формы:

В проекте выберите родительскую экранную форму, на которую добавлена экранная форма типа фрагмент.
В визуальном режиме Редактора Форм на экранной форме выберите компонент Fragment.
На панели Свойства и события выберите вариант передачи значения свойству фрагмента:
- const: укажите константу в качестве значения свойства;
- var: выберите переменную из списка ранее определенных переменных состояния экранной формы;
- func: введите функцию на JavaScript. В этом поле ввода доступны стандартные возможности редактора кода Monaco Editor, например, подсветка ошибок синтаксиса, раскрытие и скрытие блоков кода.
- snip: если вы хотите сгенерировать блок кода для описания обработчика события, справа от snip нажмите + и из раскрывающегося списка, который отображается, выберите один из вариантов в зависимости от типа задачи, которую должен решать блок кода:
  - StaticLink: переход к экранной форме с заданным именем. Из раскрывающегося списка выберите имя экранной формы, к которой нужно перейти в разрабатываемом приложении.
  - SetState: управление переменными состояния экранной формы. Из раскрывающегося списка выберите имя переменной состояния, значение которой нужно изменить. Вы можете присвоить переменной значение константы или указать имя источника данных и выбрать поле из списка полей контракта данных.
  - DataSource: выполнение действий из списка на вкладке События в окне настройки источника данных. Из раскрывающегося списка выберите имя события.
  - URL: переход к экранной форме с настроенными параметрами маршрутизации. Из раскрывающегося списка с функцией автозаполнения выберите значение, соответствующее фрагменту URL-адреса и настроенное для экранной формы одного из проектов в текущем экземпляре Платформы. Если выбранный или введенный фрагмент URL-адреса содержит параметр, в этой же строке справа нажмите значок (Карандаш) и введите значение параметра как константу или укажите переменную состояния экранной формы.
  В файл описания экранной формы будет добавлен блок кода согласно выбранному варианту.
  
  Если вы хотите, чтобы обработчик события решал несколько задач, рядом со списком snip нажмите + и повторите выбор варианта, как описано выше.
  
  Если вы добавили несколько блоков кода и хотите изменить порядок их выполнения, в списке snip с помощью мыши расположите их в нужном вам порядке.
Вверху справа нажмите Сохранить.

Если вы описываете родительскую экранную форму в кодовом режиме Редактора Форм, и фрагмент имеет свойство типа функция, в коде родительской экранной формы это свойство должно вызываться с префиксом On-.

Следующий блок кода описывает экранную форму типа фрагмент со свойством Save типа функция.

<Container
  Name="TestFragment"
  ContainerType="PartView"
  Props={{
    Name: { type: "string", defaultValue: "" },
    Save: { type: "function", defaultValue: () => {} },
    }}
>
<Group CSS={["pt-16", "pb-16"]} Height="100%">
  <Button
  OnClick={() => { getProp('Save')() }}
  />
</Group>
</Container>;

Следующий блок кода родительской экранной формы демонстрирует передачу значения в виде функции свойству Save с префиксом On-.

<TestFragment
  On-Save={() => {
  console.log(123);
  }}
>
</TestFragment>

Связанные статьи

Фрагмент экранной формы

Связанные статьи​

Связанные статьи