Управление содержимым фрагмента экранной формы

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

Компонент Slot выполняет такую же функцию, как Компонент высшего порядка (Higher-Order Component, HOC) в React.

Компонент Slot представляет именованное зарезервированное пространство во фрагменте экранной формы и имеет единственное свойство Name для указания имени пространства. Содержимое этого пространства определяется в коде родительской экранной формы: между открывающим и закрывающим тегами с именем фрагмента указываются теги с именами компонентов, добавляемых во фрагмент, а в качестве значения свойства Slot этих компонентов указывается имя зарезервированного пространства.

Количество компонентов Slot в коде фрагмента экранной формы не ограничено.

к сведению

Компонент Slot можно добавить только на экранную форму типа фрагмент и только в кодовом режиме Редактора Форм. Свойство Slot компонента можно добавлять и изменять как в визуальном, так и в кодовом режиме Редактора Форм.

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

<Container
  Name="TwoColumns"
  ContainerType="PartView" 
  Commands={[]}
  Scripts={[]}
  Meta={{ templateType: "Default", propModels: {} }}
>
  <Group CSS={["pt-16", "pb-16"]} Height="100%">
    <Group Height="100%" Width="50%">
      <Slot Name="Left" />
    </Group>
    <Group Height="100%" Width="50%">
      <Slot Name="Right" />
    </Group>
  </Group>
</Container>;

Следующий блок кода демонстрирует описание родительской экранной формы ParentPage1. В коде ParentPage1 при вставке фрагмента экранной формы TwoColumns указаны компоненты Text, которые должны быть размещены в зарезервированных именованных пространствах Left и Right.

<Container
  Name="ParentPage1"
  ContainerType="Page"
  Commands={[]}
  Scripts={[]}
  Sid="ParentPage1_1bab2171"
  Meta={{ templateType: "Default" }}
>
  <Group CSS={["pt-16", "pb-16"]} Height="100%">
    <TwoColumns ValueRoot="a578cbd2">
      <Text Value="текст слева" Slot="Left" />
      <Text Value="текст справа" Slot="Right" />
    </TwoColumns>
  </Group>
</Container>;

Следующий блок кода демонстрирует описание родительской экранной формы ParentPage2. В коде ParentPage2 при вставке фрагмента экранной формы TwoColumns указаны компоненты Button, которые должны быть размещены в зарезервированных именованных пространствах Left и Right.

<Container
  Name="ParentPage2"
  ContainerType="Page"
  Commands={[]}
  Scripts={[]}
  Sid="ParentPage2_1bab2172"
  Meta={{ templateType: "Default" }}
>
  <Group CSS={["pt-16", "pb-16"]} Height="100%">
    <TwoColumns ValueRoot="a578cbd3">
      <Button Text="кнопка слева" Slot="Left" />
      <Button Text="кнопка справа" Slot="Right" />
    </TwoColumns>
  </Group>
</Container>;