Overview of SharePoint Virtual Summit 2019

In this article I’ll put short glimpse of what has been announced on SharePoint Virtual Summit 2019. Be aware that some of following features may be still in preview but are going to appear later this year. I skipped features that has been announced on Microsoft Build 2019

flow SharePoint Document Libraries

  • Build custom forms using PowerApps
  • Microsoft Teams will gets enriched metadata experience
  • Bulk Actions

    This feature was requested for a long time. And now here it is: you can select multiple items/document and take an action for all of them: update properties, download, delete, approve, move etc.

  • New Flow actions

    There are scenarios in which you need to check-in/check-out documents, get version information, grant access or create folders as a part of larger business process in Flow. Until now you could do that only by calling SharePoint HTTP REST API. But from now on you can do all of above simply by using Flow actions!

  • File request feature

    This is a bomb! You will be able to request files from other users directly from the place where you store your files! The recipients will get email with link. Once they click on it they will see consistent UI with built-in files upload.

  • Organization document templates

    governance becomes even easier!

flow Collaboration

  • Organization Home site

    It’s a communication site with some extra superpowers. It searches for data tenant wide, mark site news as organizational news, enables special SP mobile app. For me it completes perfectly org-wide Teams team. Just add tenant Home site as a tab in an Ord-wide Teams team

  • New page designs
  • New webparts – i.e. Yammer!
  • News links
  • Audience targeting
  • Sync Microsoft Teams files to you PC or Mac
  • Teams apps in SharePoint sites
  • Enhanced SharePoint list experience embedded in Teams
  • Enhanced co-authoring acroos mobile, web and desktop versions of Word, PowerPoint and Excel (only for Office 365 and files in the cloud)

flow Governance

  • Rename your SharePoint site (including its URL)
  • Replace the root site within a tenant

    you’ll be able to build a new org site on the side and once completed it swap it with a root site…it couldn’t be simpler.

  • Create SharePoint list using excel file with an option to configure columns types!
  • Share & Forget with external access expiration
  • File restore for SharePoint just as it is already for OneDrive
  • Sensitivity labels

    the mechanism known from Azure Information Protection is now being supported by SharePoint and OneDrive (and it is called Microsoft Information Protection)

  • Decide where your data related to SharePoint and O365 groups will be stored using multi-geo capabilities

flow Search

  • Customizable Search to rule them all!

    The same search experience will be shared across any Microsoft platform. Top, middle, search. Oh and there will be available to add custom verticals, custom refiners and custom display templates! What is more you will be able to search for conversations from Yammer and Microsoft Teams in any search endpoint!

  • Search in Office

    Discover your network of apps, files, folders, people, organization charts, SharePoint sites, site pages, lists and list items

  • Search in SharePoint

    Catch up on news and announcements. Find the sites that are relevant to you without scrolling through endless bookmarks. Pick up on that shared document you were working on

  • Search in OneDrive

    Discover relevant information to help you get work done where you’re working through intelligent results and sophisticated refinement

  • Search in Windows

    Search right from your Windows desktop. This way you can search not only inside your local files but also in Office365, person in organization with smart suggestions based on the people you work with the most

  • Administer your Microsoft Search

    Control organization search using provided powerful admin center and manage all of Microsoft Search endpoints!

flow Misc

As you can see SharePoint is not stopping in getting new capabilities. But what may not see and I have to tell you – many of above changes came from UserVoice. UserVoice is a forum where everyone can submit a bug, an idea or new feature request and Microsoft will implement it if only the post gets enough amount of community support (represented by likes). Changes presented on SharePoint Virtual Summit 2019 are the best prove that Microsoft is listening to its users!

What are Low-Code development platforms?

Rapid Application Development, Robotic Process Automation, Business Process Management Systems – these are all examples of Low-Code platforms. The market has already appeared in the 90s, but their popularity has grown strongly in the last few years. In this article, you’ll learn what the Low-Code platforms are, when you need them, and what future is waiting for them on the example of Microsoft platforms like PowerApps and Microsoft Flow.

Thorough transformation – Understanding ” The Why”

Before we get to know what the Low-Code platforms are, we first need to understand the reasons why we started to work on their development at all. For this purpose, let’s get back to the 90s. At the time, it was the era of computerization that got under way for good. E-commerce, e-government, e-society, e-everything has dominated the world as personal as well as business. It became obvious that there is no other way than to give IT a high priority in computerization of work and activities. Data Management, Information Management and Knowledge Management were gradually digitized, and business processes were transformed along with them. All this so that everyone can use private resources, corporate resources, and communicate with others from anywhere in the world and at any time of the day or night.

Source

Where to get new programmers from?

Such a change naturally required the involvement of a huge number of IT specialists and engineers. IT specializations have become extremely popular and well rewarded. Everyone did what they could to increase the number of programmers:

  • Educate new developers – IT courses in higher education were gaining in popularity. Currently, in Poland, as reported by the Ministry of Science and Higher Education, 14% of all recruitment applications for 2017/2018 concerned information technology, the second was management with a result of 7% of all applications!
  • Employees of other specializations were attracted – all-year programming schools, bootcamps and IT courses are doing everything to further reduce the training time of the “complete junior”. Also the employers help in this process eg Aviva, the insurance company, in 2018 organized a 6-month course addressed to all its employees, giving them a chance to get software developer qualifications
  • Experienced developers are tempt – hundreds of recruitment companies flood with offers anyone who on linkedIn has anything to do with IT. They’re offering many benefits besides very good earnings
  • Promote awareness 😉

Despite almost 30 years, the situation has not changed. Reports estimated that in 2020, 500,000-600,000 programmers will be missing out on the European market (source, source)! Only in Poland, my homeland, there is already missing about 50,000 of developers. Demand around the world is huge and Europe Union estimates that it will last until 2030 (source). But it is not surprising. More and more industries involve IT solutions (HR, marketing, art) and the same is for areas of activity (forecasting, chatbots).

Image result for meme when a developer uploads cv

Low-code platforms for the rescue

If the demand is greater than the supply, there are two strategies to keep the balance. Increasing the supply (that is increasing “the production” of developers) has been described above. However, method no. 2 consists in reducing demand for programmers. Is it possible? It turns out that yes and no need to blow up in the air half of the companies ;). It is enough to build a platform for effective, fast and flexible building of applications and processes. The platform itself has to fulfill 5 assumptions:

  1. Ease of use – everyone, not only highly qualified engineers, should be able to use it
  2. Supporting standards – basing the platform’s operation on globally accepted and adopted standards
  3. Integration – the platform should enable integration with any systems. Achieving point 2 is very helpful in this 😉
  4. Accessibility – building solutions and using them should be independent of a user OS (Windows, Linux, macOS)
  5. Extensibility – a platform that can not be easily expanded has little chance of being longer on the market

And that’s what the so-called Low-code development platform [LCDP] – a visual approach to application development. Microsoft has at least 3 such platforms. In the further part of the article I will focus on two of them: PowerApps and Microsoft Flow. They co-exist in a very close relationship not only among themselves, but also with more than 230 other platforms (Microsoft and non-Microsoft).

Examples of Low Code platforms by the Microsoft. Microsoft Flow and Azure Logic Apps are very similar, although they differ in their purpose: Microsoft Flow is mainly used for business processes. Azure Logic Apps is responsible for the integration of data between different systems. I will deal with them in another article.

At LCDP, we build solutions using a drag-and-drop or point-and-click mechanism from the graphical interface. Thanks to this, building, modifying and maintaining it is extremely simple and saves a lot of time, and the effects are visible immediately.

Microsoft Flow example
Microsoft PowerApps example

Using LCDP is a bit like building with LEGO bricks. When you play with LEGO, you use manufactured blocks that are limited in size, color and number of pins. However, these dependencies do not limit the construction of complex and functional solutions.

With the use of LCDP you can build professional solutions supporting the company and what is important, the construction process itself is fast and agile, saving time and money.

Check out the application to scan business cards, which development took me 8 hours instead of 5 days!

This approach must give effects:

1. 70% less application development cost and effort
2. 362% return on investment over 3-year term
3. <3 months payback

Data from “The Total Economic Impact of PowerApps and Microsoft Flow” published by Forrester Consulting in June 2018 (source)

Low-Code, High-Possibilities

The possibilities of the platform itself are determined not only by the multitude of available “blocks” from which we can build a solution, but also the openness of the platform for integration. The PowerApps and Microsoft Flow platforms share a set of available connectors that are over 230!

One of such connectors are those related to HTTP query support which actually is synonymous with the ability to integrate the platform with any SaaS solution having a REST API (so the overwhelming majority).

Left: Http trigger which launches Flow when it receives an HTTP query from any source
Right: HTTP action that performs an HTTP query to any URL
(If you’re a developer, know that creating your own SaaS service could not be easier!)

But it is not everything. Microsoft Flow, like PowerApps or LogicApps, allows you to build your own “plug-in” (so-called custom connector). Developers can connect such Custom Connector, for example, with Azure Function, which can perform ANY operations using the C # code, Javascript, Python, etc. A good example is the application for document translation, which consists in:

  • Microsoft Flow sends a document to Azure Function
  • Azure Function decompose the document to separate paragraphs…
  • …and translate each paragraph independently.
  • Then the function merges together translated paragraphs…
  • … and sent back to Microsoft Flow

Thanks to this approach, the document is translated in full, maintaining the formatting and layout of information on the page.

Use the resource according to your the needs

