Component Framework · • Технічний архітектор в Hitachi Solutions America,...

10
Андрій Бутенко Як почати розробляти власні компоненти використовуючи PowerApps Component Framework

Transcript of Component Framework · • Технічний архітектор в Hitachi Solutions America,...

Page 1: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

Андрій БутенкоЯк почати розробляти власні компоненти використовуючи PowerApps Component Framework

Page 2: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

• Розробник ПЗ з 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, Гринвіль, Південа Кароліна ...

Що ж таке той PCF?

• Framework за допомогою, якого можна будувати свої кастомні компоненти• Типи компонент:

• field• dataset• unbound?

• Наразі в режимі “Public Preview”, тобто можна будувати, тестувати, ознайомлювати клієнтів з можливостями, але не рекомендується використовувати компоненти в production середовищах

• Використання компонент можливе тільки в UCI інтерфейсі (Model Driven Apps)• В майбутньому планується використання тих самих компонент в Canvas Apps

Page 4: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

Інструменти

• PowerApps CLI (Command Line Interface)

• Node.js

• Visual Studio 2017 or Visual Studio Code

• TypeScript/JavaScript

Page 5: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

Цикл розробки• 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, Гринвіль, Південа Кароліна ...

Анатомія компоненти• 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, Гринвіль, Південа Кароліна ...

Демонстрація

Page 8: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

Чи є у вас ідеї компонент?

Page 9: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...

Питання є?А якщо знайду?

Page 10: Component Framework · • Технічний архітектор в Hitachi Solutions America, Гринвіль, Південа Кароліна ...