Объединение UI/UX Design, готового программного обеспечения и кодирования.
Будь то просто из-за дизайна, отсутствия функциональности или сочетания того и другого, каждый программист, работающий с Dynamics 365, в какой-то момент столкнется с функцией, требующей создания PCF. Все те, кто создавал компонент PCF, знают, что это может быть головной болью в первый раз (и даже во второй….).
Поэтому я решил создать учебное пособие как для всех начинающих, так и для неохотных разработчиков PCF, проведя их через создание часто запрашиваемого компонента — поля ввода пароля с возможностью переключения видимости нажатием кнопки в форме глаза. Пример можно увидеть ниже:
Удивительно, но такого элемента управления вводом в экосистеме динамики не существует, и кажущаяся простота функции никак не связана с простотой реализации. Мне потребовалось пару часов ковыряния, чтобы понять это.
Мы начнем с шаблонного кода PCF, который можно получить, следуя инструкциям в документе Microsoft здесь. Просто замените все ссылки на имя LinearInputControl на PasswordInputControl и пространство имен на пространство имен по вашему выбору.
Нашей отправной точкой является объявление пяти частных переменных. Особо следует отметить переменные _eye и isVisible, которые не являются стандартными. _eye станет нашей кнопкой переключения состояния, а isVisible будет логической переменной, соответствующей (как вы уже догадались) видимости текста в поле ввода.
Затем мы создадим подпапку в нашем PasswordInputControl с именем css, где мы поместим приведенный ниже код в файл с именем style.css, чтобы оформить нашу кнопку _eye как глаз.
Ниже в функции init мы добавим все наши компоненты в основной контейнер.
Что еще более важно, мы добавим прослушиватель событий с функцией toggleState (которую мы определим позже) в _eye и установим для логического значения isVisible значение false, поскольку текст в поле пароля должен начинаться как невидимый.
Все реальное состояние переключения — это переключение логического значения isVisible (false становится истинным, а true становится ложным).
После внесения этого изменения вызывается функция _notifyOutput, которая запускает функцию updateView.
UpdateView отвечает за переключение видимости на основе isVisible (см. строки 14–19)…. Мне потребовалось неприлично много времени, чтобы понять, что notifyOutputChanged вызвало updateView. Если вы новичок в этом, как и я — надеюсь, это избавило вас от некоторых проблем.
Как только этот код будет реализован, просто перейдите в папку src и выполните следующие три команды:
npm install -g npm run build npm start
Это должно запустить ваш компонент в браузере и позволить вам протестировать и отладить его с помощью инструментов разработчика. Полный код можно найти в моем портфолио на GitHub ниже.