The scenario presented above has one more extraordinary advantage. This approach is definitely beneficial for more than 1 page of the software development process:

  • LCDP developer – Can model the overall flow of the entire process. Determines from which platform the user interacts with the application (eg PowerApps), where the data is stored (eg SharePoint Online) and how the general flow of information related to the translation of the document is going (eg Microsoft Flow). However, he does not know (and does not need to know) exactly how the document is translated
  • Software developer – With the help of a regular code (eg C #) he creates an independent service that gets the document in a language at the input and translates it to any other, returning the translated document at the output. For this purpose, he can use services like Azure Function and Azure Cognitive Services. He does not know (and does not need to know) what is happening with the document before and after the translation process.
  • Business owner – he uses his resources according to their purpose, thanks to which fewer mistakes are made and more value is delivered in a shorter time. People who understand business well and have broad product knowledge can focus on modeling the overall framework of the solution. In turn, programmers can focus on this part of the solution that makes the best use of their specialization.

This is very important: using LCDP you do not give up the possibility of using solutions using a regular code.

LCDP and the vision of tomorrow

The last question is: is it worth letting LCDP platforms into your organization? There are some questions related to that:

  1. The LCDP concept is not new and it was already known in the 1990s. Why, then, have they become popular yet? Maybe it’s just a temporary hype?
  2. Will LCDP platforms be replaced soon by other platforms?
  3. When choosing a single supplier, do not we enter a one-way street?

So let me answer these questions briefly:

  1. That’s true, LCDPs have appeared before, however in my personal opinion their low popularity was associated with the lack of appropriate adaptation of programming standards (REST / GRAPH API, JSON, OAUTH). Such lack of adaptation made it impossible to build a wide range of integrated platforms. At present, the IT environment has clarified such universal standards, and newly-built solutions follow the established good practices. There is one more important reason, more precisely 3 of them:
    • Growth – it is estimated that the value of the low-code market will increase by over 21 million over the next 5 years
    • Diversification – the demand for IT solutions is growing, and at the same time software developers need a relief
    • Integration – solutions need to grow quickly while maintaining integration to be able to use the potential behind AI, robotics and machine learning
  2. In the whole history of IT solutions, a lot of products appeared and some time after sold, changed or killed. Therefore, I personally think that it is best to relate to solutions of large companies whose future is based on the trust of their clients. This trust depends directly on the possessed solutions, as well as their stability, predictability, reliability and security of entrusted data. “Trust is the Currency of the Future” as the title of an excellent Polish book by Michał Szafrański.
  3. Yes and no. On the one hand, actually choosing ANY supplier from the exit procedure, it may be even necessary to rewrite the solution in case of willingness to change. On the other hand, the construction of the graphical interface should not take much time, and in the case of RPA systems, you can implement critical parts of solutions as independent SaaS solutions (eg using Azure Functions or azure hosted web applications)

Conclusion

For me personally, Low-Code development platforms are a must for any company that wants to grow dynamically. They carry a huge revolution that once brought a window interface in operating systems. On the one hand, it’s just a change of interaction with the processor “on the other side.” But on the other hand, it is opening up to completely new possibilities.

If you would like to learn more about these platforms contact me! I will teach you how to use them, and if you want I can design a solution or simply build it for you!

Czym są platformy Low-Code?

Rapid Application Development, Robotic Process Automation, Business Process Management Systems – to wszystko przykłady platform Low-Code. Na rynku pojawiły się już w latach 90tych, ale ich popularność wzrosła silnie w ciągu ostatnich paru lat. W tym artykule dowiesz się czym są platformy Low-Code, kiedy możesz ich potrzebować oraz jaka przyszłość je czeka na przykładzie platform Microsoft jak PowerApps oraz Microsoft Flow.

Gruntowna transformacja – Zrozumieć “Dlaczego”

Zanim poznamy czym są platformy Low-Code najpierw musimy zrozumieć powody dla których w ogóle zaczęto pracować nad ich rozwojem. W tym celu cofnijmy się do lat 90tych. Wtedy to właściwie era informatyzacji rozkręciła się na dobre. E-commerce, e-government, e-society, e-wszystko zdominowało świat tak osobisty jak i biznesowy. Stało się oczywiste, że nie ma innego wyjścia jak w swojej strategii nadać wysoki priorytet informatyzacji pracy i działań. Zarządzanie danymi (Data Management), informacją (Information Management) czy wiedzą (Knowledge Management) podlegały stopniowej digitalizacji, a wraz z nimi ulegały przemianom procesy biznesowe. Wszystko po to by każdy mógł korzystać z zasobów prywatnych, zasobów firmowych, a także komunikować się z innymi z dowolnego miejsca na świecie i o każdej porze dnia i nocy.

Źrodło

Skąd wziąć nowych programistów?

Taka przemiana naturalnie wymagała zaangażowania ogromnej rzeszy specjalistów IT i inżynierów. Specjalizacje IT stały się niezwykle popularne i dobrze wynagradzane. Wszyscy robili co mogli aby zwiększyć liczbę programistów:

  • Kształocono nowych – kierunki informatyczne studiów wyższych zyskiwały na popularności. Obecnie w Polsce, jak podaje raport Ministerstwa Nauki i Szkolnictwa Wyższego, wśród wszystkich zgłoszeń rekrutacyjnych na rok 2017/2018 14% dotyczyło kierunków informatycznych, drugim było zarządzanie z wynikiem 7% wszystkich zgłoszeń!
  • Przyciągano pracowników innych specjalizacji – całoroczne szkoły programowania, bootcampy i kursy informatyczne robią wszystko by jeszcze bardziej skrócić czas kształcenia “kompletnego juniora”. Pomagają w tym także sami pracodawcy np Aviva, firma ubezpieczeniowa w 2018 roku zorganizowała 6 miesięczny kurs
    skierowany do wszystkich pracowników, dający szanse zdobycia kwalifikacji programisty
  • Zatrzymywano doświadczonych – powstałe jak grzyby po deszczu firmy rekruterskie zalewają ofertami stanowisk każdego kto na linkedIn ma cokolwiek wspólnego z IT, oferując poza bardzo dobrymi zarobkami także inne benefity.
  • Zwiększano świadomość 😉

Pomimo upływu prawie 30stu lat, sytuacja nie uległa zmianie. Szacuje się, że w 2020 na rynku europejskim będzie brakować 500.000-600.000 programistów (source, source)! W samej tylko Polsce, mojej ojczyźnie, już teraz brakuje ok. 50.000 programistów. Zapotrzebowanie na całym świecie jest ogromne i szacuje się, że utrzyma się do 2030 roku (source). Ale to nic dziwnego jeśli rozwiązania IT angażowane są w coraz to wiecej branz (HR, marketing, sztuka) i obszarów działań (prognozowanie, chatboty).

Image result for meme when a developer uploads cv

Platformy low-code na ratunek

W przypadku kiedy popyt jest większy niż podaż, są 2 strategie mające na celu zachowanie równowagi. Zwiększenie podaży, czyli większa “produkcja” developerów, zostało opisane powyżej. Natomiast sposób nr 2. polega na zmniejszeniu popytu, czyli zmniejszenie zapotrzebowania na programistów. Czy to możliwe? Okazuje się, że tak i wcale nie trzeba wysadzać w powietrze połowy firm ;). Wystarczy zbudować paltformę do skutecznego, szybkiego i elastycznego budowania aplikacji i procesów. Sama platforma musi spełniać 5 założeń:

  1. Łatwość obsługi – każdy, nie tylko wysoko wykwalifikowani inżynierowie, powinien być w stanie budować rozwiązania
  2. Wsparcie standardów – oparcie działania platformy na globalnie przyjętych i wspieranych standardach
  3. Integracja – platforma powinna umożliwiać integrację z dowolnymi systemami. Osiągnięcie punktu 2 bardzo w tym pomaga 😉
  4. Dostępność – budowanie rozwiązań jak i korzystanie z nich powinno być niezależne od wykorzystywanego systemu (Windows, Linux, macOS)
  5. Rozszerzalność – platforma której nie da się w prosty sposób rozszerzać ma nikłe szanse przyjęcia się na dłużej na rynku

I tym właśnie są tzw. Low-code development platform [LCDP] czyli wizualne podejście do tworzenia aplikacji. Microsoft posiada przynajmniej 3 takie platformy. W dalszej części artykułu skupię się 2-óch z nich: PowerApps oraz Microsoft Flow. Koegzystują one w bardzo bliskiej relacji nie tylko między sobą, ale także z ponad 230toma innymi platformami (Microsoftu jak i nie-Microsoftu).

Przykłady platform Low Code w wydaniu Microsoft. Microsoft Flow i Azure Logic Apps są bardzo podobne choć różnią się przeznaczeniem: Microsoft Flow służy głównie do procesów biznesowych natomaist Azure Lopic Apps odpowiada za integrację danych pomiędzy różnymi systemami. Zajmę się nimi w innym artykule.

W LCDP budujemy rozwiązania wykorzystując mechanizm drag-and-drop lub point-and-click z poziomu interfejsu graficznego. Dzięki temu samo budowanie, modyfikowanie i utrzymywanie jest niezwykle proste i zaoszczędza mnóstwo czasu, a efekty są widoczne natychmiast.

Przykład Microsoft Flow
Przykład Microsoft PowerApps

Korzystanie z LCDP przypomina trochę budowanie z klocków LEGO. W zabawie z LEGO używasz wyprodukowanych klocków, które są ograniczone rozmiarem, kolorem, liczbą pinów. Jednak te zależności wcale nie ograniczają w budowaniu skomplikowanych i funkcjonalnych rozwiązań.

Z wykorzystaniem LCDP można zbudować profesjonalne rozwiązania wspierające firmę i co ważne sam proces budowy jest szybki i zwinny oszczędzając czasu i pieniędzy.

Zobacz aplikację do skanowania wizytówek, której stworzenie zajęło mi 8 godzin zamiast 5 dni!

Takie podejście musi dawać efekty:

1. 70% less application development cost and effort
2. 362% return on investment over 3-year term
3. <3 months payback

Dane z “The Total Economic Impact of PowerApps and Microsoft Flow” opublikowanych przez Forrester Consulting w Czerwcu 2018 (source)

Low-Code, High-Possibilities

Za możliwości samej platformy decyduje nie tylko wielorakość dostępnych “klocków” z których możemy budować rozwiązanie, ale też otwartość platformy na integracje. Platformy PowerApps i Microsoft Flow współdzielą zestaw dostępnych connectorów których jest ponad 230!

Jednym z takich connectorów są te związane z obsługą zapytań HTTP co właściwie jest równoznaczne z możliwością integracji platformy z każdym rozwiązaniem SaaS posiadającym REST API (czyli przeważająca większość).

Po lewej: Http trigger który uruchamia Flow kiedy otrzyma zapytanie HTTP z dowolnego źródła
Po prawej: HTTP action która wykonuje zapytanie HTTP na dowolny adres URL
(Jeśli jesteś developerem, to wiedz, że stworzenie własnej usługi SaaS serveless nie mogło być prostsze!)

Ale to nie wszystko. Microsoft Flow, podobnie jak PowerApps czy LogicApps, umożliwiają zbudowanie WŁASNEGO “klocka” (tzw. custom connector). Taki Custom Connector może być połączony np: z Azure Function, które może zrealizować DOWOLNE operacje z wykorzystaniem kodu C#, Javascript, Python itp. Dobrym przykładem jest aplikacja do tłumaczenia dokumentów, która polega na tym, że:

  • Microsoft Flow wysyła do Azure Function dokument
  • Dokument jest dekomponowany przez Azure Function do pojedynczych paragrafów
  • Każdy paragraf jest niezależnie tłumaczony
  • Przetłumaczone paragrafy są sklejane w całość…
  • …i wysyłane z powrotem do Microsoft Flow

Dzięki takiemu podejściu dokument jest tłumaczony w całości z zachowaniem formatowania i układu informacji na stronie.

Wykorzystuj zasoby adekwatnie do potrzeb

