Кастомное отображение пользовательского компонента

Вы можете настроить кастомный дизайн для пользовательских компонентов, который задаётся на основе React-элементов. Стандартные компоненты при этом не используются.
Кастомное отображение доступно для новых пользовательских компонентов и тех, которые ещё не публиковались.

Чтобы включить кастомное отображение, в конфигурационный файл Settings.config добавьте фича-флаг:

<add key="Exp_ViewEnabled" value="true" />

Тогда в дизайнере интерфейсов в настройках пользовательских компонентов можно активировать создание кастомного отображения:

1. Создайте новый пользовательский компонент или откройте ещё не опубликованный пользовательский компонент.
2. Перейдите в раздел Сценарии и откройте вкладку Отображение.
3. Отметьте опцию Включить сценарий.
4. В появившемся окне Создать кастомное отображение нажмите Создать.

После этого сгенерируется код. В нём вы можете настроить кастомное отображение для пользовательского компонента с помощью сценария.

Как обратиться к контексту

При работе с кастомным отображением доступен контекст, с которым вы можете работать так же, как при написании клиентских сценариев. Например:

Context.Name

Как вызвать метод контроллера

Чтобы вызвать изменение в контексте, используйте Dispatcher:

Dispatcher(a => a.SetName("New test name"))

Если вы хотите вывести данные без изменения значений контекста, используйте следующий код:

// В клиентском коде
public bool VisibleName() {
	return !string.IsNull(Context.Name);
}
// В отображении
Controller.VisibleName() //?

Как указать стили

Для работы со стилями используйте:

public Style GetStyle() {
	return DOM.Style(); // ?
}

Что такое Fragment

Компонент Fragment не создаёт элемента в разметке. Он позволяет отобразить несколько элементов, которые вложены в него.

Пример:

// В клиентском сценарии
partial class ComponentController
{
            public Task SetName(string name)
            {
                Context.Name = name;
                return Task.CompletedTask;
            }

            public bool VisibleName()
            {
                return !string.IsNullOrWhiteSpace(Context.Name);
            }
}
// В отображении
partial class Renderer
{
            public override ReactElement Render()
            {
                return DOM.Div(
                    new Attributes {
                        ClassName = "my-component",
                        OnClick = mouseEvent => Dispatch(c => c.SetName("New test name"))
                    }, 
                    GetAction(),
                    GetList(),
                    GetStyle()
                );
            }

            public ReactElement GetAction() 
            {
                return DOM.A(new AnchorAttributes(), Controller.VisibleName() ? Context.Name : "Name");
            }

            public ReactElement GetStyle() 
            {
                // <style> a { color: red !important; }</style>
                return DOM.Style(new StyleAttributes {
                }, ".my-component a { color: red !important; }");
            }

            public ReactElement GetList() 
            {
                var list = new ReactElement[] {};
                list.Push(DOM.Br(new BrAttributes()));
                if (Controller.VisibleName())
                {
                    list.Push(DOM.Span("Visible Name"));
                }

                list.Push(DOM.Br(new BrAttributes()));
                list.Push(DOM.Span("Element in list"));
                return new Fragment(list);
            }
}