Марина Крячко, ландшафтний архітектор (Харків) Інфраструктурний проект «Інший шлях»
Component Framework · • Технічний архітектор в Hitachi Solutions America,...
Transcript of Component Framework · • Технічний архітектор в Hitachi Solutions America,...
![Page 1: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/1.jpg)
Андрій БутенкоЯк почати розробляти власні компоненти використовуючи PowerApps Component Framework
![Page 2: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/2.jpg)
• Розробник ПЗ з 2005 року• Розробник під Dynamics CRM/365 for CE з 2008 року• MVP з Dynamics CRM/Business Solutions/Business Apps з 2010
року• Технічний архітектор в Hitachi Solutions America, Гринвіль,
Південа Кароліна
Трохи про мене
Blog: https://butenko.pro/blog
Twitter:@a33ik
Profile:http://ua.linkedin.com/in/
andriibutenko/
Github:a33ik
![Page 3: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/3.jpg)
Що ж таке той PCF?
• Framework за допомогою, якого можна будувати свої кастомні компоненти• Типи компонент:
• field• dataset• unbound?
• Наразі в режимі “Public Preview”, тобто можна будувати, тестувати, ознайомлювати клієнтів з можливостями, але не рекомендується використовувати компоненти в production середовищах
• Використання компонент можливе тільки в UCI інтерфейсі (Model Driven Apps)• В майбутньому планується використання тих самих компонент в Canvas Apps
![Page 4: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/4.jpg)
Інструменти
• PowerApps CLI (Command Line Interface)
• Node.js
• Visual Studio 2017 or Visual Studio Code
• TypeScript/JavaScript
![Page 5: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/5.jpg)
Цикл розробки• pac pcf init --namespace <Your Namespace Here> --name <Your Control Name Here> --template
<field|dataset> 1*• npm install 2*• написання коду• Тестування у браузері – npm start 3*• Створення рішення для контрола
• Створення нової теки для рішення 1*• pac solution init --publisherName <enter your publisher name> --customizationPrefix <enter your
publisher name>• pac solution add-reference --path <path or relative path of your PowerApps component framework
project on disk>• msbuild /t:restore• msbuild
• Імпорт рішення в D365 for CE і тестування безпосередньо в системіНе використовуйте пробіли в теках з якими працюєте, PowerApps CLI їх не сприймаєПеред використанням команди обов’язково виконайте інсталяцію Node.jsПрацює тільки для field компонент, для dataset – в розробці, тож чекаємо на оновлення
![Page 6: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/6.jpg)
Анатомія компоненти• ControlManifest.Input.xml - складові компоненти:
• Властивості (properties)• Ресурси:
• Code (безпосередньо TypeScript файл, який задає поведінку компоненти)• Css (стилі, які використовуються, компонентою для відображення)• Resx (ресурсні файли які зберігають локалізаційну інформацію)
• Code файл (за вмовчанням index.ts), складові за вмовчанням:• Constructor• Method init: void
• context: ComponentFramework.Context<IInputs>• notifyOutputChanged: () => void• state: ComponentFramework.Dictionary• container: HTMLDivElement
• Method updateView: void• context: ComponentFramework.Context<IInputs>
• Method getOutputs(): IOutputs• Destructor
![Page 7: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/7.jpg)
Демонстрація
![Page 8: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/8.jpg)
Чи є у вас ідеї компонент?
![Page 9: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/9.jpg)
Питання є?А якщо знайду?
![Page 10: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...](https://reader035.fdocument.pub/reader035/viewer/2022062414/5f0c6afc7e708231d4354d0e/html5/thumbnails/10.jpg)