Zaprezentowany powyżej scenariusz ma jeszcze jedną niezwykłą zaletę. Takie podejście jest zdecydowanie korzystne dla więcej niż 1 strony procesu wytwórczego oprogramowania:

  • LCDP developer – Może zamodelować ogólny przepływ całego procesu. Ustala z poziomu jakiej platformy użytkownik wchodzi w interakcję z aplikacją (np PowerApps), gdzie są przechowywane dane (np SharePoint Online) oraz jak przebiega ogólny przepływ informacji zwiazany z tłumaczeniem dokumentu (np Microsoft Flow). Natomiast nie wie, i nie musi wiedzieć, w jaki dokładnie sposób dokument jest tłumaczony.
  • Software developer – Z pomocą regularnego kodu (np C#) tworzy niezależną usługę, która na wejściu dostaje dokument w jakimś języku i tłumaczy go na dowolny inny zwracając przetłumaczony dokument na wyjściu. W tym celu może wykorzystać np Azure Function oraz Azure Cognitive Services. Nie wie natomiast, i nie musi wiedzieć, co się dzieje z dokumentem przed jak i po procesie tłumaczenia.
  • Business owner – wykorzystuje swoje zasoby zgodnie z ich przeznaczeniem dzięki czemu powstaje mniej błędów i dostarczona zostaje większa wartość w krótszym czasie. Osoby, które dobrze rozumieją biznes i mają szeroką wiedzę produktową mogą skupić się na modelowaniu ogólnych ram rozwiązania. Z kolei programiści mogą skupić się na tym fragmencie rozwiązania który najlepiej wykorzystuje ich specjalizację.

To bardzo ważne: korzystając z LCDP wcale nie rezygnujesz z możliwości zastosowania rozwiązań z użyciem regularnego kodu.

LCDP a Wizja jutra

Ostatnią kwestią jest: czy warto wpuszczać platformy LCDP do swojej organizacji? Pojawia się wiele pytań:

  1. Koncepcja LCDP nie jest nowa, a znana była już w latach 90tych. Czemu więc dopiero teraz zyskały na popularności? Może to tylko tymczasowa moda?
  2. Czy platformy LCDP nie zostaną niebawem zastąpione innymi platformami?
  3. Czy decydując się na jednego dostawcę nie wchodzimy w drogę jednokierunkową?

Pozwól więc, że po krótce odpowiem na te pytania.

  1. To prawda, LCDP pojawiły się wcześniej, ale ich niską popularność osobiście wiążę z brakiem odpowiedniej adaptacji standardów programistycznych (REST/GRAPH API, JSON, OAUTH). Taki brak adaptacji uniemożliwiał zbudowanie szerokiem gamy zintegrowanych platform. Natomiast obecnie środowisko IT wyklarowało takie uniwersalne standardy, a nowo budowane rozwiazania podążają za wyznaczonymi dobrymi praktykami. Jest jeszcze jeden istotny powód, a dokładniej 3 powody:
    • Wzrost – szacuje się, że wartość rynku low-code zwiększy się o ponad 21 mln w ciągu następnych 5ciu lat
    • Dywersyfikacja – zapotrzebowanie na rozwiazania IT rośnie, a jednocześnie software developerzy potrzebują odciążenia
    • Integracja – rozwiązania muszą się szybko rozwijać zachowując integrację aby móc wykorzystać potencjał stojący za dziedzinami AI, robotyki i uczenia maszynowego
  2. W całej historii rozwiązań IT rzeczywiście mnóstwo produktów pojawiało się żeby zaraz zostać sprzedanym, zmienionym lub zabitym. Dlatego osobiście wydaje mi się, że najlepiej wiązać się z rozwiązaniami dużych firm, których przyszłość opiera się na zaufaniu swoich klientów. To zaufanie zależy bezpośrednio od posiadanych rozwiązań, a także ich stabilności, przewidywalności, rzetelności oraz bezpieczeństwa powierzanych danych. “Zaufanie czyli Waluta Przyszłości” jak głosi tytuł znakomitej polskiej książki autorstwa Michała Szafrańskiego.
  3. I tak i nie. Z jednek strony rzeczywiście wybierając KTÓREGOKOLWIEK z dostawców procedura wyjścia może być wiązać się nawet z koniecznością przepisania rozwiązania na nowo w przypadku chęci zmiany. Z drugiej jednak strony budowa interfejsu graficznego nie powinna zająć dużo czasu, a w przypadków systemów RPA można zaimplementować krytyczne fragmenty rozwiązań jako niezależne rozwiązania SaaS (np z wykorzystaniem Azure Functions czy web aplikacji)

Podsumowując: dla mnie osobiście Low-Code development platforms są koniecznością każdej firmy chcącej dynamicznie się rozwijać. Niosą ogromną rewolucję jaką swego czasu przyniósł interfejs okienkowy w systemach operacyjnych. Z jednej strony, to tylko zmiana interakcji z procesorem “po drugiej stronie”. Ale z drugiej, to otwarcie na zupełnie nowe możliwości.

Gdybyś chciał dowiedzieć się więcej o tych platformach napisz do mnie! Nauczę Cię z nich korzystać, a jeśli zechcesz pomogę zaprojektować rozwiązanie albo po prostu zbuduję je dla Ciebie!

Overview of Microsoft Build 2019

In this article I’ll put short glimpse of what has been announced on Microsoft Build 2019 conference.

flow PowerApps

  • Develop custom components for PowerApps

    This is going to be a big thing for PowerApps. From now on PowerApps apps can have embedded custom controls that have been built using code. Currently only model-driven apps are supported but canvas apps are on the roadmap!

  • Solutions 

    Ok, this is nothing new int terms of platform capabilities but it’s great to know Microsoft is continuously investing in CDS Solutions user experience.

  • PowerApps checker

    When it comes to the CDS Solutions it’s worth to mention that a great tooling comes along with it – a PowerApps checker which that analyse a CDS Solution and identifies potential performence and stability risks across all the assets in the solution.

flow Microsoft Flow

  • Import Azure Function / Logic Apps as Custom Connector 

    Until now this was possible but requires some work on Azure platform and then on Flow studio. Because of such context inconsistency  in the result for some of the users and devs the whole process of publishing azure function as a custom connector and using it in a Flow or PowerApps wasn’t clear enough. And this has been improved!

  • Improved Application Lifecycle Management for flows using CDS 

    Flows that are part of the CDS Solutions can now be automatically activated on solution import to a new environment!

  • Integrate your Azure Blockchain Service with anything using Microsoft Flow 

flow Microsoft Teams

  • Message actions

    One of my favorite things in Microsoft Teams is how it’s greatly integrated with other SaaS. I was already very satisfied but Microsoft Teams does not stop in surprising me – this time with context actions so from withing a conversation you can click on a message and create a task based on it!

  • Link unfurling

    Whenever someone paste a link to a chat message it will be previewed as an image. Simple and useful. Keep in mind that you can also integrate it with your app.

  • Low code teams app templates

    If you read my blog you should already know I’m a big fun of Low Code solutions. I think they will fill a great gap between end-users and IT world with developers on the lead. My favorites LCDP from Microsoft are of course PowerApps and Flow but Microsoft Teams is few steps behind them

flow Fluid Framework

A new feature that is going to revolutionize the way how people collaboratively work on the same document with each other. Long story short: Digital workplace besides being an advocate of working wherever you are it also states a very important rule – consistent context of all tools you use in your office. In Microsoft such tool that allows you to integrate with anything but keeping the same context is Microsoft Teams. Fluid Framework bring this idea to a higher level so i.e. you could work on the same document directly from a chat seeing only a part of the document that is the most related to your conversation.

flow Microsoft Search

Bing + AI + Microsoft Graph = Microsoft Search. The new search from Microsoft not only takes the best from the above but also is everywhere! It’s integrated with Office, Outlook, SharePoint, OneDrive, Bing, Windows etc. One Search to Find Them All. It will serve you best then ever.

Build PowerApps component from scratch in 15 minutes

PowerApps components appeared in the beginning of this year and so far are one of my favorite features. In a way they do not change anything – before PAC (PowerApps Components) developers were able to implement the same business logic in their apps. However from the other side PACs changed everything – developers are now able to create and reuse custom app parts which makes their solution cleaner, easier to maintenance and paced up the whole development process. In other words PAC are powerful tool in the hand of LCDP (low-code development platform) developers but unnoticeable for end-user.

In this post I want to show you one of my components and guide you through the process of creating it. Above all, please do mind I won’t cover what PAC is (here you can read great article about it) and I assume you have basic knowledge about PowerApps and PAC (if not, read this post first)

Step-By-Step Guide component

The component we want to build is an app guide/tutorial that describe the application sections to user that opens the app for the first time. For instance check an example of such guide below (the source comes from one of best of its kind: https://teamsdemo.office.com/)

We will use above example as an inspiration. Based on it we can note following features:

  • Highlighted area
  • Text box with instruction
  • Next/Prev steps buttons

We already can imagine what kind of information our component will need:

  • steps table
  • current step information (to allow our component to communicate with PowerApps screen controls)

Knowing that we can break creation of our component to following steps:

  1. Main controls
  2. Semitransparent cover
  3. Component custom properties:
    • (Input) Guide Steps Table
    • (Input) Start step
    • (Output) Current step
  4. Component controls dependencies

Main controls

To add controls:

  1. Create new PowerApp > go to Components(1) > add new component(2) > add controls (3) as below. For arrows icons I used ChevronLeft and ChevronRight. To displaying description text I used simple label. However do mind I used a label control because of its configuration simplicity and the multiline text box control should work better.

2. Now let’s add simple styling to our controls to make them more indicative. To do that I’ve made info text white on a bit transparent black background, white arrows and highlighting frame only with red borders (no fill).

Arrows styling: Color = White
lblInfoText: Color=White; Fill=RGBA(0, 0, 0, 0.7);
shpHighlightingRectangle: BorderColor=RGBA(168, 0, 0, 1); Fill=RGBA(0, 0, 0, 0)

3. At this moment we can also add our first simple logic. The logic will create
arrows position dependency from lblInfoText position. Moreover we can also snap lblInfoText to shpHighlightingRectangle bottom border

=========icoPreviousArrow=========
X=lblInfoText.X
Y=lblInfoText.Y
Height=lblInfoText.Height
Width=30
=========icoNextArrow=========
 X=lblInfoText.X+lblInfoText.Width-icoNextArrow.Width
Y=lblInfoText.Y
Height=lblInfoText.Height
Width=30 
=========lblInfoText=========
X=50
Y=shpHighlightRectangle.Y+shpHighlightRectangle.Height+10
Width=AppGuide.Width-100
Height=100
PaddingLeft = icoPreviousArrow.Width
PaddingRight = icoNextArrow.Width

That was easy. As a result your component should now look and behave like below:

Semitransparent cover

Now, let’s talk about semitransparent cover. As you may noticed on the Teams demo gif, every step highlights only part of the whole visible area, covering the rest with a semitransparent layer that ease user focus on only elements that are important in the current step.

Achieving similar effect can be done using 4 rectangle shapes that fill all the space between screen borders and our highlighting rectangle. Below image visualize the idea:

To create such semitransparent cover add 4 rectangle shapes and configure it according to following setup:

=========shpRightCover=========
x=shpHighlightRectangle.X+shpHighlightRectangle.Width
y=0
Height=AppGuide.Height
Width=AppGuide.Width-shpHighlightRectangle.X-shpHighlightRectangle.Width
Fill=RGBA(0, 0, 0, 0.6)
=========shpBottomCover=========
x=shpHighlightRectangle.X
y=shpHighlightRectangle.Y+shpHighlightRectangle.Height
Height=AppGuide.Height-shpHighlightRectangle.Height-shpHighlightRectangle.Y
Width=shpHighlightRectangle.Width
Fill=RGBA(0, 0, 0, 0.6) 
=========shpLeftCover=========
x=AppGuide.X
y=0
Height=AppGuide.Height
Width=shpHighlightRectangle.X
Fill=RGBA(0, 0, 0, 0.6)  
=========shpTopCover=========
x=shpHighlightRectangle.X
y=0
Height=shpHighlightRectangle.Y
Width=shpHighlightRectangle.Width
Fill=RGBA(0, 0, 0, 0.6)  

As a result, your component should now behave like below.

Disclaimer: along the place of covering rectangles contact there are visible white stripes. It’s kind of PowerApps bug which I’ve reported on PowerUsers forum and wait for the solution – please support it for the commonwealth good.

Component custom properties

As we’ve already mentioned we need 3 properties:

  • (Input) Start step – in case of situation when user would close application without finishing app guide. To be honest it’s optional and add a lot of if_else blocks to check if the StartStep value is blank. From the other hand it gives learning value so I decided to implement it anyway.
  • (Output) Current step – important property. Based on its value the screen controls can change their visibility. You can also trigger an action (ie. change screen when user reach step 4) – to do that you can use component outside action pattern
  • (input) Guide Steps Table – Table that contains all information according to which the component will behave. However we don’t have single record scheme, so it is the right time to design it. For our needs I used below scheme:
    • Highlight Rectangle X value
    • Highlight Rectangle Y value
    • Highlight Rectangle Width value
    • Highlight Rectangle Height value
    • Text – information text to display in info text control
    • TextPosition – by now text block is below hightlight rectangle. But the text block will be out of screen boundaries if highlight rectangle will be on the bottom of the screen, right? So this field should indicate where the text block should be placed in relation to highlight rectangle position.
    • Example single record:
{
  HR_X: 100, 
  HR_Y: 100, 
  HR_Width: 100, 
  HR_Height:100,
  Text:"This is text",
  TextPosition:"Bottom"
}

Having everything planned we can start to implement it.

  1. On tree view select your component

2. Then add new custom property

3. Then fill up the property form fields using below data

4. Finally, select component Advanced tab and fill the fields as below.

Important note
Adding sample record to custom property table allows later on to pick a record field ie. for some control value

Component controls dependencies

Let’s begin adding dependencies in tree view controls order starting from the top. The next screens will indicate which controls will apply to the following code snippets. Code snippets are self-explanatory, rarely put comments explain a bit more complex logic

=========OnSelect=========
//GuideStepNumber - component local variable that keeps current step number
If(
    IsBlank(GuideStepNumber),
    Set(
        GuideStepNumber,
        AppGuide.GuideStepStartNumber
    ) - 1,
    Set(
        GuideStepNumber,
        GuideStepNumber - 1
    )
)
=========Visible=========
If(
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,
    false,
    true
)

Important note
Create a note somewhere in a component what variables are you using and why – there is nothing similar to app variables that will list all component variables. I’ve posted an idea to create component variables section – vote for it if you agree it’s a good idea to have such component variables list

=========OnSelect=========
//GuideStepNumber - component local variable that keeps current step number
If(
    IsBlank(GuideStepNumber),
    Set(
        GuideStepNumber,
        AppGuide.GuideStepStartNumber
    ) + 1,
    Set(
        GuideStepNumber,
        GuideStepNumber + 1
    )
)
=========Visible=========
If(
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,
    false,
    true
)
=========Text=========
If(
    IsBlank(GuideStepNumber),
//displays text field of AppGuideSteps[GuideStepStartNumber] element
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).Text,
//displays text field of AppGuideSteps[GuideStepNumber] element
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).Text
)
=========X=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_X,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_X
)
=========Y=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Y,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Y
)
=========Width=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Width,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Width
)
=========Height=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Height,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Height
)

