Скрытие свойств из типа опроса при загрузке – SurveyJS Angular

Вопрос или проблема

const creator = new SurveyCreatorModel(creatorOptions);
const black_list = ['showTimer', 'timerLocation', 'timeLimit', 'timeLimitPerPage', 'timerInfoMode'];
// первый способ...
black_list.forEach(property => {
  Serializer.getProperty('survey', property).visible = false;
})
// второй способ...
creator.onShowingProperty.add(function (_, options) {
  if (options.obj.getType() == "survey") {
    options.canShow = !black_list.includes(options.property.name);
  }
});

Ответ или решение

Скрытие свойств в SurveyJS Angular на этапе загрузки: Исполнение и решения

В контексте разработки на Angular с использованием библиотеки SurveyJS, часто возникает необходимость скрытия определённых свойств в интерфейсе создания опросов. В вашем случае вы хотите скрыть раздел "Режим викторины" при первой загрузке типа опроса, однако, как вы заметили, механизм не работает должным образом на первом открытии панели. Давайте рассмотрим возможные решения этой проблемы.

Проблема: Появление свойств на первой загрузке

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

Решение 1: Использование Serializer для скрытия свойств

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

const creator = new SurveyCreatorModel(creatorOptions);
const black_list = ['showTimer', 'timerLocation', 'timeLimit', 'timeLimitPerPage', 'timerInfoMode'];

// Скрытие свойств сразу после инициализации
black_list.forEach(property => {
  Serializer.getProperty('survey', property).visible = false;
});

Решение 2: Использование события onShowingProperty

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

creator.onShowingProperty.add(function (_, options) {
  if (options.obj.getType() === "survey") {
    options.canShow = !black_list.includes(options.property.name);
  }
});

Решение 3: Объединение обоих методов

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

const creator = new SurveyCreatorModel(creatorOptions);
const black_list = ['showTimer', 'timerLocation', 'timeLimit', 'timeLimitPerPage', 'timerInfoMode'];

// Скрытие свойств заранее
black_list.forEach(property => {
  Serializer.getProperty('survey', property).visible = false;
});

// Обновляем видимость при смене свойств
creator.onShowingProperty.add(function (_, options) {
  if (options.obj.getType() === "survey") {
    options.canShow = !black_list.includes(options.property.name);
  }
});

Заключение

Скрытие свойств на первой загрузке в SurveyJS Angular требует внимательности к порядку инициализации компонентов и привязки обработчиков событий. Используя предложенные методы, вы сможете успешно управлять видимостью свойств в вашем приложении.

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