{"id":12604,"date":"2022-02-09T09:53:33","date_gmt":"2022-02-09T08:53:33","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12604"},"modified":"2023-06-14T14:36:33","modified_gmt":"2023-06-14T12:36:33","slug":"komponenty-niestandardowe-w-power-apps","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/komponenty-niestandardowe-w-power-apps\/","title":{"rendered":"Komponenty niestandardowe w Power Apps"},"content":{"rendered":"\n<p>W 2019 Microsoft zaproponowa\u0142 u\u017cytkownikom tworzenie w\u0142asnych kontrolek znanych pod nazw\u0105 PCF (PowerApps Component Framework) lub Custom Components. Pocz\u0105tkowo by\u0142y obecne tylko w Model-Driven Apps, aktualnie s\u0105 ju\u017c dost\u0119pne w Canvas App oraz portalach (preview).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Niestandardowe kontrolki<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Zastosowanie<\/h3>\n\n\n\n<p>Niestandardowe kontrolki mog\u0105 zosta\u0107 u\u017cyte do zast\u0105pienia domy\u015blnych kontrolek na formularzach lub listach. Na przyk\u0142ad zamiast tradycyjnego pola na formularzu, w kt\u00f3rym u\u017cytkownik powinien wpisa\u0107 warto\u015b\u0107 liczbow\u0105 w zakresie od 1 do 100, kontrolka u\u017cytkownika umo\u017cliwia wy\u015bwietlenie suwaka (slider), a wi\u0119c rozwi\u0105zania znanego z aplikacji mobilnych. Wi\u0119cej przyk\u0142ad\u00f3w i mo\u017cliwych zastosowa\u0144 znajdziesz na stronie <a href=\"https:\/\/pcf.gallery\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\" >PCF Gallery<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wy\u015bwietlanie na urz\u0105dzeniach<\/h3>\n\n\n\n<p>Microsoft daje administratorom wyb\u00f3r na jakich urz\u0105dzeniach ma zosta\u0107 wy\u015bwietlona nowa wersja kontrolki.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-12606\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Settings.png\"><img decoding=\"async\" width=\"1016\" height=\"712\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Settings.png\" alt=\"Edycja ustawie\u0144 pola dla kontrolki na formularzu\" class=\"wp-image-12606\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Settings.png 1016w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Settings-300x210.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Settings-768x538.png 768w\" sizes=\"(max-width: 1016px) 100vw, 1016px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 Edycja ustawie\u0144 pola dla kontrolki na formularzu<\/figcaption><\/figure>\n\n\n\n<p>W przypadku przegl\u0105darki mo\u017ce by\u0107 to standardowe pole, ale dla urz\u0105dze\u0144 mobilnych i tablet\u00f3w mo\u017cemy chcie\u0107 wy\u015bwietli\u0107 wspomniany slider.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-12607\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven.png\"><img decoding=\"async\" width=\"1875\" height=\"884\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven.png\" alt=\"Kontrolka niestandardowa w Model Driven App \" class=\"wp-image-12607\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven.png 1875w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven-300x141.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven-1024x483.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven-768x362.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Model-Driven-1536x724.png 1536w\" sizes=\"(max-width: 1875px) 100vw, 1875px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Kontrolka niestandardowa w Model Driven App<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Dost\u0119pno\u015b\u0107<\/h3>\n\n\n\n<p>Kontrolki dost\u0119pne s\u0105 obecnie tylko w \u015brodowiskach online dla Unified Interface. Klienci wersji on-premises musz\u0105 na ten moment zadowoli\u0107 si\u0119 standardowymi kontrolkami lub dostarczonymi przez deweloper\u00f3w skryptami (web resources).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-12608\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas.png\"><img decoding=\"async\" width=\"1881\" height=\"917\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas.png\" alt=\"Kontrolka niestandardowa w Canvas App\" class=\"wp-image-12608\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas.png 1881w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas-300x146.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas-1024x499.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas-768x374.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Canvas-1536x749.png 1536w\" sizes=\"(max-width: 1881px) 100vw, 1881px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Kontrolka niestandardowa w Canvas App<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-12609\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal.png\"><img decoding=\"async\" width=\"1166\" height=\"965\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal.png\" alt=\"Kontrolka niestandardowa w Power App Portal\" class=\"wp-image-12609\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal.png 1166w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal-300x248.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal-1024x847.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Portal-768x636.png 768w\" sizes=\"(max-width: 1166px) 100vw, 1166px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 Kontrolka niestandardowa w Power App Portal<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Powody, dla kt\u00f3rych warto skorzysta\u0107 z niestandardowych kontrolek<\/h2>\n\n\n\n<p>Dlaczego nie pozosta\u0107 zatem przy tradycyjnych i sprawdzonych Web Resources? Oto kilka powod\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Czas renderowania \u2013 kontrolki niestandardowe \u0142adowane s\u0105 w tym samym czasie, co pozosta\u0142e kontrolki i w ramach tego samego kontekstu. Web Resources \u0142adowane s\u0105 p\u00f3\u017aniej.<\/li>\n\n\n\n<li>Uniwersalno\u015b\u0107 \u2013 odpowiednio przygotowana kontrolka mo\u017ce by\u0107 u\u017cyta wielokrotnie w r\u00f3\u017cnych formularzach i narz\u0119dziach (model-driven app, portals). Web Resources ograniczaj\u0105 si\u0119 tylko do formularzy, natomiast nic nie stoi na przeszkodzie, aby wykorzysta\u0107 kontrolk\u0119 przy renderowaniu listy rekord\u00f3w (np. listy kontakt\u00f3w).<\/li>\n\n\n\n<li>Zarz\u0105dzanie \u2013 kontrolka importowana jest do \u015brodowiska jako rozwi\u0105zanie (zarz\u0105dzane lub niezarz\u0105dzane). Kiedy nast\u0119puje moment przeniesienia dostosowa\u0144 na \u015brodowisko testowe lub produkcyjne, wszystkie elementy sk\u0142adowe kontrolki takie jak Javascript, CSS, HTML s\u0105 ju\u017c zawarte w dostarczonym przez dewelopera rozwi\u0105zaniu.<\/li>\n\n\n\n<li>UX \u00ad\u2013 kiedy do budowy kontrolki zostanie wykorzystany React, warto skorzysta\u0107 z komponent\u00f3w dostarczonych przez Fluent UI, na kt\u00f3rych opiera si\u0119 nowa wersja Model-Driven Apps zwana Unified Interface. Zapewnia to sp\u00f3jno\u015b\u0107 UX, przy jednoczesnym skr\u00f3ceniu czasu dewelopmentu.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Od czego zacz\u0105\u0107?<\/h2>\n\n\n\n<p>Budowa podstawowych kontrolek nie jest skomplikowana, a dokumentacja Microsoft dostarcza kilka gotowych przyk\u0142ad\u00f3w, kt\u00f3re u\u0142atwi\u0105 deweloperowi rozpocz\u0119cie pracy z PCF. Niezb\u0119dne jest przy tym pobranie aplikacji konsolowej Microsoft Power Platform CLI oraz wyb\u00f3r edytora tekstowego do dalszej pracy.<\/p>\n\n\n\n<p>Wyborem naszego zespo\u0142u jest <strong>Visual Studio Code<\/strong>, natomiast ka\u017cdy popularny edytor tekstowy powinien sobie poradzi\u0107.<\/p>\n\n\n\n<p>Niestandardowa kontrolka budowana jest z wykorzystaniem j\u0119zyka Javascript i w zasadzie to wystarczy do tworzenia prostych kontrolek. Jednak w przypadku bardziej rozbudowanych i skomplikowanych zada\u0144, warto skorzysta\u0107 z pomocy <a href=\"https:\/\/reactjs.org\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\" >React<\/a>. React jest bibliotek\u0105, kt\u00f3ra przyspiesza prac\u0119 dewelopera poprzez zastosowanie gotowych komponent\u00f3w i \u0142atwiejsze zarz\u0105dzenie stanem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prosta kontrolka \u2013 krok po kroku<\/h2>\n\n\n\n<p>Zainstaluj <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\" >\u015brodowisko uruchomieniowe node.js<\/a> \u2013 rekomendowana wersja LTS.<\/p>\n\n\n\n<p>Pobierz <a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/data-platform\/powerapps-cli#install-power-apps-cli\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\" >Microsoft Power Platform<\/a> CLI. To prosta aplikacja konsolowa do zarz\u0105dzania komponentami Power Platform takimi jak rozwi\u0105zania, portale oraz kontrolki.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Uruchom Visual Studio Code i przejd\u017a do folderu dla kontrolki na swoim lokalnym dysku<\/li>\n\n\n\n<li>W oknie Terminal uruchom polecenie:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; gutter: false; title: ; notranslate\" title=\"\">\npac pcf init --namespace CustomerLinearInputControl --name LinearInputControl --template field\n<\/pre><\/div>\n\n\n<p>Powy\u017csza komenda utworzy podstawow\u0105 struktur\u0119 projektu, doda referencje do wymaganych bibliotek oraz wywo\u0142a polecenie<em> npm install <\/em>instaluj\u0105ce wymagane biblioteki w folderze node_modules.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Wpisz komend\u0119 &#8222;npm start run&#8221;, aby wy\u015bwietli\u0107 podgl\u0105d komponentu w przegl\u0105darce. Na tym etapie zobaczymy jedynie pusty ekran oraz pola do wprowadzania warto\u015bci pocz\u0105tkowych.<\/li>\n\n\n\n<li>Zatrzymaj proces debugowania komend\u0105 Ctrl+C wywo\u0142an\u0105 z konsoli.<\/li>\n<\/ol>\n\n\n\n<p>Wklej do pliku ControlManifest.Input.xml poni\u017cszy skrypt:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/kod-1.png\"><img decoding=\"async\" width=\"873\" height=\"396\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/kod-1.png\" alt=\"skrypt\" class=\"wp-image-12750\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/kod-1.png 873w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/kod-1-300x136.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/kod-1-768x348.png 768w\" sizes=\"(max-width: 873px) 100vw, 873px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>Wklej do pliku index.ts poni\u017cszy kod odpowiedzialny za logik\u0119 kontrolki<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/02\/kod-2.png\"><img decoding=\"async\" width=\"629\" height=\"764\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/02\/kod-2.png\" alt=\"skrypt\" class=\"wp-image-22292\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/02\/kod-2.png 629w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/02\/kod-2-247x300.png 247w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-3-1.png\"><img decoding=\"async\" width=\"587\" height=\"436\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-3-1.png\" alt=\"skrypt\" class=\"wp-image-22294\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-3-1.png 587w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-3-1-300x223.png 300w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Zapisz wszystkie zmiany, a nast\u0119pnie utw\u00f3rz nowy folder o nazwie \u201ecss\u201d w lokalizacji LinearInputControl.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-5.png\"><img decoding=\"async\" width=\"639\" height=\"527\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-5.png\" alt=\"skrypt\" class=\"wp-image-22296\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-5.png 639w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-5-300x247.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-6.png\"><img decoding=\"async\" width=\"579\" height=\"431\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-6.png\" alt=\"skrypt\" class=\"wp-image-22298\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-6.png 579w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/06\/Kod-6-300x223.png 300w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/a><\/figure>\n\n\n\n<p>W tym nowym folderze utw\u00f3rz plik LinearInputControl.css i wklej do niego poni\u017cszy kod, kt\u00f3ry b\u0119dzie odpowiedzialny za wygl\u0105d kontrolki.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"7\">\n<li>Po zapisaniu zmian uruchom polecenia &#8222;npm run build&#8221; i &#8222;npm start watch&#8221;. Pierwsza komenda kompiluje i optymalizuje kod \u017ar\u00f3d\u0142owy oraz generuje kod wyj\u015bciowy w pliku bundle.js. Druga komenda uruchamia kontrolk\u0119 w trybie debugowania w oknie przegl\u0105darki. Parametr &#8222;watch&#8221; sprawia po wprowadzeniu i zapisaniu zmian w kodzie podgl\u0105d kontroli w przegl\u0105darce zostanie automatycznie od\u015bwie\u017cony.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-12670\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build.png\"><img decoding=\"async\" width=\"1568\" height=\"760\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build.png\" alt=\"Podgl\u0105d wersji roboczej kontrolki\" class=\"wp-image-12670\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build.png 1568w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build-300x145.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build-1024x496.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build-768x372.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/PCF_build-1536x744.png 1536w\" sizes=\"(max-width: 1568px) 100vw, 1568px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Podgl\u0105d wersji roboczej kontrolki<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\n\n\n\n<p><strong>&nbsp;<\/strong>I tak oto powsta\u0142a nasza pierwsza kontrolka. W nast\u0119pnym wpisie om\u00f3wi\u0119 struktur\u0119 projektu i role poszczeg\u00f3lnych element\u00f3w.<\/p>\n\n\n\n<p>***<\/p>\n\n\n\n<p>Je\u015bli interesuje Ci\u0119 d<a href=\"https:\/\/sii.pl\/blog\/dodawanie-znacznikow-meta-w-standardowym-naglowku-strony-na-power-apps-portals\/?category=development-na-twardo&amp;tag=content-snippets,power-apps-portals\" target=\"_blank\" rel=\"noopener\">odawanie znacznik\u00f3w meta w standardowym nag\u0142\u00f3wku strony na Power Apps Portals, zajrzyj koniecznie do tego artyku\u0142u.<\/a><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12604&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;3&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 3)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Komponenty niestandardowe w Power Apps&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 3)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>W 2019 Microsoft zaproponowa\u0142 u\u017cytkownikom tworzenie w\u0142asnych kontrolek znanych pod nazw\u0105 PCF (PowerApps Component Framework) lub Custom Components. Pocz\u0105tkowo by\u0142y &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/komponenty-niestandardowe-w-power-apps\/\">Continued<\/a><\/p>\n","protected":false},"author":331,"featured_media":12673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":3,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[],"class_list":["post-12604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/Komponenty-niestandardowe-w-Power-Apps.png","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12604"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/331"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=12604"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12604\/revisions"}],"predecessor-version":[{"id":22300,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12604\/revisions\/22300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/12673"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=12604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=12604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=12604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}