Last thing is to set output property of our component

=========AppGuideCurrentStepNumber (Output)=========
If(
    IsBlank(GuideStepNumber),
    AppGuide.GuideStepStartNumber,
    GuideStepNumber
)

Component usage

To use component go to App screens section and fill it with some example information. In my case I created mock up of dpt team app. Note that the visibility of the screen controls (ie. a gallery) can depends on the current guide step!

And that’s it! Congratulations! Your Step-by-step guide component is done! Now you can use it in your app or improve it by adding other features (ie. set dynamic info text height based on number of characters or replacing info text label control with multiline text box control)

References & Downloadables

I hope you’ll love PAC even more if you haven’t loved them enough yet. Also take below resources as a follow up of this article:

If you like this post please share it – it helps others and motivates me 🙂

Business Card Reader

On my session during last SPS Warsaw I showed 5 examples how I save my time by automating things that steal my time almost everyday. In this blog post I’ll show you one of those solution. And that’s not all. I’ll show you how it’s been built so you can build it for your own…or just install my package and save your time!

But firstly sketch shortly the context – is this solution really helpful for me (or you)?

Business card business

If at some point of your career you’ve worked close to business development or you know what networking is all about then probably you already know that business cards are still very popular. Yes, there are apps that support NFC business info exchange but somehow classic paper business cards are still number 1.

Image result for meme business cards

And I agree: business cards are awesome! They look fancy, are easy to share, their size fit into pocket or wallet and if you hit a very unique business card (i.e. made of rare material or fabric) it’s always a good topic to chat during coffee break. However in the end of the day you always end up with a whole pile of those. And the worst part in it is…your workplace! It’s digital. And paper is not compatible with computers (sic!) unless being digitized.

So once after such networking events when I ended up with almost 10 business cards I said to myself that I have to do something with it. I opened one of my favorites productive apps and scanned the first business card from the pile: Capture > Import to > ….only Onenote? Eeee. I opened App Store and briefly look for some business card scanner that could import a business card to outlook. 5 minutes later I decided that actually I have everything I need to relatively quickly and flexibly develop my own business card scanner!

PowerApps and Flow give me flexibility, efficiency and reliability I need. No code solutions with almost a full potential of code solutions. Legit.

Business Card Reader architecture

The architecture of the solution is this:

  1. PowerApps takes photo and passes stream to Flow
  2. Flow convert photo stream (as URI) to binary and passes it to Cognitive Service Vision OCR
  3. Cognitive Service Vision OCR is a beautiful blackbox which accepts image content and returns JSON as described here (note that each text is linked to a bounding box coordinates so theoretically you could use this information to highlight text in a picture. Check Paul O’Flaherty great video for reference)
  4. Flow returns JSON with all recognized strings to PowerApps
  5. PowerApps parses results (i.e. joins number values) and waits for a user to match all fields. Once a user done it PowerApps pass fields values to Flow…
  6. …so it could create new contact in my Outlook contact group

The whole solution works like this

Describing the whole code of the solution wouldn’t make sense (it will be so long that I doubt anyone will read it) but let me put emphasis on some of the most neat constructs in my solution.

PowerApps Business Card OCR Flow Response

Until now I used to use standard PowerApps response from Flow actions. (i.e. I used and described it in this solution which you can also download and play with). But this time I didn’t do that and used HTTP Response action instead.

Thanks to this move I didn’t have to parse JSON results in PowerApps (as I did when I was integrating SharePoint Search results in PowerApps) because PowerApps already was able to interpret such JSON object as Record type. In other words I could save JSON results as record variable (or even a collection if I would) and use it as any other variable. Everything done smoothly, using one, sexy line of code (yes, code can be sexy. The same as math equations).

Set(CapturedRegions,PowerAppsBusinessCardOCR.Run(Image4.Image).regions);

Matching recognized strings with fields

This step has been done with an intention to be universal so I could use it not only with business cards but any other OCR use case where matching could/should not been done automatically i.e.: invoice scanning, diploma scanning, sign scanning, random paper text scanning etc.

Cognitive Service Vision OCR number parsing

Normally Cognitive Service Vision OCR recognizes number sequences with
white spaced as seperate strings. So what I did is wrote a simple logic which separate numbers from text values, joins numbers together and pushes back to recognized text collection. Code looks like this:

Avoiding code duplication

In matching screen there is a logic which control which variable will be updated once user select an item from recognized text collection gallery. Because this code could be used in multiple places (or at least that was the idea at the beginning) I didn’t want to maintain more than once. So I used a trick which I describe in this post. Long story short the idea looks like this:

  • Add a new button and make it invisible
  • Put your redundant formula in OnSelect event of the button
  • Use Select(YourInvisibleButton) function to execute formula inside OnSelect event of your invisible button
  • For any dependencies (you can think of them as the functions arguments) use variables (global or local).

Styled confirmation screen

Styled confirmation screen makes that every time I confirm new contact I’m smiling. Seriously. No joke. It feels like all code logic in designed to be transparent for a user. No hidden catches, back-end formulas and processing that results in user’s “WTF?!” when he confront app results with his expectations. As a developer I know that there is nothing happening to business card contact fields values and confirmation screen is overhead. But as a user it’s just nice to be able to make sure what will be imported to my outlook contacts. Do you agree with me?

Download my solution

Feel free to download my solution. When you’ll install it you should have 1 PowerApp, 2 Flows and 2 additional connectors.

Remember to configure connectors and be aware that for Cognitive Service you’ll need Azure subscription with set up Cognitive Service resource. To sign up for cognitive service read this documentation section.

And that’s it! I hope you enjoy this post. Let me know if you like it or have any questions!

How to avoid code duplication in PowerApps

If you’re developing PowerApps you must at least once find yourself in a situation of having multiple different controls executing same or similar code. In this post I want to answer to following questions:

  • Is code duplication that bad?
  • When PowerApps Components are not enough to avoid code duplication?
  • What is another way to centrally manage code in PowerApps

Is code duplication that bad ?

I’ll answer this question using my case when I’ve made a PowerApp app that calls SharePoint Search REST API (via Microsoft Flow) and display results. App looks like this:

As you can see you can search for specific phrase, limit items per page and navigate between result pages. Let’s stop for a second on pagination feature. How do you think – how it was built? Probably most of you will quickly figure out that pagination is nothing else than searching with a “number of items to skip” parameter. Knowing that, you can think of the “Search” button as searching with a 0 (zero) items to skip. In other words – we need 3 buttons with very similar code. Below I present such code – please notice comments I’ve provided:

//clear search results collection
Clear(colSPSearchResultItems);
//read row limit number from input text box and save as variable
Set(gblRowLimitNumber,numRowLimitNumber.Text);
//make call to SharePoint Search and save results in variable. 
//Flow has following parameters: Search_Query, Row_Limit, Row_To_Skip)
Set(gblSearchResults,Searchforitemsintenant.Run(txtSearchPhrase.Text,gblRowLimitNumber,Text(gblItemsToSkip)));
//Now we need to extract values from results string and save as separate //column in table
ClearCollect(
    colSPSearchResultItems,
    AddColumns(
        Split(
            gblSearchResults.results,
            "/n"
        ),
        "UniqueId",
        First(Split(Last(Split(Result,Char(34)&"UniqueId"&Char(34)&","&Char(34)&"Value"&Char(34)&Char(58)&Char(34))).Result,Char(34)&","&Char(34)&"ValueType")).Result,
        "Title",
        First(Split(Last(Split(Result,Char(34)&"Title"&Char(34)&","&Char(34)&"Value"&Char(34)&Char(58)&Char(34))).Result,Char(34)&","&Char(34)&"ValueType")).Result,
        "OriginalPath",
        First(Split(Last(Split(Result,Char(34)&"OriginalPath"&Char(34)&","&Char(34)&"Value"&Char(34)&Char(58)&Char(34))).Result,Char(34)&","&Char(34)&"ValueType")).Result,
        "Rank",
        First(Split(Last(Split(Result,Char(34)&"Rank"&Char(34)&","&Char(34)&"Value"&Char(34)&Char(58)&Char(34))).Result,Char(34)&","&Char(34)&"ValueType")).Result
    )
);

This code realize everything I needed. Although implementing it was not a big deal (I’ve done it once and copied 2 more times), debugging and further maintenance was a nightmare. Every time a change done in one of those buttons had to be copied to the others. When at some point something broke up (ie. some results were wrongly parsed) I was reviewing all 3 copies of the same code just to make sure it is the same (sic!).

Mastering PowerApps Components you must

Yoda has spoken. And at some point he is right – PowerApps Components are very good way to avoid code duplication. Especially if you know PAC development patterns I described in my previous post.

Yep, this is how it was, I didn’t make it up…

BUT! What if you have totally different controls ie. a shape, a button and a gallery and all of them should use the same code. PAC are good until you want to have different properties per control (i.e customize button text in one control and image in another) so this won’t work for such control set.

In such situation I have a recommendation for you.

Centrally managed code in PowerApps

To build centrally managed code in PowerApps follow below steps:

  • Add a new button and make it invisible
  • Put your redundant formula in OnSelect event of the button
  • Use Select(YourInvisibleButton) function to execute formula inside OnSelect event of your invisible button
  • For any dependencies (you can think of them as the functions arguments) use variables (global or local). Ie.
UpdateContext({locSumArg1:4,locSumArg2:6});
Select(btnSumArg1Arg2)

Using presented approach, my “next page” icon code from example search app, looks like this:

//Set items to skip in variable
Set(gblItemsToSkip,gblItemsToSkip+numRowLimitNumber.Text); 
//Call button that contains parameterized arguments
Select(btnCallFlow)

Code of my “previous page” icon is almost the same (the only difference is the minus sign instead of a plus)

Set(gblItemsToSkip,gblItemsToSkip-numRowLimitNumber.Text); Select(btnCallFlow)

4 lines of centrally managed code instead of ~50 lines.
Simple. Clean. Beautiful.

Nothing is perfect

Described method won’t work if you would use variables to pass some “arguments” followed by Select function inside Concurrent function in the same time. It’s obvious but worth to mention just in case.

As Dwight from The Office would say 🙂

And that’s it! I hope you enjoy this post.

Let me know in the comments if you like this approach or not.

PowerApps components patterns

Long-awaited PowerApps Components [PAC] appeared on the end of January 2019 to everyone’s delight. From then on PowerApps developers can create their own controls that can be reused on a screen or across multiple screens and at the same time being central-manageable and migrate-able due to import/export option. PowerApps components can has it’s own custom properties (input and output) of multiple types which makes them really flexible. In this article I want to cover following topics:

  • My own opinion on PAC
  • 9 pros and cons of PowerApps Components
  • PAC development patterns
    • Referencing to PAC controls from within built-in properties
    • Enforce proper setting default values for component
    • Run event-driven component actions (OnStart,OnVisible,OnHidden,Reset)
    • Run function outside component based on component behavior

I won’t cover step-by-step PAC creation in this article although presented patterns contains logic/code pieces. I plan to provide such tutorial in the future but until that time I refer to official tutorial.

PAC-math

I love PAC. Really. I use them in every new app of mine. And personally I think every PA developer should at least consider mastering PAC. Why? Let’s consider following PowerApp-math dissertation:

  • PowerApp component = Multiple controls and mutual dependencies in 1 control
  • Multiple controls and mutual dependencies in 1 control = less code + less controls
  • Less code + less controls = lower app complexity
  • Lower app complexity = faster development + easier maintenance
  • Faster development + easier maintenance = Developer’s love

PowerApp component = Developer’s love.
Q.E.D.

Below example shows image toggle control that is built from toggle button, 2 images (on/off) and glued with few lines of simple code.

Used icon: “meditation clipart 86677” by Clipartroo.com

Building 5 of above image toggles on a screen requires 5×3 controls and as much more of code. Now imagine you want each toggle to have different icon and still keeps to naming convention (tglMeditation, tglAnotherIcon etc.) for both controls and their variables. Seems like lot of work, right? And now assume that you need to change 3 icons to something different (remember about keeping naming convention!). Or even worse – you want to update image toggle control so it dims once clicked…and your app has 5 screens…and at least 2 of such controls on each…and…Ok, I stop here. You know what I mean :).

So now quickly analyse similar scenario using PAC. You use 3 controls + code + 4 extra custom properties (Image Toggle Default, Image Toggle On Icon, Image Toggle Off Icon, Value) and reuse the component 5 times which gives only 5 controls (PAC section is separate from Screens). No naming convention to keep (except in the component itself). Need to change icon? Easy, that’s why we’ve added custom properties for. Need to add dimming? Sure, we do it in one place (in PAC definition) and don’t care about the rest. Isn’t it beautiful?

9 pros and cons of components

PAC pros

Probably most of my readers are aware of following advantages of PAC but just in case some of you are not I’ll list them:

  1. Wrap up multiple controls
  2. Functions support
  3. Component scoped variables
  4. Input/output custom properties of any of following types:
    Text, Number, Boolean, Date and time, Screen, Record, Table, Image, Media, Color, Currency
  5. At any point of the time you can switch type of a custom property to any other type (no limitations like i.e. in SharePoint columns)
  6. Fetchable component size from within
  7. App scoped component
  8. Import/export option
  9. PAC is in preview: we can use it with confidence

PAC cons

Once you reach perfectness you’ll stop your development. Fortunately PAC is imperfect (as everything in the world actually) but as professionals we should be aware of both: pros and cons of a tool we’re mastering. In further part of this article I’m focusing on those imperfections, share knowledge of consequences they cause and how to overcome them.

PowerApps Components limitations are:

  1. Collections are not fully supported (key word: fully. They work to a certain point)
  2. Connectors are not fully supported
  3. Nesting a component inside gallery, form or a datacard isn’t supported
  4. No possibility to add media files to PAC package
  5. Unsupported referencing to PAC controls from within PAC built-in properties.
  6. Default values are wrongly set in specific situations
  7. No OnStart, OnVisible or OnHidden action for PAC means no simple way of setting default values in centralized way
  8. Unsupported executing functions in the context of the screen on which the PAC is embedded
  9. PAC is in preview: ok, that’s not really an issue but a inconvenience. Some features may not work as designed (i.e. undoing changes cause unexpected deletion of random custom property) and some minor bugs may appeared here and there.

Does everything from above bullet point list is a showstopper? Which of the above can be easily workarounded and which not? Let’s elaborate a bit on that.

Con 1: Collections are not fully supported

I’ve done simple test and confirmed that collections work at least in my example.

So when collections don’t work? What are the boundaries of a “not full support”? I tried to explore the topic but unfortunately I cannot find anything on it.

HELP ME: If you know in which scenarios collections are not working – please let me know in the comments below. I will update this article so others could make use of it.

CON 2: Connectors are not fully supported

So it is partly working. I couldn’t find any sufficient source in documentation, powerapps blog or powerusers forum but from tests I can confirm that:

  • What works
    • Trello, LinkedIn, Microsoft Flows. I didn’t check other connectors.
  • What does not work
    • static data from Excel, OneDrive, SharePoint Online. I was not able to reference them from within PAC.

HELP ME: If you know which connectors are not working in Components and why it’s now working (or maybe you just have another good explanation for that) – please let me know in the comments below so maybe we will be able to take the case on us.

Cons 3 & 4: No support for testing a component inside gallery, form or a datacard; No possibility to add media files to PAC package

I will be honest with you: for know there isn’t much you can do ¯\_(ツ)_/¯

Let’s hope it will be changed in the future. And by observing Microsoft progress on PowerApps development there is non-zero chance that it may happen this year.

PowerApps Components patterns

There are 4 more cons of PAC that I’d like to share with you. I’ve also prepared a PowerApps app with the described in this article components patterns as well as example use of them:

  • Components Patterns contains components patterns like:
    • Custom property reference pattern
    • Default variable pattern
    • Componenty inside action pattern
    • Image toggle
    • Customized Combo Box with Ok/Cancel option
  • Confirmation Popup Component contains example of:
    • Component outside action pattern
  • App Guide Component contains example of:
    • Default variable pattern

I’d be happy and proud if at least one person will make a use of them. I’m also encouraging you to contribute in this patterns – let me know if you have other ideas. If there will be reasonable need we can also move this content to github or whatever for the sake of easier contribution.

Referencing to PAC controls from within built-in properties

Problem

PAC con #5: “Unsupported referencing to PAC controls from within PAC built-in properties”

You want to achieve following behavior for your component:

Component fill is orange or white depending on toggle value.

Normally to make it works you would open your component properties advanced tab and use following formula in the Fill property:

If(Toggle.Value,Orange,White)

I thought similar but once I’ve done it the result surprised me:

It occurred that I cannot reference to component controls or any variables from within component built-in properties (Fill, Width, Visibility etc).

Solution: custom property reference pattern

Fortunately component built-in properties can reference input/output custom properties so make use of this capability.

Steps to workaround:

  1. Add an input/output custom property with a proper logic in it
  2. Reference component built-in property to that custom property value

To finish presented background color switch I’ve added a custom output property of type Color. Then I’ve referenced to that property from Fill property of my component:

Example scenarios when this pattern may be useful:

  • Hide component depending on its controls values (i.e. hide component once user pick an option)
  • Change component background color based on its control value
  • Resize component size based on its input data

Enforce proper setting default values for component

Problem

PAC con #6: “Default values are wrongly set in specific situations”

To make this con more understandable let’s consider following: you want to extend previous component (the one with changing background) adding default setting for component toggle.

Seems easy, right?

  • Add custom input property of type Boolean
  • Set toggle default value to Component.InputCustomProperty

You’re adding your component to the first screen of your app, set InputCustomProperty to ‘false’ (background should be white), save, publish, run app and…


Emm…ok…maybe there is something wrong. You check all settings twice, three times but no – everything is as it should be. Time for debugging. Let’s add extra toggles to the screen with your component and by using them let’s indicate input and output values of the component. Result?

What the…Oh boy…it seems like the output value of the component (and its background in consequence) refers to the value set in component instance (which you’ve added to the screen). From the other side the input value of the component refers to the value set in component definition.

The output value of the component refers to the value set in component instance
The input value of the component refers to the value set in component definition

SOLUTION: Default variable pattern

Theoretically setting InputCustomProperty value to false could solve the problem in this case but what if there will be more instances of this component and some of the should have InputCustomProperty set to true and some to false? So there is easier solution to that.

Steps to workaround:

  1. In component instance set InputCustomProperty to a variable i.e. gblDefaultValue
  2. On App start switch you variable to true and false like below:
Set(gblDefaultValue,true);Set(gblDefaultValue,false)

Result:

Example scenarios when this pattern may be useful:

  • Set component default visibility
  • Preset multiple of component controls to specific values
  • Define component size based on app resolution (in case of implementing custom responsive design)
  • App like below (you can download it from here)
Example App Guide control. It contains StartStep Input property so using presented pattern you can easily return to step that user left app on.

Run event-driven component actions (OnStart,OnVisible,OnHidden,Reset)

Problem

PAC con #7: “No OnStart, OnVisible or OnHidden action for PAC means no simple way of setting default values in centralized way”

Let’s start with following example: a component with 3 buttons (Green, Red and Default) set a color to component background each. There are also 2 extra custom properties: Default Color (input, color type) and Background color (output, color type).

This time for background I use rectangle shape. Output custom property formula is:

And the formula for rectangle color is:

Formula for Green button OnSelect action is:

For the Red button the second parameter in the formula will be Red, for the Default button the second parameter will be ‘Event-driven actions’.DefaultColor

Nothing spectacular so far. You change the color using buttons and the color is properly passed to the output value.

But now imagine you share this component to a colleague of yours. He played with it and…you received an email from him: “your component is not working properly. I set color for DefaultColor custom property but it’s not used until I click the button!

You colleague expects that once he’s set a DefaultColor the rectangle color will be white

At first glance you might thought that setting Rectangle.Fill to Component.DefaultColor would resolve the issue but of course you’ll quickly notice that this would break the link between Rectangle.Fill and gblBackgroundColor variable.

Normally (I mean on screen level controls) you would use i.e. OnVisible screen event to set your rectangle.Fill to whatever is set for a default value. But PAC doesn’t have any event-driven actions. That’s why I would like to share with you with following pattern.

SOLUTION: Component Inside action PATTERN

Idea is this: add a toggle to your component and link it to some component input custom property. On toggle change run a formula you need.

Steps to workaround:

  1. Add input custom property of type Boolean to your component
  2. Add toggle button to your component
  3. Set toggle default value to ‘You-Component-Name’.InputCustomPropertyName (i.e. ‘Event-driven actions’.ComponentReset)
  4. Set toggle OnChange formula to anything you need. In my case it is following formula:
Set(gblBackgroundColor,'Event-driven actions'.DefaultColor)

Result:

I left component toggle visible for demo purposes but normally I hide it (set visibility to false).

If you want to set many variables in Reset Toggle OnChange consider passing InputCustomProperty of type Record.

Example scenarios when this pattern may be useful:

  • Expose less parameters to set and make your control more hermetic
  • Below Additional Items picker component (you can download it from here)
Image Toggle and Additional Items picker are separate components. Table at the bottom is a common screen control.

Run function outside component based on component behavior

Problem

PAC con #8: “Unsupported executing functions in the context of the screen on which the PAC is embedded”

We can do almost everything using components except one part – context awareness. It means your component won’t know nothing about app nor screen that keeps it (however in case of a screen you can pass it to your component as parameter). In most cases that isn’t a problem but one specific action is noticeably missing: navigation. Simple as that.

The workaround lays not fully inside component but on the border of the component and screen in which it is embedded.

SOLUTION: COMPONENT outside ACTION PATTERN

For workaround we’ll make use of Component Inside Action Pattern but outside the component 🙂

Steps to follow:

  1. Add Output Custom Property of type Boolean to your component
  2. Add 2 buttons: Ok and Cancel that sets Output Custom Property to true and false respectively (of course via some variable)
  3. In the screen that embeds your component add a toggle
  4. Set the toggle default value to Output Custom Property value of your component
  5. On toggle OnCheck run a formula you need

Result (you can download ready component from here):

Example scenarios when this pattern may be useful:

  1. Navigate (of course)
  2. Control one component behavior based on another component output (like below)
Image Toggle and Additional Items picker are separate components. Note how Image toggle is Off once user Cancel his picks.

The last word

Components are very powerful tool in PowerDev toolset. I encourage you to use them often – the mastery in using them will pay back quickly (even though PAC are going to evolve in the future to even more perfect form). Also remember that you can download and play with my components:

I hope you enjoy this article.

Have a great coding.

Animation in PowerApps

In this post I’m going to put some light on the topic of animation in PowerApps. Animation is what probably most of PowerApps devs have never tried to use in their application and you may also think now: “That’s true, because hey, why should they? PowerApps platform is for business, not games”. So let me give you couple examples:

  • Mastering timer control – Timer control is heavily used in animations but you can also use it in different ways like app behavior delays (change screen after 5 seconds), counters (time limited surveys) and statistics (time per page)
  • Awesome loading screen or eye catchy busy indicator – just to amuse your users
  • Improve your business apps – sometimes simple highlight or
    animated illustration can really improve UX of your solution
  • Understand PowerApps platform even better – animations exists on cross line between possibilities and performance
  • Cool games – because a kid is inside each of us
  • Inspire yourself – any learning create a “dots” in your mind. Every idea is a connections of different dots all together but you never know when a new dot make a real difference. So collect them to not narrow your options

From my experience playing with PowerApps animations significantly improved my proficiency in programming in declarative paradigm language (I have C# programming backgrounds which is an imperative paradigm language), helped in understanding of what and how I can implement in PowerApps and also boost my confidence in my PowerApps skills.

DISCLAIMER:

This post was supposed to be much shorter. However the more I spent time on it the more I was convinced that showing whole process without making shortcuts like “ok, we know what we want to achieve so here you have final code and let’s briefly describe it” will give much more value to readers who come here not only to look for a solution but also to understand the process and learn. Furthermore I did not split this article for a separate 2-3 post series because that will ruin the whole workflow and the context of work (What are we doing now? Why are we doing it? Hold on, I got to remind the last part…?).

As the result the following article stays in one piece bringing the most value of it, in my humble opinion.

Different ways of creating animation in PowerApps

To add an animation to your PowerApp app you can use different ways. You can:

  • Add a video file – simple as that. In PowerApps you can switch controls off and auto play it so for a user it will look just like an animation. However be aware that if your video contains any sound you cannot autoplay it in Chrome. Also video cannot interact with user or react on screen changes. Like below:
  • Add a gif file – this method is really similar to a video file without a sounds and is also limited in how it can interact with user or other controls. However it’s ideal for i.e. busy indicator.
  • Constrain timer, controls (i.e. images) with functions – this method is the most powerful, interactable and flexible but also the one that needs some knowledge about animations, programming and platform specifics (like functions in PowerApps) for which you want to create an animation.

In this blog post I want to focus only on the last of above list.

Briefly about animation

Before we start with animation implementation in PowerApps it’s good to know what the animation really is. Especially that no matter which platform you pick the main concepts are always the same.

So what is animation? Short answer may be not really helpful: it’s a short sequence of a film. So what film is? To understand that let’s go back to 1872 when there was an ongoing debate among people interested in horses: “whether all four feet of a horse were off the ground at the same time while trotting?”. Today you will probably google that or just record a horse with your mobile and play video really slow (or should I say frame by frame…but let’s not overtake the facts 😉 ) but back then common opinion was that horse has always at least one foot on the ground while at a trot (and this beliefs shared most paint artists that time). Anyway, one of the race-horse owners named Leland Stanford wanted to end debate once for all and felt that relatively young and still imperfect technology, a photography, might help him. So that he hired Eadweard Muybridge – 38 years old imigrant from England who was world – famous for his large photographs of Yosemite Valley – for some photographic studies. Muybridge began to experiment with an array of 12 cameras photographing a galloping horse in a sequence of shots. Those shots were far from perfect but one negative proved that trotting horse is fully airborne. In 1878 Muybridge published 12 frames of trotting horse:

Source: wikipedia

Once you quickly display pictures one-by-one (like in a flip book animation) you will see something like this (frame 12 is not used).

Source: wikipedia

To summary all above: animation is picture change in time. This brings us towards conclusion we need if we want to make an animation:

  • a pictures of the object in different positions
  • a timer to “animate” (quickly change displayed pictures)

And commonly that will be it if we want to make an animation.
– “Em…so now I have to make picture of my airplane image in each position on the screen and animate it using timer? Wow, that will be a number!” – of course not, this would be insane :D. Fortunately in computer programming there are many situations where actually you can use only 1 picture and on timer tick (smallest portion of time in which timer counts the time) simulates specific behavior of the image (like movement, rotation, size etc) by modifying image properties using functions. And this is exactly what we’re going to use:

  • single image
  • a timer
  • functions to compute property values (describe relations)

Create an app with animated airplanes

If you don’t know where to start it’s always good to breakdown your task to smaller steps. Do it until you will know how to do the task.

  • Create an app with animated airplanes
    • Add screen
      • Add header
      • Add Reset & Start/Stop controls
      • Add board for airplanes
    • Add airplane animation
      • Add image
      • Make airplane “fly”
        • Move plane down the board
        • Bounce plane from board boarders
        • Move plane nose towards its direction
      • Add speed control
      • Add rotation on U-turns

I hope it makes sense but if you think the list should looks differently just remember – that’s fine. The final result is what matters – not the path you follow.

Adding screen and its components

This task along with its sub-tasks is pretty straight-forward. For header we use simple label. Next for controls we use buttons: reset button will puts all components to their starting positions, and start&stop button will animate our objects. For the animation board I used rectangle shape just with blue borders and white filling (transparent filling is also ok).

Because for now we don’t need to put any logic inside controls, I think simple screen will be enough for you to implement this part of our demo app.

Add airplane animation

Add image

This will be our object that we’ll animate. Easiest way is to google some .png icon that is free to use (I used icon from here and rotate it in paint.net to face it upwards) and import it to app assets.

To add image click file > Media > Images > Browse > pick your file and hit ok

To your app screen an image control (1) and point added file in Image property of the control (2)

Make airplane “fly”

By “flying” I mean moving back and forth bouncing from board edges. And as it has been already mentioned in “Different ways of creating animation in PowerApps” section move is a defined change in time. And there are 2 ways of achieving that: imperative-alike and declarative-alike. For now don’t bother that, I’ll explain it later, what is important now is that we’ll start with imperative-alike way. Reason: this was natural way of implementing dependent logic for me since on the beginning of my professional career I was starting as C# developer.

So what we need is a timer that will produce ticks. Each tick triggers a change for registered object by calling its update function. In PowerApps for update function we’ll use OnSelect() event and this approach has 2 main advantages:

  1. Execution of object’s OnSelect() event can be done by using Select(<object>) function
  2. Debugging of an object on-tick behavior cannot be simpler – by clicking on an object with your mouse button (or finger) you can fire OnSelect() event

So without further hesitation let’s get back to PowerApps.

  1. Add a timer (I replaced Start/Stop button) and configure it in following way:
    • Duration: 50 – This means that between each tick (a “frame”) 50ms pass which gives 20fps. Unfortunately this is the minimal value for timer ticks which limits the smoothness of our animation. Why limits? Because, as popular opinion says, human eye sees ~30fps which is equivalent to 33.3ms per timer tick (on the margin: I’ve found here an opinion that 50% of the population can see in 45+ FPS and trained fighter pilots can even see in 255 frames per seconds. I found no serious research that will prove that opinion except this reasearch from Uppsala University that only concludes “The minimum acceptable framerates is 60 frames per second”)
    • Repeat: true – this provides repeating nature of the timer ticks
    • Auto start: false – we’ll control that using our buttons
    • Auto pause: true – just to switch off timer in case of navigation to another screen if any
    • OnTimerEnd – see below code snippet. I use it as objects register
Select(imgPlane)

As I mentioned: whole logic of airplane move and bounce will be place inside OnSelect() function. Let’s start with something simple:

//object properties
Set(Vspeed,30);
//move behaviour
Set(planeY,planeY+Vspeed)

I hope above code is self explanatory but just in case:

  • Vspeed is vertical change in position of our plane
  • planeY stores plane Y position. Of course to make it work we also need to put placeY variable in imgPlane.Y property value

Once you hit “Play” your plane should start falling like this:

WOOHOO! That’s one small code step for us, one giant leap for our animation skills :). As you can see our plane is now moving downwards and dissapears under the screen bottom.

To restart animation (place plane in starting position) add below code to reset button OnSelect code:

Set(planeY,BoardBorders.Y);

Ok, now let’s move to next part: “Bounce plane from board boarders“. Here small math part comes to play – in every tick we’ll check if the top/bottom border of the plane image is above/under board border.

First let’s mark plane nose direction PDirection. For its value I’m using a number (0 = up, 90 = right, 180 = down, 270 = left) so it will be easier to make all the direction and rotation checks later on. Depends on the plane’s direction we will add or subtract VSpeed:

//we substract to fly up and add to fly down because Y-axis is inverted relative to the Cartesian axis
If(PDirection=0,
Set(P1Y,P1Y-Vspeed), 
Set(P1Y,P1Y+Vspeed)); 
//if we're flying top and cross the top boarder -> go down
If(PDirection = 0&&planeY<=BoardBorders.Y,Set(PDirection,180)); 
//if we're flying down and cross the bottom boarder -> go up. 
If(PDirection = 180&&planeY+imgPlane.Height>=BoardBorders.Y+BoardBorders.Height,Set(PDirection,0)) 

Probably you will see and error – PDirection hasn’t been initialized. Add following code line to Reset button OnClick

Set(PDirection,0)

Play the animation. Your plane should bounce now!

Labels on the left shows value of: imgPlane.Y, BoardBoarders.Y, PDirection

Looks quite good but can you see something awkward? See how the tail (for some configurations it may be the nose or the both) pass the border before the plane change its direction?

Any ideas what is causing that?

Give yourself a minute and try to answer this question by yourself.


Answer: this happens because we have STATIC VSpeed and always check for the borders collision after making the step. If we would like to keep the animation speed the best way will be change VSpeed if expected step will cross the borders and if so reduce it to the maximum of border distance. Equivalent code can look like below:

//Near-edge behaviour
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));

Now the bouncing should looks as it should to.

Your imgPlane OnSelect() function should be similar to below (notice I’ve refactored Bounce behavior code a bit):

Set(VSpeed,30);

//Near-edge behaviour
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));

//Move behaviour
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));

//Bounce behavior
If(Dist2Top = 0,Set(PDirection,180));
If(Dist2Bottom = 0,Set(PDirection,0))

Last part for this sub task is to make plane’s nose to point the direction plane is flight. To do that we make use of image property called ImageRotation

Result:

Add speed control

For a speed control I use slider control but of course you can use whatever you like: number text field, rate control or even text recognition property of the pen input field ;). PowerApps is very flexible and so you should be.

To add slider control select Controls > Slider

Integrating our new shiny control with our plane will be unexpectedly easy. Modify first line of imgPlane OnSelect() function to this (SpeedSlider is the name of my slider):

Set(VSpeed,SpeedSlider.Value);

Play with it to test it and to congratulate yourself. You’ve just did piece of good job. Well done!

You deserve a break, use it: fresh your mind, eat some peanuts (good for your brain) and once you ready come back to continue animation project – there is still some work to be done.

Add rotation on U-turns

So far what we did is the simple animation of a plain flying up and down. However adding u-turn once a plane reach borders requires to make some changes to what we’ve done. Because you see – how to rotate image in PowerApps? My first thought was to use ImageRotation property. But unfortunately ImageRotation accepts only ImageRotation enum object that has 4 flags: None, Rotate90, Rotate180, Rotate270. Auch 🙁

Using gif or video controls slipped through my mind but I quickly kill those ideas – I wanted to have control over rotation speed of the plane which both controls cannot provide.

Using pure math to compute movement of the image by the circle was also not an option because it will only simulate the movement and not the rotation.

Finally (why the best ideas are always the last one?) I thought that maybe I can use HTML control with img tag in it and rotate the image using html and css manipulation.

But before we start implementing, let’s plan our work – it’s very important to follow the plan.

  1. Add HTML plane img to screen
  2. Change plane rotation manually just to understand html/css rotation logic
  3. Add rotation logic to the plane OnSelect()

Step 1: Add HTML plane img to screen

Click Text > HTML Text

Set its paddings to zero, size to 80 x 80 (I want the image to be of that size and also that the size of the whole control was the same as the size of the image) and in HTMLText property write following code:

"<Img src='<your img URL here>' style='width:80px;height:80px;'>"

Please note that not every kind of URL you can put as <your img URL here>. For the src attribute value of the Img tag in HTML Text control remember following:

  • Provide absolute URL to your resource
  • resource must be publicly accessible
  • Redirections are not supported
  • Authentication is supported

Below URLs WON’T work:

  • appres://resources/plane-icon
  • https://contoso.sharepoint.com/:w:/g/SADQWEDRmfJIh5AdjoFBgWoBV9pJ_uvIX-3Vw2Ag8y90Mw?e=fTuaxu

Below URLs WILL work:

  • https://contoso.pl/wp-content/images/plane-icon.png
  • https://contoso.sharepoint.com/SiteAssets/plane-icon.png

If you put proper URL for your img you should see something like this

To remove a slider that you can see on the right side of the HTML Text control just add to style attribute “position:absolute”

"<Img src='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' style='width:80px;height:80px;position:absolute;'>"

Step 2: Change plane rotation manually just to understand html/css rotation logic

We have our HTML Text control that displays image but how to rotate it. In CSS there is a property called transform that allows for rotating, skewing and scaling the object. Let’s try something simple now and make our image to rotate 90 degrees:

Hm, that is some progress but as you can see the image rotates relative to its center. We will deal with that in a second but first let’s take care of one more thing – make the rotation dependent on a variable value.

To do that we want break the HTML code string in the place of degrees numeric value and replace that numeric value with our variable. Following code shows how to do it:

"<Img src='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg)'>"

Remember to initialize PRotation variable (using Set() function ie. in Reset button). In below gif you can see the plane rotation dependent on a slider value.

Now we can get back to problem of rotation relative to the center of the image. What we want is that the airplane image moves by the circle and rotate accordingly to its position relative to the center of that circle path. One way will be to use mathematical formulas for movement computations. Although it should be absolutely achievable, the synchronization of the movement and rotation sounds like a juggling with too many balls at the same time to me. I don’t want to stuck in one problem for days – at least not for now :). Is there another way of solving that problem? Of course there is and once again we can use CSS for that!

In CSS there is another cool property called transform-origin which move the center relative to which the rotation will take place. We want rotation to take place relative to end of the right wing of the plane. Let’s implement below code and observe outcomes

"<Img src='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg);transform-origin: right'>"

Ah, rotation is happening but our plane move off the HTML Text control borders. Let’s change its size to 160 x 160 (double the size of the image)

Hm, not bad, but plane still disappears above top border. So let’s move it away from the top border by 40px (half of its size)

"<Img src='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg);transform-origin: right;top:40px'>"

GREAT! Now it’s rotating! Perfec…oh, hold on a second. See how tips of the wings are cut off by HTML Text control borders on rotation?

Do you have any idea why it’s happening? Think for a second before continue reading.

Ready?

So this cutting off happens because of the relation between square shaped image, the center of the circle path and its radius. The easiest form of explanation will to draw these relations:

Red square is double the size of plane image and illustrated the HTML Text control borders we have currently implemented. Red circle radius indicates the most far point of the image that will be visible at any time of the rotation. You can clearly see the cutting there on the tip of the planes wing. In such situation ideally will be to enlarge HTML Text size up to the green square size (math formula: a*sqrt(5)/2, where ‘a’ is the size of the side of the square). However in our case we need only few more pixels. So let’s do following:

  • Add 5px padding on each side of the HTML Text control
  • Add 10px to the HTML Text control width (170 now)
  • Add 10px to the img style property (top:50px)
  • Add 20px to the HTML Text control height (180 now)

Result:

HAHA! Awesome! Now take a break, go run, eat some fruits and come back. Last part of the animation development process ahead!

Step 3: Add rotation logic to the plane OnSelect()

Now we need to combine above rotation animation with the whole plain movement.

Open up your plane’s OnSelect() function to remind you its logic: near-edge behavior, move and bounce logic. Now we want following changes to take place:

  • when plane hits border stop moving and start rotation procedure
  • Until the plane makes 180 rotation total do the following:
    • don’t move (of course)
    • rotate for a value of SpeedSlider
    • stop rotating once reach 180 degrees or 360 (watch out for unwanted crossover – don’t repeat the mistake from movement logic. Learn 🙂 )
  • Continue movement

Changes in the code we’ll begin from creating rotation logic. It will be very similar to the move logic so the only lines that requires explanation is the second line and the last one. Add below code right after first line of code where you set VSpeed variable.

Set(Rspeed,SpeedSlider.Value);
If(isRotating&&Mod(PRotation,180)<>0,
//ROTATION
//Protection from crossing over the full U-turn
Set(Rspeed,Min(180-Mod(PRotation,180),Rspeed));
//Rotate
Set(PRotation,PRotation+Rspeed),
//Continue movement
Set(isRotating,false));

Variable named isRotating is a flag that indicates if the plane is rotating or not. If it’s ‘true’ it’ll keep rotating. Once we finish rotation we set our flag to ‘false’. How do we know when we finish? This is why
Mod(PRotation,180)<>0 condition is for. Function Mod returns the remainder after a number is divided by a divisor. If the PRotation value is equals to 180 or its multiplications, the function will return 0 and the condition will be false. With one simple function we cover 2 u-turns. I like such code 🙂

All the remaining code we can safely put inside If(!isRotating,(…)) block.

If(!isRotating,
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
//Near-edge behaviour
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));
//Move 
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));
//Bounce behavior
If(Dist2Top = 0,Set(PDirection,180));
If(Dist2Bottom = 0,Set(PDirection,0)))

You may ask yourself now – “why didn’t we just throw away this isRotating variable and just put the whole move logic on false result of the first if condition (in the place of where Set(isRotating,false) line is)?”. We can! But for the cost of code readability in my opinion. I like to keep code that is self explanatory so me or someone else understand it even after months of not reading it. From my perspective comments are not always enough and such flag (and extra if condition) perfectly do the job. But of course – do as you like :).

Last thing that left is to adjust bounce behaviour. We need to set isRotating flag and give a plane first rotation push (otherwise Mod(PRotation,180)<>0 will never be true). Swap last 2 lines of your code as follow:

If(Dist2Top = 0 && PDirection = 0,Set(PDirection,180);Set(isRotating,true);Set(PRotation,PRotation+Rspeed));
If(Dist2Bottom=0&&PDirection = 180,Set(PDirection,0);Set(isRotating,true);Set(PRotation,PRotation+Rspeed)))

The “&& PDirection = 0” extra condition is to secure our plane from entering If block twice – when the rotation start and just after it ends (when the plane should continue moving forward).

Your whole code should looks like similar to this:

Set(VSpeed,SpeedSlider.Value);
Set(Rspeed,SpeedSlider.Value);

If(isRotating&&Mod(PRotation,180)<>0,
//ROTATION
//Protection from crossing over the full U-turn
Set(Rspeed,Min(180-Mod(PRotation,180),Rspeed));
//Rotate
Set(PRotation,PRotation+Rspeed),
//Continue movement
Set(isRotating,false));

//MOVEMENT

If(!isRotating,
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
//Near-edge behaviour
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));
//Move 
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));
//Bounce behavior
If(Dist2Top = 0&&PDirection = 0,Set(PDirection,180);Set(isRotating,true);Set(PRotation,PRotation+Rspeed));
If(Dist2Bottom=0&&PDirection = 180,Set(PDirection,0);Set(isRotating,true);Set(PRotation,PRotation+Rspeed)))
Completed plane animation with u-turns

WOW! That was hell of the road but we made it! You made it! If you follow all the steps up to here I’m really really thankful and proud of you. You are awesome!

Here you can download my project with finished planes animation with some extras! I’ve added a screen with multiple planes and movable
boarder bottom border. When you play it and start to move bottom border you’ll observe interesting thing – an animation slows down and sometimes even lag spikes

If you have enough energy you can read next section…or just read it later 🙂

Performance in animations

So you probably you already know that PowerApps is using declarative code. Declarative means that the code expects results instead of giving instructions (orders) of how to do something (this is imperative). But I feel that in PowerApps declarative also means that it doesn’t really like a controller alike pattern where one object activates other object(s) (like we did in timer control which select plane on timer end).

I’ve googled a bit looking for some solution and found this video where Brian (a.k.a. @8bitclassroom) built a simple animation of shooting space ship. He used observer pattern where each projectile object (kept in gallery) has it’s own timer and object behavior depends on it in a way like projectile Y property uses timer.value/timer.duration for its position calculations. So I’ve built copy of his approach and must admit that his method was very effective and even tens of shots did not slow down the whole animation (note that no object is removing once reach top)

Oh, as a side note – feel free to download also this app with comparison from here.

To verify my theory I’ve build the same app but this time I use my method (each projectile was a gallery item and each item has its own timer and image. On every timer end the projectile was selected). Additionally once the projectile reach the top I removed it from collection so I can be sure that it’s not the ongoing timer that is slowing down animation. And as you can see my app is still lag spiking

Taking 20 shots comparison

You can clearly see that’s even though the total number of shots in my method is smaller the animation is still slowing down. It must be the Select() method and the architecture of my app where one object calls another.

So how to fix the plane animation app? Honestly – I’m not really sure. You see, declarative dependency for projectiles is generally easy to do – one direction, straight line, simple computation. Unfortunately when looping movement comes to play, especially such with u-turns I feel a bit confused how to implement that. Put all the code in Y property function? Then how/where to set the rotation value?

If you have any idea please share it in comments below – I will gladly check it.

Phew, I know, this was a loooong blog post. Nevertheless I hope you enjoyed it, took your value from it, learn something new and now know PowerApps even better!

Have a great day and happy PowerApps coding 🙂

How to overcome 500 items limit in PowerApps

I planned to publish another topic for today but I decided that this one will fits better to the post I’ve published a week ago.

So if you work with PowerApps connected to ANY data source you had to experienced or at least read about 500 items limitation. In this post I will show you 6 ways how you can exceed that limitation.

Limit? What limit?

If you’re one of those happy devs that have never heard of such limit I’ll make quick reminder:

In PowerApps every data source (SharePoint, Common Data Service, OneDrive) is under limitation of 500 items. It means you cannot get more that 500 items from a data source but even more than that – PowerApps won’t even “be aware” of any rows above 500.

Imagine simple case: On your OneDrive for Business you have an excel file with ~600 rows. Even though you need only last 10 rows you will get rows 490-500 instead of 590-600. As I told you in previous paragraph – it’s not the limit of total fetched items. It’s the limit of items that PowerApps knows about.

But before you think that’s a killer for PowerApps and “oh those architects, they’ve never use their tools so how they can design something that actually works” let’s imagine another example:

You have an excel with 2mln rows (yep, I saw over 2GB excel file in one company from financial sector). One of app users opens your app and…probably in an eyeblink you will get tons of emails that your app is not working (but of course it is working but the loading time is huge). That’s why this limitation make sense.

Anyway there are many occasions where you will need more than 500 items. Maybe not 2mln but a simple task list for a company with ~1000 employees can easily generate around 50000 rows in total. So how you can overcome this 500 items limitation in PowerApps? In following sections I describe 6 options in the order from easiest/fastest to the most powerful (but also time consuming to setup):

  1. Increase the total limit items you can fetch
  2. Use static data
  3. OneDrive for Business connector specifics
  4. Use delegation
  5. Use delegation + iterative function
  6. Combine PowerApps with Flow

1. Increase the total limit items you can fetch

Okey so this method is the easiest and really quick to setup. Click file (top left corner) > App settings > Advanced settings > set value for non-delegable queries.

This method has one hard limit (limitation of the limitation) – 2000 is a maximum value you can set which means you can’t get more that 2000 items on the same rules as for 500 items (PowerApps won’t know about 2001 item). So if this method does not work for you let’s move to option 2.

2. Use static data

In some specific cases static data may be the best solution. Such data can be imported to your app and will be kept within assets of your app. You can have 10000 rows and still users will have access to all rows. However remember following notes:

  1. Static data are static – you cannot modify it from within PowerApp. But for some scenarios it may still do the job i.e. you build company travel app and you want to have index of all countries in the world (192) along with bigger cities (~30 x 192=5760) so your users can search and select to which city they’re traveling to. Countries and cities typically don’t change dynamically so we can freely import them as static data instead of using SQL database (for which you have to spend extra cash).
  2. Static data are attached to your app which means they’re enlarging total size of app which may affect app loading time.

If you still think static data is a best choice for you here is how you can add it:

  1. View > Data Sources > Add data source
  2. Click Import from Excel
  3. Select excel file and a its table that you want to import

Ok, now, what if this option also doesn’t suit to your needs: Excel is good but you need to be able to modify it from within app so all app users have access to same data. So you googled and decided to use OneDrive for Business data source connector. It uses excel file as a container which data can be modified, sounds perfect, right? So here is the deal…

3. OneDrive for Business connector specifics

Accessing Excel files using OneDrive for Business connector does not support delegations (I’m explaining delegations in section 4). Long story short here are the implications:

  • You can’t get more than 2000 rows
  • 2000 is the total number of rows despite of the number of tables or worksheets in excel file
  • If you have more than 2 tables, O4B connector firstly access all rows from Table1, then from Table2, then from Table3 and so on until reach the number of items equivalent to value for non-delegable queries.

So if you know you may need more than 2000 rows stored in one data source you should switch from OneDrive for Business to any other like SharePoint, Common Data Service, SQL etc. and take use from delegable queries. What are these? Let’s see.

4. Use delegation

Delegation is a mechanism to access all data from a data source in a performance friendly manner.

Speaking a bit more clearly it’s a situation when your PowerApp app says to a data source:
“Ok, you know what, I need items that match these conditions but hey, can you do all the computations by yourself? I need to use my network bandwidth, memory and CPU power for something else…I just need results.”

Now, there are 3 catches:

  1. All results are fetched in a maximum of 100 items bundles. The next bundle is being fetched once a user scroll to the end of a gallery/table list (check out delegation demo gif down below)…
  2. …which means if you need to fetch more than 100 items (! not process but fetch. You can process 10000 of items but fetch only 15 of them as result) you can only use gallery or table. Collections are not supported and works under non-delegable queries limitation (Collect() or ClearCollect() functions breaks delegation!)
  3. Your query need to be supported by the data source. Figuratively speaking the data source must understand what PowerApps app is saying to it (check out example queries on the image down below). To complicate it a bit more not every data source supports all functions and operations – each data source connector documentation outlines delegable support (i.e. here you can find SharePoint Online delegation support). For better understanding of delegations in PowerApps I recommend you to read delegation documentation.
Delegation demo. Left gallery is sourced by OneDrive for Business (which is non-delegable). Right gallery is sourced by SPO list with 500+ items.
Look what happens once I scrolled to the bottom of the SPO items gallery.
Example delegable and non-delegable queries in PowerApps

Ok but what if need more than 2000 items here and now? There are 2 options for doing that. But before you read them please consider below:

Following approaches should be treated as potentially bad practices and should be used only under specific circumstances and with proper caution since they may have bad impact on your application performance or other O365 tenant services. It’s like with medicines – they can solve your problems but harm you in wrong dosage or used inadequate to needs. So in 95% of cases delegation will perfectly do the job. It may requires read & learn a bit but trust me – it’s easier than struggling with performance issues that may appeared if you misuse options 5 and 6.

Ok, so now we can safely move to options for those 5% of cases 🙂

5. Use delegation + iterative function

General idea is like this: for a delegable query build a loop and in each iteration filter data chunks. I.e. in 1st iteration you get rows 1-500, in 2nd 501-1000 and so on.

I won’t explain it in detail or show you code snippets because this method is not mine. Its author is MS employee Brian a.k.a Mr.Dang() and I would feel bad if I get his credits for this workaround. Read it and just in case it won’t meet your needs…

There is also another way of which I’m the author. Option 6. Here it comes.

6. Combine PowerApps with Flow

The last option is to use Flow as a middle man that was asked this:
“Dear Flow, since your data source connectors don’t care about this whole delegation stuff, can you please do me a favor, get all rows, join them in 1 big string and send me back please?”

A simple demo with excel and outlook email may look like this:

To make this work for more than 256 results I had to make few configuration tweaks of the “List rows present in a table” action:

Fetching 682 rows took 3 seconds.

Fetching 2101 rows took 11 seconds so that may be an issue.

However if you use SharePoint as a data source I have a good news for you – I’ve made a demo that fetches 1000 items in 2 seconds. In this blog post I describe step by step how to:

  • Build a PowerApp from scratch
    • Add input fields
    • Pass input fields values to Flow
    • Parse results from flow
    • Display all results in a gallery
  • Build a Flow from scratch
    • Get parameters from PowerApps
    • Integrate Flow with SharePoint
    • Send all results back to PowerApps

And that’s it! I hope you enjoy this blog post. If so please let me know in the comments down below. If not or maybe you know a better solution – let me know as well!