Learn Microsoft Power Apps: The definitive handbook for building solutions with Power Apps to solve your business needs [2 ed.] 1801070644, 9781801070645

Citation preview

Learn Microsoft Power Apps

Second Edition

The definitive handbook for building solutions with Power Apps to solve your business needs

Matthew Weston Elisa Bárcena Martín

BIRMINGHAM—MUMBAI

Learn Microsoft Power Apps Second Edition

Copyright © 2023 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Senior Publishing Product Manager: Larissa Pinto Acquisition Editor – Peer Reviews: Saby Dsilva Project Editor: Parvathy Nair Content Development Editor: Matthew Davies Copy Editor: Safis Editing Technical Editor: Srishty Bhardwaj Proofreader: Safis Editing Indexer: Pratik Shirodkar Presentation Designer: Rajesh Shirsath Developer Relations Marketing Executive: Sohini Ghosh First published: November 2019 Second edition: September 2023 Production reference: 1250923 Published by Packt Publishing Ltd. Grosvenor House 11 St Paul’s Square Birmingham B3 1RB, UK. ISBN 978-1-80107-064-5 www.packt.com

Contributors About the authors Matthew Weston is a Microsoft 365 Specialist from the Black Country, just outside Birmingham, UK. Matthew is the Chief Executive Officer of Vantage 365 Limited, a Microsoft consultancy that focuses on the modern Microsoft workplace and Power Platform as well as providing training in Microsoft technology. His career started as a Classic ASP developer, progressing into .NET development before beginning to specialize in Microsoft Office SharePoint Server 2007. This was the start of his passion for Microsoft technology, beginning to see how the platform could be used. This then led to a career in the Microsoft cloud with a focus on SharePoint, Microsoft Teams, Power Apps, and Power Automate. Matthew is a Microsoft Certified Trainer (MCT), Microsoft Most Valuable Professional (MVP) in Business Applications, and a Fellow in the BCS: The Chartered Institute for IT. He can often be found running user groups, posting videos on YouTube, or speaking at conferences where he can share his knowledge and experience. I would like to thank my loving wife, Laura, and my beautiful children, Eddie and Reggie, for all of their support. They are, without a doubt, the driver behind everything that I do in my life, and without their support I would not be where I am today. I would also like to thank my parents, William and Susan, for all of their support as I was growing up.

I’d like to thank the team at Packt who have given me the opportunity to create the second edition of Learn Microsoft Power Apps, particularly Parvathy Nair, who has been so patient while I’ve been balancing running a business with writing this book. Thank you to Elisa for helping to round the book off by covering more of the model-driven apps, and Eickhel for reviewing and sanity checking what we’ve produced. One final thank you to all of you for picking up this book. I hope that you find it useful and that you go on to create some great apps!

Elisa Bárcena Martín is currently a project leader at LogiRAIL, having previously worked as a business apps specialist at Intelequia and a project analyst at GlaxoSmithKline. As a Power Platform enthusiast with more than 3 years of experience with the Power Platform, she has steadily grown from her initial role as a developer into her project leader position. She is a scientist and teacher by vocation, loving process optimization and believing in continuous improvement and learning. To mum, Lola, and dad, Paco, the hardest working people I know. I admire your sense of humour and outlook on life so much that with you I have never been able to be afraid of anything. To my grandparents, Esteban, Leonor, Victorino, and Sofia. You are my bunch of carnations. To Eickhel, my forever mentor. Thank you from the bottom of my heart.

About the reviewer Eickhel Mendoza is a Microsoft Business Applications MVP with many years of experience in project management, Microsoft Azure development, and Microsoft Power Platform technologies. He is one of the team leads at Intelequia Technologies overseeing all Microsoft 365 and Power Platform projects. He has contributed to significant community events and coordinates the TenerifeDev and Power Platform Canarias user groups. He is also a member of the organizing committee of the Bizz Summit Spain. I want to thank all the people who have helped shape my love of technology: my parents, my school teachers, and my co-workers, who always challenge me to create great things. I also feel grateful for being able to join Elisa on this opportunity. I hope this is the first of many.

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

Table of Contents Preface  Chapter 1: Introducing Power Apps 

xxiii 1

Technical requirements ������������������������������������������������������������������������������������������������������ 2 Understanding Power Apps ������������������������������������������������������������������������������������������������ 2 Understanding Power Apps licensing ��������������������������������������������������������������������������������� 5 Seeded apps • 5 Per-user plan • 5 Per-app plan • 6 Developer plan • 6 Understanding the types of apps ����������������������������������������������������������������������������������������� 8 Canvas apps • 8 Model-driven apps • 10 SharePoint List Form apps • 11 Microsoft Teams Power Apps (Dataverse for Teams) • 11 The Power Apps start screen ��������������������������������������������������������������������������������������������� 12 The Home screen • 12 The Learning Resources screen • 13 The Apps screen • 15 The Create screen • 16 The More menu • 16 Tables • 18

Table of Contents

viii

Choices • 20 Connections • 20 Custom connectors • 21 Flows • 22 Chatbots • 22 AI models • 22 Solutions • 22 Starting with templates ���������������������������������������������������������������������������������������������������� 23 Leave request app • 23 Help desk app • 24 Using Power Apps Studio �������������������������������������������������������������������������������������������������� 25 Power Apps Studio menus • 27 Power Apps formula bar • 27 Tree view • 28 App • 29 The Power Apps canvas • 30 Breadcrumb • 31 Zoom • 31 Looking at the Properties area • 31 Properties • 33 Advanced • 34 Summary �������������������������������������������������������������������������������������������������������������������������� 35 Questions �������������������������������������������������������������������������������������������������������������������������� 35 Further reading ����������������������������������������������������������������������������������������������������������������� 36

Chapter 2: Creating Your First Canvas Power App 

37

Technical requirements ���������������������������������������������������������������������������������������������������� 38 Creating a mobile app ������������������������������������������������������������������������������������������������������� 38 Creating a tablet app ��������������������������������������������������������������������������������������������������������� 42 Changing the app settings ������������������������������������������������������������������������������������������������ 44 Exploring the General settings • 45

Table of Contents

ix

Changing the name and description • 45 Setting the app icon • 46 Autosave • 47 Other settings • 48 Changing the Display settings • 48 Using the phone app • 49 Using the tablet app • 52 Accessing Upcoming features • 53 Preview features • 53 Experimental features • 53 Retired features • 54 Using the Support settings • 54 Lab 1 ���������������������������������������������������������������������������������������������������������������������������������� 54 Creating a blank phone app • 55 Creating the identity of the app • 57 Saving the app • 58 Summary �������������������������������������������������������������������������������������������������������������������������� 59 Questions �������������������������������������������������������������������������������������������������������������������������� 60

Chapter 3: Creating Apps in SharePoint 

61

Technical requirements ���������������������������������������������������������������������������������������������������� 62 SharePoint field types supported within Power Apps ������������������������������������������������������� 63 The app creation process ��������������������������������������������������������������������������������������������������� 64 Preparing your list within SharePoint • 65 Creating your app • 66 Exploring the auto-generated Power Apps app • 68 Browse screen • 69 Detail screen • 70 Edit screen • 70 Customizing forms • 71 Modifying forms • 74

Table of Contents

x

Advanced options • 75 Publishing the app • 76 Removing the Power Apps form • 78 Lab 2 ��������������������������������������������������������������������������������������������������������������������������������� 81 Activity 1: Creating the SharePoint list • 82 Activity 2: Creating the list form app • 88 Summary �������������������������������������������������������������������������������������������������������������������������� 91 Questions �������������������������������������������������������������������������������������������������������������������������� 91

Chapter 4: Publishing and Leveraging in Power Apps 

93

Technical requirements ���������������������������������������������������������������������������������������������������� 94 Publishing a Power App ���������������������������������������������������������������������������������������������������� 94 Version history • 95 Accessing your app through SharePoint Online ���������������������������������������������������������������� 97 Getting the Power App ID • 98 Adding the Power App to SharePoint • 99 Accessing your app through Microsoft Teams ����������������������������������������������������������������� 104 Adding a Power Apps tab • 105 Adding a Power Apps Teams app • 109 Exporting the app manifest from Power Apps • 110 Using the mobile app ������������������������������������������������������������������������������������������������������� 113 Using the app • 114 Pinning to the home screen • 117 Lab 3 �������������������������������������������������������������������������������������������������������������������������������� 118 Activity 1: Installing the mobile app • 119 Summary ������������������������������������������������������������������������������������������������������������������������ 120 Questions ������������������������������������������������������������������������������������������������������������������������� 121

Chapter 5: Exploring Controls 

123

Technical requirements ��������������������������������������������������������������������������������������������������� 124

Table of Contents

xi

Control properties ������������������������������������������������������������������������������������������������������������ 124 Text controls �������������������������������������������������������������������������������������������������������������������� 125 Labels • 125 Text input • 126 HTML text • 128 Rich text editor • 129 Pen input • 130 Input controls ������������������������������������������������������������������������������������������������������������������ 131 Button • 132 Date picker • 133 Presenting multiple choices • 134 Dropdowns • 134 Combo box • 136 List box • 137 Radio • 138 Boolean controls • 140 Check box • 140 Toggle • 141 Numerical inputs • 141 Slider • 141 Rating • 142 Timer • 143 Containers • 144 Data controls ������������������������������������������������������������������������������������������������������������������ 146 Gallery controls • 146 Forms • 148 Media • 148 Charts • 149 Icon controls ������������������������������������������������������������������������������������������������������������������� 150 Lab 4 �������������������������������������������������������������������������������������������������������������������������������� 152 Activity 1: Building basic branding • 152

Table of Contents

xii

Activity 2: Adding the name of the app • 157 Summary ������������������������������������������������������������������������������������������������������������������������� 159 Questions ������������������������������������������������������������������������������������������������������������������������� 159

Chapter 6: Exploring Formulas 

161

Technical requirements ��������������������������������������������������������������������������������������������������� 162 Introducing functions and formulas �������������������������������������������������������������������������������� 162 The function browser • 163 Using the formula bar • 164 Basic interactions • 166 Interacting with text �������������������������������������������������������������������������������������������������������� 167 Replace and Substitute • 168 Searching and matching • 170 Regular expressions • 172 Using numbers ����������������������������������������������������������������������������������������������������������������� 173 Rounding • 174 Round • 175 RoundUp and RoundDown • 175 Other numerical functions • 176 Working with dates ��������������������������������������������������������������������������������������������������������� 177 Formatting dates • 178 Calculating dates • 179 Using conditions �������������������������������������������������������������������������������������������������������������� 181 If • 181 Switch • 182 Variables ������������������������������������������������������������������������������������������������������������������������� 183 Global variables • 183 Context variables • 184 Reviewing variables • 185 Lab 5 ������������������������������������������������������������������������������������������������������������������������������� 186 Activity 1 – Creating a branding variable • 187

Table of Contents

xiii

Activity 2 – Adding personalization • 192 Activity 3 – Launching our app within SharePoint • 194 Summary ������������������������������������������������������������������������������������������������������������������������� 197 Questions ������������������������������������������������������������������������������������������������������������������������ 198 Further reading ��������������������������������������������������������������������������������������������������������������� 198

Chapter 7: Exploring Reusable Controls 

201

Technical requirements �������������������������������������������������������������������������������������������������� 201 Introducing components ������������������������������������������������������������������������������������������������ 202 Creating components • 202 Understanding basic properties • 204 Creating custom properties • 205 Understanding scope • 207 Setting the property defaults • 208 Adding the component to a screen • 210 Using the component library ������������������������������������������������������������������������������������������� 212 Creating component libraries • 213 Using a component from the component library • 215 Updates to components in the library • 217 Lab 6 �������������������������������������������������������������������������������������������������������������������������������� 219 Summary ������������������������������������������������������������������������������������������������������������������������ 228

Chapter 8: Working with Data 

229

Technical requirements �������������������������������������������������������������������������������������������������� 230 Creating and interacting with collections ����������������������������������������������������������������������� 230 Filling collections • 230 Updating collections • 233 Displaying data ��������������������������������������������������������������������������������������������������������������� 236 Displaying data in a gallery • 236 Displaying data in a data table • 238 Connecting to a data source �������������������������������������������������������������������������������������������� 240

Table of Contents

xiv

Using forms ��������������������������������������������������������������������������������������������������������������������� 243 Changing form mode • 245 Changing state with formulas • 247 Submitting the form • 247 Lab 7 ������������������������������������������������������������������������������������������������������������������������������� 249 Activity 1: Creating the collections • 249 Activity 2: Adding the Gallery • 254 Activity 3: Adding the Form • 257 Summary ������������������������������������������������������������������������������������������������������������������������� 261 Questions ������������������������������������������������������������������������������������������������������������������������ 262

Chapter 9: Introducing Connectors 

265

Technical requirements �������������������������������������������������������������������������������������������������� 266 Understanding standard connectors ������������������������������������������������������������������������������� 266 Understanding premium connectors ������������������������������������������������������������������������������ 269 Understanding custom connectors • 270 Creating a custom connector from scratch • 271 The General tab • 272 The Security tab • 274 The Definition tab • 276 The Test tab • 280 Importing an OpenAPI file • 280 Creating a connector from within Postman • 282 Summary ������������������������������������������������������������������������������������������������������������������������ 283 Questions ������������������������������������������������������������������������������������������������������������������������ 284 Further reading ��������������������������������������������������������������������������������������������������������������� 284

Chapter 10: Using GPS in Power Apps 

287

Technical requirements �������������������������������������������������������������������������������������������������� 287 Placing maps into your apps ������������������������������������������������������������������������������������������� 288 Leveraging Bing Maps • 288

Table of Contents

xv

Using Power App controls for mapping parameters • 291 Leveraging Google Maps • 292 Using longitude and latitude for mapping parameters • 294 Capturing geographic position ��������������������������������������������������������������������������������������� 296 Finding the location • 296 Finding direction • 298 Lab 8 ������������������������������������������������������������������������������������������������������������������������������� 298 Activity 1: Updating the data source • 298 Activity 2: Creating a new asset • 299 Activity 3: Displaying a map • 304 Activity 4: Adding navigation • 307 Summary ������������������������������������������������������������������������������������������������������������������������ 309 Questions ������������������������������������������������������������������������������������������������������������������������ 309 Further reading ��������������������������������������������������������������������������������������������������������������� 309

Chapter 11: Working with Images and Barcodes 

311

Technical requirements ��������������������������������������������������������������������������������������������������� 312 Understanding how to store images within Power Apps �������������������������������������������������� 312 Using the camera control ������������������������������������������������������������������������������������������������� 312 Capturing the camera image • 313 Capturing from an icon • 316 Using the add picture control ������������������������������������������������������������������������������������������� 317 Understanding the barcode scanner ������������������������������������������������������������������������������� 318 Lab 9 ������������������������������������������������������������������������������������������������������������������������������� 322 Activity 1: Updating the data source • 322 Activity 2: Capturing bar code data • 323 Summary ������������������������������������������������������������������������������������������������������������������������ 324 Questions ������������������������������������������������������������������������������������������������������������������������ 325

Chapter 12: Securing Your Power Apps 

327

Technical requirements �������������������������������������������������������������������������������������������������� 328

xvi

Table of Contents

Securing your data ���������������������������������������������������������������������������������������������������������� 328 SharePoint • 328 Dataverse • 329 SQL Servers • 330 Which to use? • 330 Applying in-app security ������������������������������������������������������������������������������������������������� 330 Locally controlled access lists • 331 Azure Active Directory (AAD) security groups • 332 Sharing your app securely ����������������������������������������������������������������������������������������������� 339 Lab 10 ������������������������������������������������������������������������������������������������������������������������������ 341 Activity 1: Creating the SharePoint group • 341 Activity 2: Assigning the permissions • 344 Activity 3: Setting the app to respond to permissions • 347 Summary ������������������������������������������������������������������������������������������������������������������������ 349 Questions ������������������������������������������������������������������������������������������������������������������������ 350

Chapter 13: Working Offline 

353

Technical requirements �������������������������������������������������������������������������������������������������� 353 Detecting a connection state ������������������������������������������������������������������������������������������� 354 Working with local data �������������������������������������������������������������������������������������������������� 354 Saving data locally • 355 Loading data from the local cache • 356 Implementing offline capability ������������������������������������������������������������������������������������� 356 Implementing the on-start process • 357 Working offline • 358 Synchronizing online and offline data • 360 Lab 11 ������������������������������������������������������������������������������������������������������������������������������ 362 Activity 1: Adding a connection indicator • 362 Activity 2: Adding data to an offline cache • 364 Activity 3: Tracking new additions while offline • 365

Table of Contents

xvii

Summary ������������������������������������������������������������������������������������������������������������������������ 366 Questions ������������������������������������������������������������������������������������������������������������������������ 367

Chapter 14: Using Power Automate with Power Apps 

369

Technical requirements �������������������������������������������������������������������������������������������������� 370 Understanding flows ������������������������������������������������������������������������������������������������������ 370 Creating flows through the Power Automate service ������������������������������������������������������ 373 Creating a cloud flow from templates • 373 Creating flows from blank • 375 Using actions • 379 Testing your flow • 382 Returning data to Power Apps ���������������������������������������������������������������������������������������� 385 Calling a flow within Power Apps • 387 Lab 12 ������������������������������������������������������������������������������������������������������������������������������ 390 Activity 1: Creating a flow for when a new grocery is added • 391 Activity 2: Adding the flow to the app • 395 Activity 3: Creating a reminder flow • 397 Summary ������������������������������������������������������������������������������������������������������������������������ 406 Questions ������������������������������������������������������������������������������������������������������������������������ 406 Further reading ��������������������������������������������������������������������������������������������������������������� 407

Chapter 15: Using Azure with Power Apps 

409

Technical requirements �������������������������������������������������������������������������������������������������� 410 Introducing Microsoft Azure ������������������������������������������������������������������������������������������� 410 Integrating with Azure Active Directory (AAD) ���������������������������������������������������������������� 411 Implementing Azure Automation ������������������������������������������������������������������������������������ 415 Creating an Azure Automation account • 416 Preparing your Azure Automation account for use • 417 Installing modules • 418 Storing credentials • 419 Storing variables • 421

Table of Contents

xviii

Creating runbooks • 422 Using Azure Automation in Power Apps • 424 Calling CreateJob • 424 Getting the job’s output • 425 Using Azure Functions ���������������������������������������������������������������������������������������������������� 426 Using a queue • 427 Creating an function • 430 Summary ������������������������������������������������������������������������������������������������������������������������ 435 Questions ������������������������������������������������������������������������������������������������������������������������ 436 Further reading ��������������������������������������������������������������������������������������������������������������� 436

Chapter 16: Visualizing Data 

437

Technical requirements �������������������������������������������������������������������������������������������������� 437 The use of data ���������������������������������������������������������������������������������������������������������������� 438 Using chart controls �������������������������������������������������������������������������������������������������������� 438 Using a column chart • 439 Using a line chart • 445 Using a pie chart • 446 Embedding Power BI in your app ������������������������������������������������������������������������������������� 451 A brief intro to Power BI • 452 Creating a basic report • 452 Embedding the report into your canvas app • 457 Lab 13 ������������������������������������������������������������������������������������������������������������������������������ 458 Activity 1 – Formatting the data • 458 Activity 2 – Displaying the chart • 462 Summary ������������������������������������������������������������������������������������������������������������������������ 465 Further reading ��������������������������������������������������������������������������������������������������������������� 466

Chapter 17: Introducing Artificial Intelligence 

467

Technical requirements �������������������������������������������������������������������������������������������������� 467 What is AI Builder? ���������������������������������������������������������������������������������������������������������� 468

Table of Contents

xix

What are the different types of AI models? ���������������������������������������������������������������������� 468 How is AI Builder licensed? ��������������������������������������������������������������������������������������������� 469 Exploring the capabilities ����������������������������������������������������������������������������������������������� 470 Using the basic models ���������������������������������������������������������������������������������������������������� 473 Creating a custom model ������������������������������������������������������������������������������������������������ 477 Using a custom model in our app ������������������������������������������������������������������������������������ 485 Summary ������������������������������������������������������������������������������������������������������������������������ 487 Questions ����������������������������������������������������������������������������������������������������������������������� 488

Chapter 18: Introducing Microsoft Dataverse 

491

Technical requirements �������������������������������������������������������������������������������������������������� 492 What is Dataverse? ���������������������������������������������������������������������������������������������������������� 492 Differences from other data storage solutions • 494 1. Scalability • 495 2. Data security • 495 3. Disaster recovery • 495 4. Cost-effectiveness and energy efficiency • 495 5. Accessibility • 496 1. No technical knowledge required • 497 2. Simple data migration • 497 3. Analytics and auditing • 497 4. Create apps without coding • 497 5. Automatic workflows • 498 Working with environments and solutions ��������������������������������������������������������������������� 499 Environments • 499 Solutions • 504 Data migration ��������������������������������������������������������������������������������������������������������������� 508 Dataverse for Teams ��������������������������������������������������������������������������������������������������������� 515 Lab 14 ������������������������������������������������������������������������������������������������������������������������������� 519 Activity 1: Export and import solutions • 519 Activity 2: Migrate with dataflows • 523

Table of Contents

xx

Summary ������������������������������������������������������������������������������������������������������������������������ 526 Questions ������������������������������������������������������������������������������������������������������������������������� 527 Further reading ��������������������������������������������������������������������������������������������������������������� 528 Environments • 528 Solutions • 528 Dataflows • 528 Gateways • 528 Custom connectors • 528 Dataverse for Teams • 528

Chapter 19: Introducing Model-Driven Apps 

531

Technical requirements �������������������������������������������������������������������������������������������������� 532 Understanding Dataverse ����������������������������������������������������������������������������������������������� 532 Creating a Dataverse database • 532 Understanding the CDM ������������������������������������������������������������������������������������������������� 536 Introducing tables • 536 Exploring a table • 539 Modeling data ������������������������������������������������������������������������������������������������������������������ 541 Creating a table • 541 Creating columns • 545 Creating table relationships • 547 Building a model-driven app ������������������������������������������������������������������������������������������ 549 Lab 15 ������������������������������������������������������������������������������������������������������������������������������� 551 Activity 1: Creating the database • 551 Activity 2: Modeling data • 554 Summary ������������������������������������������������������������������������������������������������������������������������ 562 Questions ������������������������������������������������������������������������������������������������������������������������ 563 Further reading ��������������������������������������������������������������������������������������������������������������� 563

Chapter 20: Creating Model-Driven Apps 

565

Technical requirements �������������������������������������������������������������������������������������������������� 566

Table of Contents

xxi

Introducing views, forms, and dashboards ��������������������������������������������������������������������� 566 Creating views • 567 Creating forms • 570 Creating dashboards and charts • 573 Creating a model-driven app from scratch ���������������������������������������������������������������������� 576 Using your model-driven app ����������������������������������������������������������������������������������������� 579 Lab 16 ������������������������������������������������������������������������������������������������������������������������������ 583 Activity 1: Creating views • 584 Activity 2: Creating charts and dashboards • 587 Activity 3: Building a model-driven app • 589 Activity 4: Navigating through records • 591 Summary ������������������������������������������������������������������������������������������������������������������������ 593 Questions ������������������������������������������������������������������������������������������������������������������������ 593

Chapter 21: Exploring Environments and Data Policies 

595

Technical requirements �������������������������������������������������������������������������������������������������� 596 Introducing environments ���������������������������������������������������������������������������������������������� 596 Viewing your environments • 597 Creating environments • 597 Setting security on the environment ������������������������������������������������������������������������������ 600 Managing security without a Dataverse database • 600 Environment Admin and Environment Maker • 601 Working with security with a Dataverse database • 602 Creating security roles • 603 Assigning roles to users or teams • 604 Introducing data policies ������������������������������������������������������������������������������������������������ 607 Creating data policies • 609 Summary ������������������������������������������������������������������������������������������������������������������������� 611 Questions ������������������������������������������������������������������������������������������������������������������������ 612

xxii

Chapter 22: Introducing the Future of Power Apps 

Table of Contents

615

Introducing Microsoft Copilot ����������������������������������������������������������������������������������������� 615 How Copilot in Power Apps will help you ����������������������������������������������������������������������� 616 Using Copilot in Power Apps �������������������������������������������������������������������������������������������� 617 What’s next? �������������������������������������������������������������������������������������������������������������������� 621 Summary ������������������������������������������������������������������������������������������������������������������������ 622 Questions ������������������������������������������������������������������������������������������������������������������������ 623

Chapter 23: Good Practices for Creating Power Apps 

625

Don’t leave security until last ����������������������������������������������������������������������������������������� 626 Consider your data source options carefully ������������������������������������������������������������������� 627 Excel • 627 SharePoint • 627 Dataverse • 628 And, not or • 628 Plan your user journey ���������������������������������������������������������������������������������������������������� 629 Wireframes ���������������������������������������������������������������������������������������������������������������������� 631 Design ����������������������������������������������������������������������������������������������������������������������������� 632 Develop for reusability – remember to use components ������������������������������������������������� 633 Updates ��������������������������������������������������������������������������������������������������������������������������� 634 Summary ������������������������������������������������������������������������������������������������������������������������ 636 My final thoughts ������������������������������������������������������������������������������������������������������������ 637

Appendix 

639

Other Books You May Enjoy 

651

Index 

659

Preface I would like to take this opportunity to thank you for choosing this book, and to welcome you to a learning journey within Power Apps and the Power Platform. With Learn Microsoft Power Apps, you will learn how to build solutions in the Power Platform by utilizing canvas apps and model-driven apps, both key parts of the Power Apps service. Throughout the book, you will not only learn the theory behind the components and what they do, but also put them into practice by incrementally building an app through several labs. The book introduces new topics in each chapter, gradually introducing more and more functionality from Power Apps to help you understand how you can continually improve your apps to build something just as powerful as a custom developed application.

Updates to Power Apps Power Apps receives frequent updates from Microsoft. As a result of this, there may be times when the illustrations or explanations within this book appear out of date. This is purely a consequence of working within an evergreen platform, so please don’t let this stop you from following through and building the examples. While the interfaces may change, the techniques and thought processes that we introduce in the book are likely to remain the same regardless of what else comes along in the world of Power Apps. We hope that you enjoy the book and find it useful, and wish you the very best in creating some rich, powerful, and enjoyable Power Apps.

Who this book is for This book is intended for business analysts, IT professionals, and both developers and non-developers alike. If you want to meet business needs by creating purpose-built apps, this book is for you. To get the most out of this book, it is recommended that you have a basic understanding of Microsoft 365 as you will interact with various elements of it while developing apps.

xxiv

Preface

What this book covers Chapter 1, Introducing Power Apps, gives a high-level overview of Power Apps, what it is, how it is licensed, and how to get started. Chapter 2, Creating Your First Canvas Power App, is where we take our first steps into creating a canvas app. We will explore the types of canvas app that we can create, look at various use cases, and explore the options that we have available to us. Chapter 3, Creating Apps from SharePoint, explores the relationship between Microsoft SharePoint and Power Apps, exploring how we can create apps from SharePoint data or even change the list forms using a canvas app. Chapter 4, Publishing and Leveraging Power Apps, looks at how we can leverage our apps across multiple platforms. We will explore how we can use our apps on mobile devices, SharePoint, and Microsoft Teams. Chapter 5, Exploring Controls, focuses on understanding the building blocks of our apps and how they can be used to create an engaging user interface. We will look at some of the use cases for the different controls as well as highlighting key properties to be aware of. Chapter 6, Exploring Formulas, introduces how we start to build logic within our apps by using formulas to create functions and their properties. Chapter 7, Exploring Reusable Controls, introduces a way of being able to reduce the development time of your apps by creating reusable combinations of controls from both a local app level and also across an entire environment. Chapter 8, Working with Data, investigates how we can store and interact with data within our Power Apps, focusing on the functionality provided by collections and variables as well as introducing forms. Chapter 9, Introducing Connectors, covers the way that we can connect our apps to services, both services within Microsoft 365 and services provided by other vendors. We will also look at the difference between standard and premium connectors, as well as creating our own custom connectors. Chapter 10, Using GPS in Power Apps, looks at how we can start to use the GPS functionality afforded to us by mobile devices to track location data and use it within our app. Chapter 11, Working with Images and Barcodes, looks at another functionality of mobile devices, using the camera, to add the ability to capture images and scan barcode data to our apps.

Preface

xxv

Chapter 12, Securing Your Power Apps, explores how various elements of security can be applied and what the impact is on the app itself. We will start from the data source and then consider how we can apply security to the various screens within the app itself. Chapter 13, Working Offline, allows us to provide our app the capability to still function even when we lose connection to a data source. Chapter 14, Using Power Automate with Power Apps, introduces how we can build leverage by using other parts of the Power Platform, in this case Power Automate. We will look at how we can offload the heavy processing to Power Automate as well as building some other basic automations. Chapter 15, Using Azure with Power Apps, allows us to begin to integrate services provided by Microsoft Azure into our Power Apps by exploring some of the commonly used services and the connectors that allow us to utilize them. Chapter 16, Data Visualization, introduces another part of the Power Platform, Power BI. We will investigate how we can visualize data using the chart controls in Power Apps, and then expand that to how we can utilize Power BI visuals. Chapter 17, AI Builder, investigates how we can implement artificial intelligence to help an app’s users use the app more effectively, whether that is through processing images or forms, or through custom built models. Chapter 18, Introducing Microsoft Dataverse, opens the door to the built-in relational database, Dataverse. We will see how Dataverse can be used to store data directly within the Power Platform. As introductory topics for understanding Dataverse in relation to Power Apps, we will investigate environments, solutions, and data migrations. Chapter 19, Introducing Model-Driven Apps, takes us into data modeling within Dataverse and how key elements such as tables, columns, and relationships are created and managed. We will also explore a new way of modeling data from natural language with Power Apps AI Copilot. Chapter 20, Creating Model-Driven Apps, builds on Dataverse to create a model-driven app that allows us to directly interact with the database and provide interfaces for the user with views, forms, charts, and dashboards. Chapter 21, Exploring Environments and Data Policies, investigates how different environments can be used within your tenancy. This will not only introduce the segregation of assets, but also start to investigate Power Platform governance.

Preface

xxvi

Chapter 22, Introducing the Future of Power Apps, gives us a look into the future of Power Apps and how artificial intelligence will help us to increase the speed at which we can create apps. Chapter 23, Good Practices for Creating Power Apps, shares some professional experiences and learnings, which focus on the mindset rather than just the technical “how-to.” Appendix, Answers, contains the answers to the self-assessment questions that are located at the end of every chapter.

To get the most out of this book •

To get the most out of this book, it is recommended that you have a basic understanding of Microsoft 365 as you will interact with various elements of it while developing apps.

•

To follow along with the labs, you will need an active Power Apps subscription. This will be covered in the first chapter. Some services, such as Azure, SharePoint, and Dataverse, may also require a subscription.

•

For some functionalities, you may need premium connectors. Additionally, some instructions will require a mobile phone. In any case, it will be made clear where this applies.

Download the example code files The code bundle for the book is hosted on GitHub at https://github.com/PacktPublishing/ Learn-Microsoft-Power-Apps-2E/. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://packt.link/kXggB.

Conventions used There are a number of text conventions used throughout this book. CodeInText: Indicates code words in text, database table names, folder names, filenames, file

extensions, pathnames, dummy URLs, user input, and Twitter handles. For example: “We can use the RenameColumns formula to shape our collection by wrapping it.” A block of code is set as follows: { Country: "China", Population: 1439323776, 'Land Area': 9388211 },

Preface

xxvii

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: ClearCollect(colStats, AddColumns(RenameColumns(Distinct(colGroceries, 'Grocery Type'.Value),"Result","Grocery Class"),"Items",0) )

Bold: Indicates a new term, an important word, or words that you see on the screen. For instance, words in menus or dialog boxes appear in the text like this. For example: “Once again, if we run OnStart, we will see the changes in our collection.”

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch Feedback from our readers is always welcome. General feedback: Email [email protected] and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at questions@ packtpub.com. Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you reported this to us. Please visit http://www.packtpub.com/submit-errata, click Submit Errata, and fill in the form. Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material. If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit http://authors.packtpub. com.

xxviii

Preface

Share your thoughts Once you’ve read Learn Microsoft Power Apps, Second Edition, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback. Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book Thanks for purchasing this book! Do you like to read on the go but are unable to carry your print books everywhere? Is your eBook purchase not compatible with the device of your choice? Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost. Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.  The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily Follow these simple steps to get the benefits: 1. Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-80107-064-5

2. Submit your proof of purchase 3. That’s it! We’ll send your free PDF and other benefits to your email directly

1

Introducing Power Apps In this chapter, we will begin with some of the basic concepts of Power Apps, and what it means to work with it. We will investigate some of the key elements for getting started with the technology, including some of the pre-built example apps that we can use as an aid for learning. We will also take a look at the licensing aspect of Power Apps to help explain the different levels, and what it means to you as an app developer. Finally, we will look at the development environment, specifically the Power Apps portal, and Power Apps Studio. Part of the learning process is just finding out where information and components are located, which means that your ongoing journey as an app developer will be that much smoother. In this chapter, we will cover the following topics: •

Understanding Power Apps

•

Understanding Power Apps licensing

•

Understanding the types of app

•

The Power Apps start screen

•

Starting with templates

•

Using Power Apps Studio

By the end of this chapter, you will have an understanding of the fundamentals of Power Apps and what is possible within it. You will start your Power Apps journey by discovering what apps are included as working examples, and how you can use them to get started.

2

Introducing Power Apps

Technical requirements In order to follow this and all the subsequent chapters in this book, you will need to have access to Microsoft Power Apps. As we will be exploring both standard and premium features, I recommend that you sign up for a Power Apps Developer Plan, as this will give you access to the full power of the Power Platform without having to pay for your own tenancy. You can sign up for your free Developer Plan at https://powerapps.microsoft.com/en-us/developerplan/.

Understanding Power Apps Power Apps is an ever-growing part of the Microsoft 365 ecosystem, where developers and business users alike are empowered to create apps. Power Apps encourages the no-code/low-code and pro-code worlds to come together for the common purpose of finding workable solutions to real-life business problems. As an example, Power Apps has proved to be extremely useful as a replacement for legacy paper systems, so that data can be returned for processing at a much faster speed. I personally have created an app enabling construction surveyors to complete an assessment of completed works using a Power App instead of a clipboard and paper. It allowed them to capture data, GPS information, and photographs all in one place, with the data being submitted back to the office as soon as they pressed save. Interestingly, in the Microsoft world, it has helped to bridge the two key communities of collaboration (Microsoft 365) and CRM (Dynamics 365), as these communities now have a common platform for developing their low-code solutions. This allows for a huge amount of diversity for developers as they can utilize Microsoft Dataverse, the online database platform that powers Dynamics, for low-code relational databases, or even use SharePoint for very simple data structures. If we think back to how we used to achieve low-code development with the likes of SharePoint, we would have to use products such as InfoPath, where we could combine custom logic with a number of visual components to extend the user experience:

Chapter 1

3

Figure 1.1: InfoPath as an editing application

InfoPath, love it or hate it, was one of the initial low-code development tools that allowed us to create more intelligent interfaces for our data using a visual editor combined with code to create the desired functionality. Power Apps shares some commonalities with InfoPath, with apps being created using visual tools and logic created using formulas. Just one of the key differences, however, is that with Power Apps, apps are developed through the browser without the dependency on additional applications needing to be installed on the desktop. This also builds into the Microsoft vision of mobility, where a user can work on their app anywhere in the world, at any time, from any device. The only prerequisite to this is that the developer has a connection to the internet. Power Apps aren’t written with code; instead, they are created with formulas, similar to Microsoft Excel, a tool that the majority of the modern workforce are familiar with.

Introducing Power Apps

4

For example, if we wanted to combine or concatenate strings in Excel, we would use the following formula:

Figure 1.2: Formulas in Microsoft Excel

If we do the same within Power Apps, we will see the similarities between the two products:

Figure 1.3: Formulas in Microsoft Power Apps

With this familiar approach to building logic, you don’t need to be a developer to start creating solutions to business problems. For developers, Power Apps can be enriched using custom-developed components using the Power Apps Component Framework (PCF), which allows the creation of additional experiences using modern web development practices. From personal experience, I find Power Apps to be an excellent rapid application development or prototyping tool. Due to the drag-and-drop nature of its design, I can quickly and easily place components on a screen to establish a basic look and feel for an app while also connecting to some of the more rudimentary data sources, such as an Excel spreadsheet or a SharePoint list.

Chapter 1

5

Power Apps itself is part of a larger family of services known as the Power Platform. It partners with other services such as Power Automate, Power BI, and Power Virtual Agents, all of which allow users to create rich solutions without having to write code. Before we dive into how we create apps, we should explore Power Apps’ licensing options, since their cost will be a huge influence on the design decisions you make when creating apps.

Understanding Power Apps licensing There are a number of options available when it comes to licensing Power Apps. Like all of Microsoft’s products, there are differing levels of licenses available, which will govern the functionality you can use or what services you have available to you. Licensing is one of those areas that always causes a lot of confusion; while we explore the key concepts, you should always consult your license providers should you have any specific questions. When we talk about the licenses, we can make comparisons between a number of different metrics. The key one that will affect us, however, is the functionality we have available to us.

Seeded apps Power Apps is not included with the home versions of Office 365; however, it is included with most of the business licenses and all of the enterprise licenses. This means that the majority of Microsoft 365 users will have the ability to create and use Power Apps to enhance, extend, and customize their Office applications. These are now what is known as seeded apps; that is, they are a part of the Microsoft 365 and Dynamics 365 licenses. Since they are a part of the Office 365 and Dynamics 365 packages, they do not cost you or your organization anything on top of your existing license. The only thing you need to be aware of is that you only have access to a subset of the connectors that are available on the Microsoft Power Platform. For example, Azure, SQL Server, and Dynamics connectors are considered premium, and are therefore not available at this license level.

Per-user plan Per-user plans allow you to pay for a license for a single user, which allows them to access the full capabilities of Power Apps. The capabilities that are included in this type of plan were previously split between Power Apps Plan 1 and Power Apps Plan 2. However, in a more simplified model, the per-user plan encapsulates all of the functionality that the old plans offered.

Introducing Power Apps

6

The types of functionality that this plan unlocks for you include the ability to use the data gateway, which allows you to connect to on-premises data sources. It also gives you access to all of the premium connectors, as well as the ability to create custom connectors. We will explore connectors in more detail in Chapter 8, Introducing Connectors. Upgraded licensing gives you access to the management and administration areas of Power Apps, including the ability to use Microsoft Dataverse (introduced in Chapter 15, Introducing Model-Driven Apps) and the ability to fully utilize environments (introduced in Chapter 17, Exploring Environments within Our Tenancy). It is worth noting that if your app uses premium functionality, both the app creator and the app user will need to have a relevant license assigned to them. For example, if we were using a premium connector, both the creator and the user would require a premium license provided by the per-user or per-app plans.

Per-user plans cost $40 per user, per month, and allow those users to run unlimited apps. If an organization doesn’t want to license every user, there is an alternative, which is the per-app plan.

Per-app plan The per-app plan is intended to be a lower-cost entry point for organizations that are beginning to adopt Power Apps as part of their ongoing strategy. The reason for this level is that organizations will often start with a small number of use cases, typically 1 or 2, which makes the per-user plan extremely expensive. The cost of the per-app plan is $10 per user, per app, per month. This plan can also license access to one portal instead of an app, if preferred.

Developer plan If you want to really explore the capabilities of Power Apps without the license costs, you can create a free development environment using the Power Apps Developer Plan. This is an environment that gives you complete access to the full capabilities of Power Apps; however, only a single user can use this plan, which means you can’t share the apps with anyone else:

Chapter 1

7

Figure 1.4: Power Apps Developer Plan home screen

To sign up for this plan, navigate to https://powerapps.microsoft.com/en-us/developerplan/ and click on Get started free. You will need to enter your work email address, that is, your Office 365 email address, so that the demo environment can be associated with you:

Figure 1.5: Power Apps Developer Plan sign-up screen

Introducing Power Apps

8

Once you have completed the signup process, a new environment will be created for you, generally with your name associated with it, for example, Matthew Weston’s environment, where you can start to create and test your Power Apps. This will be a good place for you to build the app that we will create as we proceed through the labs, since some of the elements that we’ll require are features that are provided by the per-user or per-app (premium) plans.

Now that we have looked at how much it’s going to cost us to create an app, let’s have a look at what we can actually create.

Understanding the types of apps As app developers, we now have multiple ways in which we can author our apps. The choice of our development environment will determine how we build, where we deploy to, the data sources that we can connect to, and ultimately how our users access our apps. All of the different ways of authoring the apps have their own use cases, and we will explore them throughout the book: •

Canvas apps

•

Model-driven apps

•

SharePoint List Form apps

•

Microsoft Teams Power Apps (Dataverse for Teams)

Understanding what the different types of app are will help you to make the correct decision when you are developing. Let’s start by looking at canvas apps.

Canvas apps Canvas apps are the mainstay of apps that are developed using Power Apps. They allow you to develop lightweight apps that are specifically intended for mobile devices, as well as apps that are being developed for tablet and desktop use:

Chapter 1

9

Figure 1.6: An example of a canvas app that has been generated from the Site inspection template

Creating canvas apps is simple – it follows the drag-and-drop methodology so that you can add components and position them onto the page, which gives you complete control over the layout. Combine this with the ability to create logic by using Excel-like functions and expressions, and you now have the ability to interact with data in a way that allows Power Apps developers of all skill levels to build functional apps. Canvas apps are extremely flexible in terms of the data sources they can connect to, being able to connect to over 450 different services to consume and display data, resulting in an extremely versatile and flexible app. We will take a look at them in greater detail in Chapter 2, Creating Your First Canvas Power App.

Introducing Power Apps

10

Model-driven apps Model-driven apps differ slightly from canvas apps in terms of the development approach. With canvas apps being user experience-driven, model-driven apps are driven by the underlying data, as shown in the following screenshot. In contrast to canvas apps, the layouts in a model-driven app are much more controlled, with grid-based layouts being used to show the content from the underlying Dataverse database. We still have the ability to create an app in a short amount of time, without writing code, but much more of the emphasis is put on the database structure:

Figure 1.7: An example model-driven app

Chapter 1

11

Model-driven apps share the same principles as canvas apps in that they allow you to create powerful apps without resorting to code; however, the thought process is very different and starts with the underlying data. From a personal development point of view, model-driven apps have been used a lot more as back-office solutions, where the user doesn’t need to take advantage of the richer set of components available to a canvas app. We will investigate model-driven apps in more detail in Chapter 16, Creating Model-Driven Apps.

SharePoint List Form apps SharePoint List Form apps are designed to help with the deep integration with SharePoint Online, where the standard out-of-the-box list forms can be overridden by a canvas app. They are created using the same editing experience as standard canvas apps, but are designed to react to the standard SharePoint user events such as creating new items, editing, and viewing. We will explore them in Chapter 3, Creating Apps in SharePoint.

Microsoft Teams Power Apps (Dataverse for Teams) Microsoft Teams and Power Apps integration has been hugely improved, and we will investigate the relationship in Chapter 19, Dataverse. Microsoft Teams now has the ability to author and interact with Power Apps directly within the Microsoft Teams interface, using Dataverse for Teams. Creating the app in Teams, however, does mean that it must be accessed through the Microsoft Teams interface, rather than through the Power Apps app, but it allows us to utilize the full power of the Power Platform within our collaboration environment. The key aspects of this book will focus on the creation of canvas apps, but the techniques that we put into practice will provide you with the skills necessary to create apps in each of the other environments.

Introducing Power Apps

12

The Power Apps start screen To start your Power Apps journey, we need to navigate to the start screen. Microsoft 365 has shown that Microsoft is being much more consistent in terms of its user experience development throughout the whole ecosystem. Therefore, like other applications, Power Apps is either available from the Microsoft 365 portal page (portal.office.com) or from the app launcher, which is located at the top-left corner of the Microsoft 365 portal, as shown in the following screenshot:

Figure 1.8: The Microsoft 365 app launcher

Regardless of the navigation approach you take, you will find yourself on the Power Apps welcome screen, which will provide you with a wealth of options so that you can start developing.

The Home screen The Home screen is the first page that you will be presented with, and it provides you with a number of navigation options, including the ability to create new apps and open recent apps and any apps that have been developed by someone else and shared with you:

Chapter 1

13

Figure 1.9: The Power Apps Home screen

The screen is divided into two key areas: •

The main screen: This is the primary working area and will allow you to create a number of apps, which we will explore later.

•

The left-hand navigation: This will allow us to access a number of resources that will aid us when we start building our own apps.

If you are new to Power Apps, then there will be a number of resources available to you, all of which are available from the Learning Resources screen.

The Learning Resources screen Adoption is now at the forefront of the Microsoft agenda; therefore, Microsoft provides a swathe of learning materials to help users of all abilities create Power Apps. They have a number of guided learning lessons that provide basic computer-based training so that users can create both a basic canvas app and a basic model-driven app. This is further enhanced by the Microsoft Docs site, which is dedicated to Power Apps, to provide additional knowledge in textual format. Both of these elements will allow you to take your first steps; however, the Microsoft Power Apps Community is the most valuable resource on here.

Introducing Power Apps

14

Just like the Microsoft Tech Community (https://techcommunity.microsoft.com/), this is the home of a number of Power Apps experts who are willing to help and share their knowledge with other Power Apps developers. The final part of this screen that provides a lot of value is the What’s new section, which will provide you with announcements and updates as and when Microsoft releases them. This includes technology advances, conference announcements, and general adoption notices:

Figure 1.10: Power Apps support resources

Now that we have familiarized ourselves with the learning resources, let’s have a look at the Apps screen.

Chapter 1

15

The Apps screen The Apps screen works in the same way as many other Microsoft applications; you are presented with the Power Apps that you have been developing or can access. This list of apps has now been simplified just to show your apps, but uses views to switch between My apps and Org apps:

Figure 1.11: My apps / Org apps view selector

Clicking on the My apps dropdown will allow you to pre-filter your apps list to either the apps that you are directly working on, or the Org apps, which are those that have been shared with the whole organization. Usefully, we have the ability to search for our apps, which is absolutely key when we begin to create lots of them. Now, all you need to know is how you can create new apps.

Introducing Power Apps

16

The Create screen The creation screen is where you will decide what type of app you are going to create and how you are going to create it. You will have the option to create a canvas app (as either a mobile or a tablet app), a blank model-driven app, or a model-driven app from your data, or to use one of the many templates that are available to you as a starting point:

Figure 1.12: App creation screen

We will investigate the creation of apps in more detail in Chapter 2, Creating Your First Canvas Power App. The next area you need to familiarize yourself with is the Data menu.

The More menu The latest changes to the Power Apps user interface have now introduced a flexible navigation section. The flexibility comes from the ability for you, as a user, to be able to select and pin which items you wish to see. The More part of the menu shows the options which are available with a pin button next to each option if you wish to make it a persistent option on your menu.

Chapter 1

17

Figure 1.13: The More menu

The key function of this menu area is to provide access to the Dataverse database, the underlying database that can be used across your model-driven apps and your canvas apps (we will find out more about it in Chapter 16, Visualizing Data). Not only does it give you access to Dataverse, but it also allows you to manage your service connections that are in use within your apps, as well as managing custom connectors and any on-premises data gateways that are in use. Our gateways allow us to create connections to data sources that are still hosted in an on-premises environment, such as SQL Server and SharePoint. There are a few key areas in the Data menu, the first being Tables. .

Introducing Power Apps

18

Tables Tables, previously known as entities, effectively allow you to model data within Dataverse. A table defines the information that is related to a specific type of record. For example, an account table may have an account number, a sort code, and an account name. This data can then be used within Power Apps and Power Automate if we refer to the table. Microsoft provides a number of tables when you provision your Dataverse database that cover many basic examples, such as contacts, emails, tasks, and so on. Each table comprises several fields, each of which has a display name, an internal name, a data type, and some basic user settings so that you can specify how each field is used. Once you have these fields, you can add relationships to them so that you can enforce one-to-one, one-to-many, and many-to-many relationships with other tables. Business rules can be applied so that you can build logic and validation routines without the user having to write any code. When selecting business rules, you will be redirected to the appropriate Power Apps screen, which relies on Dynamics 365:

Figure 1.14: Business rule creation screen

Chapter 1

19

On the right-hand side of the screen, you will see tabs for Components and Properties, which are used for adding actions and conditions to the flow:

Figure 1.15: Business rule components

The next option we will explore is related to choices, which we can use within tables.

Introducing Power Apps

20

Choices Choices, formerly known as Option sets, are fields that have a defined set of options available to them. Similar to Managed Metadata terms in SharePoint, they are designed to promote data consistency across the platform. Just like all the other aspects of Dataverse, Microsoft provides a number of system-generated Choices that you can use in your own apps or that you can follow as examples. One such example is Fiscal Period, which has a set of options, such as Quarter 1, Quarter 2, and so on:

Figure 1.16: The Choices creation screen

Now that we have looked at Tables and Choices, we can look at the next key area, which is related to our data connections.

Connections The Connections screen is one of the most useful screens you will come across as an administrator because you can easily identify and troubleshoot any issues that may occur with your connections. Connections are the services your apps have connected to, through which data will flow. You will be able to see what services are connected, when the connections were created, and their general health. If this screen shows an issue, then you will be able to fix it without having to log in and use Power Apps:

Chapter 1

21

Figure 1.17: The Connections list

We will investigate connectors in more detail in Chapter 8, Introducing Connectors. Apart from looking at in-built connectors, we can also look at any connectors that we have built.

Custom connectors There are hundreds of connectors that you can use within your apps; however, there will be times where you’ll need to integrate with a system that either doesn’t have a native or third-party connector, which is usually a service that you have developed yourself, or a third-party API that you would like to connect to, for example, OpenWeatherAPI. Custom connectors allow you to connect to REST web services so that you can interact with data. We will look at how to do this in Chapter 8, Introducing Connectors. Any custom connectors that have been created within your tenancy will be listed here.

22

Introducing Power Apps

Flows When we talk about Flows, we’re talking about Microsoft Power Automate. Power Automate is intended to be the workflow that will replace legacy SharePoint Designer workflows. Clicking on Flows from the left menu will open Power Automate. We will explore Microsoft Power Automate in Chapter 13, Using Power Automate with Power Apps.

Chatbots The newest member of the Power Platform family is Power Virtual Agents, a no-code/low-code service for creating chatbots. Power Virtual Agents allows you to use the Azure bot framework, along with a number of other Microsoft Azure services, such as natural language processing, to enable users to find information in ways other than browsing.

AI models AI Builder is possibly one of the most exciting parts of the whole Power Platform, being able to build, train, and utilize AI to be able to process data automatically based on identified patterns. Just like other aspects of the Power Platform, the creation of the AI model is done in a no-code way, meaning that this technology can be utilized by users of all skill levels. This puts the power of key features, including data extraction and object detection, into the hands of the business user. We will investigate AI Builder in Chapter 17, AI Builder.

Solutions Solutions are packages of functionality created within the Power Platform that can be exported between environments, or provide the ability to implement application lifecycle management (ALM). Solutions are not just limited to apps; they can contain all of the building blocks including Dataverse tables, global variables, apps, and even flows.

Chapter 1

23

Now that we have familiarized ourselves with the key elements of the left-hand menu, we can now begin to create our first apps. The ideal place for us to start is the in-built templates.

Starting with templates Microsoft provides an expanding gallery of templates that you can use to get your Power Apps journey started. The template gallery is easily accessed by clicking on Create on the left-hand navigation. Each template is more than just a scaffold of an app – it is a fully functional Power App that integrates with various aspects of your Office 365 tenancy to provide immediate functionality. In this section, we will look at two of my favorite app templates, but it is recommended that you review the functionality that’s contained in the others as there are lessons that can be drawn from all of them.

Leave request app The leave request app is a good example of a generated Power App that can quickly add value to organizations that don’t rely on an already established system so that you can manage leave requests. It creates a number of screens that show you how you can use various controls and methods of navigation to achieve quite a common business use case. This Power App creates two connections: one to Outlook, in order to save and retrieve leave information in your Outlook calendar, and another to the Microsoft Graph in the shape of Office 365 users. This allows the Power App to determine the line manager of the user requesting leave so that it can send emails. The tablet version looks as follows:

Figure 1.18: Leave request app in tablet format

Introducing Power Apps

24

The mobile version looks as follows:

Figure 1.19: Leave request app in phone format

As well as having templates that are based on individual activities, we also have templates that are based on business functions.

Help desk app The help desk app is another app that is commonly used by organizations to quickly add value, since it captures service requests from a mobile device. It also uses connections that go back to the Office 365 user profile to draw data on the user who has logged in, such as their username and email address:

Chapter 1

25

Figure 1.20: The Help desk app, a phone app focused on managing support tickets

Now that we have looked at generating some basic apps from templates, we should familiarize ourselves with the actual development environment so that we’re ready to start creating powerful apps of our own.

Using Power Apps Studio Power Apps Studio is your primary developer tool for creating, updating, testing, and deploying canvas apps. In this section, we will explore Power Apps Studio, which is where you will take your app ideas from concept to delivery. It is important that you know your way around the studio so that your development time is spent creating the app rather than looking for options and controls. Understanding your development environment will vastly improve your development experience and will also allow you to greatly expand the functionality that’s available within your app.

Introducing Power Apps

26

By the end of this section, you will know about the key areas of Power Apps Studio, including the primary menu area and the formula bar. You will also learn how to view your screens, use the canvas, and find and review the properties of your app. Power Apps Studio is completely browser-driven and is supported by all modern browsers, unlike other developer tools. Everything you do is, by default, saved to your Power Platform environment, so you don’t need to concern yourself with maintaining code in a code repository. Power Apps Studio will launch when you start creating your app or if you open an existing app in edit mode. This screen consists of the following areas: •

Menus

•

Formula bar

•

Left rail

•

Tree view

•

Properties

These are shown in the following screenshot:

Figure 1.21: The Power Apps Studio screen

Most of the key activities we can perform are located in the menus, so let’s familiarize ourselves with what they are.

Chapter 1

27

Power Apps Studio menus The menus within Power Apps Studio are designed to be contextual, which means that they change depending on the activity that you are carrying out within the studio. For example, if you are working with a screen, you will see some options, and if you’re using a text box then you will see other options. There are some parts of the menu which remain consistent though. For example, the left side of the menu will always give you the ability to leave the studio using the Back button, the ability to undo and redo actions as well as the ability to insert new controls:

Figure 1.22: The left side of the app studio menu

On the right side of the menu are your app buttons, where you can share your app, make comments, switch into test mode, save and publish:

Figure 1.23: The right side of the app studio menu

designed to have the same look and feel as the menus that you use throughout the rest of the Microsoft Office suite. These menus use groups to combine similar functions to make your app creation experience as consistent as possible. Now that we have looked at the menu and learned how we can add new items to our Power App, let’s look at the formula bar, which is where we can tell the app what to do.

Power Apps formula bar The formula bar is the key development area and allows you to build logic and actions for the components that you place on the screen. Its look, feel, and behavior is very similar to Microsoft Excel, where logic is built using formulas. We will explore formulas in more detail in Chapter 6, Exploring Formulas:

Figure 1.24: The Power Apps formula bar

Introducing Power Apps

28

Microsoft has produced an extensive guide to the formulas within Power Apps. This can be found on the Microsoft Docs site at https://learn.microsoft.com/en-us/ power-platform/power-fx/formula-reference.

When we create content with our app, we need to be able to navigate it. This functionality is provided by the Screens browser in the Tree view pane.

Tree view The Tree view list on the left-hand side of Power Apps Studio is a very important part of your app development experience. It doesn’t just show the screens that you have created – it also shows you a hierarchical view of all of the controls that you have added to your screens:

Figure 1.25: The Screens browser

The Tree view also allows you to see and interact with any of the components that you have within your app. We will investigate this more in Chapter 7, Exploring Reusable Controls.

Chapter 1

29

When you are in a Tree view, screens and components will have an ellipsis (...) next to them, which allows you to perform a number of actions without having to interact with the control or locate it on the canvas itself. Some of the key actions that you can undertake are as follows: •

Rename: Change the name of the screen or control

•

Copy and Paste: Copy the selected control to the clipboard and then paste it again

•

Reorder: Change the order of the controls in the same way as we discussed when we looked at the Home menu

•

Align: Align the control on the canvas (this will only appear when selecting the menu for a control, not a screen)

•

Delete: Remove the selected object

•

Duplicate screen: Create an exact replica of your selected screen

While screens and controls are important, there is one other item listed in the screen’s browser that is extremely important.

App The App selection option in the screens list corresponds to the app as a whole. The options that are available to you on this object are extremely limited, but it does give you access to the OnStart event. This is a really useful event as you can carry out particular actions when the app is loaded for the first time without the need for any interaction from the user. This is commonly used to create local caches of data so that the app is ready to serve data when it’s finished loading. It can also be used to populate a cache so that it can be used for offline working. It is worth noting that this OnStart event will only run when the app is launched from the browser or from a mobile device; it will not fire when you’re using preview mode in the studio.

You can run an OnStart event manually and at any time by clicking on the ellipsis next to App and selecting Run OnStart.

Now that we have found out where we can view our screens, let’s focus on where most of the work will take place.

Introducing Power Apps

30

The Power Apps canvas The Power Apps canvas is your main working area and allows you to build your app by placing components on the screen using the Insert menu. From here, you can drag and drop them around the screen:

Figure 1.26: The Power Apps canvas in phone mode

Any controls that are added to the page can be selected so that you can interact with them. For example, if you place a rectangle icon onto the screen, you will notice that it has a number of handles surrounding it, which means that you can resize the component by holding down the mouse button and then dragging. You can also move it around the screen and place it exactly where you want that control to appear:

Figure 1.27: Control interaction points, which allow you to move and resize the icon

Unlike with other developer tools, you are unable to place a control outside the boundary of the screen, which means that if you use a component, it will be displayed on your screen unless you change its visibility to hidden.

Chapter 1

31

Breadcrumb Now that we have a component on the screen, you will notice that a breadcrumb at the bottom of the screen has started to build. This will show you the component hierarchy that you are currently interacting with:

Figure 1.28: The breadcrumb

In the case of our rectangle, the only parent for that control is Screen1; however, when we investigate Forms and Gallery controls later in this book, you will see this expand further as we can nest controls inside a form or a gallery.

Zoom As you start to add more controls to the screen, it is particularly useful to zoom in and isolate specific parts of the screen or zoom out to be able to view the canvas in its entirety. Zoom is located at the bottom right of the canvas window and can be modified by using the slider control or by using the increase (+) and decrease (-) buttons at either end of it:

Figure 1.29: Zooming in and out with the zoom control

When using your zoom control, you can quickly return to the best possible fit by clicking on the best fit for the window button, which is located to the far right of the zoom and represented by the diagonal arrows.

Looking at the Properties area The Properties area, which can be found on the far right of the screen, is your toolbox for each component that you place on the screen.

Introducing Power Apps

32

This will allow you to quickly browse and modify the various properties associated with the control that you have selected:

Figure 1.30: The properties for Screen1 being displayed in the Properties area

The Properties panel will group these options into two distinct areas, as follows: •

Properties

•

Advanced

Let’s look at each of them in detail.

Chapter 1

33

Properties When you select a control on the canvas, the Properties group will show you the common properties that you will need in order to start customizing it. If we take our rectangle as an example, the Properties display will relate to the fill color, border, and positioning. If we were to compare this to a label control, we would also see text color as a property:

Figure 1.31: The properties of a rectangle showing the different parts of the control that you can change

The common elements of the controls can be edited from the Properties tab, and allow simple interaction. If we want to dive more into the various options, then we need to head to Advanced.

Introducing Power Apps

34

Advanced While the Properties group will show you the common properties that you can set, the Advanced tab will show you all of the properties for your selected control. It also gives you the ability to search for a property and type your formula or value straight into the property:

Figure 1.32: The Advanced properties tab

The key difference to be aware of when working with Advanced is that you don’t have the same graphical representation that you do on the Properties tab. For example, the Fill is represented as the red, green, blue, and alpha values, which means you can’t select a color from a color palette.

Chapter 1

35

Summary In this chapter, we looked at the various types of apps that can be created using Microsoft Power Apps and the differences between canvas apps and model-driven apps. We explored the ways in which we can get started, whether that’s by using a blank app or by using one of the excellent templates that are provided by Power Apps. As we explored the left-hand side menu, we came across connectors, data models in the form of tables, and Microsoft Power Automate, which is our business logic platform. We can combine all of these to create powerful apps without having to write any code. We also looked at the key elements of Power Apps Studio, which is the key development tool on your Power Apps journey. We looked at various menus and how they can be used to apply basic styling and configuration to our app and components. We investigated the Insert menu and the types of controls that can be added through this menu, which range from inputs to media controls. Then, we looked at the makeup of the main development area, including the screens list in the Tree view, which contains not only your screens but also any components that have been added to that screen. From here, we have the ability to undertake basic actions on those components, such as reordering, copying, and duplicating. Finally, we started to delve into the realms of formulas and functionality through the formula bar and the properties pane. We can apply conditional logic using rules and see all of the available properties by selecting the Advanced tab. In the next chapter, we’ll create our first canvas app.

Questions 1. What are the three app types that we can build? 2. What is the name of the underlying database? 3. What is used to bridge Power Apps and Power Automate to other services? 4. Which type of app gives you full control over the layout of your components? 5. Which type of Power Apps license do you have with Microsoft 365? 6. What URL allows us to directly access Power Apps? 7. For an app to be classified as an Org app, who must it be shared with? 8. True or false: You can access Power Automate from the Power Apps portal.

Introducing Power Apps

36

Further reading •

What is Power Apps? by Microsoft: https://docs.microsoft.com/en-us/powerapps/ powerapps-overview

•

Formula reference for Power Apps: https://docs.microsoft.com/en-us/powerapps/ maker/canvas-apps/formula-reference

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

2

Creating Your First Canvas Power App In this chapter, we will look at how to create our first Power App by creating a canvas app from blank. Canvas apps are generally what people think of when they think of Power Apps and are where most app development takes place. They have the smallest learning curve in terms of grasping the basics, so this is the ideal place to start your Power Apps journey.

We will also look into the basic settings of our app so that you can start changing its settings and ensure you have the right app for the type of functionality that you want to present. By doing this, you will also be able to ensure that your app has the right name so that it can be identified by your users. In this chapter, we will cover the following topics: •

Creating a mobile app

•

Creating a tablet app

•

Changing the app settings

•

Lab 1

You will also gain insight into how you can find out what is coming to Power Apps next and actually start testing some of the new components as they get released through the Microsoft application life cycle. As we progress through this book, we will build an app that will allow us to practice some useful techniques and implement elements of the functionality that will be discussed in each chapter.

Creating Your First Canvas Power App

38

Each chapter will contain a lab that will give you step-by-step instructions on how to create our Groceries management app. Copies of each app can be found in this book’s GitHub repository (https://github.com/PacktPublishing/Learn-Microsoft-PowerApps).

Technical requirements To follow the steps in this chapter, you need to have access to Power Apps, either through an Office 365 subscription or a Power Apps plan such as the Developer Plan, as described in Chapter 1, Introducing Power Apps.

Creating a mobile app The mobile version of Power Apps is likely to be the most common type of app you will create. It is extremely important for your users to be able to access and interact with data, regardless of where they are in the world. This is made possible through the use of a mobile device. Often, when you create Power Apps, you will start from scratch. Templates are useful if you want to look at working examples and how to work within the scenarios that Microsoft provides out of the box, but as soon as you start building more bespoke apps, it will become much easier to start from a blank canvas. Creating a blank app is exactly what it sounds like: you will have a completely blank canvas to start from. However, one screen will always be created by default. Follow these steps to create a new blank phone app: 1. Access Power Apps by going to https://make.powerapps.com. Alternatively, navigate to the Office 365 portal (portal.office.com) and select Power Apps from the app launcher:

Chapter 2

39

Figure 2.1: Office 365 portal home page

2. Once on the home screen, select Canvas app from blank, which is found under Make your own app.

40

Creating Your First Canvas Power App

3. This will launch a modal dialog box that will ask you for more details regarding the App name and the Format it is going to take. If you select the Phone canvas, then you will get a canvas that is 640 pixels wide and 1,136 pixels high, which means that it will work well on all common mobile devices:

Figure 2.2: Canvas app creation box with Phone selected

4. When you click Create, an app with no content, other than a single screen, will be generated. This screen is known as Power Apps Studio and is where all of the components and logic are added so that you can make your fully functional Power App:

Chapter 2

41

Figure 2.3: A blank Phone canvas

5. For now, all we are going to learn is how to save the app. Once the app has been saved, the autosave feature will begin saving every two minutes to ensure that you don’t lose your work. Saving is done first by clicking on File on the menu bar. Microsoft has done a good job of maintaining consistency between the Microsoft Office suite of applications and the online editors by maintaining the look, feel, and layout of the menus.

On the first save of your app, it will automatically publish, and can therefore be shared with others in your organization. This is useful while you are developing and testing because you will be able to use the Power Apps mobile app to test on a different device; alternatively, if you are comfortable that others can start to use it then you can choose to share the app. Once shared, others can access the app, so don’t actually share it with end users until it is ready!

Creating Your First Canvas Power App

42

On subsequent saves, when you go to File | Save, you will be able to leave a version note about what updates you’ve made. After you’ve saved the updated app, you’ll be given an option to Publish that particular version. Although you are most likely to publish a mobile app for the phone, we should also consider other types of mobile devices. The next section will cover how to create a tablet app.

Creating a tablet app The tablet version of Power Apps provides you with a larger canvas for building your app, one that allows you to create an app that works well on tablet devices as well as desktop browsers. However, the tablet rendition also has additional uses, as the larger size works well when creating apps that are embedded into SharePoint Online using the Power Apps web part, or to Microsoft Teams as a tab. As an example, you may have created a Power App to manage leave requests that is then placed on a page within a SharePoint intranet. The users would simply access the relevant page in the intranet, and the app would be rendered as part of the page. Using Power Apps within Teams will be covered in Chapter 4, Publishing and Leveraging Power Apps. Creating a blank tablet app follows almost the same procedure as creating a mobile app: 1. To create a new blank tablet app, access Power Apps from https://make.powerapps.com. Alternatively, navigate to the Office 365 portal (portal.office.com) and select Power Apps. 2. Select Canvas app from blank. This will launch a modal dialog box that will ask you for more details about the App name and the Format it is going to take. This time, we will select Tablet, which will generate a canvas that is 1,366 pixels wide and 768 pixels high, which means that our app will work well on tablets, as well as on desktop devices:

Chapter 2

43

Figure 2.4: Creating an app as a Tablet app

3. Power Apps doesn’t distinguish between Phone and Tablet canvas types when being viewed in the app menu, so if I need both versions, I usually append – Tablet to the name. This way I can easily identify the version of the app without having to open each one. 4. Now, click on Create. The behavior that we can see is exactly the same as when we created the blank mobile app.

Creating Your First Canvas Power App

44

Power Apps Studio will present us with a completely blank app; however, note that we now have much more space on the screen to place components:

Figure 2.5: A blank Tablet canvas

From here on, we can save the app in the same way as we did previously, that is, by going to File | Save and then saving it as a draft or publishing it so that it can be shared. Now that we’ve seen how we can create the two types of canvas apps, let’s check out the settings that Power Apps Studio provides.

Changing the app settings One of the easiest customizations to make to your app is to change the basic settings that apply to your app. These settings cover four key areas: •

General

•

Display

•

Upcoming features

•

Support

Chapter 2

45

App settings can be accessed from the File menu, and also from the menu at the top of Power Apps Studio:

Figure 2.6: The Settings menu

The Settings dialog box appears in the center of the screen and allows us to select the settings group that we want to change. The first settings group is General.

Exploring the General settings The General settings will allow you to modify the key settings that will affect the identity as well as some of the basic operations of the app studio. Let’s start by looking at the app’s identity.

Changing the name and description When you develop an app, there will come a time where you may need to change its name, whether that’s because the app’s functionality or scope has changed slightly, or because you simply don’t like the name that you gave it when you created it. This can be achieved in the properties within the studio, or can also be changed through Settings.

Creating Your First Canvas Power App

46

When we navigate to General, we can click the edit icon, denoted by a pencil, next to the name of the app:

Figure 2.7: Editing the app name

As well as setting the name, we are also able to provide a description of what the app does. This is to help the user to ensure that they are opening the right app when browsing through the apps they have available to them. Once we have set the basic textual identification, we can then move on to something more graphical.

Setting the app icon The icon is the graphical identifier for your app, something that your user’s eye will be drawn to while looking for your app in either the browser or the Power Apps mobile app. The icon customization area is broken down into four elements: •

Preview: This will show you what your icon looks like as you start to change its properties.

•

Icon: This has a selectable library of icons, all of which have been provided by Microsoft. Please note that if you have your own icon set, then you can upload your own icon – you just need to ensure it is 245 px × 245 px in size and that it has either a .png, .gif, or .jpg extension. Ideally, choose an icon that will easily identify your app, and use a primary color that will give a good contrast against your chosen background color. If you are using a custom icon, you can use a transparent GIF to allow the configured background color to show; however, the ability to select an icon fill will no longer be available.

•

Background fill: The background fill is a configurable color that you can select from the standard color grid, or you can define it using RGB or hex color codes. The flexibility this provides means that you can use colors that align with any brand guidelines you need to follow.

Chapter 2

•

47

Icon fill: When you are using one of the Microsoft-provided icons, you have the ability to override the color used to fill the image. Always consider the contrast of the icon against the background to ensure that you don’t create any accessibility issues.

If you are looking for a bespoke icon for your app, you can visit flaticon.com, which offers a huge database of free icons that you can download in PNG format.

The following screenshot shows these elements in the App settings menu:

Figure 2.8: App identity settings

Always consider applying a basic level of branding to your app, as it is the first thing your users will see.

Autosave Power Apps now has an autosave function that will automatically save your app once every two minutes. This is a simple toggle switch that you can change based on your personal preferences. I prefer to have autosave switched on to make sure that I don’t lose any changes if I accidentally close my browser, or if the browser crashes.

48

Creating Your First Canvas Power App

Other settings As we scroll further down the general settings list, we have the ability to change additional settings; for example, changing the data row limit for any queries that cannot be delegated to the underlying data source, useful when we’re looking for data from SharePoint where a string contains specific characters. We will investigate delegation further in Chapter 7, Working with Data. We also have the ability to turn on additional features such as debugging, which again we will investigate later within this book.

Changing the Display settings There are occasions where you will have specific design requirements for your app; for example, you may want to explicitly develop for a specific orientation, or develop a screen size for a specific device that your organization uses. To change these options, you can select Display from the App settings menu.

Chapter 2

49

Using the phone app When you access this screen for a Phone canvas app, you are very limited as to what you can actually change. The Phone canvas is designed to have a static height and width that can’t be changed. However, you can change the orientation from portrait to landscape and back again, as in the figure below. Installing and configuring the phone app will be covered in Chapter 4, Publishing and Leveraging Power Apps:

Figure 2.9: Orientation settings

Creating Your First Canvas Power App

50

There are also three settings on this screen that are considered to be Advanced Settings: •

Scale to fit: When viewing your app using the browser or a mobile device, the dimensions of the app will automatically scale to fill the space available to it. With the addition of responsive containers, this now means that you can create an app that will auto-respond to different screen sizes. This will, however, take you some time to ensure that your apps render as you expect on each device.

•

Lock aspect ratio: This effectively means that the app will auto-scale up or down, depending on the screen size of the device the app is being used on. Keeping this on means that Power Apps will automatically maintain the height and width ratios to prevent any distortion.

•

Lock orientation: You can lock the orientation so that if your app is specifically designed to be used in a portrait orientation, then changing the angle of the mobile device won’t have any effect. However, if you unlock it, the app’s orientation will change along with the mobile device’s. While unlocking the orientation means that your users can use the app in whichever orientation they wish, it does mean that you need to carry out further testing and development to ensure that your app is still usable. Using the responsive controls can help you to prepare your app for responding to different orientations.

Chapter 2

51

These settings are shown in the following screenshot:

Figure 2.10: Orientation and scale settings for the app

Now that we have explored the available options for the mobile app, let’s look at the tablet app to see how it differs.

Creating Your First Canvas Power App

52

Using the tablet app The tablet app, like the phone app, allows you to specify the default orientation for your app. However, there are some additional options in terms of sizing the canvas:

Figure 2.11: Tablet app orientation settings

Here, you can set up your app for specific devices, some of which are presets (for the Surface Pro, iPad, and so on), but you also have the ability to define your own Custom height and width. This gives you the flexibility to target devices that are explicitly supported by your organization, as well as working to specific designs. You can also set the same orientation options that we saw on the phone app.

Chapter 2

53

Accessing Upcoming features Next, we have our Upcoming features, which is where we can enable or disable some of the really interesting components in Power Apps. You can access Upcoming features from the Settings dialog box. The Upcoming features are broken into three key areas: •

Preview

•

Experimental

•

Retired

Let’s explore each of them in greater detail.

Preview features Before functionality is fully released, also known as being generally available, it transitions through a number of different release tiers, such as experimental and preview. Preview features are those that are effectively available for app developers to use for the purposes of testing, in preparation for them being rolled out. The list of features that you see in this area changes from time to time, so it is a good idea to check them regularly and do regression testing on your apps to ensure that, when these preview features are enabled, your app still functions in the way that you expect. When functionality is in preview, it can be used within your Power Apps and will work, but may contain bugs or functionality issues that weren’t picked up on during testing. Therefore, it is extremely risky to base a production app on preview features.

Experimental features Experimental features are pieces of functionality that Microsoft is trialing on the Power Apps platform. You can use features that are considered experimental; however, they should be used with caution. Effectively, you are using beta versions of the functionality, which means that the controls may break when new code is deployed to Power Apps or the actual functionality may change. There is also the possibility that Microsoft removes the functionality completely, which will mean that your app will no longer function as you initially intended.

54

Creating Your First Canvas Power App

While these components shouldn’t be used for your production apps, I return to this area quite often; it’s good to see what may be coming to Power Apps in the near future, as that may shape how you design your apps in the present.

Retired features Features that are going to be replaced or removed from Power Apps are classed as retired. Power Apps is constantly evolving, and better controls or ways of working are released to further enhance the product. If our apps are utilizing retired features, then we have a risk that our apps are going to stop working once the functionality is removed. An example of a retired feature is the ability to import and export components, which has been replaced by the component library, which we will investigate more in Chapter 7, Exploring Reusable Controls.

Using the Support settings The final set of app settings is found in the Support tab, which allows you to select the authoring version of Power Apps that you are using. As key features and fixes are rolled out, the version numbers will update. If one of those versions introduces an issue, you can switch back to an older version, but this should be a temporary fix while you rectify the issue. You can see the latest versions and the associated documentation by visiting the following page on Released versions for Power Apps: https://docs.microsoft.com/en-us/power-platform/released-versions/powerapps. We can’t talk about support without mentioning Power Apps Community, which is also easily accessible from the Support tab. This is a free-to-use forum frequented by Microsoft staff, Microsoft Most Valuable Professionals (MVPs), and other volunteers in the community who are all trying to help each other.

Lab 1 In this lab, we are going to start building a Power App that will manage the groceries we have in our homes. The first thing we are going to do is create a blank canvas so that we can start populating it with components in Chapter 4, Publishing and Leveraging Power Apps. We will give our app a basic identity in terms of icon and color, and then save it to the cloud.

Chapter 2

55

Creating a blank phone app We are going to base our app on a mobile phone, so we will begin by creating our mobile app using the mobile canvas: 1. Log in to the Power Apps portal by navigating to https://make.powerapps.com. If you are prompted to log in, please do so using your username and password. 2. In the center of the screen, beneath Make your own app, click on Canvas app from blank:

Figure 2.12: Selecting the Canvas app from blank option

3. In the Create dialog box, select Blank canvas app

Figure 2.13: Creating blank canvas

Creating Your First Canvas Power App

56

4. In the Canvas app from blank dialog box, fill in the following details: •

App name: Groceries Phone App

•

Format: Phone

Figure 2.14: The Canvas app from blank dialog box

5. Once you have filled in these details, click Create. 6.

If the Welcome to Power Apps Studio dialog box appears, click Skip. Optionally, you can tick the Don’t show me this again checkbox if you don’t want it to appear the next time you log in.

Chapter 2

57

Creating the identity of the app Now that we’ve generated the app, we will create a basic identity for the app by setting the icon and color scheme: 1. From Power Apps Studio, select Settings from the top menu:

Figure 2.15: Selecting Settings

2.

When the Settings window loads, you will be presented with the app’s name and icon. Select + Add image from the icon selector and upload the icon called grocery.png, which is provided in the Lab 1 resources in the GitHub repo:

Figure 2.16: Uploading a custom icon

Creating Your First Canvas Power App

58

3. Set Background fill to dark blue for your icon. Observe that the preview changes to reflect the updated icon:

Figure 2.17: Updated icon preview

Now that we have given our app an identity, we should save it so that we can return to it in the next lab.

Saving the app Follow these steps to save the app: 1. Now, we are going to save the app so that we can return and edit it later. Click on the File menu at the top of the screen:

Chapter 2

59

Figure 2.18: Clicking the File menu

2. Your app has now been created and saved to the cloud. Your app will now appear in the app list and can be viewed and edited by you, but cannot be used by anyone else at the moment. In the upcoming chapters, we will continue to build upon this lab, adding components and functionality as we go until we have a fully functioning app.

Summary Within this chapter we have started to investigate the basics of creating a canvas app within Power Apps, which is the most common type of app created. We were able to create different apps for different types of devices, selecting either phone or tablet depending on which canvas is the most relevant for the devices we want to use. We found that we can provide a unique identity for our apps, being able to define a name and a description to describe what our app is, and also giving the app a visual identity through the use of icons and colors. These are most visible in the Power Apps app, so it’s a good idea to make your apps as identifiable as possible to help your users find them. Throughout the chapter we looked at the app settings, and investigated not only the dimensions of the app, but also some of the other app behaviors such as auto-scaling, aspect ratio, and app rotation so that we understand what these mean when we’re creating our apps. We then continued to look at how we can prepare ourselves and our apps for future changes, by looking at the preview features, which are in the later stages of development and testing and may contain bugs, and also experimental features, which are those that are being developed but may not eventually be included in general availability.

Creating Your First Canvas Power App

60

Each of these types of features can be used, but caution should be given if used in a production app. The final feature type is those that are retired: features that have been replaced or are going to be removed. They are there to help you keep your app running while you are updating it to take advantage of newer functionality. Finally, in our first lab, we created a blank phone app and started to apply basic customization to it by assigning a customized icon and background, so that we have our basic branding. We will be adding to this app at the end of each chapter so that we can apply our learnings and build an app as we go. In the next chapter, we will investigate another way of utilizing canvas apps by looking at the way they are used within SharePoint Online.

Questions 1. What are the two types of canvas that can be created within Power Apps? 2. Which canvas allows you to define custom dimensions? 3. Which app setting would you go to in order to change the icon of your app? 4. Which set of features should you test on a regular basis to ensure that your app will continue to work? 5. Which option should you set so that your app rotates when the device rotates?

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

3

Creating Apps in SharePoint In the previous chapter, we looked at how we begin to create a new canvas app. In this chapter, we will investigate the relationship between Power Apps and SharePoint, and how you can quickly and effectively create apps based on your data. We will also explore how we can create intelligent and engaging SharePoint list forms by using Power Apps. In the past, customized interfaces for SharePoint have been created using InfoPath or by using customizations such as web parts to allow a richer creation and editing experience. While InfoPath still exists and will still work with Microsoft 365, the user experience of the created forms relied on a separate service and was not mobile responsive, meaning that it did not really fit into the bigger Microsoft 365 picture. Power Apps is now filling the void of that lack of tooling for creating customized forms.

To create an app from your data stored within SharePoint, you will first of all need to have a list that contains the fields that you wish to pull through into your app. The ability to create an app directly from SharePoint is only available if you are using the modern, responsive, SharePoint user experience, so classic lists such as tasks will not support this approach.

You can still use classic lists as a data source for apps if you create them from within Power Apps; it is only the app generation that requires the modern user experience.

In this chapter, we will be covering the following topics: •

Preparing your list within SharePoint

•

Automatically generating an app from SharePoint

Creating Apps in SharePoint

62

•

Customizing SharePoint forms

•

Publishing the app

•

Removing the Power App form

•

Lab 2

By the end of this chapter, you will be able to quickly and easily generate Power Apps that serve as an interface to your SharePoint lists. This will take the form of a standalone app for your phone or will allow you to recreate the input forms for your list items.

Technical requirements To follow through this chapter, you will need an Office 365 license, which will give you access to SharePoint Online. The demos in this chapter rely on the creation of a SharePoint Online team or communications site that is using the SharePoint modern experience. There are two ways to tell whether you are using the classic or modern experience, with modern being the default for all new sites. The first is that the classic experience, illustrated in Figure 3.1, will still contain the ribbon at the top of the screen, which was introduced with SharePoint 2010:

Figure 3.1: A SharePoint site using the classic experience

The second is that the search bar, which in the classic experience appears in the top right, can be found on the suite bar at the top of the screen when using the modern experience. The modern experience is illustrated in the following screenshot:

Chapter 3

63

Figure 3.2: A SharePoint site using the modern experience

Due to the close working nature of Power Apps and SharePoint, this chapter will assume some basic working knowledge of SharePoint Online.

SharePoint field types supported within Power Apps SharePoint has a wide range of field types, some of which are quite simple, while others are more complex. If we are creating apps with the intention of interacting with SharePoint, then it is key to ensure we are using columns within SharePoint that we know are going to work within our apps. The following fields are fully supported, as they will work without any further effort and will give you the same results regardless of whether you use the fields in SharePoint or in Power Apps: •

Single line of text

•

Multiple lines of text

•

Number

•

Yes/No (boolean)

•

Person

•

Image

•

Date

•

Choice

•

Currency

•

Lookup This list does get updated, so you should always consult the Microsoft Docs to check for the most up-to-date information: https://docs.microsoft.com/en-us/ connectors/sharepointonline/.

Creating Apps in SharePoint

64

There are also a number of fields that are partially supported, in other words, those that work, but for which there are large differences between the experience that you have with SharePoint native forms compared to interfaces that we create in Power Apps: •

Hyperlink: In SharePoint, a Hyperlink field contains two pieces of data: a URL and the display text. When interacting in Power Apps, only the URL portion is shown.

•

Managed Metadata: If you have a single-level list of terms from the term store, then the Managed Metadata field will work quite well. However, if there are multiple levels of children, the rendered control in Power Apps is not able to display the hierarchy, so all terms are displayed at the same level.

•

Location: An intelligent lookup within SharePoint where you can enter a postal address and SharePoint will return more metadata to display in your list, such as the coordinate or town information. This unfortunately is not fully exposed to Power Apps and will pull through a number of read-only fields.

Just as there are elements of SharePoint that are not supported by Power Apps, there are also elements of Power Apps that are not supported by the SharePoint list forms that are replaced directly by Power Apps. Some of the newer functionality, such as Mixed Reality, or generally anything that is reliant on mobile device functionality, will not currently work in SharePoint. This is because, for the most part, SharePoint list forms are viewed using the browser. With supportability in mind, we can now turn our attention to creating an app.

The app creation process In order to create an app from SharePoint, we first of all need to create the data structure. The process we are about to follow applies to SharePoint lists, therefore we must begin by creating our basic data structure.

Chapter 3

65

Preparing your list within SharePoint This is the first time that we will look at creating an app based on data that we have already created and, for that, we will need to create a list within SharePoint. As previously mentioned, if the list can be viewed in the modern user interface, then you can access the Power Apps menu and customize the form. We need to start building our lists to hold our data. These could either be single lists or lists that use lookup columns to reference from other lists on our SharePoint site. We can create columns using all of the SharePoint data types; however, there are some limitations that you should be aware of. The more complex fields such as calculated columns and the Managed Metadata columns, and the newer fields types such as Location, can be used by Power Apps but will only be created as read-only fields. We can go ahead and create a basic list that we can then use to generate our app. For the purpose of this example, I’m going to use a single list that contains several different fields so that we can see how they are built within our app. My list is going to be called Customers and contains the following fields: •

Title (default field associated with all SharePoint list items): Required

•

Contact Name: Single line of text: Required

•

Contact Email: Single line of text

•

Address: Location

•

Date of Agreement: Date

•

Expected Revenue: Currency

•

Active: Yes/No

Once our list has been created, we can then use the built-in mechanism for creating a Power Apps app.

Creating Apps in SharePoint

66

Creating your app Creating the app from SharePoint could not be more simple, which is a credit to Microsoft and shows the importance of the relationship between SharePoint and Power Apps. Simply follow these basic steps: 1. Navigate to your list with SharePoint using a browser. 2. On the list actions running across the top of the list, click on the dropdown menu titled Integrate, hover over Power Apps, and select Create an app.

Figure 3.3: Creating an app from a list

If you can’t see this menu, then it is likely that you have a list item selected, indicated by a tick against a row. Simply deselect that list item, and the list menu will return.

3. Upon clicking Create an app, a blade will appear on the right-hand side of the screen emblazoned with the Power Apps branding. This blade only requires you to give the app a unique name, that is, a name that hasn’t been given to any other Power Apps app, not just any app that has been created from the current site.

Chapter 3

67

4. Once you have given it a name, we can hit Create:

Figure 3.4: The Create an app blade

Creating Apps in SharePoint

68

5. Power Apps will then open in a new browser tab and will begin to build an app based on the data structure that we created within SharePoint. There are no other interactions or configuration settings required; the built-in engine will simply create several screens based on your SharePoint configuration:

Figure 3.5: The generated app

Following a short pause, Power Apps Studio will open and display a fully formed and fully functioning app for you to start to use. Let’s have a look at what has been created for us in this automatically generated Power Apps app.

Exploring the auto-generated Power Apps app When the build functionality has completed successfully, you will have a Power Apps app created for you that has several screens along with several components on those screens. However, the key thing to notice is that the generated app will always be created on a mobile canvas; you don’t get the option to create a tablet version. Should you need to explicitly build an interface using the tablet canvas, you will need to create a blank canvas app and use this SharePoint list as its data source. The generated app contains all of the functionality that you would expect to be able to carry out in SharePoint itself, including adding, editing, and deleting data from the list that the app was generated from. You can press play in the top-right corner of the studio to view and interact with the app, or save it and run the app from the Power Apps list where you will be able to interact with the data in SharePoint.

Chapter 3

69

The great thing about creating an app in this way is that the screens, controls, and all of the logic needed for a fully functioning app have been created for you. Let’s take a look at what has been created.

Browse screen Assuming that you have placed some data into your list, you will see several controls on the screen that will allow you to browse your data. There are several key learning areas on this topic that we will investigate later in Chapter 8, Working with Data, such as ability to search and sort data. The purpose of this screen is to show high-level data that you can then interact with to drill down to more information:

Figure 3.6: The generated app with the pre-created browse screen

The logic has already been built into the app to allow us to navigate between the screens. So, clicking on an item on the browse screen will take you to the detail screen.

Creating Apps in SharePoint

70

Detail screen The detail screen gives you a read-only view of an individual list item, displaying all of the fields that have been created within SharePoint. This screen now also starts to bring in more contextual types of control, such as the ability to edit or delete the item that is being displayed:

Figure 3.7: The auto-generated details screen

As well as having the ability to view data within the app, the auto-generated app will give us the ability to edit the data as well. By clicking on the edit icon (the pencil) in the top-right of the app, we will be directed to the edit screen.

Edit screen This is the first time that we will see how some data types differ when they’re generated in Power Apps; for example, the Location field is represented in a read-only format, whereas the text and more conventional data types are all editable.

Chapter 3

71

You will notice that there is no New screen, and that is because the edit form can serve both New and Edit. The difference in form behavior is defined by the functions that are created on the new or edit buttons. In Edit mode, the fields will populate with data; otherwise, in New mode, the fields will be blank:

Figure 3.8: The auto-generated edit screen

From here, you now have the grounding of a fully functional app that you can either deploy or start to build upon. All controls, logic, and appearance within the app can be modified and tailored to meet your exact needs. As well as being able to generate a standalone app, the integration between Power Apps and SharePoint means that we can also use Power Apps to create customized forms for our SharePoint list to replace the out-of-the-box forms.

Customizing forms The relationship between Power Apps and SharePoint is now closer than ever as we now have the ability to completely replace the SharePoint list form with an app. So now, rather than seeing the standard SharePoint form, we can have something that is much more bespoke and also comes with a huge range of advantages.

Creating Apps in SharePoint

72

Firstly, we have the ability to make the actual form much more engaging through the use of layouts, colors, and media. We also have the ability to make our SharePoint forms much more intelligent through the use of dynamic validation, in other words, making fields required if something else is selected. But, for me, the biggest benefit is the ability to leverage multiple data sources, as well as being able to use lookups using data that is stored on other SharePoint sites. These reasons, combined with the ability to have different forms for different actions or states, mean that there is a really compelling argument to use Power Apps within SharePoint to improve our interfaces. Some of the key problems that are solved by using Power Apps as our list form include: •

Being able to draw in and write to data sources external to the current list and site, for example, creating cross-site lookups within SharePoint

•

Being able to drive dynamic validation based on user inputs

•

Creating forms with more styling and character than what we can achieve with SharePoint JSON formatting

•

Launching multiple cloud-flows with one button press

To create our customized list form, we will start in the same way as we did previously: 1. Navigate to your list with SharePoint using a browser. 2. On the list actions running across the top of the list, click on the drop-down menu titled Integrate, and hover over Power Apps; however, this time, select Customize forms, as seen in Figure 3.9:

Figure 3.9: The Power Apps menu showing the Customize forms option

Chapter 3

73

If you can’t see this menu, then it is likely that you have a list item selected, indicated by a tick against a row. Simply deselect that list item, and the list menu will return.

3. Again, Power Apps Studio will launch in a new tab so that you can customize the app; however, there are some key differences. Firstly, you will notice that there is a navigation link above the normal menu allowing you to navigate Back to SharePoint. This will close the app for you and return you to your list. 4. Secondly, below the usual App object under Screens in the Tree view, there is now an additional item called SharePointIntegration, as illustrated in Figure 3.10. Notice that there are also multiple events that you can build functionality around, such as OnView, OnSave, OnCancel, and more. Each of these allows you to create different behaviors; for example, if you want to have a different screen with your View form, you can include the navigate formula within the OnView event.

Figure 3.10: The SharePointIntegration properties

Creating Apps in SharePoint

74

Now that we have looked at how we can create the customized form, we need to modify the form to make it suitable for our needs.

Modifying forms Now that we have the basic form open in Power Apps Studio, we can start to modify it. The idea is that we can add or remove fields from the form to create a bespoke data entry experience, which will generate controls within a form. For the controls to appear within SharePoint, they must be contained within a form control, but what you do within that form is entirely up to you. The form control, labeled SharePointForm1 within the Tree view, and editing capabilities are illustrated in Figure 3.11:

Figure 3.11: Editing the fields within the form control

We will learn more about the form control in Chapter 5, Exploring Controls.

Modifying the form allows you to change the controls that you use to enter data or to enhance the styling of the form by adding additional formatting or information, or by hiding and showing other controls based on logical conditions. All of these were previously made possible by using InfoPath or by customizing using SharePoint Designer or through JavaScript; however, this is now possible through Power Apps and will help you to greatly enhance the SharePoint user experience. As mentioned in step 4 of the form creation above, there are several events that we can add functionality to, and these are accessible by going to the Advanced options available to the form.

Chapter 3

75

Advanced options While SharePointIntegration does not show any options under Properties, it will allow you to edit some key features when you select Advanced within the Properties pane on the right side of the screen, as shown in Figure 3.12. These are the forms that are used for the various inputs when interacting with SharePoint, all of which will default to SharePointForm1. Effectively, you can build out several different forms within the Power Apps app and then tell SharePoint which one to use; that is, you may wish to display different fields on the New form compared to the Edit form:

Figure 3.12: Advanced options for SharePointIntegration

Knowing when each of those SharePointIntegration events fires is key to being able to create the form experience that you want for your users: •

OnNew: This event will fire when a user clicks on the New button in SharePoint

•

OnEdit: This event will fire when a user clicks on Edit for the properties against a SharePoint list item or file when being used in a document library

•

OnView: This event will fire when the properties are loaded in view-only mode

Creating Apps in SharePoint

76

•

OnSave: This is what will happen when the user clicks the Save button

•

OnCancel: This is what will happen when the user clicks the Cancel button

As we progress through the book, applying some of the formulas that allow you to navigate around or set variables will become extremely useful. For example, to have different screens, with different forms, we will need to use the Navigate formula to move between the various screens based on what the user has clicked on within SharePoint. With regards to the actual interface, you can customize the app and the forms as you see fit, to introduce additional logic, controls, or styling to provide your users with the functionality they require. The biggest advantage that I have personally found from using these types of apps to replace forms is that I can introduce data from other SharePoint sites, allowing me to break through the normal site boundaries that are imposed by SharePoint. Once we have made any changes to the SharePoint form, we need our users to start using it. But before that happens, the form needs to be published.

Publishing the app Once the app has been developed, it will need to be published before it is available to users through SharePoint. This is done in a similar way to a standard Power Apps app, by going to the File menu and then clicking Publish to SharePoint. The main difference here is that, rather than publishing to the Power Apps gallery, it will publish back to SharePoint. Once we close Power Apps and return to SharePoint, our form will now be the default form when interacting with the list. So, if we go to our list and add a new item, we will see the customization that we made in Power Apps Studio; for example, in the screenshot below, some basic styling has been applied to the field labels to make them stand out a little more:

Chapter 3

77

Figure 3.13: Demonstrating the Power Apps form in SharePoint

We have now started to build on the close relationship between Power Apps and SharePoint in order to build a better interface for our users to interact with our lists. We will learn more about the types of controls that we can use in our SharePoint forms, and in Power Apps in general, in Chapter 5, Exploring Controls.

Creating Apps in SharePoint

78

Removing the Power Apps form There are times where we may need to turn off the Power Apps form, or even delete it completely in order to start again, for example, if we have encountered huge problems with the app form. This is all configured within SharePoint itself and forms part of the List or Library settings: 1. Navigate to your list or library. 2. Click on the settings cog in the top-right corner of the screen. 3. Select List (or Library) settings:

Figure 3.14: Selecting List settings

Chapter 3

79

4. Under the General Settings header, move to the bottom of the list of links and select Form settings:

Figure 3.15: Selecting Form settings under General Settings

Creating Apps in SharePoint

80

5. In Form settings, if you have created an app already, then Use a custom form created in PowerApps will be selected. From here, you will also be able to see the version history. Should you wish to change back to the out-of-the-box form, change the selection to Use the default SharePoint form:

Figure 3.16: Form Settings

You will not be able to delete the app until you have changed the selection to Use the default SharePoint form.

6. Once you have changed your option back to Use the default SharePoint form, you will then have the ability to select Delete custom form:

Chapter 3

81

Figure 3.17: The Delete custom form option

Once the custom form has been deleted, you are then able to start creating an app again if you choose, or continue using the SharePoint standard list form.

Lab 2 In this lab, we are going to create a list within Microsoft SharePoint, and then generate an app to replace the list form. In this list form app, we are going to communicate to the user that we want them to use the canvas app that we are going to continue building throughout this book.

Creating Apps in SharePoint

82

Activity 1: Creating the SharePoint list In this first activity, we are going to create the SharePoint site, lists, and fields for us to start working with: 1. Navigate to https://portal.office.com and log in using your credentials. 2. From the app launcher in the top left of the screen, select SharePoint, which will load the SharePoint home screen:

Figure 3.18: The SharePoint home screen

3. Click on + Create site and, in the site creation blade that appears on the right of the screen, select Team site:

Chapter 3

83

Figure 3.19: Choosing a new Team site

4. Create a new Team site named My Groceries:

Figure 3.20: Creating a new Team site

Creating Apps in SharePoint

84

5. Follow the remainder of the site creation wizard, and then you will be presented with a new SharePoint site:

Figure 3.21: Our new SharePoint site

6. From the + New menu on your newly created homepage, select List:

Figure 3.22: Creating a new list

Chapter 3

85

7. On the new list screen, select + Blank list:

Figure 3.23: Selecting Blank list

8. Enter the list name as Groceries and then click Create:

Figure 3.24: Creating our Groceries list

Creating Apps in SharePoint

86

9. Once your list has been created, click + Add Column (located next to Title in the main display):

Figure 3.25: Adding a new column to our list

10. Set the column type to Choice (dropdown) and use the following configuration: •

Name: Grocery Type

•

Description: The category of the grocery

•

Choices (create one on each line): Canned Goods, Cereal, Beverage, Household

Chapter 3

87

11. Click Save:

Figure 3.26: The Create a column blade

Creating Apps in SharePoint

88

12. Repeat steps 8 to 10 for the following additional columns: •

•

•

•

Item Description: Use the following: •

Type: Multiple lines of text

•

Description: Description of the item

Received Date: Use the following: •

Type: Date and time

•

Description: The date on which the item was received

•

Include Time: No

Use By Date: Use the following: •

Type: Date

•

Description: The date when the item needs to be used by

Used: Use the following: •

Type: Yes/No

•

Description: Has the item been used?

13. You will now see your fields displayed within your SharePoint list:

Figure 3.27: The fields we just added to our SharePoint list

14. Now that we have created our basic list, we need to create our list form.

Activity 2: Creating the list form app We will now practice creating our SharePoint list form and replace the out-of-the-box form that SharePoint gives us. 1. Navigate to the SharePoint list that we created in Activity 1.

Chapter 3

89

2. In the list menu bar, select Integrate, hover over Power Apps, and click Customize forms:

Figure 3.28: Clicking Customize forms

3. When the studio loads, click on the SharePointForm1 control displayed on the screen:

Figure 3.29: Selecting the SharePointForm1 control

4. Delete the form control by pressing the Delete key. 5. Insert a new label onto the canvas and name it lblUserMessage. 6. Change the label text to read: “Please use the mobile app to interact with this list” by using the Text input box in the style pane. 7. Change the formatting of the label to make it bigger and more prominent:

Figure 3.30: Making the label more prominent

Creating Apps in SharePoint

90

8. Position the label in the center of the screen:

Figure 3.31: Centering the label

9. Save the app by clicking on the File menu and selecting Save. 10. Click Publish to SharePoint: 11. When prompted, click Publish to SharePoint in the confirmation box. 12. Click on the back arrow to return to the main studio:

Figure 3.32: Returning to the main studio

13. Finally, click Back to SharePoint to close the studio and return to SharePoint: You have now replaced the out-of-the-box SharePoint list form with a customized app, which is going to inform our users that they need to use our mobile app. Once we have created more functionality within our app, we will add the ability to redirect our users to it. For now, we can go back to our SharePoint list and try to create a new entry using the New button. If your new list form app doesn’t immediately take effect, the old form may be cached in your browser. Do a full refresh, Ctrl + F5 in Windows, and then try to load the form again.

Chapter 3

91

Summary Within this chapter, we have explored the close relationship between SharePoint and Power Apps, and how Power Apps can greatly enhance the way that you work with data. First of all, we explored how we can create an app directly from SharePoint, which is different from how we created apps in previous chapters, either from scratch or from a template. This is especially useful if you are concentrating on getting your underlying data correct first before starting to develop the app itself. Just remember that not all of the data types within SharePoint will map automatically into your Power Apps form, so complex data types such as Managed Metadata or new data types such as Location will be created but will be read-only. When generating apps from SharePoint, also keep in mind that it will generate an app based on the mobile canvas, so if you need a tablet canvas, then you’ll need to create it from blank and select SharePoint as the data source. We also looked at how we can use SharePoint to customize forms that are used directly within SharePoint, for example, the New form or Edit form. These forms are created in SharePoint within form controls, which are then referenced internally by SharePoint. They can contain logic, styling, and controls in addition to what you get from the auto-generated app. By publishing back to SharePoint, your users will now be able to take advantage of a much richer add and edit experience. With the lab, we have also changed the out-of-the-box list form to be replaced by our list form app, which is, for now, going to prevent our users from entering data straight into the list. Later on, we will also add the ability to launch our app from here. In the next chapter, we will see how the publishing of the app takes place on different platforms.

Questions 1. Which user experience does SharePoint need to use to allow auto-generation of an app? 2. Which canvas is the app generated on? 3. What do I need to do to allow users to use my new form? 4. What is the key addition to the screens picker on the left-hand side of the screen? 5. True or false: Managed Metadata fields are fully supported by Power Apps. 6. If I wanted to change which form was used by SharePoint for editing, where would I go?

92

Creating Apps in SharePoint

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

4

Publishing and Leveraging in Power Apps In this chapter, we will look at how we can use our apps once they have been created and published. Until an app is published, it cannot be used by anyone else, so we will also discuss what it means when an app is published and how you can review the history of the app, as well as identify which app is currently live. In case of any issues, we will look at how apps can be rolled back to previous versions in the simplest of ways.

We will also look at how our users will interact with the app once it has been published and how users can get the most from the Power Apps functionality available to them. The three key ways users interact with an app are through SharePoint, Microsoft Teams, and via a mobile device. As we will see in this chapter, each will be explained in turn. The following topics will be covered in this chapter: •

Publishing a Power App

•

Accessing your app through SharePoint Online

•

Accessing your app through Microsoft Teams

•

Using the mobile app

•

Lab 3

By the end of this chapter, you will know how to publish your app and access it through several key interfaces. This will allow you to make your apps available to a wide range of users, thus allowing them to use your functionality in a way that they feel comfortable working with.

94

Publishing and Leveraging in Power Apps

Technical requirements To follow along with the examples in this chapter, it is assumed that you have an Office 365 subscription that grants you access to SharePoint Online and Microsoft Teams and that you have a mobile device that you can test our app on. This device can be either a phone device or tablet and can be iOS or Android-based. For the lab, we are creating a phone app, which will still work even if you are testing on a tablet. Due to the close working nature of Power Apps, SharePoint, and Teams, this chapter will assume you have some basic working knowledge of SharePoint Online and Microsoft Teams.

Publishing a Power App If we want to make use of our Power Apps application, we need to ensure that it is published. Publishing works in very much the same way as SharePoint publishing works, whereby you can work on the app and have multiple versions associated with it. This means that you don’t need to maintain multiple copies of an app; you can happily work on an app in its draft state while your users are still using the last published version. Each time you save your app, it will create a new version that allows you to revert to previous versions if you need to. Publishing the app is the mechanism that makes our changes available to the users of our app. We can maintain draft versions, which means that we can work on and test our app through Power Apps Studio while all of our users continue to use the last published version. Then, once we’re ready, we can then click Publish. Publishing can only take place once the app has been saved. Therefore if you have made changes to the app, but not yet saved it, then we won’t actually see the Publish option. In order to publish our app, we need to click on File on the far left of the menu bar, and then select Save from the left menu. The Save menu options will change depending on the current state of the app, either showing a Save button or a Publish button based on whether there are unsaved changes in the app.

Chapter 4

95

Each time we publish, we create a new major version of the app, i.e. version 1, 2, 3, etc., all of which are tracked in the version history screen.

Version history To view all of the versions of an app, navigate to the Apps list on your Power Apps portal. Once you have your list of apps on the screen, you can click the ellipsis (...) to the right of your app to bring up the menu:

Figure 4.1: The context menu for the app showing the Details option

96

Publishing and Leveraging in Power Apps

Once the app details are on the screen, we can review the version history of our app by selecting Versions from the horizontal menu bar:

Figure 4.2: Location of the Versions menu

The Versions page is particularly useful because we can see what version of the app we are currently editing and see what is live. A Power App isn’t considered live until it has been published. We can save apps as drafts, safe in the knowledge that only the creator and other editors can see the draft versions when editing.

Chapter 4

97

If we were to use the app ourselves by launching it from the apps list or within the app, we would still be using the last published version, which is indicated as Live in the Published column:

Figure 4.3: Version history in the Power Apps portal

Also, much like version control has been made available within SharePoint, we have the ability to restore a previous version, so should we ever need to roll back, we can do so. Each version of the app has a more actions button (…) next to the version, which has one of two options. We can choose to Delete the version, or we can Restore it. When we restore a previous version, a new version of the app will be created and will become the latest draft. It will not go live until we have gone back into the app and published it. Being able to go back in the version history is a really important safety net for you as a developer; should you publish a version of the app which doesn’t behave in the way that you desire, then you can revert to a “good” version of the app, allowing users to carry on using the app while you go back into the editor to fix any issues. Now that we have made our app live, we need to make it as easy as possible for our users to be able to access it. One way to do that is through SharePoint Online.

Accessing your app through SharePoint Online SharePoint allows us to embed our Power Apps directly onto a page so that we can enhance the functionality, all without having to take the user away from SharePoint itself. This is a really good way of surfacing data through your Power App or introducing ways for your users to interact with a page. As an example, you may have a Power App that is being used for your users to book leave, which can be embedded into a SharePoint page that also contains reference material for the types of leave.

Commonly, we see Power Apps becoming a key part of SharePoint Online-based intranets, which allows forms functionality to be embedded into a page.

Publishing and Leveraging in Power Apps

98

Before we begin, however, we need to be able to identify our app so that we can bring it into SharePoint.

Getting the Power App ID Before we start making any changes to SharePoint, there are some basic details that we need to find out about our app. For SharePoint to use our Power App, we need to provide either the Web Link or the App ID for our app. This is a shortcoming of the user experience for adding our app to SharePoint at this time, and I fully expect this to be improved in the future. To get the details we need, return to the main apps list by selecting Power Apps from the app launcher in the top-left corner of the screen. If your app appears on the home page, then you can perform the following actions from there; otherwise, click Apps on the left-hand menu and locate your app. Once you have located your app, select the ellipsis (...) to the right of the app name, which will expand out the app menu, exactly the same as when we were accessing the version history. From there, click on Details, which can be found at the bottom. The Details screen displays some key pieces of information; the most important for this task is to capture the Web link or the App ID. Either of these details can be used, so either copy one of the identifiers to the clipboard or paste it into Notepad if you want to be sure that you’re not going to accidentally clear it:

Figure 4.4: Location of the Web Link or App ID within the app details screen

Chapter 4

99

Now that we have this information, we can go to SharePoint and surface our app on a page.

Adding the Power App to SharePoint To put our app on a page within SharePoint, we need to use a modern page. Modern pages are those that are completely mobile responsive and are designed to function within the SharePoint mobile app. When you create a SharePoint site from the SharePoint home page, you can create either a communication site or a team site. Both of these site templates are modern, therefore allowing you to use your Power Apps.

When we edit the page, we can add components to the page in the form of web parts, the components which we can add to the page to present content or functionality. These modern web parts include functionality such as text, images, Microsoft Forms, and a Power Apps web part, which at the time of writing is in preview. To add a web part to a page, you must begin editing the page using the Edit option in the top-right area of your SharePoint page:

Figure 4.5: The Edit option in SharePoint Online

100

Publishing and Leveraging in Power Apps

Once the page is in edit mode, you can add new web parts to your page. This is done by hovering over the desired area so that you see the + icon, which you can then click on to open up the web part toolbox:

Figure 4.6: Add a web part button

Once the toolbox is open, you can either scroll down until you find the Microsoft Power Apps web part or use the search box at the top of the toolbox to filter:

Chapter 4

101

Figure 4.7: Searching for the Power Apps web part in the toolbox

Once you have located it, click on the web part so that it will be placed on the page. The web part properties blade will automatically open on the right-hand side of the screen.

102

Publishing and Leveraging in Power Apps

The web part properties section is where you can enter the App web link or ID that we identified earlier, and where you can specify whether there is a border around the app or not:

Figure 4.8: Configuring the Power Apps web part

As soon as you paste in the App web link or ID, it will immediately start to render on the page and display the last published version of the app. The app renders and becomes visible to you immediately, as shown in the following screenshot:

Chapter 4

103

Figure 4.9: App rendering on the page

It is worth keeping in mind that it can take a second or two for your app to actually load, so consider the burden on the browser if you have multiple Power Apps embedded on a single page.

The final step is to publish your SharePoint page by clicking Publish or Republish, which can be found in the top-right corner. Once that has been done, any standard users of your SharePoint site will be able to use your app without having to leave SharePoint. SharePoint provides just one of the key collaboration areas within Microsoft 365, the other key area is Microsoft Teams.

104

Publishing and Leveraging in Power Apps

Accessing your app through Microsoft Teams Microsoft Teams is the central collaboration hub for users. It is cited as being the fastest growing product, in terms of user adoption, of all of the Microsoft products throughout its history. For Microsoft 365, Microsoft Teams provides a window to all of the productivity tools that your users need; therefore, it makes sense for you to allow your users to interact with your Power App without ever leaving Teams. This can now be achieved in two ways, firstly by adding your app as a tab in a channel, but also by adding an app to the rail on the left side of the screen. As a brief introduction to Microsoft Teams, collaborative areas are broken down into high-level areas called Teams. Behind the scenes, Microsoft Teams creates a SharePoint site and an exchange mailbox to provide the key collaboration and communication tools that have made Microsoft Teams so successful. These teams are then broken down into sub-areas called channels, which allow you to separate out your conversations and files. An example is shown in the following screenshot, where we have individual channels for infrastructure and policies:

Figure 4.10: The Microsoft Teams interface

Chapter 4

105

Each channel allows you to bring in additional resources to complement the way that your users work within Teams, and this is achieved by adding new tabs to a channel.

Adding a Power Apps tab Adding the Power Apps tab to your Teams channel means that your app will be displayed within the Microsoft Teams interface. This is designed to be an additional way of accessing your app, rather than through the browser, SharePoint, or the mobile app. If Microsoft Teams and your Power App are key to your users’ day-to-day activities, consider implementing a Power Apps tab to make it as easy as possible for your users to do everything in one place.

Compared to SharePoint, the user experience for adding a Power App to Microsoft Teams is much richer and easier. If you haven’t already got a team, then you can create one from within Microsoft Teams itself, or if you have a modern SharePoint team site, then you can create a team from there by clicking on Add Microsoft Teams, which appears as a panel in the bottom-left corner of the site. Once you’re within Microsoft Teams, your Power App can be added as a tab to one of your channels. You can add your app to any channel, and you can add it in several places if that is what you want to do. To add your tab, click the plus (+) to add a new tab to your channel.

Figure 4.11: The tabs list at the top of a team

106

Publishing and Leveraging in Power Apps

Once the Add a tab dialog appears, you can either scroll or search for the Power Apps. Notice that, unlike for SharePoint, this is not in preview:

Figure 4.12: The Power Apps tab available from the Add a tab dialog box

If this is the first time that you’ve added Power Apps to your team, you will be asked to install it. This effectively goes through the normal checks that all the tabs do, which is to ensure that you’re happy with any data being shared or displayed. This is perfectly normal, and given that you are controlling the flow of data within the app, you know where the underlying data is being stored. If you’re happy to proceed, click the Add button:

Chapter 4

107

Figure 4.13: Power Apps installation from Microsoft Teams

Once the app has been installed, you will be able to surface your Power App in Microsoft Teams. You will be faced with a list that allows you to pick the exact app you want to use. Your apps will be available from all the environments that you have access to and are consolidated in this one window.

108

Publishing and Leveraging in Power Apps

You can also search if you have a large number of apps, or use the filter to identify My apps, All apps (or even directly install a sample app from the dropdown selection):

Figure 4.14: App selector screen

Simply select the app you want to install and click Save in the bottom-right corner. If you have left the Post to the channel about this tab checkbox ticked, then this also posts a message in the conversation tab about the app being added. Once you have added your app to your team, it will appear as an additional tab along the top of the channel window and will be visible to everyone who has access to that team, as shown in the following screenshot. When you select it, your app will load and will give you the ability to use and interact with it exactly as you would on any other platform:

Chapter 4

109

Figure 4.15: The Power App being displayed in Microsoft Teams

Adding an app as a tab is the most basic of the Teams interactions. Let’s now look at how we can add it and pin it to the rail on the left of the Teams interface.

Adding a Power Apps Teams app Adding a Power App as a tab means that you need to have access to the relevant team, and also navigate to the channel where the app is installed in order to access it. For the key apps in our tenancy, we may want them to be more visible to our users, or available within one click. This is where the rail comes in. The rail is the Microsoft Teams navigation area, which runs down the left-hand side of the screen. The standard types of navigation items that you will see here include the likes of Chat, Teams, and Calendar. Some organizations may allow this bar to be modified and added to by the users, or alternatively, this can be controlled through policies from the Microsoft Teams Admin Center. For the purpose of this section, we will look at how we can add apps to Microsoft Teams from the end-user perspective. If you are looking for more information about the central management of Microsoft Teams, have a look at Hands-On Microsoft Teams, by Joao Ferreira. Before we visit Teams though, we first need to go back to Power Apps, as we need to export an app manifest for us to add to Microsoft Teams.

110

Publishing and Leveraging in Power Apps

Exporting the app manifest from Power Apps The app manifest is a ZIP file that is exported from Power Apps and contains the full definition of the app, including identification, appearance, and how Teams is going to reference it. The process of exporting an app manifest is now extremely simple, as the ability to export an app to use within Microsoft Teams is built into the Power Apps app context menu, and it is all achieved without having to download and manually install the app using the app manifest: 1. Firstly, we need to navigate to our list of apps that we have within Power Apps. 2. From there we can click on the ellipsis (…) to bring up our menu, just as we saw earlier when accessing the app details. This time, however, we will click on Add to Teams.

Figure 4.16: The Add to Teams option from the Power Apps context menu

Chapter 4

111

3. Clicking on Add to Teams will open up a blade on the right side of the window where we can provide some of the key information for the app. By default, we will see the basic app name and the description which has been provided; however, by clicking on Advanced settings, we can then provide more information such as a website link, a URL to the terms of use or privacy policy for the app, as well as an MPN ID for Microsoft Partners for those partners who need to track their apps for the purpose of establishing or enhancing their Microsoft Partner status.

Figure 4.17: Advanced settings for the app manifest export

112

Publishing and Leveraging in Power Apps

4. Once we have defined any of the additional information, we can click the Add to Teams button at the bottom of the blade. The integration with Teams is really interesting here, as it will automatically upload the app into Teams for you, rather than having to download the ZIP file and then adding it to the Teams tenancy. If you are prompted to open Microsoft Teams, then click Open, otherwise, you’ll be prompted to add the app to Microsoft Teams.

Figure 4.18: The add app dialog box

Chapter 4

113

5. By clicking Add, the app is installed and available on the rail within Microsoft Teams, including the icon which was provided during the setup of the app:

Figure 4.19: The app visible on the Microsoft Teams rail

Installing the app will make it available to you, however, if you want it to always be visible you will need to pin the app. As a user, you can now pin that app to your rail so that it is easily accessible next time you visit Teams. If you don’t pin it, you can click the ellipsis (…) at the bottom of the rail to access more apps, and you will find your Power App there. Now that we have looked at SharePoint Online and Microsoft Teams, let’s look at how we can leverage our Power App on the move using the mobile app.

Using the mobile app One of the biggest drivers for the adoption of Power Apps within organizations is the ability to create mobile apps without the need to pay large development fees. Power Apps, much like other areas of Microsoft 365, has its own dedicated app, which can be downloaded from the relevant app store. Both iOS and Android devices are fully supported, meaning that the reach your app can have can be vast.

Publishing and Leveraging in Power Apps

114

The screenshots in this section have been taken using an iOS device:

Figure 4.20: A Power Apps app that has been installed on a mobile device

Once the app has been installed on your device, you can immediately start to use it by launching it from your home screen.

Using the app When you first launch the Power Apps app, you will be asked to authenticate using the Microsoft 365 credentials that you normally use within the browser. There are a lot of similarities in the user experience between what we saw in Microsoft Teams and what we can see in the mobile app. The first thing we can do is view the list of apps that we can access, being able to see the apps that we have used recently by viewing favorites, as well as searching for an app. Once you have identified the app you wish to use, you simply need to tap it, and it will launch:

Chapter 4

115

Figure 4.21: Power Apps available in the mobile app

The app will momentarily display the splash screen before actually being ready to use. Once the app has loaded, you can use it in exactly the same way as you would through the browser, SharePoint, or Microsoft Teams.

116

Publishing and Leveraging in Power Apps

One of the most endearing qualities of Power Apps is that the user experience is consistent, regardless of the medium in which we use the Power App:

Figure 4.22: An example of an app that is viewed using a mobile phone

To exit the app and return to the app selection screen, we simply need to swipe from the right edge of the device and launch another app. To make it even easier for you to access your Power App, your users can make it look like a native app by pinning it to the home screen.

Chapter 4

117

Pinning to the home screen One of the nicest things about the Power Apps native app is that we can pin any apps that we can access to the home screen. For most users, this gives the impression that the Power App is installed on the device. What it actually does is create a shortcut to the app. The shortcut will still launch the Power Apps app; however, it will quickly redirect the user to where they need to be. This effectively makes the journey for the user much more friendly as they are reducing the number of taps. The process for pinning to the home screen will differ depending on the device’s OS, but the basic motions are the same. We will add the app to the home screen, give it a name if you want to rename it, and then it will appear as an icon. This will make the app only one tap away from being used. For us to pin the app to the home screen, we first of all need to open the Power Apps app, and locate our app. To the right of the app is a small information icon, which will allow us to drill into the app detail.

Figure 4.23: The information icon in the Power Apps list

When we tap on the information icon, we are presented with the key information about the app including the published date, and the dependencies for the app to run successfully, including connections and functionality such as location data.

Publishing and Leveraging in Power Apps

118

At the top of the screen, we are also able to see an icon labeled Add shortcut.

Figure 4.24: Finding Add shortcut on the Details page

Tapping on Add shortcut will then start your device-specific process for creating the shortcut on the home screen. In the latest versions of iOS, for example, you will be prompted to create a Siri Shortcut, which can then be added as a tappable icon to launch the app. Here we have gone through the process of adding an app to our mobile device. Importantly, we can use this process for testing and using the app, which we are going to build as we progress through the rest of the labs.

Lab 3 Within this lab, we are going to install and configure the Power Apps mobile app so that we can experience using our Power App as we build it throughout this book. This lab assumes that you have completed Lab 1, and therefore have created the Groceries phone app. However, you can follow these steps for any other app that you create. First, we will install the Power Apps app, and then we can refer to the above section to pin the Groceries app to the home screen. Let’s install the mobile app.

Chapter 4

119

Activity 1: Installing the mobile app This first activity will allow us to install and configure the Power Apps mobile app onto our chosen device. The screenshots in this lab have been taken from an iOS device: 1. On your mobile device, open the app store that’s relevant to your device. 2. Search for Power Apps. 3. Select Power Apps from the search options and select to install it:

Figure 4.25: Power Apps in search options

Publishing and Leveraging in Power Apps

120

1. Once the app has been installed, open the app from the app store or the home screen. 2. When the app opens, sign in using your Microsoft 365 credentials:

Figure 4.26: Entering Microsoft credentials

3. Once loaded, ensure that you can see the app named Groceries Phone App. Now that we have our app installed and we have signed in, we are able to pin the app to the home screen as we covered in Pinning to the home screen, which involves opening the Details page for the app and selecting Add shortcut. This can give us easy access to our app by giving it the appearance of a locally installed app, which we can quickly open whenever we need to test our app in the upcoming labs.

Summary In this chapter, we looked at the version history and what that means for our Power App. We identified that we can happily work on our app in the draft stages without users being able to see our changes. Once the app has been published, it will be marked as Live and will be available for our users to start using. Should the worst-case scenario be realized and we have an error in our app, we can easily revert to a previous version by selecting Restore. The restored app will then become a new version, but won’t be visible to our users until we click Publish.

Chapter 4

121

We also looked at the key ways in which our users can exploit the functionality that’s created using Power Apps. First, we focused on SharePoint, which uses a web part within the modern experience to embed the Power App onto the page. This is done by providing the web part with the app web link or ID, which are obtained from the app’s Details screen. This experience may be due to the web part still being in preview and may change as it is developed further. The second method was using Microsoft Teams, where we can add a tab to a channel and select Power Apps. This will install the Power Apps app in the team and will allow us to select one of our apps or one of the sample apps that are available to us. Anyone who has access to the team will be able to access the tab. The final method was using a mobile device, where we can use the Power Apps native app, which is one of the many native apps provided for Microsoft 365. When the app is loaded, it will, just like Microsoft Teams, give you the ability to select from any of the apps that you have access to and to the sample apps. Your users can pin the app to the home screen, giving the impression that it is installed locally; however, it has actually created a shortcut. The shortcut will still launch the Power Apps app, but it will immediately direct the user to the relevant app. In the next chapter, we’ll develop our app further by learning about the wide variety of controls that can be used in Power Apps.

Questions 1. What information do I need to provide to the SharePoint web part to render the Power App? 2. How is an app identified as being the current version that users are actively using? 3. Can I add a sample app to a Microsoft Teams channel? 4. Is the Power Apps app available for Android? 5. What would I do to create the illusion of having the app installed locally on the device? 6. True or false: A Power App can be installed on a classic SharePoint page. 7. If I have three versions of an app, that is, 1.0, 2.0, and 3.0 (live), what happens if I restore version 2.0?

122

Publishing and Leveraging in Power Apps

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

5

Exploring Controls In the previous chapters, we looked at Power Apps Studio, how to create canvas apps by using a SharePoint list, and then creating apps from a blank canvas. In this chapter, we will look at Power Apps controls, what they are, how they are used, and some of the ways you can interact with them to develop your app. Controls play a critical role in the development and functionality of your app as they allow users to interact with data or trigger actions. Choosing the right control for the right job is extremely important for the functionality, look, and feel of your app, as it ensures that you’re making the user experience as rich and easy as possible. In this chapter, we will focus on the main control groups. In some cases, such as data controls, we will introduce controls that will be further explored in later chapters once we are familiar with connecting our app to a data source. For premium controls such as GPS and AI Builder, we will wait until we are more comfortable with developing our app as it grows in complexity. In this chapter, we will cover the following topics: •

Control properties

•

Text controls

•

Input controls

•

Data controls

•

Icon controls

•

Lab 4

Exploring Controls

124

In each section, we will learn how these controls work and how we can use them to start adding rich functionality to our app. As we explore the different controls, we will also look at the key properties that we interact with.

Technical requirements To follow along with this chapter, you will need an active Power Apps subscription and to have completed Lab 1, which can be found in Chapter 2, Creating Your First Canvas Power App, where we created a blank canvas app. Let’s start off by looking at the common configuration settings of the controls, which are called properties.

Control properties Controls are key components that are used to build the basic functionality and interactivity of your app. Every control has a multitude of properties associated with it that allow us to define its look, feel, and behavior. Some of the properties are style-related and govern the appearance of the control while it’s being viewed by a user; others are action-related and require the user to interact with the control for them to take effect. All controls share some very basic properties: •

X: This is the horizontal position of the control on your canvas and is expressed as the number of pixels (in terms of distance) from the left side of the app.

•

Y: This is the vertical position of the control on your canvas and is expressed as the number of pixels (in terms of distance) from the top of the app.

•

Width: The width of your control.

•

Height: The height of your control.

•

OnSelect: This action is taken when a user clicks or taps the control. This is set to false by default, which means that no action will be taken.

All of these properties allow you to define either static entries or a formula that calculates the value. In Chapter 6, Exploring Formulas, we will explore how we can use a formula to make our controls more dynamic. However, for the basic concepts, we will use static values. Now that we have looked at properties, let’s take a look at the controls themselves. We will look at what they are and how they’re used and then look at the key properties that apply to them. While text controls are the most common components we’ll use, we will follow with controls that allow you to customize the input experience so that you can take other data types and other input methods into account.

Chapter 5

125

Text controls Text controls are the most common types of control that you will use within your canvas app. They are designed to display textual information, as well as to receive inputs from a user, and provide the mainstay of any app. They are commonly used throughout the web to present and allow interaction with data, so, from a user experience point of view, their behavior is well understood by even the most basic of users. The first text control we will look at is one of the most common controls you will use in an app: a label.

Labels A label is a control that is read-only and allows you to output text to the user but not to collect input. The label text is a string; therefore, it can contain alphanumeric and special characters and can either be directly assigned a value or a formula can be used to generate an output. Labels are one of the most versatile controls because there are a lot of properties that can be configured to achieve the desired effect. This could be something as simple as putting a line of text on a page, as shown in the following screenshot, or displaying a larger block of text that we can scroll through.

Figure 5.1: Label control

Exploring Controls

126

Allow your labels to grow with their content by setting the Auto height property to true.

Labels give you the ability to use the styling buttons that are available from the top menu within Power Apps Studio, allowing you to change the size, color, border, alignment, and more to allow you to achieve the desired effect. Any styling changes take effect on all of the content within the control, so if you make something bold, it applies to all of the text in the label. Typically, labels will be used to introduce another control on a page, or for placing supporting information on the screen, e.g., a title or introduction. Likewise, when a form control is placed onto the screen, the labels are used as headings for that particular field, just like you see on most web forms. However you choose to use them, labels are extremely versatile and will form a large part of the apps that you create.

The prefix that most developers commonly add when naming a label is lbl: for example, lblFirstName.

As well as being able to output text, we can also capture inputs using the Text input control.

Text input Text input controls are your standard way of interacting with your app and allow your users to provide textual input that can then be used with a data source or within a formula. Text input controls are single-line by default, as shown in the following screenshot, but can be expanded so that they become multi-line, which makes them very versatile when we’re building our app:

Chapter 5

127

Figure 5.2: Text input control

Much like a label, text inputs are extremely versatile controls that have a wide range of uses, from storing temporary data to displaying data from a data source. Text boxes allow you to specify the type of input that you are expecting from the user, such as whether the input is textual or numerical. This is a great way of ensuring that the users are providing information in the format that you want. Additionally, text controls in Power Apps share similar functionality to text controls on a web page, where you can configure the text box to receive a secured string, such as a password. This means that any textual input will be obscured so that it can’t be read by someone else looking at the screen.

Restrict the number of characters that your users can put into a text input by setting the Maximum length property.

Exploring Controls

128

To provide a richer user experience with this control, and also an experience that is now commonly experienced in mainstream apps, you can switch on the Clear button property and add Hint text. The Clear button property renders an X when the text box is populated so that you can easily clear any content within it, while Hint text will add some bespoke help text that is automatically cleared when the user begins typing. These two very simple properties allow you to provide a rich user experience for your users and are practices that are now routinely included on websites and apps across the internet.

The prefix that most developers commonly add when naming a label is txt; for example, txtFirstName.

As well as plain text, we also have controls that are able to handle text strings that contain markup, such as HTML.

HTML text The HTML text control is very similar to a standard label where the control acts as an output rather than a direct user input; however, it allows you to define HTML within the text property. This allows you to add additional styling and markup beyond the basic formatting tools that are available through Power Apps Studio. As shown in the following screenshot, you can use standard HTML encoding to add additional styling to specific parts of your text. With the label control, you can only apply styling to the entire control, whereas the HTML text control gives you the flexibility to change the color or boldness of text in the middle of the string, or even apply other HTML formatting.

Chapter 5

129

The key property for this control is the HtmlText property, which as shown below allows you to enter a string with HTML tags:

Figure 5.3: HTML text control

The HTML text control can also be used for drawing Scalable Vector Graphic (SVG) images, which are responsive graphics that are constructed using XML. As well as being able to output text using HTML formatting options, we are also able to have our users enter markup text using the Rich text editor.

Rich text editor The Rich text editor provides a What You See Is What You Get (WYSIWIG) editor for your Power app, which allows your users to provide their own formatting when entering text. The text and effects that are added to this control are output and rendered in the same way that HTML would be rendered in a browser. Let’s draw a parallel here to the way that we work in Microsoft Word, where we can apply formatting to some text in the editor, and we see the effects immediately on the screen.

Exploring Controls

130

As shown in the following screenshot, this control brings the Microsoft Word type editing experience to give you the ability to select what type of formatting you want to use from the toolbar across the top of the control, such as the ability to apply styling, make the text bold, or include bullet lists:

Figure 5.4: Rich text editor control

Pasting content from another source (such as another web page) will retain the source’s formatting. This also applies to content that’s created within Word; any styling will be copied to the Rich text editor control.

The Rich text editor provides perfect control if you’re looking to give your users the ability to provide structure around their input. As an example, if you are using this in a service desk app, then your users could list steps required to replicate the issue using numbered lists. Finally, we have the ability to give our users a more free-form type of textual input with the Pen input control.

Pen input Pen input is a control that allows you to accept non-textual input for a selected area. This type of control provides a free-form tool that can be used for whiteboarding, signatures, or general drawing. Often, I have seen this being used to capture wet signatures on a mobile device, which is where someone actually signs their signature directly onto the screen:

Chapter 5

131

Figure 5.5: The Pen input control showing a signature

The key properties that are used with this type of input are as follows: •

Mode: This defines what the default tool is, whether that is the draw tool or the erase tool.

•

Show controls: This defines whether the toolbox is presented at the bottom of the control. When applying signatures, I turn the controls off, but if I want the users to treat it as a scribble pad, I leave them on.

The output from this control will produce an image that is stored locally as a Binary Large Object (BLOb). We can then pass this content to a data source, or to Power Automate where we can then perform additional actions with it. You can read more on Power Automate in Chapter 18, Power BI and Power Automate. Now that we have looked at the most common type of controls, that is, text-based controls, let’s explore the other controls that we can use to add more functionality to our app.

Input controls So far, we have looked at text-based controls to improve the appearance and functionality of our Power app. Now we will turn our attention to controls that interact with the user by enabling them to respond in certain situations, for example, implementing a button that can submit a user’s name.

Exploring Controls

132

As we will see with multiple choice and Boolean controls, we can extend the functionality of user responses to include selecting from a range of options or answering with a yes or no. Once we really start looking into formulas and components in the next two chapters, we can go into more detail about how to process user inputs. For now, we will introduce the basic controls available to us and how to apply them to our app.

Button Buttons are one of the simplest controls that you can work with; they are designed to be a focal point for a click or a tap and are generally used to instantiate an action. The default styling on a button makes it stand out as a clickable control, as shown in the following screenshot. However, this styling can be changed to suit the look and feel of your page:

Figure 5.6: Button control

While the ability to edit the styling of the button is available, the most important aspect of this control is the OnSelect property. OnSelect allows you to define the behavior of the button using a formula; for example, when a button is clicked, it will save an item. As a result, buttons are used a lot throughout apps, even to the point of interacting with other controls on the screen.

Chapter 5

133

There are numerous other types of interaction we may want within our app. One of them is related to inputting dates.

Date picker The Date picker is a good alternative to a text input if you are asking the user to provide a date. This allows you to ensure that the date is entered in the correct format, and ultimately that the date being provided is valid. The date picker is a calendar that the user can navigate through and click on, rather than having to type the date in themselves, risking human error and making a mistake with the format. While using the date picker, the user can navigate forward and backward one month at a time, and even select the year from a dropdown, reducing the number of taps or clicks needed to find the desired date:

Figure 5.7: Date picker control

The key properties for this control are as follows: •

DefaultDate: The date that’s displayed when the control is rendered.

Exploring Controls

134

•

Format: How you wish the date to be displayed once it’s been entered, which could be long or short formatting, or to force a specific regional format.

•

Language: If you are using the long date format, where the month is displayed textually, the language property will change the date depending on the language that’s selected. If this is left blank, the default behavior is to use the native language of the device.

•

Start Year: This is the earliest year that the user can select using the date picker and will default to 1970. Be aware that if you need to select dates before 1970, then you will need to change this property.

There are times when you will want to restrict what inputs are provided by your users by making them select predefined answers. Let’s class these functionally as multiple-choice controls. There are a number of ways of representing multiple choices within Power Apps.

Presenting multiple choices Often, to maintain the integrity of the data being captured, you will want to present options to your users. This will ensure that the data you’re taking in is correct, in the right format, and unambiguous. Multiple choice controls are best used when you have a defined list of options, or where a text box would allow ambiguous and varied options to be entered. For example, “United Kingdom” could be expressed as “United Kingdom,” “UK,” “Great Britain,” and so on.

Dropdowns The Dropdown control is designed to allow a user to select something from a number of predefined options. The intention is very much to avoid long lists of options being displayed on a screen, thereby collapsing all of the available options into a small amount of screen space. Only when the user interacts with the control by clicking on the chevron will they see the full scrollable list of options.

Dropdown controls will support a maximum of 500 items.

When providing options to Power Apps directly, you must provide them as an array of strings within the Items property, with each option being separated by a comma.

Chapter 5

135

Therefore, if I wanted to supply a list of days of the week, the Items property of the dropdown would look like this: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]

When we begin to use Power Apps with a data source in Chapter 8, Working with Data, then we can use records from a data source to provide our list of options. An example of the Dropdown control in action is shown in the following screenshot:

Figure 5.8: Dropdown list control

The key elements of this control are as follows: •

Items: These are the options that are available to the user. Entries for items can either be manually entered or bound to a data source. If you’re using a data source that contains several columns, then you will simply need to select the column that contains the data you wish to show.

•

Default: This is the default value that is displayed when the control is first rendered and will be the value that’s submitted by the control if the user doesn’t change it. If you leave the default value empty, there will be no default in the control when it is first displayed.

Exploring Controls

136

•

Selected: If you are retrieving data to display in this control, setting the Selected property will ensure that the control defaults to the value for the currently selected item rather than a default value, if one has been provided.

Dropdown boxes don’t really offer the best user experience if you have a lot of options to choose from due to having to scroll up and down to find your selection. In a scenario where we have a lot of options, we should consider a combo box instead.

Combo box A combo box behaves similarly to a dropdown control, in that you can define a list of potential options for a user to select from. There are a number of advantages to using a combo box, particularly for large datasets, as you can provide a search capability within the control. A combo box also provides a mode to allow the user to select multiple items from the options available, making it extremely versatile. For example, if you wanted your user to select a country, expecting the user to scroll up and down a long list detracts from the usability of the app. In this case, we could give them a search capability to more easily find the country, while still allowing users the ability to scroll if that is their preferred method of selection. There are a number of different display templates that can be selected when you’re using a combo box and they can really tailor your user experience. Some of these are as follows: •

Single data value: Provides just a single line of text.

•

Two values: Allows two lines of text in the selection, with one being the option and the other being a subtitle.

•

Two values (person): Allows the same layout as two values, but also allows the use of an image.

There are several key properties that need to be configured when you’re using a combo box: •

Items: The source of data that is going to provide your options, which can either be manual or from a data source, just like our dropdown.

•

DefaultSelectedItems: The option(s) that are selected when the control is rendered for the first time.

•

SelectMultiple: Defines the selection behavior in terms of whether the user can select one or multiple options from the control. There are often requirements to implement restrictions on how many items are selected, for which we would use formulas and validation when we submitted a form containing the control.

Chapter 5

137

•

IsSearchable: Defines whether the user can use the search functionality that’s available for the control.

•

SearchFields: If the user can search, then you need to define how the search will work. The data source is defined within the Items property, so you need to provide this property with a string array of columns that you want to search; for example, ["Column A","Column B"]. Searching takes place across the list using a contains type of query, so for example, if you are searching for United Kingdom, you could enter King and it would return your result.

Figure 5.9: Combo box control

Consider using this control when there are a large number of options that the user can select from to avoid having the user spend large amounts of time scrolling up and down a list.

The dropdown and combo box controls hide all of the available options until the user clicks on the chevron to expand them. Your app may require you to display the options in a more visible way but still allow a controlled set of options to be selected. This can be achieved by using the list box control.

List box A list box is another way of being able to present and select options from a predefined list. The major difference, however, is that because more of the options are shown in a single control, you will take up more real estate on the screen.

Exploring Controls

138

An example of the list box control is shown in the following screenshot:

Figure 5.10: List box control

The key properties associated with this control are as follows: •

Items: The source of the options that are presented in the control, much like the dropdown control.

•

Default: The option that’s selected when the control is rendered.

If we have multiple options available to us but we only want to allow the selection of one, then we could consider using a radio button control.

Radio Radio buttons are very common on web forms and will provide a list of options where only a single item can be selected. Each of the options will be displayed within your app, meaning that it can take up a large amount of real estate.

Chapter 5

139

The key properties for this control are as follows: •

Items: The source of the options that are presented in the control, much like the dropdown control.

•

Default: The default value that’s selected when the control is rendered.

•

Layout: Allows you to define whether the options are listed horizontally or vertically.

The following screenshot shows a radio button control displaying seven options:

Figure 5.11: Radio control

Consider using this control when the number of options is relatively small and when only one option can be selected.

Exploring Controls

140

All of the controls that we have looked at so far have allowed us to use a range of different methods to capture alphanumeric input from the user. Often, in development, you will need to capture Boolean (yes or no) values. Power Apps has some controls that allow us to do this.

Boolean controls There are times when you need to take in a binary response from your users, whether the result is either true or false. Rather than creating our own control to handle this type of input, we can use the check box or toggle controls.

Check box A check box is a very simple control that can either be set to true or false by the user ticking or unticking it. The key properties of this control are as follows: •

Text: The descriptive text that is placed next to the check box.

•

Default: This is either true or false and specifies whether the check box is ticked or not when it is first rendered.

When the check box is rendered onto the screen, it will provide a square box that the user can either tick or untick based on their selection. This is shown in the following screenshot:

Figure 5.12: Check box control placed on the canvas

Chapter 5

141

Consider using this control when the input that’s required from the user is a simple yes or no; for example, do you agree to the terms and conditions?

As an alternative control to a check box, a common control that’s used for yes and no values, especially on mobile apps, is the toggle control.

Toggle Toggle is a graphical improvement on the check box that allows the user to switch control between true and false by moving the handle. This has the same behavior as the check box, but it doesn’t have a text property. Instead, it has FalseText and TrueText properties that change what is displayed next to the control. As well as being able to use the classical controls for capturing user inputs, we can also use some of the more modern controls so that we can collect numerical inputs from a user.

Numerical inputs Unlike text boxes, which allow us to input alphanumeric strings of data, numerical inputs are bound to numerical data types. Correctly using this type of control will ensure that you are supplying the correct data formats to your data source and ensure that any calculations based on your inputs can be executed correctly. Let’s take a look at a couple of input methods that act as alternatives to standard text boxes.

Slider A slider is designed to be an interactive user control whose value will change if we drag its handle. The control can be defined with a minimum and maximum value, which equates to the extremes of the slider, with the user selecting the value by positioning the handle between the two extremes. The slider can be presented either horizontally or vertically. The key properties associated with this control are as follows: •

Minimum: The number that’s associated with the start side of the slider scale.

•

Maximum: The number that’s associated with the end side of the slider scale.

Exploring Controls

142

•

Default: The value where the slider control starts, which must be between the minimum and maximum values.

Figure 5.13: Slider control placed on the canvas

Consider using this control when you require your users to select a numerical value within a distinct range.

Another common way of providing numerical input, especially within modern shopping apps, is by using a rating system, which can be used to capture scores or ratings that can be fed into the system.

Rating A rating is a control that allows a user to select a value between 1 and your maximum value in a graphical way. The key properties of this control are as follows: •

Maximum: The upper limit that your users can select. The highest number that can be defined is 200; however, you should consider the impact on the display if you have so many stars being displayed in one go!

•

Default: The default value that’s selected when the control is rendered.

Chapter 5

143

Figure 5.14: Rating control using stars to collect user input

Consider using this control when you are adding visual richness to your app and need to get a numerical value back from the user when the maximum number that can be chosen is relatively small.

There are times when you will need to be able to use timings to add functionality to your app. This is provided by the timer control.

Timer Timer controls allow you to use periods of time to perform actions within your app. For example, they can be used to determine when something appears or disappears or can be used to interact with other controls when a given amount of time has passed. The key properties associated with this control are as follows: •

OnStart: Definition of what happens when the timer begins by using a formula. For example, when it starts, you could create a formula to turn the text green.

•

OnTimerEnd: Definition of what happens when the timer has completed. For example, if we wanted to move to a different screen at the end of the time, then we could use the Navigate formula to move us on.

Exploring Controls

144

•

Duration: How long the timer will run for in milliseconds.

•

Repeat: Whether a timer will automatically restart upon completion.

•

AutoStart: Whether the timer will start automatically or whether it requires an action to start it.

Consider using this control for timer-style functionality such as a countdown or for creating basic animations within Power Apps.

The ability to create apps quickly is one of the biggest advantages of using Power Apps, and there are components built into the designer that allow you to create more responsive designs. For that, we are going to look at containers.

Containers A container is designed to be a wrapper for a number of other controls, which facilitates the creation of responsive designs based on the size of the container. The biggest time-saver with this control is that you can select the alignment of controls within the container, meaning that you don’t have to manually position them. While the container control is available from the Input menu, using the control explorer on the left side of the page allows you to select different types of containers:

Figure 5.15: Selection of layout container from the control explorer

Chapter 5

145

The idea is that once the controls have been put inside the container, they will then respond to changes in the container’s size, as in the next screenshot:

Figure 5.16: Controls within the container responding to the increased height

There are a number of key properties that can be explored with containers, such as: •

Direction: Determines in which direction the controls are laid out within the container, for example whether the controls appear stacked vertically or appear next to each other horizontally.

•

Justify: Justifies the controls horizontally within the container.

•

Align: Aligns the controls vertically within the container.

•

Horizontal and Vertical Overflow: Dictates the behavior of the controls within the container if the contents spill beyond the horizontal and vertical bounds of the control.

•

Wrap: Tells the container to automatically wrap onto a new line if the controls spill beyond the horizontal bound of the container.

Exploring Controls

146

We can combine all of the controls that we have previously looked at and use them to output content from a data source.

Data controls The following set of controls all works with data sources to clearly present information to the user, adding a new dimension to the functionality that we have looked at so far. This can range from a form that the user can interact with to a chart that only takes a glance to view large quantities of data. We will return to this topic in more detail later in this book, so for now it is enough to briefly introduce the options that we have available to us. We will begin by looking at customizable galleries as a way of controlling the appearance of our app.

Gallery controls Gallery controls are designed to allow the repetition of controls to represent rows of data, for example, when displaying data from a data source. Galleries can be used to display multiple types of data using various controls to build up a feature-rich display within your app. Changes to the layout are made within the gallery template, which is the first item within the gallery. Any changes that you make within the template are automatically reflected through each repeating section, which means that you don’t have to manually update every single row. Gallery controls allow you to use three different types of layout within your app and allow you to select from either a pre-defined gallery that controls an image control and some text controls for you to modify, or allow you to create your own from blank: •

Vertical: Each row of data is displayed vertically down the canvas.

•

Horizontal: Each row of data is displayed horizontally across the canvas.

•

Flexible height: Each row of data is displayed vertically down the page. Here, the row’s height will grow with the content:

Figure 5.17: The display options that are available when inserting a gallery

Chapter 5

147

Each type of gallery style has the option to auto-generate its content based on the data field that’s selected. For example, if my data source is textual, then it will automatically place a text control in the gallery. Galleries can be connected to a number of different data sources, both external to your app, but also internal, such as when connecting to a collection. When we are working with external data sources, we use connectors to read data into the gallery and display it. We will talk about connectors in more detail in Chapter 9, Introducing Connectors. As well as being able to select the display orientation of a gallery, you can also select a number of predefined layouts, ranging from blank layouts to layouts containing images. These layout templates are usually a good place to start from when you’re creating your apps and they can then be customized so that you can create your desired layout:

Figure 5.18: The layout types that can be applied to a gallery

We will look at the gallery controls in more detail in Chapter 8, Working with Data, when we start looking at how we can start to display the data stored within our data sources using the different controls at our disposal. As well as providing outputs for our data, within our apps, we also need to be able to take in data and submit it back from a data source. The simplest way of doing this is by using a forms control.

Exploring Controls

148

Forms Forms have the ability to be connected directly to a data source. Depending on that data source, the form may be able to submit new records or update new records directly. They are very quick and easy controls to place into your app as they allow you to select which fields you want to interact with, and the form will render itself.

Figure 5.19: The Forms menu displaying the types of forms

We will discover more about our forms in Chapter 8, Working with Data.

Media Media controls give us the ability to capture and leverage rich media within our app, allowing us to utilize controls such as images and video, and even take streaming video from the Microsoft Stream service.

Figure 5.20: The Media control menu displaying some of the key controls

Chapter 5

149

We will investigate some controls from the Media control menu, specifically Image and Barcode scanner, later in Chapter 11, Working with Images and Barcodes.

Charts When we work with data, looking at rows of data doesn’t always communicate the results or the intent in the correct way to the user. Visualization of this data is often much more effective. Think about how we use charts within Microsoft Excel, where we can take potentially thousands of rows of data and reduce them into a graphic. Power Apps works in exactly the same way, allowing you to represent the data in your app in a graphical way by using some of the basic built-in charts. Due to the close working nature of the other tools in the Power Platform, we also have the ability to leverage tiles created in Power BI:

Figure 5.21: Opening the Charts menu

We will look more deeply at charts in Chapter 16, Data Visualization. For now, we will turn our attention away from text and data controls to look at how we can simplify the interface we have created. To do this, we will use icon controls.

Exploring Controls

150

Icon controls Icons are one of the key ways in which you can add graphical and visual depth to your apps. The Icons menu contains a number of icons, as well as geometric shapes that can be laid on top of each other to create effects. There are a large number of icons, many of which will satisfy the graphical requirements of your app without you having to develop your own images. Within Power Apps, icons are used to provide various elements of functionality, for example, to sort, search, apply filters, or to open a menu.

Figure 5.22: A subset of icons that are available within Power Apps

Each of the icons is effectively a vector image, which means you can make them as large or as small as you like without any distortion taking place. This also means that you can apply your own background and foreground colors to give the icon the color effect that you desire.

Icons have additional properties, such as rotation, which give you more control over how your icon appears within your app.

The key properties of this control are as follows: •

OnSelect: This will allow you to define a formula that allows your icons to interact with other parts of the app.

•

Fill: This will change the background color of the icon.

Chapter 5

151

There are also a number of geometric shapes that are available for you to use within your apps. These shapes allow you to be creative with their use in order to build visual effects, or separate out different groups of controls:

Figure 5.23: Shapes available in the Icons menu

The most common geometric shape used within Power Apps is the rectangle, which is commonly used for headers or creating colored background sections. It is also used to create lines, since, unlike Microsoft Office, we don’t have the ability to draw a simple line. Instead, we use rectangles and change the height to a very small number. We can take multiple shapes and combine them together to try and create the desired effect, for example, taking a rectangle and a circle, and overlaying them together to create a bullet shape. Once you have created your required shape, you can multiple-select by holding down the Shift key, left-clicking the controls, and then grouping them together.

Exploring Controls

152

We will be looking at ways in which we can reuse these shapes either by using control groups or components in Chapter 7, Exploring Reusable Controls.

Figure 5.24: Combining multiple shapes together to create desired effects

Introducing icons and shapes really helps to break up what could be a data- and text-heavy app, which doesn’t always provide the greatest interface. We will explore more of the icons and shapes as we progress through the book. For now, we have looked at the basic controls, and we will build upon our knowledge by applying what we have learned in this chapter to our app.

Lab 4 In this lab, we are going to build on the blank app we created in Lab 1 by creating a welcome screen for our app. Begin by opening the app in Power Apps Studio.

Activity 1: Building basic branding The first thing we are going to do is build a basic look and feel for our app by placing some shapes onto the canvas. To begin with, we will create a header.

Chapter 5

153

For this, we will insert a Rectangle, which will act as the header background. Follow these steps to do so: 1. Open the Groceries Phone App that we created in Lab 1. 2. Open the Insert menu. 3. From the Icons menu, select Rectangle:

Figure 5.25: Inserting a Rectangle

4. When the rectangle appears on the canvas, drag it to the top-left corner or change the X and Y properties to 0 within the property pane on the right of the screen:

Figure 5.26: Moving our rectangle to the top-left corner

Exploring Controls

154

5. Use the right handle to drag the width of the rectangle until it is the full width of the canvas:

Figure 5.27: Making the rectangle fill the width of the canvas

6. In order to make our controls easily recognizable, we will also rename our screen and control. Select the screen from the tree on the left side of the screen:

Figure 5.28: Selecting our screen from the Tree view

7. In the Properties bar on the right side of the screen, click on Screen1, and change the name to Home:

Chapter 5

155

Figure 5.29: Changing the name of our screen

8. Perform the same action for the rectangle. With the rectangle selected, click on Rectangle1 in the Properties bar on the right side of the screen:

Figure 5.30: Examining our rectangle’s properties

9. Rename the rectangle rectHeaderBG_Home. Later, if we need to interact with this bar, we will be able to identify the control by typing rect, and also identify the screen it belongs to.

Exploring Controls

156

Now, we need to place a Hamburger menu on the screen, which will serve as our navigation menu. Let’s get started: 1. Open the Insert menu. 2. From the Icons menu, select Hamburger menu:

Figure 5.31: Adding a Hamburger menu

1. When the icon appears on the screen, change the X property to 20 and the Y property to 15 so that it will be positioned at a good distance from both the left and top edges of the app:

Figure 5.32: Adjusting the position of the Hamburger menu

Chapter 5

157

2. In the Properties pane, change the color to white to change the color of the text:

Figure 5.33: Changing the color of the hamburger menu

This will give us a basic header. We will be further developing this later in the book:

Figure 5.34: Our app’s header

Now that we have created the header, we can add more controls to the canvas and start adding content to the app.

Activity 2: Adding the name of the app We will use this welcome page as an entry point for our users, so we will add some basic controls to welcome them. We will start by adding the name of the app to the header to help with identification. First, we need to insert a label for the app title. Let’s get started: 1. Open the Insert menu. 2. From the menu, select Label.

Exploring Controls

158

3. When the label appears, set the Text property, using either the formula bar or Properties pane, to Groceries Management:

Figure 5.35: Adding a label to the header

4. Set the X property to 140, the Y property to 15, and the Width to 500:

Figure 5:36: Setting the X and Y properties of the label

5. With your label still selected, click the Home menu. 6. Increase the font size to 28, make it Bold, right-align the text, and change the color to white:

Chapter 5

159

Now, we have created our header bar, including the controls that will eventually launch our menu. We can now preview the app by clicking the play button in the top-right corner, as well as Save and Publish so we can test the app on a mobile device. Now, we have the first screen of an app that we will add further functionality to as we progress through this book. In the next lab, we will start to add some functionality to our app using formulas.

Summary In this chapter, we looked at the key controls in Power Apps. There are a large number of controls available. These range from basic web form controls such as labels, text boxes, and buttons to more complex types such as the Pen input control, which allows users to draw directly into your app. Using the right control at the right time is paramount to the success and adoption of your app, as you want to make your app as easy as possible to use. Consideration should always be given to the amount of real estate that’s being used on the screen and, where possible, large controls should be avoided. All of our controls share some basic properties that are normally related to positioning, for example, X, Y, height, width, and so on. However, most controls have properties associated with them that are specific to them. Controls provide a large number of icons that can be used to create visual effects and to stylize your app in the way that you want. These icons include a number of geometric shapes that can be layered on top of one another in order to make your app visually appealing to the end user. Through the lab, we started to add some of the basic controls to our app to help us become more familiar with how we can interact with the insert menus and how we can position and modify the look of our controls to achieve the desired effect. In the next chapter. we’ll see how we can use functions inside of formulas to significantly advance the functionality we have started to explore in Power Apps.

Questions 1. Which control allows you to capture either a number or a string of text? 2. What is the maximum value for the rating control? 3. Why would you use a dropdown control over a list box control?

Exploring Controls

160

4. What is the main difference between a combo box and a dropdown? 5. What can I use to build up visual effects within my app? 6. What two values can a checkbox take? 7. Which control should I use to capture a signature from a user?

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

6

Exploring Formulas In previous chapters, we looked at how to build the skeleton of our app by using screens with controls to build the user interface. In this chapter, we will begin to look at how we can use functions within Power Apps to start building up functionality within our app.

While there is a multitude of functions that exist within Power Apps, this chapter will focus on the more commonly used functions and look at how they can be used to create formulas. Many of the formulas will be illustrated using examples. We will also look at variables as a way of storing data that can be used with formulas. The following topics will be covered in this chapter: •

Text functions and introducing the formula bar

•

Basic text interactions

•

Numerical functions

•

Working with dates

•

Conditional logic and using If and Switch statements

•

Storing data with variables

•

Lab 5

By the end of this chapter, you will have an understanding of how to write formulas and utilize variables to add functionality to your app. You will also have had an introduction to some of the key formulas that will aid you while creating your own apps.

Exploring Formulas

162

Technical requirements To follow along with this chapter, you will need an active Power Apps subscription and you must have completed Lab 1 from Chapter 2, Creating Your First Canvas Power App, where we created a blank canvas app. Note that a Microsoft 365 E3 license covers the basic features of Power Apps.

Introducing functions and formulas When we create functionality within our apps, we do so using formulas. They can be likened to the formulas that we use in Excel, which are designed to drive behavior or populate content within cells. In Power Apps, we can use our formulas to drive behavior or populate content within our controls. Just like in Excel, formulas can combine a number of different functions together to achieve the desired effect. Functions are pre-defined interactions with which we can provide data so that we get data returned to us. We can then use these outputs to define if something is visible, or to define the text that we’re going to display. Our functions sometimes have arguments that can be supplied to them; for example, if we are going to format a number, we can pass in a number as an argument. The function will then process the data that has been input and will return an output that we can use to display on the screen. When we work with the outputs of a function, we can bring back a single piece of data, like a formatted number as in the previous example. But we could also have a record returned, otherwise known as an object if you are familiar with pro-code development. When we have a record returned, we have multiple pieces of data returned, and so we can access those using the period (.) character. When going through Power Apps training courses, I personally always go through some of the key rules regarding formulas, as these are the small nuances that tend to catch people out: 1. Always be aware of the control property where you are writing your formula. For example, if you have the Fill property selected for a control, which is going to change the color of something, then the formula will be expected to return a color data type. 2. When you are working with strings, enclose them using double quotes, " ". 3. When you are referencing other controls, if they have a space in their name, they will be enclosed in single quotes, ''. If there are no spaces in the control name, then they do not need them.

Chapter 6

163

4. If you are utilizing multiple functions within your formula, then you will need to separate them using an end of formula character. Generally, this is a semi-colon, ;. However, there are a number of regional differences, for example, Germany uses an & instead. Before we delve into the world of functions and really start to dive into these concepts a little more, note that you — as a Power Apps developer — are not expected to remember all of the functions that can be combined to create a formula. You have the ability to refer to the Formula reference for Power Apps page provided by Microsoft: https://docs.microsoft.com/en-us/powerapps/ maker/canvas-apps/formula-reference, or you can use the features that the studio has built in to help you.

The function browser Power Apps Studio has a dropdown menu next to the formula bar, as shown in Figure 6.1: The formula selector, which allows you to browse and select which function you would like to use. Each function is categorized by type, which means that you can select the correct function group based on what you’re trying to do. For example, if we wanted to concatenate two string values, we could select Text from the dropdown menu and then select Concatenate from the browser:

Figure 6.1: The formula selector

Exploring Formulas

164

There are two actions that I can trigger when interacting with the function browser. If I single-click on a function, it will provide a basic description at the bottom of the menu and supply a hyperlink to tell me more about that particular function. If I double-click the function instead, it will be placed into my formula bar so that I can then use it.

Using the formula bar The formula bar is where you will build your formulas by combining one or several functions together to create functionality. When typing into this area, you will see an amount of predictive text appearing (or IntelliSense, if you’re used to development environments), as in Figure 6.2: Example of a formula triggering IntelliSense. Formulas can be used in any property to help to set values, whether that is by calling a function, calling data from a data source, or interacting with another control on the screen:

Figure 6.2: Example of a formula triggering IntelliSense

Formulas with Power Apps feel very much like writing formulas within Excel since there are many of the same pitfalls. When writing formulas, keep in mind the following things: •

All functions and objects are case-sensitive.

•

Consider some of the language nuances that apply; for example, French separates characters with commas. In these situations, consider changing commas in your formulas into semi-colons. Alternatively, you can change the studio language of Power Apps in the settings.

Chapter 6

165

If you wish to override the browser language and choose a different one, you can go to the Settings cog, select Power Apps Settings, and choose a new language.

A basic formula will always consist of a function name and potentially several arguments that need to be provided. A basic example is navigation, where the Navigate function can be used. When you type in Navigate, it will then prompt you to provide a target and a visual transition: Navigate(Welcome,ScreenTransition.Cover)

If there are errors in your formula, the formula will be underlined with a red line similar to spelling mistakes in Microsoft Word. There will also be a tooltip, as can be seen in Figure 6.3: Formula bar showing a tooltip on an error, which will give you some guidance as to what the issue might be:

Figure 6.3: Formula bar showing a tooltip on an error

As we start to create quite complex formulas, the standard one-line display for the formula bar just isn’t enough. We can, therefore, expand the formula bar, so that it changes from being a single-line text box to a multi-line text area. This is achieved by clicking on the down arrow to the right of the formula bar as seen in Figure 6.4 below.

Figure 6.4: Expand the formula bar button

When the area is expanded, this arrow will invert and will then allow you to collapse the formula bar back down again. With the full text area open, you can then start to improve the readability of your formula. You can auto-format your formulas so that they are not always on the same line by using the Format text button.

Exploring Formulas

166

This is designed purely to improve the readability of your formula by applying carriage returns and indents:

Figure 6.5: Formatting options

Additionally, you can add your own carriage returns by pressing the Enter key. It’s good practice to add comments to your formulas. This can help others to develop your app and understand the functionality without reading each formula. The notation used is identical to that of C#, which uses two forward slashes (//) at the start of the line to denote a comment. Comments are easily identifiable as the text turns green. If you wish to have multi-line comments without having to put your slashes on each line, then you can denote the start of the comment with a /* and the end of a comment with a */. If you wish to continue to add formulas after a comment, ensure that you start a new line. Now that we have spent some time introducing and becoming familiar with the formula bar, we can begin to look at some of the key formulas that you will use time and again throughout your app development journey.

Basic interactions Formulas can be used to add functionality to any property of the controls you place on the screen, which means that you can start to build up a rich dynamic interface for your users. As well as setting properties, you can also refer to them by using the name and the property name of a control; for example, if I want to get the X position of a label, I can use the following code: Label1.X

Chapter 6

167

When using formulas with controls, you can easily select the parent control by using the Parent keyword. All controls have a parent, which, most of the time, will be the screen where the component is placed. This becomes more apparent when you start using form controls and other nested components. If I had a label on the screen and wanted to dynamically set it to the same width as the screen, I could use the following in the label Width property: Parent.Width

The result of using Parent.Width is that the control will automatically adopt the width of the parent. Therefore, if the parent changes size, so will the control.

A control will always have a parent, whether it is a screen or a gallery. Parents will always look one level up in the control hierarchy.

There are times when you will need to reference the control itself; for example, if we had a label whose color we wanted to change based on the value that it was displaying, you could get the value by using Self.Text. Now that we are starting to use formulas, we need to start working with data and manipulating it so that we can provide the correct data in the required format regardless of whether it’s textual, numeric, or another data type.

Interacting with text The type of data that you will be working with the most is text, also commonly known as string data. Textual data can take the format of a combination of alphanumeric characters. There are several basic functions that we can use to work with textual data. We will cover replacing and substituting text, searching and matching text, and regular expressions. First of all, if we wish to cast a value (convert numbers, dates, and time to text), then we can use the Text function: Text()

Exploring Formulas

168

If you are using an input into your control that contains tags, for example, HTML or XML, then you may wish to use PlainText (shown in Figure 6.6: Demonstration of HTML being removed from a string) to strip out all of the tags so that you are then able to work with a plaintext value:

Figure 6.6: Demonstration of HTML being removed from a string

Once you are working with a string of text, especially if you’ve had to convert it from another data type, you can then start to use the other functions that are available to you. The most common actions that you will tend to use with strings are those that provide the ability to isolate portions of them. When displaying text on the screen, there are several functions that you may wish to use to improve the readability of your text or to perform some last-minute transformation. Commonly, you may replace text or ensure that it utilizes the correct case when shown on the screen. Now, let’s look at available text functions.

Replace and Substitute If I want to replace elements of a string, then two functions are available to me through Power Apps. The first is Replace, which differs slightly from the Replace functions that you may be familiar with from other programming languages. When you use Replace, you need to provide a numerical start point for the replacement and the numerical length of the characters you are going to replace.

Chapter 6

169

In the following example, we are going to take the common test string The quick brown fox jumps over the lazy dog, and we’re going to replace dog with cat using the replace formula.

To do this, we need to count the number of characters from the beginning of the string to the start of what we want to replace, which will be D. In the example, that would be 41 characters from the start. We then need to declare the number of characters that we are going to replace, which in this example is 3. This will give me an output of The quick brown fox jumps over the lazy cat: Replace("The quick brown fox jumps over the lazy dog",41,3,"cat")

In Power Apps Studio, it will look as follows:

Figure 6.7: Example of Replace being used in a formula

The second method is to use Substitute, which works much more like the Replace functionality in most pro-code languages. You provide the input string, the string that you want to match and replace, and then the text that you wish to be displayed instead. Again, we will take the test string The quick brown fox jumps over the lazy dog and substitute dog with cat: Substitute("The quick brown fox jumps over the lazy dog","dog","cat")

While Substitute is the simpler function to use, it is also the least accurate as it will replace all instances of the string that are found. Therefore, if dog occurs more than once, it will be replaced by cat every time. In this example, we have explicitly told the formula which part of the string we want to transform. Often, however, we don’t have the luxury of having a string start and end in exactly the same place every time. Therefore, we need to be able to dynamically isolate a string by using searching and matching.

Exploring Formulas

170

Searching and matching When we are working with strings, it is common for us to search for specific elements or occurrences of characters. Power Apps provides us with several ways that we can search within a string of text. Some functions will return a character position whereas others will return a Boolean value if the string has been found. Using the Find function will allow us to search for a specific string of text within another string. This will return the numeric value of the index where the matched string is found. In our previous example, where we used a substring formula, we needed to manually put in the character number for the start of dog; however, we are now going to search for it and find it using a formula. The following formula will search for dog in The quick brown fox jumps over the lazy dog and will return a value of 41. The 41st character in the string is the first character of dog, as can be seen in Figure 6.8: The Find function being used to locate a word. Find("dog","The quick brown fox jumps over the lazy dog")

Figure 6.8: The Find function being used to locate a word

The Find function can be combined with the Replace function from the previous section to dynamically find the start index rather than you having to type it in yourself:

Chapter 6

171

Replace("The quick brown fox jumps over the lazy dog", Find("dog","The quick brown fox jumps over the lazy dog"), 3, "cat")

In addition to Find, you can also use StartsWith and EndsWith. Both examine a string of text to see whether the match occurs at the beginning or end. This function will simply return a true or false value based on whether it finds a match or not. The same formula is then demonstrated, in Power Apps, in Figure 6.8: Screenshot of the StartsWith function being used: StartsWith("The quick brown fox jumps over the lazy dog","The") EndsWith("The quick brown fox jumps over the lazy dog","dog")

Figure 6.9: Screenshot of the StartsWith function being used

Unlike other functions, StartsWith and EndsWith are not case-sensitive when performing a match.

Ideally, StartsWith and EndsWith would be used within conditional logic, which we will be exploring later in this chapter. Based on whether we return true or false to one of our checks, we could then perform different logic on the string. For example, if we detect that it ends with dog, then we will leave it, otherwise we’ll change it to have dog on the end of the string. So far, we have been able to identify and interact with strings by using known text. But there are often times, especially in validation, where we need to use data patterns.

Exploring Formulas

172

Regular expressions If the built-in methods of matching within a string are not advanced enough, we can use more in-depth methods of matching such as Regular Expressions (RegEx), which allow us to match based on specific data patterns such as a phone number or an email address. Regular expresssions are commonly used throughout development to test or to identify patterns within strings rather than looking for specific matches. Regular expressions are always considered to be a bit of a dark art, with some developers loving them and others hating them. They can have a steep learning curve to begin with, but once you are used to them, they become an extremely important part of your toolkit. Luckily, there are many resources on the web that can assist you in writing your own or that provide pre-built expressions. Once you have written your regular expression, you can use it within your formula by using the IsMatch function. IsMatch will take in the string that you’re looking to match and the regular expression that it’s going to use to validate the pattern, and then return a Boolean result. Often, I have used this function to validate the input of fields such as postcodes or email addresses. If we take email as an example, a basic regular expression would look like this: ^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$

The string is broken down into constituent patterns, for example, A-Z matches a character in the range of A to Z. Below are a few other common types of regular expression. Don’t worry if you can’t completely understand them; all we need is to see how they work so we can use them in an IsMatch function: ^\d{5}$ = 5 - integer ZIP code

•

\d{4}-?\d{4}-?\d{4}-?\d{4} = 16-digit credit card number

((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4} = US Phone number – for example, (123) 456-7890

As you might start to see in the above examples, we can use regular expressions to test whether a string is in the correct format. Let’s try applying this to an email address: IsMatch("[email protected]","^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$")

As the string that we are checking matches the format of an email address, the formula will return true:

Chapter 6

173

Figure 6.10: Using regular expressions to validate a string

A good source of pre-built regular expressions can be found at http://www.regexlib. com/. You can also learn more about and test expressions at https://regexr.com/.

As well as being able to put in our own regular expressions, Power Apps provides a number of built-in patterns that we can use. For example, there is a built-in pattern for email: IsMatch("[email protected]", Match.Email)

For an up-to-date list of ismatch patterns, you can refer to the Microsoft Docs site: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/functionismatch#predefined-patterns

Much of what we do in app development starts with transforming data to the correct format. This should always be taken into consideration before trying to write formulas, so you understand the data that is being retrieved and how you need to manipulate it. It is just as important to be able to interact with numbers in the same way.

Using numbers The second most common type of data that you will be working with in Power Apps is numerical data. Just like text, there are numerous mathematical functions that we can call upon within our apps, but first of all, we need to be able to cast output to be a number.

Exploring Formulas

174

There are times when a number may be pushed into the app as a string "1" or where we need to explicitly tell the app that we are working with a number. The basic function to convert a string to a number is the Value function, where we can provide it with a string, and Power Apps will then treat the value as a number. So for instance, Value("1") will convert the string value of 1 to a number. Power Apps also supports basic mathematical operators: •

+ (add)

• - (subtract) • * (multiply) •

/ (divide)

Mathematical formulas can be built from either static numbers or by using inputs from other controls within the app. If, for example, we wanted to determine the product of two text box controls that we have within an app, we could build a formula that references them and adds the values together by simply selecting the control txtValue1 and the property .Text and then adding the property to txtValue2.Text: txtValue1.Text + txtValue2.Text

Figure 6.11: Performing addition within a formula

Quite often when doing math, particularly when we are using division, we may not always have a rounded number to work with. Therefore, we can use the Rounding function to transform the value.

Rounding There will be many times when a value is returned with a decimal value but the behavior that you wish your app to display is a rounded value.

Chapter 6

175

As an example, I have created an app in Power Apps for recording mileage requests, where the exact mileage is calculated and then rounded down to the nearest whole mile. So 93.4 miles would become 93, in line with company policy. Below are three functions that will allow you to round your value in various ways.

Round Round is quite a generic function that will simply round a number up or down depending on what

it is closest to. You will need to provide the function with a number and the number of decimal points that you want it to display: Round(68.5,0)

As an example, I am going to round to the closest integer; therefore, I will provide the number of decimal places set to 0. In this scenario, if the value were 68.2, the displayed value would be 68. If the value were 68.5, the displayed value would be 69.

RoundUp and RoundDown RoundUp works in a very similar way to Round, in that you can provide it with a value and the

number of decimal points that you wish to display. However, it will always round up to the higher value regardless of whether it’s in the lower half of the value. For example, 68.2 will be rounded up to 69, as shown in Figure 6.12: Formula being used to demonstrate rounding. RoundUp(68.2,0)

Figure 6.12: Formula being used to demonstrate rounding RoundDown is the opposite and will simply return the lower value instead: RoundDown(68.2,0)

Exploring Formulas

176

Here, 68.2 will be rounded down to 68. There will be times when more complicated mathematical functions will be required; therefore, there are several other numerical functions that should be explored to meet all levels of complexity.

Other numerical functions Depending on the functionality you require for your app, there are many other numerical functions to explore that you are less likely to come across while learning the basics of Power Apps. Such examples include the following: •

Abs: The absolute positive value of a number. For example, Abs(-20) will result in 20, as

shown in Figure 6.13: Demonstrating the absolute function. •

Power: The value of a number raised to a specific power; for example, Power(10,3) will

equate 10 x 10 x 10, which equals 1,000. •

Sqrt: The square root of a value; for example, Sqrt(169) will return 13.

Figure 6.13: Demonstrating the absolute function

As well as arithmetical type functions, Power Apps also has several functions based on trigonometry. The functions associated with this type of mathematics are as follows: •

Cos (cosine) / Acos (arc-cosine)

•

Cot (cotangent) / Acot (arc-cotangent)

•

Sin (sine) / Asin (arc-sine)

•

Tan (tangent) / Atan (arc-tangent)

Chapter 6

177

The inputs for these functions are values representing the number of radians of an angle; the result of the calculation is returned. Two functions will convert values between degrees and radians: •

Degrees: Accepts several radians to display, which will then be converted into degrees

•

Radians: Accepts several degrees to display as radians; for example, 180 degrees will be converted into 3.14159265 radians

Now that we have gone over the more complicated numerical operations available in Power Apps, we can see there is a wide range of formulas for text and numbers that we can use. We will continue to look at how we can improve app functionality with another common use of formulas, dates.

Working with dates Power Apps provides many functions to help us with dates in several different ways. The most basic functions start with how to actually get the current date or date-time. The date or time is displayed when the function is called. So, if you use either the Now or Today functions on a screen deep within your app, you won’t get the date-time stamp until the user navigates to that screen. The first function is Now(), which will return the current date and time. This function, unlike most we have already seen in this chapter, has an empty argument list; therefore, you just need to call the function to get the result: Now()

This function will return a value that is formatted in the ShortDateTime24 format. We will explore date formatting later in this section:

Figure 6.14: Getting the current date and time

Exploring Formulas

178

The second function, Today, will simply return the current date in ShortDate format: Today()

Again, there are no arguments related to this function. Let’s look at how to format dates.

Formatting dates When you are working with dates and times, they may not always be in the format that you want, especially if you’ve used the Today or Now functions, which only return short formats. Just like if you work with dates in other development languages, there are several predefined formats that you can work with. The thing to remember is that formatted dates are treated as strings, so we, first of all, need to use the Text function, which we saw earlier: Text(Now(), DateTimeFormat.LongDate)

Using the preceding example, if today’s date is 03/03/2022, the result would be 03 March 2022. As well as selecting date formats, you can also provide a locale to the format so that it is representative of a region. This takes the form of standard ISO codes that you can find online; for example, the British way of formatting a date would be associated with the en-GB locale: Text(Now(), DateTimeFormat.ShortDate, "en-GB")

The locale code typically takes the format of the ISO639 language code (above, en) and the ISO639 country code (above, GB). A good resource for these can be found in a CSV here: https://gist. github.com/mlconnor/1887156

There are also more flexible ways in which you can format dates if you don’t wish to use the built-in formatting. You can also specify your own date-time formats; for example, if you wish to display the shortened day name along with the day and month, as shown in Figure 6.15: Using date formatting to display specific parts of the date-time string, you could supply the following format to the function: Text(Now(),"ddd dd mm")

Alternative strings can be found at https://docs.microsoft.com/en-us/powerapps/maker/ canvas-apps/functions/function-text#date-and-time-placeholders. Here are some basic examples: •

dddd: Full name of the day, for example, Monday

•

ddd: Short name of the day, for example, Mon

Chapter 6

179

•

mm: If this is the first instance of mm, it will display the short month

•

mmm: Full name of the month, for example, May

•

yy: Short year

•

yyyy: Long year

•

hh: Hours

•

mm: If this is the second instance of mm, it will display the minutes of the time

•

ss: Seconds

Figure 6.15: Using date formatting to display specific parts of the date-time string

If you wish to display just the minutes, you won’t be able to use the format string we used in the preceding as the first instance of mm will only display the month. In this case, consider using the Minute function. For a full list of codes, you can refer to the Microsoft docs site: https://docs. microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function -text#date-and-time-placeholders

Since we know how to format dates, let’s check how to calculate them.

Calculating dates As well as just being able to display dates, we are also able to do some basic calculations on them. This is especially useful if you’re trying to display projected dates or if you’re trying to illustrate how much time has elapsed.

Exploring Formulas

180

The first function we will look at here is how to calculate the difference between two dates using the DateDiff function. DateDiff takes several arguments to define how it’s going to behave, the obvious ones being two dates, the start date and then the end date, but also the unit of time that is going to be used as the output. So, if I want to calculate how many days are left in the current year, I can use the following: DateDiff(Now(),Date(Year(Now()), 12, 31),"Days")

The second function is DateAdd, which will calculate a date based on a numerical difference. The reason that I’ve not specifically said that it will calculate a date in the future is that, if you supply the function with a negative figure, it will return a date in the past. You need to provide the function with three arguments: the start date, a value for the time that you wish to add, and the unit of time. In my first example, the returned value will be 10 days in the future: DateAdd(Today(),10,Days)

Conversely, in my second example, demonstrated in Figure 6.16: Calculating 10 days in the past, the returned value will be 10 days in the past: DateAdd(Today(),-10,Days)

Figure 6.16: Calculating 10 days in the past

So, now that we have interacted with dates, we can change elements on the screen based on the date. Whether it is hiding and showing information based on a date calculation or changing colors, we can start to add some depth to the app by using these calculations.

Chapter 6

181

As we start to build out our formulas, we will commonly need to branch our logic to handle different outcomes based on a value. This type of logic is known as a condition.

Using conditions Conditions are ways of carrying out a calculation to provide a true or false outcome. They are used to provide branches in logic, so if one condition is met, then action A will ensue. If not, then something else will happen.

If The most common and useful condition is the If function, which takes in three arguments: •

The test

•

What to do if the test returns true

•

What to do if the test returns false

In the following example, you will see that we can also combine the outputs of other functions into our condition to return a different output: If(Text(Today(),"dddd") = "Saturday","Weekend :)","Weekday :(")

Figure 6.17: An example of an If function being used to change the output of a label

There will be occasions where your condition will depend on multiple inputs being compared to provide the evaluation. Multiple conditions will always be either AND or OR in nature and can be defined using this syntax: • •

AND / && OR / ||

Exploring Formulas

182

In my first example, I only returned Saturday as a day on the weekend whereas Sunday should also be part of the weekend. Therefore, I will provide two evaluations and separate them with an Or operator. Alternatively, you can use the more programmatic notation for Or, which is ||: If(Text(Today(),"dddd") = "Saturday" Or Text(Today(),"dddd") = "Sunday","Weekend :)","Weekday :(")

The preceding example illustrates that all conditions that are used in the If statement should be able to resolve to either true or false. While you can combine multiple conditions together, the overall result will only ever be either true or false. There will be times, however, when there are potentially several outcomes that you need to handle. It may be that you need to have an If statement inside another If statement; however, that can quickly become difficult to read. Personally, if I’m looking at multiple If statements, I immediately start looking at whether I can use a Switch statement.

Switch If there are multiple outputs from a condition, then you may wish to use a Switch statement rather than combining multiple If statements. A Switch statement allows you to declare multiple condition outcomes and carry out additional logic for each outcome. Again, from a personal perspective, one of the things I love about the Switch statement is that it has a default case, which can contain the logic to run if none of the other conditions are met. Using the days of the week as an example, we could use a Switch statement where we can push out different messages based on whether it is a weekend, Friday, or any other day. Below, we will assign weekdays the default message: Switch( Text(Today(),"dddd"), // The input "Friday","Almost the weekend!", // Condition 1 "Saturday","The Weekend!", // Condition 2 "Sunday","The weekend still!", // Condition 3 "Weekday" // Default value )

Chapter 6

183

Figure 6.18: A Switch statement demonstrating several different logic paths

By now, we have built up a good idea of how we can start to build our logic by using text transformations, mathematical calculations, and even how we can branch our logic by using If and Switch. We have even started to see how we can reference our controls within our formulas. However, there are times when we need to temporarily store data within the memory of the app. For that, we use variables.

Variables Variables are a fundamental part of any development approach, regardless of whether you are using Power Apps or you are developing using a programming language. They are used to store temporary copies of data so that they can be consumed by other areas of your app. All variables are defined by the boundaries from which they can be accessed; that is, we can create variables that can only be accessed within a single screen or that can be accessed throughout the app. This is known as the scope of the variable.

Global variables Global variables are scoped so that they can be accessed from anywhere within your app. Global variables are extremely versatile as you can store any type of data within them – that is, you can store tables of data as well as simple strings and numbers. We use global variables where we want to be able to store the data once but potentially use it multiple times throughout our app. They could be used to store app-level data when the app first loads, or could even be used to store user input in memory for us to use with other formulas.

Exploring Formulas

184

To define a global variable, we use the Set function and provide it with the variable name and value. In the following example, I will create a global variable called gblLoadTime and assign it the current date and time: Set(gblLoadTime, Now())

Once the variable has been created, the value will persist until the value is overwritten or the app is closed down. We can refer to the variable within our formulas by simply typing the variable name; we don’t need to use a function to retrieve the value.

When naming global variables, consider prefixing them with gbl, for example, gblMyVariable, so that you can easily identify that they are global.

Context variables Context variables are those that are scoped to a screen rather than being globally available throughout the app and therefore are often referred to as being local variables. This does not mean that other screens are unable to use the variable as it can be passed in a controlled manner to other screens through the navigation function. Unlike global variables where the function name is quite obvious, setting context variables uses the less obvious UpdateContext function. The syntax around this function is also slightly more complicated as the variable is treated like a record of values. Therefore, if we want to set a context variable called locScreenLoadTime to the current date and time, I would use this syntax either within the OnVisible property of a screen or in an OnSelect property of a control: UpdateContext({ locScreenLoadTime: Now() })

The variable won’t be populated until the first time the UpdateContext function is called, and it will only be usable, by default, on the screen where the variable is created.

Chapter 6

185

As previously mentioned, context variables can be passed to other screens if they’re needed elsewhere, for example, if you’re passing data from one screen to another but don’t need the data to be made available globally. One optional argument for the Navigate function is the ability to pass context, which is where we can pass our context variable to be used on another screen. So, if we wanted to move to a screen called “Welcome” and pass the locScreenLoadTime context variable to it, but to reference it as the previous load time, I would use the following function: Navigate('Home Screen',Fade,{locPreviousLoadTime: locScreenLoadTime})

In this example, we are passing the value of the load time on the existing screen to another screen where it can be referenced as locPreviousLoadTime. When passing context, we don’t have to use exactly the same name, as our other screens may have context variables with the same name. When naming your context variables, consider prefixing your variable with loc, for example, locMyVariable, so that you can easily identify that this is a context (local) variable.

Now that we are creating and populating variables with data, we need to be able to easily review what is contained in them without having to put controls on the page to output them. So, let’s check out how to review variables.

Reviewing variables The final point we need to mention here is the ability to review your variables without having to call them into a control on the page. You have a variables list that can be viewed within the app and that will allow us to look at what variables have been created and what values have been assigned to them. To review your variables, click on the View menu at the top of Power Apps Studio, and then select Variables. Alternatively, you can select the File menu and then select Variables from the left-hand navigation menu.

Exploring Formulas

186

Either way, once we have found our way to the Variables screen, we can review which variables have been created within our app and if they contain any data:

Figure 6.19: Global (top) and context (bottom) variables being displayed on the Variables screen

Notice that the variables are split into their different types; i.e. the global variables that you created using the Set function are listed under the Global section. Any context variables that you have created will be displayed on the page on which they have been created. If you go to the Variables page, and the variable states that there is no data, then it could simply be that you haven’t executed that formula within your app yet. Carry out the actions you need and you will then see the data appear. If you are storing more complex data types within a variable (for example, a table), you can also expand that table to see what is being stored within. Now that we have started to investigate formulas, let’s put it into practice and create some functionality in our practice app.

Lab 5 In this lab, we are going to expand on the app that we have been building through Lab 1 and Lab 2 of the previous chapters, and we are now going to start fleshing it out with some basic functionality, which will include customizing the interface to the person who has logged in and storing the branding information centrally, and adding some additional functionality to our SharePoint List Form app, to allow our users to launch the app from SharePoint.

Chapter 6

187

Activity 1 – Creating a branding variable Branding is one of those key elements that we want to be consistent across our app, so we will create a screen to act as branding configuration and then store the values in a variable for us to use throughout our app: 1. Open the Groceries Phone App that we created in Lab 1. 2. Open the New Screen menu. 3. From the New Screen option, select Blank.

Figure 6.20: Blank Screen option from the Insert menu

4. Rename this screen to be called Branding. 5. Add a new rectangle control to this screen and name it rectPrimary_Branding. 6. Change the fill color of this rectangle to be RGBA(184, 0, 0, 1).

Figure 6.21: Using the formula bar to change the fill color

Exploring Formulas

188

7. Add a label to the right of the rectangle and name it lblPrimaryLabel_Branding. 8. Set the label text to Primary Color. 9. Add a second rectangle below the first, and name it rectScreen_Branding. 10. Set the fill color of this rectangle to RGBA(238, 238, 238, 1).

Figure 6.22: Setting Fill color for a second rectangle

11. Add a second label to the right of the screen rectangle, and name it lblScreenLabel_Branding. 12. Set the label text to Screen Color. Now that we have created two colors that we are going to use for our branding, we will store these colors in a global variable so that we can use them on each screen and across multiple components. 1. Within the Tree view of your app, select App.

Figure 6.23: Selecting App from the Tree view on the right of the screen

Chapter 6

189

2. From the properties dropdown at the top of the screen, select OnStart. 3. Expand the formula bar and enter the following formula: Set(gblBranding, { Primary: rectPrimary_Branding.Fill, Screen: rectScreen_Branding.Fill })

4. Click on the ellipsis (…) next to App and select Run OnStart to execute our formula.

Figure 6.24: Finding Run OnStart on the Tree view

5. Click on the Variables menu item. If, like in the screenshot below, you cannot see Variables, click on the … to show more. Notice that within the Global variables, we have a variable called gblBranding with a type of Record. If at first you don’t see the table icon, repeat step 16.

Figure 6.25: Finding Variables from the View menu

6. Click on the table icon to the right of the variable name.

Exploring Formulas

190

7. When the heading changes to gblBranding, click on the table icon below the heading to view the contents of the variable.

Figure 6.26: Selecting a variable

8. Observe that your variables now contain the color detail that you set within the rectangles on the branding screen.

Figure 6.27: Fill color details appearing on the variable screen

We now need to start using this branding information within our app. 1. Return to your Home screen. 2. Select the rectangle that is providing us with the header background: rectHeaderBG_Home.

Figure 6.28: Selecting the header rectangle

Chapter 6

191

3. Select the Fill property from the property dropdown to the left of the formula bar. 4. Change the formula from being its existing RGBA value and enter the name of the variable and the property we want to use: gblBranding.Primary. Observe that your rectangle color changes.

Figure 6.29: Changing the color of the header rectangle

5. Select Home from the Tree view and select the Fill property for the screen. 6. Set the Fill formula to be the screen property of the branding variable.

Figure 6.30: Adding the branding variable to the formula bar

We have now used variables and formulas to store some branding information in our app. We can repeat that same process for any new screens that are added, so that if we need to change the color, we can change the rectangle on the branding screen.

Exploring Formulas

192

Activity 2 – Adding personalization In this next activity, we are going to continue to practice the use of formulas by adding in the name of the person who is accessing the app and also displaying the current date. 1. Open your home screen and insert a new rectangle and rename it rectUserInfoBG_Home. 2. With your rectangle selected, open the property selector and select X. 3. Set your X value to 0. 4. Open the property selector and select Y. 5. Set your Y value to rectHeaderBG_Home.Height. This will automatically place this control at the bottom of the header background:

Figure 6.31: Placing a control with the formula bar

6. From the property dropdown, select Width. 7. Set the width value to Parent.Width. Notice that this expands the width of the rectangle to fill the screen. 8. From the property dropdown, select Fill. 9. Set the Fill value to the following formula: ColorFade(gblBranding.Primary,0.9). Notice that the primary color has been used but has been faded to 90% to give a contrast to the main color.

Chapter 6

193

10. Finally set the Height property to 50.

Figure 6.32: Adjusting the Height property in the formula bar

We are now going to add two labels to this area to present the name of the person currently logged in and also the current date. 1. Insert a new label and rename it to lblUserName_Home. 2. Set the following properties on the label: •

X: rectUserInfoBG_Home.X

•

Y: rectUserInfoBG_Home.Y

•

Width: rectUserInfoBG_Home.Width / 2

•

Height: rectUserInfoBG_Home.Height

•

Text: User().FullName

Notice that the label is half the width of the screen and aligned to the left, and now displays the name of the user that you have logged in with.

Figure 6.33: Adjusting the size and alignment of a label

Exploring Formulas

194

3. Insert a new label and rename it to lblDate_Home. 4. Set the following properties on the label: •

X: rectUserInfoBG_Home.Width / 2

•

Y: rectUserInfoBG_Home.Y

•

Width: rectUserInfoBG_Home.Width / 2

•

Height: rectUserInfoBG_Home.Height

•

Text: Text(Today(),"dd mmmm yyyy")

•

Align: Align.Right

Notice that the label is again half the width of the screen, but this time aligned with the center of the screen. It also displays the current date in a long format.

Figure 6.34: Adjusting the size and alignment of the date label

5. Save and publish your app. The final part before we start to add more functionality to our app is to revisit our SharePoint list form app and add a button on there to launch our mobile app instead.

Activity 3 – Launching our app within SharePoint In Lab 3, we spent some time changing our SharePoint list form so that we no longer had the ability to use the form to enter data into the list. We are now going to use our formulas to add in another control that we can use to open our mobile app.

Chapter 6

195

Firstly, though, we need to get the URL of our app. 1. Navigate to https://make.powerapps.com. 2. Locate the app named Groceries Phone App in the Your apps list. 3. Click on the ellipsis (…) to the right of the app name and select Details.

Figure 6.35: Opening app details

4. From the Details tab, copy the Web link value.

Figure 6.36: Finding the web link in the details tab

5. From the app launcher in the top-left corner of the screen, open SharePoint. 6. Navigate to your My Groceries SharePoint site. 7. From the navigation bar on the left of the screen, open the Groceries list.

Exploring Formulas

196

8. By clicking on Integrate at the top of the list, select Customize forms.

Figure 6.37: Finding the Customize forms option

9. When your list form app opens, you will see that we are back to where we left off in Lab 2, where we left a message on the screen informing the user to use the mobile app. 10. Insert a new button, and rename it btnOpenApp. 11. Place the button below our message.

Figure 6.38: Placing the button

12. Change the display text of the button to display: Open app. 13. With the button selected, change the property dropdown list to OnSelect. This is where we will change the behavior of the button when it is pressed. 14. In the formula bar, enter the following formula and paste the URL of your app inside double quotes: Launch("YOUR URL HERE")

Chapter 6

197

Figure 6.39: Connecting a URL to the button

15. Save and publish your app to SharePoint. 16. Click Back to SharePoint at the top left of the screen. You can now test all of this functionality by clicking on the new item within SharePoint and observing that you now have a button that allows you to open the app. Clicking on the button will then launch your Groceries phone app, where you can see all of your new functionality.

Summary Throughout this chapter, we have started to delve into formulas and look at how they can be used to add functionality to our Power Apps apps. Formulas have been described as looking and feeling like formulas in Microsoft Excel; therefore, skills used in creating spreadsheets can easily be transferred to Power Apps apps. Formulas are entered into the formula bar, which uses IntelliSense to guide us to the formula we wish to use; it also provides guidance about what arguments it requires. As an alternative to always typing, you can use the function browser to identify your formula and then double-click to place it into the formula bar. Power Apps provides several built-in functions that allow you to interact with various data types. We focused on the most common examples – text, numbers, and dates, and explored what we can do to transform our data to ensure we are displaying it correctly. We spent some time looking at the mathematical functions that we can use to start making our app a little more intelligent.

Exploring Formulas

198

Not all logic is linear; therefore, we introduced the ability to branch our logic based on input. There are two ways to branch: one is using the If function, which will evaluate an expression to either true or false and perform a function as a result. Alternatively, for more complex branching, we can use the Switch statement, which will allow us to have multiple branches of logic from the same logical test. We looked at the two types of variable that can be stored within Power Apps, giving us a temporary copy of a piece of data for use elsewhere in the app. Global variables are scoped to the entire app, meaning that they can be easily used anywhere. Of the two types of variable, the syntax for global variables is somewhat easier to write. Context variables, on the other hand, are scoped to a single screen but can be passed to other screens as an argument of the Navigate function. Within our lab, we have started to put these skills into practice, using formulas for positioning our controls, filling them with data, and even creating functional behavior. This is really just the start of the formulas journey as we will be adding more throughout the rest of the labs within the book. In the next chapter, we will be investigating how we can start to interact with our data sources, by reading and writing data from data sources that are external to Power Apps.

Questions 1. In the following date format, dd mm yyyy, what does mm return? 2. If you see the following logical operator, &&, what does it mean? 3. If I had multiple outcomes from a single condition, what would be the best function to use? 4. What would I use to validate a string against a known pattern? 5. Cos, Sin, and Tan are examples of what type of function? 6. What would precede any comments that I am going to put into my formula? 7. What are the two results that can be returned from an If statement? 8. What type of variable would I use if it is only going to be used on one screen or manually passed to another?

Further reading The full formula reference is provided and maintained by Microsoft and provides explanations and examples of how each one is used (https://docs.microsoft.com/en-gb/ powerapps/maker/ canvas-apps/formula-reference).

Chapter 6

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

199

7

Exploring Reusable Controls In the last few chapters, we have really started to focus on the controls and the formulas that build the basics within our apps. As you start to build, you will find that there is a large amount of repetition, not only through the screens within an app, but also across apps. This could be because you are building pieces of functionality that you want to use again and again, or because you want to ensure that you have consistency in terms of look and feel. It could be that you want to interact with a group of controls without having to define each one individually. It is never too early to start thinking about how we can reuse elements of our apps, so we are going to be looking at the following aspects: •

Using components to create reusable groups of controls

•

Building a component library to allow sharing throughout the tenancy

•

Lab 6

By the end of this chapter, you will have an understanding of how to create control groups, create components, and then reuse them.

Technical requirements To follow along with this chapter, you will need to have understood Chapter 5, Exploring Controls, and completed Lab 5 from the previous chapter, where we created a canvas app with a header and basic styling.

Exploring Reusable Controls

202

Introducing components Components allow us to build reusable controls that only need to be built once, and then we can apply them throughout the development of our apps. Just imagine how much time you can save yourself if, on each screen, you can just place a pre-defined collection of controls. Then consider the time saving of wanting to change those controls, where you can now update them in a central location and all instances of those controls will reflect the updates. Pro-developers will often advocate reuse as much as possible, allowing them to take advantage of the work that they have already done. This same thought process can now be applied to Power Apps. Components can be created within our existing canvas apps, or can be created within a component library, which we will look at later on in this chapter. For now, let’s start by looking at how we can create them within an app.

Creating components In order for us to create components, we must first draw our attention back to the Tree view on the left side of Power Apps Studio. Here, we can see two tabs: Screens and Components. Clicking on the tabs allows you to switch between what you are developing, whether this is developing your individual screens or developing your reusable components:

Figure 7.1: Two tabs of Tree view

Chapter 7

203

Components that we have already created will be listed on this tab, where we can make any necessary changes. When viewing the components from the Insert tab on the left of the screen, the components will be broken down into two groups, Custom and Library components. Any components listed under the Custom category are those that are available just to this app, while any listed under the Library components header have been imported from a component library. But as we don’t have any components created, we should go ahead and create one. To create a new component, we can select the New component button visible directly below the Search box, which will immediately bring up a blank canvas in the center of the screen. We can now start to apply the same fundamentals that we have learned in relation to creating canvas apps to our components by adding controls to the component canvas and adding behavior by using formulas. As an example, if we’re building a header component, we may want to put a label on the screen that displays a background color and some text. We can also add most of the other controls that are available for use within a standard canvas app, with the main exceptions being those controls tied closely to a data source such as data tables and forms.

Figure 7.2: Opening a blank canvas with the New component button

It is worth considering how your component will respond to being resized; if you can make your controls responsive to the size of the component by using formulas, then you can ensure that your component will look as consistent as possible regardless of how it is used.

Exploring Reusable Controls

204

So far, we have created quite a static component by just placing some basic controls on a canvas, which isn’t something that we can reuse many times. To make our component truly reusable, we need to start to look at how we interact with the properties of the component. This could be through the use of basic properties or the use of custom properties.

Understanding basic properties Just like our basic screens, components have a number of basic properties that define the basic look, feel, and behavior of the component. This includes properties such as size, background color, name, and description. When you first create your component, it will default to 640 pixels high and 640 pixels wide. This is the default height and width and can be changed when the component is used on your screen. We can, however, use formulas to default the width or height to automatically match the canvas size that we are using by using App.DesignWidth or App.DesignHeight:

Figure 7.3: Using App.DesignWidth to adjust the component size

Each of these properties can be overridden when we use the component within our screens, so should we want a different background fill color on each screen, then we can change this by modifying the properties of the component. The default properties, however, are quite limited in terms of their scope, so to really get more from the component, we need to create our own properties. These are known as custom properties.

Chapter 7

205

Creating custom properties Custom properties are additional properties that can be used as a point of interaction with our component; for example, we may wish to pass a string into the component to be used by one of our controls. These are known as input properties. Consider that in the basic example that we’ve seen so far, this could be the title of the screen, the color of the header, the styling information, or the contents of a variable that we’ve used elsewhere in our app. As an alternative to having input properties, we also have output properties that allow us to output data back to our screen. As an example, we could pass a table into our component that is being used to feed a gallery. The row that the user selects within the gallery could then be returned as output. To create and configure properties for our component, first of all, we need to have our component open for editing, and the component selected within the Tree view so that we can modify the properties using the Properties pane on the right side of the screen:

Figure 7.4: Selecting a component in the Tree view

As we can see, we can interact with the default properties, but there is also a Custom Properties header that has a New custom property button below.

Exploring Reusable Controls

206

Clicking New custom property brings up an additional blade allowing us to provide the key pieces of information needed to define our custom property:

Figure 7.5: The New custom property menu

The key elements of this form are as follows: •

Display name: This is the friendly version of the property name and will appear in the properties pane for your component when placed on the screen. Given that this is a friendly name, you can use spaces and special characters in this field.

•

Name: The name could be considered the internal name for the property, and is used when within the property dropdown next to the formula bar, and also if we are referencing the property within a formula. For this reason, the name will automatically have any spaces and special characters stripped out (except for an underscore). Since this process could make your property name difficult to read, you may wish to consider camel case to help identify the individual words, for example, CustomProperty.

Chapter 7

207

•

Description: In most cases, descriptions of items aren’t mandatory; however, for our custom property it is. This is because this provides help text for our property, so when we hover over the input, we will see some useful help text. This allows us to guide users as to what type of data they should be providing.

•

Property type: So far, our form has been focused on the creation of the identity and usage of the property. Now, however, we have two options for the property type – Input, and Output, which defines the direction in which the data will travel within the component.

•

Data type: Finally, we can define what type of data we are going to be using within this property, whether that is something as simple as text or whether we are going to pass an object such as a screen. The choice that we make here, particularly with our input fields, will also allow us to create a better user interface. If we select a color as the data type, then the user will be presented with a color picker within the properties pane.

•

Raise OnReset when value changes: When we check this box, it will allow us to call the OnReset formula automatically when the input value changes. This is useful for building a component that returns to its default value if the user changes their input, for example, a counting tool that resets to 1 when selecting a different item.

Here, we have gone through the properties for defining the input and output of a component. Depending on how we are going to use our component, we might want to ensure that the only interactions with it are through the use of its input properties, or to give the component access to the collections and data sources used by the app. This is achieved by defining the scope of the component.

Understanding scope When we create components, particularly those that we are looking to use across multiple apps, we may choose to keep the component isolated as much as possible. If we choose to scope the component so that it is completely encapsulated, then our interactions are limited to just the inputs and outputs.

Exploring Reusable Controls

208

By default, the scope of the component is set to isolate, but by toggling the Access app scope option in the component properties, we can allow it to be able to access resources available to the app directly:

Figure 7.6: Toggling a component’s Access app scope from the Properties menu

If we want to access global variables, collections, directly access controls within the app, or even directly access tabular data from a data source, then we can change the scope setting to allow the component to directly access the app scope. This can be quite useful if you want your component to be more responsive to changes within the app. Be careful when applying this option to a component that is going to be used across multiple apps as you can’t guarantee that the same variables or data sources are available everywhere. A component might work with one app scope but not another.

Once we have created our properties and have fully configured our component behavior, we should set some default values so that we can see what our component will look like with some basic data.

Setting the property defaults Setting the default properties within a component has two key effects. The first is that we can see some content while we are creating our component, while always making it easier to see something that has more meaning than just “text.” Let’s work through our example by creating a property to receive the screen name that we would like to display in the label:

Chapter 7

209

Figure 7.7: Creating a property to receive the screen name to display in the label

Once we have created the property, we can use the property selector to define what our default text will be. We can enter "Title of the screen" in the formula bar as an example:

Figure 7.8: Defining the default text of a component

Exploring Reusable Controls

210

Once we have created our custom properties and have given them a default value, we then need to be able to use the property within our component. So, in our example where we are displaying the title of the screen, we will need to replace the default text in our label to be the value of our input property. So, in this case, our custom property is called Screen Title. To tie the two together, we need to use a formula that will generally be the name of the component and the name of the property. So, if we named our component Header, and our property ScreenTitle, then our formula will be: Header.ScreenTitle

Alternatively, we could use Parent.ScreenTitle to the same effect.

Figure 7.9: Using a formula to replace the default text with the value of the input property

With the component now starting to look as we expect, we can then add the component to our screens and provide the value to the component by setting the input property.

Adding the component to a screen We can add components to our screens by either using the Insert menu at the top of Power Apps Studio or by using the control browser that sits on the left side of the screen. By now, hopefully, you are starting to find the way that works best for you.

Chapter 7

211

Whichever method we decide to use for inserting our components, we are looking for the Custom control group, under which we will find our components. Clicking on the component we wish to insert will then place it on the canvas:

Figure 7.10: Inserting a component onto the canvas

Once the component is placed on a screen, we can interact with it like we would any other control. We can click it, resize it, move it, and set the various properties either by using static values or by using formulas. As an example, if we want to use a formula to take the name of the screen and pass it into the component, we could use Parent.Name. The parent of the component is the screen it has been placed on, and the Name property is what we have called the screen.

Exploring Reusable Controls

212

So, if the name of my screen is Welcome, then that is what will be displayed in my component:

Figure 7.11: Displaying the screen name of the component’s parent

Now that we have made a component, we have created a control that is reusable within our app. We may have even created something that is going to be beneficial to others, or that you may want to use in other apps that you have created. Therefore, we are now going to share this component more widely. Previously, we would have exported and imported this component. This time, however, we are going to add it to a component library.

Using the component library Component libraries are now the recommended way of reusing components across multiple apps. They are centralized, which means that the dependencies created when using the components are all pointing back to a repository that is likely to have a much longer life expectancy than an app. Apps generally go through a life cycle where eventually they will be retired and removed, so if Microsoft had chosen to work on an app-to-app basis, then that would have introduced a huge amount of risk. To mitigate this risk, and to give a truly centralized approach to the creation and sharing of components, the component library was developed. At the time of writing, this feature is still in public preview; however, it works quite effectively.

Chapter 7

213

The biggest advantages that you get from using the component library is that you can make it extremely easy for others who are creating apps in the same environment to discover and use those common components, publish updates, and send notifications to app makers when component updates are available. Component libraries don’t exist by default. First of all, we need to be able to create them.

Creating component libraries Component libraries are created in a very similar way to how we create our apps in the first instance. We must first navigate to our Power Apps welcome screen and then select Apps from the left-hand menu. When we look at the list of apps available to us, we will see two tabs, the first being Apps, and the second Component libraries. When the latter is selected, we will be presented with a list of component libraries that have been created in this environment:

Figure 7.12: Viewing component libraries on the Apps page

When we don’t have any component libraries, we can click Create component library in the center of the screen or, alternatively, we can click + New component library at the top of the screen. Clicking on the Create button presents us with a dialogue box that asks for the name of the component library. This feels a little like the app creation screen, doesn’t it?

Exploring Reusable Controls

214

We can insert the name of our component library in this box and then click Create:

Figure 7.13: Naming the component library

Once we click Create, the component gallery is created, and you will be presented with Power Apps Studio, with the main difference being that Components is the default selection in Tree view:

Figure 7.14: Tree view defaults to Components after creating a component library

You will notice that Screens is also available under Tree view; however, the screens are not part of an app. They are purely available for us to be able to test our components.

Chapter 7

215

Once we have our component library created, we can then create new components just like we did earlier in this chapter, adding controls, formulas, and properties to give us our desired effect. Once we are ready, we can then save our component library just like we do with our apps. Given that we are now creating components that are going to be used by multiple people throughout multiple apps, it is good practice to include version notes when you save any changes. This is so that when the version history is reviewed, others, and even yourself, after a period of time, can look back and understand what changes have been made and, more importantly, why.

By default, the component library won’t be shared with everyone. Again, drawing a similarity to our canvas apps, we need to share the component library with others before they can use the components in their own apps. Once we have created a component, we will then be able to use it within an app.

Using a component from the component library In order to use a component, we once again need to return to creating or editing a canvas app. Earlier in this chapter, we looked at how we could insert a component that has been created locally within the app. Now, we want to insert a component that has been created centrally in our component library. When we look at the list of our components, however, we won’t see the central ones by default; we must first bring them all in. When we click the + on the left side of the screen to add new controls, we also have the Get more components option. This isn’t the easiest option to spot as it is right at the very bottom of the screen:

Figure 7.15: The Get more components button on the Add new controls menu

When we click the link, we are presented with a list of component libraries and components that are available within them.

216

Exploring Reusable Controls

With this blade open, we have the ability to select either individual components that we want to use within our app or we can select all:

Figure 7.16: Selecting a component to import from a list of component libraries

Once we have selected the components we wish to install, we can then click Import at the bottom of the screen. Once the import is complete, we are then able to use the component with Insert on the left side of the screen. You will have an additional option appear in the list. When we created our local component, it appeared under the Custom header, but when we use the component library, any components appear under the Library components header:

Figure 7.17: Finding imported components under the Library components header

We can then insert the component and work with it in exactly the same way as we did when creating one local to the app:

Chapter 7

217

Figure 7.18: Inserting a component to work on

The greatest advantage of using a component library is that you can manage your components in a central location and push the updates out to the apps that are using it. This isn’t an automatic process though, so let’s have a look at the update behavior.

Updates to components in the library Just as our apps are continually improved, the same will apply to our components. New functionality will be added, styling changes made, and fixes applied, all of which will mean that a change will need to be applied when we are editing our apps. When we make a change to our components, saving and publishing does not automatically mean that all of the apps will be updated. The update will be made available, but it is your responsibility as the app maker to apply it. If we already have the app open, then we can check for updates. With the Insert menu open on the left side of the screen, we can manually check for updates that are available on our components.

Exploring Reusable Controls

218

This appears to the right of the Search box as three vertical dots:

Figure 7.19: Manually checking for updates on the Insert menu

Clicking on the three dots and selecting Check for updates will then show any components that have updates available:

Figure 7.20: Components with available updates

By putting a check mark in the box next to the required component and clicking Update, the newest version of the component will be added to your app. If the update takes place while you are not editing the app, then you will receive a notification when Power Apps Studio opens. The notification appears just below the formula bar and allows you to review the updates that are available to you. We are then faced with the same update option as when we performed a manual check for changes. Now that we have started to investigate components, let’s put these concepts into practice and add components to our app.

Chapter 7

219

Lab 6 In this lab, we are going to expand on the app that we have been building since Lab 1 by creating a component that we are going to use multiple times through our app. We are going to create a component that will allow us to provide feedback to our users as a dialogue box: 1. Open the Groceries Phone App that we created in Lab 1. 2. From the Tree view on the left side of the screen, select Components. 3. Click + New component. 4. Rename your component Dialogue Box:

Figure 7.21: Components branch of the Tree view

5. We are going to make our component default to the height and width of the app itself. So, firstly, set the width with the formula App.DesignWidth, and the height with the formula App.DesignHeight:

Figure 7.22: Adjusting the height of the component

Exploring Reusable Controls

220

6. Create an input property by clicking on + New custom property on the right side of the screen. 7. Enter the following configuration for the property: a. Display name: Message title b. Name: MessageTitle c. Description: The title of the message we are going to display d. Property type: Input e. Data type: Text

Figure 7.23: Configuring a new custom property

8. Click Create.

Chapter 7

221

9. Repeat the process to create a property called Message: a. Display name: Message b. Name: Message c. Description: The message we are going to display d. Property type: Input e. Data type: Text 10. Repeat the process once more to create a property called MessageColor: a. Display name: Message color b. Name: MessageColor c. Description: The color that we are going to apply to our message d. Property type: Input e. Data type: Color 11. Finally, we are going to create a property that will help us to toggle, irrespective of whether the dialogue box is shown: a. Display name: Show message b. Name: ShowMessage c. Description: Is the message visible? d. Property type: Output e. Data type: Boolean Now that we have created the properties, we will add some controls to the component to display our messages: 1. Insert a rectangle on the screen, rename it rectBorder, and set the following properties: a. Fill: RGBA(255, 255, 255, 1) b. BorderColor: 'Dialogue Box'.MessageColor c. BorderWidth: 5 d. X: 40 e. Y: 40 f. Width: Parent.Width – 80

Exploring Reusable Controls

222

7. Height: Parent.Height – 80

Figure 7.24: Building a display for the component

2. Insert a label on the component and rename it lblMessageTitle. This will display the title of the message that we are going to pass in. Set the following properties in the label: a. X: rectBorder.X + 20 b. Y: rectBorder.Y + 20 c. Height: 60 d. Width: rectBorder.Width – 40 e. Color: 'Dialogue Box'.MessageColor f. Text: 'Dialogue Box'.MessageTitle g. FontWeight: FontWeight.Bold h. Align: Align.Center

Figure 7.25: Adding a title message label to the component

Chapter 7

223

3. Enter a second label, which will contain the text of the message, and rename it lblMessage. Set the following properties in the label: a. X: rectBorder.X + 20 b. Y: lblMessageTitle.Y + lblMessageTitle.Height + 20 c. Height: 60 d. Width: rectBorder.Width – 40 e. Color: 'Dialogue Box'.MessageColor f. Text: 'Dialogue Box'.Message g. FontWeight: FontWeight.Bold h. Align: Align.Center i. VerticalAlign: VerticalAlign.Top

Figure 7.26: Adding a message text label to the component

4. Finally, insert a button and rename it btnClose. This will close the message once it has been read. Set the following properties on the button: a. X: rectBorder.X + (btnClose.Width / 2) b. Y: lblMessage.Y + lblMessage.Height + 20 c. Fill: 'Dialogue Box'.MessageColor

Exploring Reusable Controls

224

4. Text: Close

Figure 7.27: Adding a Close button to the component

We now just need to pass back a close signal from our button to the output variable to tell the app that we need to hide the dialogue. 1. Select your button again and then choose the OnSelect property. 2. Set the formula to Set(gblOpen, false):

Figure 7.28: Setting the OnSelect property of the Close button

Chapter 7

225

3. Select your component in the Tree view and choose the ShowMessage property. Set the property to gblOpen:

Figure 7.29: Setting the ShowMessage property of the component

4. Select the OnReset property on your component and set the formula to Set(gblOpen, true). 5. This will mean that when the Reset function of your component is called, it will set the variable back to true. This will then get passed back to your app through the output property.

Figure 7.30: Passing the close signal as an output property from the Reset function

Let’s now return to your app screen and get ready to use the component. 1. Click on Screens under Tree view to return to your main app. 2. On the Insert menu, select your dialogue box so that it appears on your screen:

Figure 7.31: Opening the component from the app screen

Exploring Reusable Controls

226

3. Rename your component in the Tree view to comDialogueBox_Home. 4. Right-click on the dialogue box, hover over Reorder, and select Bring to front. This is to ensure that when your dialogue box shows, it will be the top control on the screen. 5. Click on your component, and then select the Visible property. Set this property to Self. ShowMessage so that regardless of whether the output property is true or false, it will be used to define the visibility:

Figure 7.32: Setting the visibility of the component

6. Set the other properties on the component to the following: a. MessageTitle: MessageTitle b. Message: Message c. MessageColor: MessageColor

You will see an error here to begin with, but don’t worry as we will be clearing this shortly.

7. For testing purposes, add a button to the screen. The location of the button does not matter. 8. Open the OnSelect property. In order to define what is being shown in the dialogue, we will use a context variable, as we used in the previous chapter. Set the OnSelect property to the following: UpdateContext({ MessageTitle: "Message Title", Message: "My message goes here", MessageColor: Red }); Reset(comDialogueBox_Home);

Chapter 7

227

Figure 7.33: Defining the dialogue details with a context variable

We can now test the control. Click the button to make the dialogue box visible, and then Click the Close button to close it again. We also now have a component that we will be able to take advantage of multiple times within our app, particularly when we begin to work with data.

228

Exploring Reusable Controls

Summary Throughout this chapter, we have started to uncover the ability to create groups of controls that we can use time and again. These are called components. This allows us to use the same functionality multiple times, manage it in one place, and thereby saves us time as we don’t have to create the same functionality time and again. Our components can be created locally within an app, or if we want to share the component with a wider audience across multiple apps, then we can share them in a component library. Component libraries allow us to manage components centrally and will prompt any other makers who are using the component if any updates are available. Our components are versatile, allowing us to define our own properties to act as an interface with the parent app. These properties can be classed as input properties, where we pass data into the component for it to be used, or can be classed as output properties where data can be returned from the component to the app. Within our lab, we have looked at how we can create a reusable dialogue box as a component – a piece of functionality that will not only be used within our app, but I’m sure you will find has some great uses for apps within your organization. In the next chapter, we are going to start drawing even more capability out of our canvas apps by bringing data into our apps.

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

8

Working with Data In the previous chapters, we started to build on our app even further by introducing and implementing some basic formulas, using controls, and building components. On their own, formulas will allow an app to take advantage of some of Power Apps, basic functionality, but the real depth of apps comes from their consumption and interaction with data. Data can be stored in a number of different ways, both internally, within the app memory, and externally in a data source. We will explore external data sources in Chapter 9, Introducing Connectors, where we will explore how we can connect to, and consume data from, external services. In this chapter, we will look at how we can build data structures internally within the app and explore how we can use them while we’re running our Power Apps. In this chapter, we will cover the following topics: •

Creating and interacting with collections

•

Displaying data

•

Using forms

•

Lab 7

By the end of this chapter, you will have an understanding of how to work with data in your apps, starting with collections and the important role that they can play within the development of your Power Apps. You will understand how we can retrieve data and then display and interact with it in a number of ways, using the controls provided by Power Apps. Firstly, we will look at how to store data locally, and then how we can connect and interact with data from a live data source.

230

Working with Data

Technical requirements To follow along with this chapter, you will need an active Power Apps subscription. To complete the lab at the end of the chapter, it is also recommended that you have completed the preceding labs. If you choose to use a data source such as Dataverse, please be aware that you will require a premium license.

Creating and interacting with collections Collections are one of the most common methods for storing data locally within your Power App, and once you start developing, you will find that they are extremely useful in a number of different ways. They can be built dynamically while you’re running your app, as well as when your app loads. This means you could use a collection to retrieve data from a data source and store it locally, in memory, so that it can be manipulated before being written back. In this chapter, we are going to use collections to build data that we can then interact with using our output controls, galleries, and tables. A collection, in its simplest form, can be compared to a table, where you have a number of rows of data with each attribute being expressed as a column. Collections can store arrays of data within them, so they’re slightly more complex than just a simple data table, but the premise is the same.

Filling collections When you’re filling in a collection, you can do two different things: you can draw in data from a data source and store it within a collection in the memory of the app – for example, you could store the contents of a SharePoint list within a collection – or you can build the collection manually by using formulas within the app. Collections are a great way to introduce performance improvements into your app, as you have the ability to limit the number of times that your app calls back to external services. There is, however, a balancing act as the more you store in the memory of your app, the higher the load is on the device.

Chapter 8

231

To fill your collection, there are two different formulas available. You can use Collect or ClearCollect. Collect will append your data values to the collection every time that it is called, so if you run it multiple times, your collection will continue to grow with each iteration. This is useful if you want to keep adding user inputs into a collection, e.g., if you are taking lots of pictures within your app, you may want to keep adding them to a collection every time a new picture is taken. ClearCollect, on the other hand, will remove any existing rows in the collection and then add your

new values to it. This is ideal if you want to ensure that your collection always has a consistent set of data within it. If, for example, you wish to return your collection to a start state when a screen loads, you may use ClearCollect to remove custom entries and then fill it with a standard set. When providing the entries for a collection, you will generally do so in the form of a record or array of values, with a collection consisting of at least one attribute or field in that record. For us to build the record, we must provide some key information for the formula. Firstly, we need to name the collection, and just like everything else, it should be named in a way that is going to be easy for you to reference in other formulas. The naming convention recommendation is that your collection is prefixed with col and then the name you want to use, for example, colDays. Secondly, we need to supply the records that we want to store within the collection. The records are surrounded by { and }, with the attributes or fields of that record then defined within the curly braces. When we define the fields, we must provide both an identifying name for the field, and also the value that is going to be assigned to it. For us to assign the value, we use a colon :. Therefore, our field definition would look like Day: "Monday". We can assign multiple fields to that record by separating them with a comma. If we now put that together into an example where we define a day and whether it is working or non-working, we would build our formula as: ClearCollect(colDays, { Day: "Monday", Type:"Working" })

We could put this formula into the OnSelect property of a button, so that it populates the collection when the button is pressed. Equally, you could do this for OnVisible on the screen, or OnStart for the app.

Working with Data

232

This will create a collection called colDays, and create a single record. We can review the top five entries in a collection by clicking on the View menu, selecting Collections, and selecting the relevant collection from the list:

Figure 8.1: A populated collection showing the Screen and Title columns

This screen should always be checked to ensure that the correct data is being stored within your collection and that it is the first point of call for debugging data. We can add multiple records to our collection by repeating the section that appears between { } and separating them with a comma ( , ). When you are creating multiple records manually in this way, take care to ensure that your fields are all named in the same way, and that they also have the same case. Any variation in either of those will result in an additional field being created, so you could have Day and day as two separate fields. With this in mind, if we now populate the rest of the week with the days, we can update our formula to the following: ClearCollect(colDays, { Day: "Monday", Type:"Working" }, { Day: "Tuesday", Type:"Working" }, { Day: "Wednesday", Type:"Working" },

Chapter 8

233

{ Day: "Thursday", Type:"Working" }, { Day: "Friday", Type:"Working" }, { Day: "Saturday", Type:"Non-Working" }, { Day: "Sunday", Type:"Non-Working" } )

Consider using a collection to store your navigation or branding configuration so that you can maintain consistency across each screen.

Now that we have created a collection, we need to modify the data stored within it.

Updating collections While running your apps, you may need to update the content that’s stored within the collection. This could be as a result of user input or just changing the state of data as you progress through the app. Let’s learn how to update an item in a collection and also how to remove an item. To update an item in the collection, we will need to use the Patch function (https://docs. microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-patch). This takes its name from the verb that’s used in REST API development, where Patch means to update a specific element of a record. The Patch function requires the following information in order to be used: •

Collection: The name of the collection

•

Record: The identifier of the record to update

•

Update: The changes that are required for that record

In the following example, we are going to update the first item in the colDays collection using the First function to define the record to be updated. Notice from the following formula that when we are using a Patch, we don’t need to enter every field as we did when we built the collection. We can choose which fields we update: Patch(colDays, First(colDays), { Type: "Weekday" })

Working with Data

234

By running the Patch command, we can see that the Type field for the record in the collection has been changed from Working to Weekday, as shown in the following screenshot:

Figure 8.2: The navigation collection with the updated type

As well as being able to update records, Patch can also be used to create new records. The syntax is principally the same; the only difference is that rather than defining the record to be updated within the collection, we use the Defaults keyword to create a blank record and then perform an update on it. Defaults tells the collection to create the entries with the default values to begin with, and then

updates to our new values. This is more obvious if you are using a data source such as SharePoint when you can set a default value for a field. If we put this into an example, we can write a formula that will create a new item in my days collection. So let’s make up a new day to add Review Collections are designed to allow for the addition and removal of items while the app is running. We can remove specific items from the collection using the Remove function.

Chapter 8

235

Remove requires the following information:

•

Collection: The data source that we want to remove an item from

•

Record: The item that is going to be removed from the collection

In the following example, we are going to identify the record to delete by using the Lookup formula, which will isolate a single field based on the criteria we want. In this case, we are going to look up Monday in the Day column, and delete the record: Remove(colDays, Lookup(colDays,Day = "Monday" ))

By running this formula, the record in the collection that contains Search in the title column has been removed:

Figure 8.3: The navigation collection showing that a record has been removed

So far, we have looked at how we can build our own data source, and then review the first five results by looking at the collection through the View menu. In order for us to gain some value from the data, we need to be able to display it in our app, so now is a great time for us to introduce the data controls.

Working with Data

236

Displaying data Once you have data within a data source, you need to display it to the app user. There are a number of controls that can be placed onto the canvas that allow you to quickly and easily represent and interact with data.

Displaying data in a gallery We learned about Gallery controls in Chapter 5, Exploring Controls, while we were introducing the main controls that can be used within Power Apps. Galleries provide an interactive control that we can bind to a data source. Galleries don’t have a fixed design structure, which means that you can apply a little more creativity to your design since you have the freedom to add a number of different controls. For example, you may build a gallery that contains contact information, so using the different controls, you could add a picture of the person, their name using a label, a telephone icon, and the telephone number. You can really be creative. Firstly though, let’s connect a gallery to a data source and examine the resulting behavior. There are two ways to connect a gallery to a data source: •

The first way is from within the Properties pane of the gallery, which will display all the data sources that are available within your app. As you add connectors and draw in data from other sources, they will also be listed here:

Figure 8.4: A gallery placed onto the canvas

Chapter 8

237

While this is the simplest way to add a data source, it is also the least flexible as you are unable to add filters or other logic in the Properties pane.

•

The second way is to modify the Items property of the gallery. Within the formula bar, you can reference the data source by name. This gives you the added benefit of being able to apply additional formulas such as Filter to be able to reduce the number of results:

Figure 8.5: Setting the Items property to bind the gallery to a data source

Once a gallery is on the page and is connected to a data source, we can modify what is displayed and how it is presented on the screen. In our example, we are going to take a blank gallery and add a label to it. For us to edit the layout and design of the gallery, we need to ensure that we have the gallery selected, and the top row in the gallery active. If we don’t, any controls we try to insert will be added outside the gallery, and so won’t be repeated on each row. With the gallery selected, controls will appear inside. When we add a label, the text property of the label will default to a column in the collection. Once you have a control within the gallery, you have the ability to use the Properties pane in the gallery, where you can assign and map a field to the control. In our example, we can bind the gallery to the colDays collection, which we defined earlier.

Working with Data

238

Therefore, when we map a field to the gallery, we can select either Day or Type as the value:

Figure 8.6: Binding the gallery to the colDays collection offers the values Day and Type

Again, we can use the formula bar to achieve the same effect. When a gallery has been bound to a data source, we can reference the current record in the data source by using ThisItem. This references the current row, so if we set the text property of the label to ThisItem.Day, then we will see each of our different days being listed. Likewise, we could place a second label or another control into the gallery and set it to ThisItem.Type to feed out the information in our other column. There are times when data can be stored in a more rigid tabular structure, which is where we would consider using a Data table control.

Displaying data in a data table The most common way to display any type of data is in a table. Power Apps has a data table control available that allows us to show the rows of data with the relevant headers. Just like a gallery, you have full control over what fields are displayed but you don’t have the creative freedoms. Similar to a gallery, you can use the Properties pane to select the data source from all of the ones that are connected to your Power App, including collections:

Chapter 8

239

Figure 8.7: Adding a data table control to the canvas

Once the data table has been bound to the data source, we can then select the fields that we want to display by clicking on Edit fields. Each field that you select will be immediately placed in the data table. You can easily change the order of the columns by dragging and dropping them with the field selector, as shown in the following screenshot:

Figure 8.8: Selecting the fields to display in the data table

240

Working with Data

Data tables are much more rigid in terms of design than the gallery, where we can only change the order of the columns and change the basics around the heading style. The unfortunate thing is that, as far as custom styling goes, there is no option to create alternating colors for the rows or add highlights to columns. The only color change that you can customize is the OnSelect color, which highlights which row in the table you have clicked or tapped on. The two methods of displaying data, that is, galleries and data tables, are both designed to be primary ways of displaying data. Both galleries and tables allow us to display rows of data; however, with the amount of screen space available, we may not be able to show every piece of data. Therefore, we will need the ability to drill through and view more fields. Generally, this is achieved by using a form control. Forms have the ability to both display and allow us to build ways to interact with the data source. In the next section, we’ll learn about using forms.

Connecting to a data source So far throughout the chapter, we have looked at how we can store data within the memory of the app. We can use exactly the same controls and techniques that we have used so far for our collections. Where we used a collection for our data source for our gallery, we can replace our collection with a list from SharePoint, or a table from Dataverse, and we can then configure our galleries and tables in the same way. Whereas, with collections, we needed to create it within the app, our data source can be completely configured outside of the app, and then connected to by using a connector. Connectors allow us to use formulas to interact with the data source rather than manually create all of the programmatic calls. We will learn more about these in Chapter 9, Introducing Connectors. In order to connect to a data source, we must first store our data somewhere, for example, within a SharePoint list. The more we spend time making sure our data source is correct, i.e., making sure that we have the correct columns with the correct data type assigned, the easier it will be for us when we bring it into our Power App. In the earlier labs within this book, we created a SharePoint list, which we will refer to as we walk through the steps to connect to our data.

Chapter 8

241

In order to add data to our app, we need to click on the data icon on the left rail in Power Apps Studio. If you have followed along with the collection example above, then you may see colDays listed there already. The first step, however, is to click + Add data so that we can see the different data sources that we have available:

Figure 8.9: Clicking + Add data to see the available data sources

When we click the Add data button, we are then able to select the connector from the ever-growing list of services. In this example, we can type SharePoint into the search box so that we reduce the list to what we are looking for:

Figure 8.10: Using the search bar to find data sources

If you haven’t already established a connection to the data source, then you will be able to do that first of all by selecting + Add a connection.

Working with Data

242

So far, we have selected the service that we wanted to connect to; we now need to provide more specifics to the app, for example, by selecting the relevant table for Dataverse, or the SharePoint site, list, or library. This configuration appears on the right side of the screen:

Figure 8.11: Selecting a specific data table from a service

By placing a tick in the relevant table, and then clicking Connect at the bottom of the screen, we are able to create a connection to the data source, which can then be used within the app:

Figure 8.12: The connected data source appears on the left side of the screen

Chapter 8

243

Now that the data source has been connected to our app, we can then use it within our galleries and data tables, by putting the name of the data source into the Items property:

Figure 8.13: Entering the data source into the Items property

Now that we have created a connection to a data source, we are able to read the data and display it using a form to show labels and data values. But now let’s look at how we can create and update data from within our app by exploring how we unlock the power of forms.

Using forms Searching form in the Insert menu offers the option to Edit form and Display form. This provides us with a native way to quickly create, view, and edit forms so that we can modify data from our data source. The setup of a form is very similar to that of a gallery or a data table, whereby we put the control on the page and select the data source. When a form is placed on the canvas and connected to a data source that has an understanding of a user interface, for example, SharePoint, the form will automatically render the key fields, displaying both a label as well as a control, which will allow the user to change the data. These groupings of controls within the form are called data cards.

Working with Data

244

If we are connecting our form to a collection, then we need to build the form manually using custom data cards. This is a useful example to understand as you can add custom data cards to your forms even if you’ve connected them to an external data source, which you may want to use to put in headers, display data from other sources, or even change the input controls. To add a new form to our screen, let’s select Edit form from our Insert control view:

Figure 8.14: Selecting Edit form on the Insert menu

Once the form is placed onto the page, we need to bind it to our data source. This can be done by finding the Data source from the property selector in the Properties pane on the right side of the screen:

Figure 8.15: Binding a data source to a form via Properties

Chapter 8

245

If you select a live data source, such as SharePoint in this example, then we will see that our form will automatically add cards for each of our columns. We can then change the properties of the form to give us the visual effect we desire, for example, changing it to show one column of controls rather than three. We will now explore how we can work with visual effects by changing the form mode.

Changing form mode The default mode of the form when you add it is Edit, as shown in the following screenshot, which means that the form will display the interactive controls such as a textbox rather than a label, as displayed below in Figure 8.16. Be aware that if you have the default mode of the control as Edit, and you don’t tell it which record it should be updating, then it will tell you that there is no data to display:

Figure 8.16: A rendered form, as displayed in the app that was generated from SharePoint

The form control is intelligent enough to understand the data type of the field and render the form controls. For example, if the data type is complex, such as from a lookup field in SharePoint, the form will be rendered with a combo box control automatically.

Working with Data

246

Alternatively, forms can also be placed into New or View mode as the default. View mode will display the form in a read-only state, as follows:

Figure 8.17: The form control in View mode

Consider using the view form as a way of displaying the full details of a record when it is selected

The new form will display the fields from the form in an interactive state, i.e., an active textbox; however, they will be rendered as empty fields so that the user can fill them in and then submit that data back to the data source. The form control is a great tool for us to use as it will handle the transmission of data back through the connector to the data source. Each of the data cards that is created within the form is mapped to a field from the data source, and the data cards will know the details of the exact control that the user is going to be filling in.

Chapter 8

247

Changing state with formulas We have the ability to change the state of the form, i.e., change it from Edit to New, or New to View, by using formulas. As an example, if we want to switch the form to be a New form, we can use the formula: NewForm(Form1)

where Form1 is the name that we have given to our form. Along the same lines, we can use EditForm(Form1) to change it to Edit mode, and NewForm(Form1) to change it to New mode. Normally we use these formulas in the OnSelect properties on buttons, icons, or other controls. If we are using the form in Edit mode, then we need to not only tell the form where it is getting its data from; we also need to tell it which record we are going to update. If we are using a gallery as a way of being able to select a record, we can reference the Selected property of the gallery to get the active row, e.g., Gallery1.Selected. Alternatively, you could use other formulas such as LookUp, First, or Last to be able to select a record. Finally, once we have our form created, we need to be able to send the data from our app back to the data source.

Submitting the form Forms make the submission process really simple as we have a formula called SubmitForm, which tells the app to take the data in the controls that have been mapped to fields in the form, and submit the data back through the connector to the data source. You will notice that there are no buttons automatically created on the form, so we have to add our own controls to trigger the submission. You could use a button for this, or if you wanted to use something more graphical, then you could consider using the Save icon. If we were to place a button on the screen, we would then use the OnSelect property and use the formula:

Working with Data

248

In this formula, Form1 is the name that you have given to your form.

Figure 8.18: Adding a submit button to the form

There are two other properties from the Form control, which we will introduce as they are extremely useful when creating apps. They are OnSuccess and OnError. When the data source returns a success or failure message, our form can understand that and then execute a formula created in one of these properties. OnSuccess as an example will run if the form receives a response from the data source to say that the operation was completed successfully. OnError will run if it returns an unsuccessful response. Using these properties will allow you to perform different actions in your app based on what has happened. As an example, if we wanted to navigate to a success page, but only if we were sure that the data has been saved, then we would place a Navigate formula in the OnSuccess property.

Chapter 8

249

Now that we have discussed how we can start to interact with our data, let’s add this functionality to our app within a lab.

Lab 7 In this lab, we are going to build on what we have already created in Power Apps by adding navigation and creating a basic form.

Activity 1: Creating the collections Firstly, we are going to use a collection to create a way of centrally managing our navigation throughout the app. Let’s learn how to create collections: 1. Begin by opening our Groceries Phone App, which we created in the previous labs: 2. Create a new screen called Grocery:

Figure 8.19: The new Grocery screen as see in the Tree view

3. Now that we have created a number of different screens to navigate between, we will create a collection to store the navigation items. Click on App in the screen explorer and select the OnStart property.

Working with Data

250

It will still have our formula in for setting our branding, but we will add to it:

Figure 8.20: The OnStart property with the branding formula in the formula bar

4. Ensure that you have a semicolon after your branding variable formula, then create a collection as follows: ClearCollect( colNavigation, { Title: "Home", Screen: 'Home', Transition: ScreenTransition.Fade }, { Title: "New Grocery", Screen: 'Grocery', Transition: ScreenTransition.Fade );

Chapter 8

251

Figure 8.21: How the collection should appear after the branding variable formula

5. Click on the ellipsis (...) next to the app and select Run OnStart to populate the collections. 6. Review the collections from the View menu to ensure that your collection has populated with your data. 7. Now that we have created our collection, we need to use it within our app. With the Home Screen selected, place a Blank Vertical gallery onto the screen and call it galNavigation_ Home. 8. Set the data source of the gallery to be colNavigation by selecting it from the properties on the right side of the screen. 9. Change the gallery appearance so that it appears directly below the header bar in your app, and set it to have a white background:

Figure 8.22: Adjusting the gallery position and background color

Working with Data

252

10. Ensure that you have the top row in the gallery selected and insert a label control. The text property will default to ThisItem.Title, which means you will see Home and New Grocery displayed in the gallery. 11. Click on the label and select the OnSelect property. Set the formula to: Navigate(ThisItem.Screen, ThisItem.Transition)

12. Now you have the opportunity to tweak the gallery to the look and feel that you want. In the example, the label has been made full-width, and the height of the gallery row has been reduced by dragging the handles:

Figure 8.23: In this example the label is full-width and the height is reduced

The final part of this exercise is to make a toggle so that the gallery will show and hide when the hamburger is clicked. 1. Select App from the Tree view, and return to the OnStart property. 2. Add in another formula that will create a global variable to determine the view state of the menu: Set(gblShowMenu,false)

Chapter 8

253

Figure 8.24: Creating a global variable after the gallery from step 4

3. Select the label that you have added to your navigation gallery, and add the following formula after the navigate formula: Set(gblShowMenu,false)

Figure 8.25: With the navigation label selected, enter a new formula under the navigate formula

4. Click on the hamburger icon in the top-left corner of your app and select the OnSelect property of the icon. We are going to create a basic formula in this control to toggle whether the menu is going to be displayed. Enter the formula: Set(gblShowMenu,!gblShowMenu)

Note that ! is shorthand for “not,” so if the variable is already true, it will be changed to false (or not true), and if the variable is false, it will be changed to true (or not false).

Working with Data

254

5. Finally, let’s add the global variable to the Visible property of the gallery so that it will show and hide the menu.

Figure 8.26: Adding the gblShowMenu variable to the Visible property

Ensure that you have executed the OnStart for your app, and then test it to make sure that your menu is working as expected. Now let’s attach our data source to our app, by creating a connection to SharePoint.

Activity 2: Adding the Gallery In our previous labs, we created a SharePoint list for storing our groceries. We’ll now add a gallery so that we can view any items that we’ve created in the list: 1. With our Groceries app open, click the Data icon on the rail on the left side of the screen. 2. Click + Add data:

Chapter 8

255

Figure 8.27: Finding the option to select a data source

3. When the Select a data source box appears, type SharePoint. 4. Select SharePoint, and if you haven’t already got a connection created, click + Create connection. 5. When the list of sites appears on the right side of the screen, either enter the URL of your site, or select it from the list of available sites. 6. When the Choose a list blade appears, select the Groceries list and click Connect:

Figure 8.28: Selecting the Groceries list as the data source we wish to create a connection to

Working with Data

256

7. Observe that you will now have two data sources in your app, colNavigation (our collection from Activity 1) and Groceries (the SharePoint list). 8. If you have changed your screen, select the screen called Home from the Tree view. 9. From the Insert menu, insert a Vertical Gallery and name it galGroceries_Home:

Figure 8.29: Inserting a Vertical Gallery from the Insert menu

10. Position the gallery so that it starts at the bottom of the Header area, and drag it so that it uses the remaining height of the screen:

Figure 8.30: Positioning and adjusting the height of the gallery

Chapter 8

257

11. In the Properties pane on the right side of the screen, change the data source so that it is connected to your Groceries list:

Figure 8.31: Changing the data source of the gallery from the Properties pane

Notice that your gallery has now become empty; this is because we don’t yet have any data on our list. We will resolve that in our next activity where we are going to create a form to create an input form.

Activity 3: Adding the Form The final activity for this chapter is going to be where we create a form to capture the details of a new grocery item. 1. Select the screen that we called Grocery. 2. At the moment, the screen is blank. Copy the controls that we placed in the header section of the Welcome screen, i.e., the name, the background rectangle, and the hamburger icon, and paste them to your new screen.

Another option is to move these controls to a component and use that in your app.

258

Working with Data

3. In order to distinguish these controls from the others, I have renamed all of my controls to contain the word Grocery rather than Home.

Figure 8.32: Renaming controls can help with keeping organized during app creation

4. On this screen, use the Insert menu and add a new Edit form control. Name this control frmGrocery_Grocery.

Figure 8.33: Selecting the control to edit a form from the Insert menu

Chapter 8

259

5. Increase the height of the form so that it takes up most of the screen. Leave yourself some space at the bottom so that we can add a Save button:

Figure 8.34: Adjusting the height of our form

6. In the Properties pane for the form, select Groceries as the data source. Notice that your form will automatically render a number of different controls based on what we created in SharePoint.

Working with Data

260

7. Click on Edit fields in the Properties pane for the form, and remove the Attachments field by clicking on the ellipsis (…) next to Attachments and selecting Remove:

Figure 8.35: Removing the Attachments field with Edit fields

8. In the Properties pane for the form, change the default mode to New. 9. Now that we have configured our form, we need to add a button to save our input. Add a Save icon to the screen from the Icons menu and rename it icoSave_Grocery. 10. Place the Save icon in the bottom-right corner of the screen:

Figure 8.36: Placing an icon that lets us save input from the form

Chapter 8

261

11. With the Save icon selected, change the property selector next to the formula bar and select the OnSelect property. 12. Enter the formula: SubmitForm(frmGrocery_Grocery)

13. This will save our input back to our SharePoint list. 14. Click on your form again, and select the OnSuccess property. 15. Enter the formula Navigate(Home). Now return to your home screen, and let’s test it. From your home screen, open your menu and select New Grocery. Complete the form by filling in the fields, and then click your Save button. Notice that you will be returned to the home screen and your grocery will appear in the gallery:

Figure 8.37: The home screen presents our grocery after we fill the form and click Save

Summary Within this chapter, we have covered a lot of the key concepts related to the use of data within our App. We focused on two key ways of being able to work with data, by looking at data stored both inside and outside the app. We looked at the storing of data within the app by using collections, which store data in memory. Collections can be created using the Collect formula, which will append data to the collection every time it is used, or ClearCollect, which will remove any existing data from the collection before refilling it with data. The first five entries in the collections can be reviewed by clicking on the View menu and selecting Collections. As well as being able to use data within our app, we can connect our apps to data that is stored externally, by creating connections. Connections rely on connectors, which are ways of wrapping the underlying coded interactions into something that can easily be used by business users.

262

Working with Data

We can add and manage our data connections by clicking on the data icon on the rail at the lefthand side of the screen. Once we have established a data source, we can display the data in our app by using either data tables or galleries. Data tables allow us to create a simple table view of our data, which allows us to choose our columns but is quite limited in terms of the formatting that we can actually apply. The second is that we can use galleries, which allow us to have much more flexibility over the way that our data is displayed. When we are displaying data in the controls inside the gallery, we can use the function ThisItem to use the current row in the table, and then follow it with the name of the field, e.g., ThisItem.Title, to display a specific field. When we talk about data, we also need to be able to feed data back into the data source through a user interface provided within the app. For this, we have the form control, which will manage the data mappings to the data source, mapping the control to the field, and then ultimately back into the table. Our forms can be used for creating, editing, and also viewing data, with a single form changing state by using NewForm, EditForm, or ViewForm. We can also submit the form by using the formula SubmitForm, which allows us to push the data back through the connector to the data source. We then added further functionality to our app to practice these skills, by adding a collection to store our navigation, creating a gallery to be able to show the list of groceries that we have stored in our SharePoint list, and also creating a form to allow our users to create entries directly within the app. Having now introduced connectors for existing data sources, in the next chapter, we will investigate connectors more deeply and look at how we can also connect to our own web services.

Questions 1. What two formulas that are available within Power Apps can you use to populate a collection with data? 2. Which control offers the quickest way to create an edit form for an item of data? 3. Which control allows you to define a flexible, repetitive design for each record or item of data? 4. Which formula should you use to update a record in a data source or collection? 5. Which formula should you use to submit a form control back to the data source?

Chapter 8

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

263

9

Introducing Connectors In the previous chapter, we started working with data in Power Apps. Being able to use in-memory storage for your app is the key to having a performant app; however, to make a truly powerful app, we need to be able to interact with data that’s stored in an external data source. The mechanisms that unlock this data and make it available in Power Apps are known as connectors. Connectors are one of the most important elements of Power Apps development as they allow the app to consume data and services from a huge number of sources. When we talk about development, we talk about the ability to reuse code so that we don’t have to develop the same functionality repeatedly. Using connectors effectively allows us to achieve this, but in a way that is very easy to use by both developers and non-developers. In this chapter, we will cover the following topics: •

Understanding standard connectors

•

Understanding premium connectors

•

Understanding custom connectors

We will also look at how we can unlock the power of our own data sources by using APIs and custom connectors to make data useable within our Power Apps. By the end of this chapter, you will understand what connectors are and what the differences are between standard and premium connectors. You will also be able to create your own custom connector that you can use within Power Apps.

Introducing Connectors

266

Technical requirements To follow along with this chapter and to complete the lab, you will need an active Power Apps subscription (either per user, per app, or pay as you go). You will also need to have either OneDrive or OneDrive for Business as a medium for storing data.

Understanding standard connectors Standard connectors are connectors that are freely available for use with every level of licensing within Power Apps. They are available across the entire Microsoft Power Platform, so they can be easily utilized in Power Automate and Logic Apps, as well as anything we create in Power Apps. Standard connectors cover the most commonly used data sources, such as SharePoint, OneDrive, and even some third-party data sources, such as Google Drive. You can establish connections with these data sources either from within your Power App while editing, or outside the Power App from the data menu. Once the connections list is open, click on Connections | New connection at the top of the page to begin the connection selection process:

Figure 9.1: New connection list

Chapter 9

267

Once you’ve started this process, you have the ability to select a connection to any data source in the list, such as SharePoint or Dataverse, which we will explore in Chapter 19, Introducing Model-Driven Apps. There are over 950 connectors within Power Apps that, when presented to us, are in alphabetical order. However, this list is constantly growing. Therefore, we need to be able to search, or accurately filter the list, to find an appropriate connector. Standard connectors encompass many of the Microsoft 365 services that are available to the Power Platform, as well as access to the Active Directory and Cognitive services provided by Microsoft Azure. As part of the licensing changes that were introduced on October 1, 2019, Azure services such as Azure Automation were changed from being standard to premium. Interactions with Microsoft 365 services such as Excel, SharePoint, and Microsoft Forms are all still part of the standard connector package. There are some exceptions to this; for example, interactions with content in a Word document are provided by a premium connector. You should also be aware that a large number of connectors are available that allow you to connect to non-Microsoft services, including competitor services such as Google Drive and Gmail. Regardless of whether we’re adding the connection through the Power Apps portal or through the app itself, we have the ability to perform some basic text filtering on the list to find the connector that we want. Until you enter a search term, for example, Planner, this is labeled on the screen as Search:

Figure 9.2: Filtering the connectors list by typing Planner into the search box

The reason why this is described as a filter rather than a search is because it takes the text that you enter in the search box and filters the connector titles using that text.

Introducing Connectors

268

Once you have found the connector you want, for example, Office 365 Outlook, click the + icon. You will be told how to establish the data connection:

Figure 9.3: The dialog box that’s displayed when you create a connection for the first time

If the connection requires you to authenticate, then you will be asked to provide the required username and password. If you are authenticating against another application in Microsoft 365, then you will be subjected to normal security checks, including multi-factor authentication (if that has been configured within your organization). Likewise, if you authenticate against another service provider, such as Google, then you will need to log in using your Google credentials. Once your connection has been established, it will appear in the list of connections that are displayed in the Data menu of the Power Apps home screen:

Figure 9.4: Available connectors in my environment

Establishing a connection will provide access to the functionality provided by that service, either by providing data in the form of a table or by allowing access to actions that interact with the remote service. A table, when we look at what is returned through the connector, is actually a JSON response that’s returned from a web service and translated for use by Power Apps.

Chapter 9

269

Once we have a table of data, we can then work with it in our app, which we introduced in Chapter 8, Working with Data. Now that we have introduced standard connectors, let’s have a look at premium connectors.

Understanding premium connectors Premium connectors are connectors that are available if you subscribe to premium Power Apps licensing, for example, per user, per app, or pay as you go plans. Premium connectors are created and supported by Microsoft; therefore, they will work without any further configuration. Such premium connectors also include external applications such as Salesforce, DocuSign, Survey Monkey, and Amazon. What you should always keep in mind, however, is that you will need to hold a subscription with the service provider, as well as the required Power Apps license, in order to fully utilize them. If your app uses premium functionality, then both the creator and the users will need a premium license to use it. In the New connection list, all the premium connectors are identified by the Premium stamp. Unlike Microsoft Power Automate, there is no simple way to filter standard or premium connectors:

Figure 9.5: Premium connectors

This may be a helpful source for you to quickly search for information on premium and standard connectors: https://docs.microsoft.com/en-us/connectors/connector-reference/ connector-reference-premium-connectors

While there is a large number of connectors available in Power Apps, it is not an exhaustive list of every service that is out there. If the service has an Application Protocol Interface (API), a protocol layer that allows us to request data and interact with the service, then we can create our own connectors. These are known as custom connectors.

Introducing Connectors

270

Understanding custom connectors Custom connectors can offer Power Apps developers a great number of options when it comes to connecting to data. Custom connectors can be used to create a connection to a data source that hasn’t been served by either the standard or premium connectors. Alternatively, they can also be used to extend the functionality of a built-in connector by connecting to further REST endpoints. If you are not yet familiar with REST, it is short for Representational State Transfer and provides a standard for brokering communications between systems and services on the web. The whole point of it is to make communication with a service much simpler.

As an example, we could extend the actions that are available to the SharePoint connector by connecting to REST endpoints that are not made available through standard connectors, for example, the ability to break permissions inheritance. There are several ways we can create custom connectors, depending on the preference of the developer: •

From a blank template

•

From an Azure service

•

From the URL of an OpenAPI file

•

From a Postman collection

•

From GitHub

To find custom connectors, we must navigate to the main Power Apps screen and select Data from the left-hand menu. When selecting custom connectors, you will see all of the custom connectors that you have access to within your organization. You will also have the ability to create a new connector, update and delete an existing connector, or download a connector to your desktop.

Chapter 9

271

Creating a custom connector from scratch Creating a new custom connector from scratch is extremely easy thanks to the step-by-step wizard that’s been built by Microsoft. To start the wizard, select Create from blank from the New custom connector menu. This can be found in the top-right corner of the screen:

Figure 9.6: New connector menu options

When the Create a custom connector dialog pops up, give the connector a name. This should be a friendly name that makes it clear what the connector is for, as this is what will be visible in the browser. Once you have named your custom connector, you will begin stepping through a number of screens that walk you through the setup process: •

General: Where you’re going to connect to.

•

Security: How you’re going to authenticate.

•

Definition: What you’re going to do once you’ve connected.

•

Code (Preview): This step is optional. It’s used when code is pasted or uploaded to develop the connector. We won’t be covering it here, but essentially it involves toggling between Code Enabled/Disabled and selecting actions and triggers that you want the code to be applied to.

Introducing Connectors

272

•

Test: Confirm that your configuration is working.

Figure 9.7: Custom connector wizard tabs

The first tab you will be presented with is the General tab, which will collect high-level information about the connector. Let’s take a look at this tab.

The General tab The General tab requires you to define the basic information about the connector, such as its identity and the host URL for the service you are going to connect to. It allows you to define the icon that’s used to represent it when it’s accessed across the Microsoft Power Platform, as well as the Icon background color and Description: When uploading your icon, ensure that it will be displayed easily when viewed on a black background. In some cases, images with a transparent background will be displayed on a black background instead.

Chapter 9

273

Figure 9.8: The General tab of the custom connector wizard

The Icon background color expects you to provide a Hex code, which means that you need to use an external tool to select your color. A good tool can be found on the W3C website: https:// www.w3schools.com/colors/colors_picker.asp. Once you have defined the look and feel of your connector, you should always consider giving the connector a short description to make it clear to your users what they can do with it.

Introducing Connectors

274

The most important part of this first tab is the basic connection information. This tells the users what they need in order to connect to your service, and tells them whether the connection is secure (HTTPS) or not. You also need to provide the host, which is the URL of the service that you are connecting to. Once we have defined where the service is, we need to define how we’re going to authenticate it. We can do this in the Security tab.

The Security tab The Security tab will allow you to configure the method you’re using to authenticate the target REST API and will support all of the following (that is, the common) methods of authenticating: •

No authentication: The connector will not prompt for any type of authentication.

•

Basic authentication: This requires the user to enter a username and password to establish the connection.

•

API key: This requires the user to provide a unique key to establish the connection.

•

OAuth 2.0: This requires the user to provide a client ID and secret so that they can authenticate against an OAuth data source such as Azure AD, Facebook, or Google.

The options shown in the following screenshot show that the authentication type will change depending on what’s selected from the dropdown, and will help you define what the user will see when they create the connection:

Chapter 9

275

Figure 9.9: The Security tab

While using an API key, the parameter name and location must match what the API expects. For example, if the API requires appid in the query string, that is how the authentication should be configured.

Now that we have defined how the connector is going to authenticate against the service, we need to define how it’s going to call it.

Introducing Connectors

276

The Definition tab The definition element of a custom connector allows you to define the actions that can be performed through the API. This could be the retrieval of data or an update action. When creating the definition, you also have the ability to create a trigger that can be used in Power Automate, as explained in Chapter 14, Using Power Automate with Power Apps. On the left-hand side of the screen, you will find the actions list and will have the option to create a new action by selecting the New action button. This will create a new action definition in the center space of the screen that you define by filling in the required form fields. You are required to fill in the following information: •

Summary: The name of the operation

•

Description: A brief description of the action to provide guidance to the user

•

Operation ID: The name of the operation that will be referenced through the formula bar:

Figure 9.10: The Definition tab

Chapter 9

277

Once this general information has been entered, the next step is to create a connection to the REST endpoint. One of the most effective ways of being able to define this is to take the URL of the API, including any query string parameters, and use the Import from sample function. This is the most simple way since you define the verb, enter the full URL, and any JSON that’s required in the headers and body. Then, click Import:

Figure 9.11: Import from sample blade

Then, the import process will create a visual representation of the request, automatically strip the query string parameters from the URL, and place them under the Query heading. In this example, we needed to provide a query string parameter called q. If we click on that query item, we can further configure the behavior of the action by defining default values, descriptions, and whether the parameter is mandatory or not.

Introducing Connectors

278

The values that we provide here modify the user experience when using our connector; for example, if we mark the query as being mandatory, then the user must provide it with a value.

Figure 9.12: Request definition generated from the sample

There are also visibility options available to the parameter. These options become more prevalent when using the customer connector with Power Automate, where making a property advanced means that it will appear in the advanced options for that action: •

none: This actually means no definition; therefore, it will take the default value, that is, important.

•

advanced: The parameter will appear in a selection of advanced options that refer to its use in Microsoft Power Automate, rather than Power Apps.

Chapter 9

279

•

internal: The parameter will be passed to the API; however, it will be hidden from the end user.

•

important: The parameter will be passed to the API and will be available to the end user so that they can pass a value:

Figure 9.13: Configuring a query string parameter

If your parameter is a static value, consider setting the default value and changing its visibility to internal to ensure that the correct value is always passed to the REST endpoint.

Once we’ve finished configuring our custom connector, it is important to test it before we push it out to our users. We can do this in the Test tab.

Introducing Connectors

280

The Test tab Once you have at least one action and the configuration has been validated, you can test the connector from within this wizard. This is extremely useful to ensure that you are going to get the correct response from the API before you allow your users to start using it. If your connector requires you to pass query string parameters, you will be prompted to supply them to ensure that the call to the API has everything it needs. What will be returned is a status code that informs you if the call has been successful or not, as well as a response body:

Figure 9.14: The Test tab

Once the connector has been created, it can be added as a data source in Power Apps and used just like any built-in connector. There may be occasions, however, where we will be provided with an OpenAPI file for this. If this happens, we need to import this file directly into Power Apps.

Importing an OpenAPI file As an alternative to creating a connector manually, you can import an OpenAPI file that may have been supplied to you by a third-party service provider or that you may have written yourself.

Chapter 9

281

An OpenAPI file, commonly referred to as a swagger file, is a way of documenting all of the REST endpoints that are available to a service, including its input and output parameters, authentication techniques, and anything specific to the services, such as terms of use. The OpenAPI file can either be imported from your local filesystem or, if it exists on the internet, imported from a URL. Follow these steps to get started: 1. As part of the import process, the JSON of the file will be validated and then imported. The result will be the same as when we created the connector from scratch, whereby any authentication will be defined, as well as the actions and required parameters. 2. If you have created your own OpenAPI file, then it is likely that you have it stored somewhere that’s locally accessible to your machine. To upload it to the Power Platform, click on the New custom connector menu and select Import an OpenAPI file:

Figure 9.15: Importing the OpenAPI file

3. Once you see the Create a custom connector dialog box, give your connector a name and then select the Import button. This will open a File Explorer box so that you can select the file from your local machine. 4. Once the file has been uploaded, assuming that it is a valid OpenAPI file, it will open the custom connector screen to allow you to modify the configurable settings. If you wish to implement more complex types of data, for example, binary files, you may wish to write your own OpenAPI file. Alternatively, you could create one using the built-in Create Connector wizard (which we used to create a connector from scratch) and then download it, edit it, and reimport it.

Introducing Connectors

282

Creating a connector from within Postman Postman is a tool that is available with a free plan and is extremely useful for testing interactivity with web-based APIs. One of the key features of Postman is that it allows you to create a Postman collection, which means that we can define and save all of our API calls within Postman. Once a collection has been saved, we can import this file, which will be processed and once again create the defined connector and any actions that are associated with the connector. As an example, this could be a collection that connects to a weather API and would contain actions such as Get Weather for Today. The process to export a collection from Postman is relatively simple: 1. To export a collection from Postman, you need to open the Postman application and click on the ellipsis next to your chosen collection before selecting Export:

Figure 9.16: Exporting from Postman

Chapter 9

283

2. From this point, we can select the New custom connector menu and select Import a Postman collection. Then, we can select the file we wish to export using the file explorer in exactly the same way that we did when we imported an OpenAPI file:

Figure 9.17: Importing the Postman collection

Once the file has been imported, we can modify the configurable elements of the custom connector.

Summary We have opened the door to hundreds of additional data sources that live externally to our app. This is truly where the power of a connected app can be established, as you can retrieve data from multiple sources, as well as write data back (depending on the connection). In this chapter, we looked at the built-in connectors that are provided by Microsoft so that we can connect to hundreds of different sources of data. We have also broken down these connectors into two distinct groups: standard connectors, which are available with a standard Microsoft 365 license, and premium connectors, which require us to have per user, per app, or pay as you go plans to be able to use them. Many of these premium connectors will require you to have licenses with the service provider so that you can use them.

Introducing Connectors

284

As well as being able to use built-in connectors, we have the ability to create our own so that we can connect to any data source that has an API. These are known as custom connectors. These connectors can be created using an built-in wizard that guides us through a step-by-step process regarding how to create and then define the relevant actions. Alternatively, we can also populate the description of the connector by importing an OpenAPI file from either a URL or from the local filesystem, or by importing a collection from Postman. In the next chapter, we’ll shift our focus from connecting with external resources to the native capabilities in Power Apps, including integration with mobile devices. In particular, we will learn how to take advantage of location data, exploring the business possibilities of using GPS in Power Apps.

Questions 1. There are two types of built-in connector. What are they? 2. True or false: Custom connectors can be created from a URL to an OData file. 3. True or false: I can use an Excel workbook stored on a filesystem as a data source. 4. True or false: Azure AD can be used as an authentication method when defining a custom connector. 5. What is the name of the free tool that can be used to test an API?

Further reading Take a look at the following resources to find out more about the topics that were covered in this chapter: •

Microsoft documentation for custom connectors: https://docs.microsoft.com/en-gb/ powerapps/maker/canvas-apps/register-custom-api

•

Creating Postman collections: https://learning.getpostman.com/docs/postman/ collections/creating_collections/

•

API testing with Postman: https://www.packtpub.com/gb/application-development/ api-testing-postman-video

Chapter 9

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

285

10

Using GPS in Power Apps In this chapter, we are going to use the GPS functionality of a mobile device to genereate some basic mapping data. Mapping data is one of the most basic, yet most powerful, forms of data that can be used and exploited as it can be used for pinpointing user actions and displaying data graphically in the context of global positioning. This chapter differs from the previous chapters, where we used connectors to interact with data sources to retrieve and use data. Now, we are going to be using the native capabilities of Power Apps and the device itself to generate our data. To achieve this, we will cover the following topics: •

Placing maps into your apps

•

Capturing geographic position

•

Lab 8

Throughout this chapter, we will look at the types of data that we can capture from Power Apps and how we can use that data to enrich our apps even further.

Technical requirements To follow along with the lab in this chapter, you will need to have completed the labs in the previous chapters. It is recommended that you use a mobile device for testing purposes. To be able to use APIs from Bing, you will need to have a valid Microsoft account (Live, Outlook, or MSN). Likewise, for Google Maps, you will need to have a valid Google account.

Using GPS in Power Apps

288

Placing maps into your apps Maps can be used to show contextual information to your users, thereby allowing you to represent location data in a meaningful way that allows the user to visualize the location rather than just providing textual information. Two of the most popular mapping technologies that we can use are Bing and Google Maps, both of which can be leveraged within Power Apps. You should be aware that commercial use of some mapping services, such as Google, does carry usage costs.

Leveraging Bing Maps Bing Maps provide a static map API that you can access with a free API key. Simply navigate to https://www.bingmapsportal.com and get the basic map key. You should be aware that there are enterprise-level licensing options for larger volumes of requests and wider terms of use, so be sure to use the correct license level for your requirements. You will need to register and sign in using a Microsoft account so that you can access the Bing Maps Dev Center: To register for a Microsoft account, please visit the following Microsoft guide: https://support.microsoft.com/en-us/help/4026324/ microsoft-account -how-to-create

Figure 10.1: Bing Maps Dev Center

Chapter 10

289

The ability to generate a key can be found in the My account menu by clicking on My keys. This will allow you to generate new keys or view your existing keys:

Figure 10.2: My keys

Once you have generated a key, keep the window open or copy the key to the clipboard so that you can use it once you’ve returned to Power Apps.

Using GPS in Power Apps

290

In Power Apps, we will use an image control to display the map, and we will simply provide the URL of the web service as the Image property:

Figure 10.3: Image control on the canvas

When we place an image control on the canvas, we simply need to put the full URL, plus the relevant query string parameters, into the formula bar. Assuming that the call was successful, a map will be returned. The Bing Maps web service will process the web request based on the parameters that are supplied and will return a graphic displaying the relevant information: https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/Routes?wp.0=Dudley,UK;6 4;1&wp.1=Dudley,UK;66;2&key={api key}

In the preceding example, the API returns a road map showing the routes for Dudley in the United Kingdom and adds a pin to the center of the map. The important parts of this API are related to the location name and country code. The actual output of the API can be seen in the following screenshot, where a map has been generated for Dudley in the United Kingdom:

Chapter 10

291

Figure 10.4: Bing Maps API being called by an image control

Using Power App controls for mapping parameters Rather than statically putting the mapping parameters directly into the URL, we can replace them with inputs from other controls within the Power App. For example, we could use dropdowns so that we can select the mapping type, and the coordinates could be entered in text boxes. In the following screenshot, the map type has been set from the ddMapType dropdown and the location has been taken from the txtLocation text box:

Figure 10.5: Bing Maps being displayed based on data provided by other controls

292

Using GPS in Power Apps

As we can see in the image, the user inputs their choices with the dropdown menu for Map Type, and fills in the Location with text – this way we can use Power App controls to give our map more functionality for the user. If you don’t want to use Bing, you can use Google Maps, just remember that the costing models differ between the two services.

Leveraging Google Maps Just like Bing Maps, Google also provides a static map API that we can call in the same way in order to return mapping information from Google. Again, you will need to register for a Google account in order to use the API. Go to https://developers.google.com/maps and click Get Started to do so. When you click Get Started, you may be asked to enter billing information, which you will need to do. For the full outline of the cost of the Google Maps API, please refer to https://developers.google. com/maps/documentation/maps-static/usage-and-billing. From there you will be guided through a wizard asking how you want to use the Maps API. Complete the wizard – it’s purely information gathering so enter what you feel is appropriate, except for the purpose, which is to learn. Once you have worked through the steps, you will be given an API key, which you will need when we start working on our app in Power Apps. Once you have copied your API key, press Build a demo to activate your key:

Chapter 10

293

Figure 10.6: Getting an API key from Google Maps

To use the Google Maps API, we put the map on the canvas in exactly the same way as we would with a Bing map. First, we need to add an image to the page and then supply the API call to the Image property: https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+Yor k,NY&zoom=13&size=600x600&maptype=roadmap&key={API Key}

Using GPS in Power Apps

294

This example will result in an image of New York with the center point at Brooklyn Bridge:

Figure 10.7: A Google map being displayed on the canvas

Using longitude and latitude for mapping parameters In both examples, we have supplied a location name in order to find the area that we want, but both APIs also support latitude and longitude data: https://maps.googleapis.com/maps/api/staticmap?center=51.477222,0&zoom=14&s ize=400x400&key={API Key}

Chapter 10

295

The preceding code will show a part of London based on the coordinates provided:

Figure 10.8: Showing a map based on latitude and longitude

Inputting the latitude and longitude after staticmap?center= allows us to be much more precise with the map we provide for the user, while using a postal or zip code generally covers a much larger area. This approach to selecting a location will become more important as we start to use the native GPS capability of mobile devices.

296

Using GPS in Power Apps

Capturing geographic position Power Apps has the fantastic ability to integrate with the location services that are provided by a mobile device using GPS or cellular information. With this service, we can determine the position of the device using latitude and longitude, as well as the direction the device is facing. We determine the GPS location using the position that’s relative to two imaginary lines running around the Earth. The first is the equator, which signifies 0° latitude, and gives us the division between the Northern and Southern hemispheres. The latitude value increases as you progress further north and decreases as you go further south, to a maximum value of 90 in either direction. Therefore, the North Pole has +90° latitude, and the South Pole has -90° latitude. The second imaginary line is at 0° longitude and is known as the prime meridian. This line dissects the Earth into the Western and Eastern hemispheres. The longitude values increase and decrease as you move away from the prime median up to a total of +/- 180, which is a secondary line known as the international dateline. Now that we understand how latitude and longitude work, let’s use Power Apps to determine our location based on these values.

Finding the location With Power Apps, we can use a very simple formula to retrieve existing locations. The accuracy of the GPS, however, can vary immensely and will be less accurate if the user has only recently switched on their GPS since not enough time will have passed for the GPS to lock onto enough satellites to provide an accurate reading. Power Apps uses objects called signals, which are values that can change at any time without the user directly interacting with the app. Any formula that utilizes these signals will be recalculated as the values change. For this reason, you should consider capturing the GPS location and freezing it. To demonstrate how to capture the latitude and longitude, we can utilize the skills we learned in Chapter 8, Working with Data, to capture the basic location data, store it in a collection, and then display it in a label. We will modify the OnSelect property of the button to capture the location and enter the formula: ClearCollect(colLocation, Location)

Chapter 10

297

Figure 10.9: Capturing the location of the device and sorting it within a collection

You will need to allow location services if prompted by your browser in order to allow the data to be captured. The reason we’re placing it into a collection is to make it simple to see what has been captured. You don’t necessarily need to do this when you’re creating your app:

Figure 10.10: Location information being captured within the app

Note that, in one formula, three items have been captured: the latitude, the longitude, and the altitude of the device. We can output these properties into a label or any alternative control to display them to the user, or even use this data in our forms by submitting the properties back to our data sources.

298

Using GPS in Power Apps

It’s good practice to allow the user to enable and disable location tracking through the app. Apps that use location services and GPS naturally have a higher power consumption than those that don’t, so you should consider your use of location carefully. To enable GPS, use Enable(Location). Use Disable(Location) to disable it. You could use this within a control such as a button or a toggle to turn location tracking on and off. As well as being able to track the current location of a user, mobile devices also have the ability to track direction.

Finding direction As well as being able to determine a location, we can provide additional context regarding which way the user is facing, especially if you’re capturing location data for a photograph. Power Apps has a function named Compass that allows us to capture the direction the user is facing in degrees. The number of degrees will range from 0 to 360. To utilize this in your app, you will need to call the Heading property of the compass: Compass.Heading

You can use this heading to determine the direction the device is facing. North is 0 or 360 degrees, East is 90 degrees, South is 180 degrees, and West is 270 degrees. This information can be presented directly to the user in a label, or saved in a database with the Patch function.

Lab 8 Within this lab, we are going to add elements of GPS connectivity to our app. To follow along with this lab, you will need to have completed the previous labs, where we have been building our groceries app. You will also need a mobile device to fully test the functionality we are about to develop.

Activity 1: Updating the data source The first thing that we need to do is update our data source so that we can capture and store some location data: 1. Open the Groceries list on the SharePoint site we created in the previous labs. Click on Add Column to add a single line of text column. Call this column Storage Location:

Chapter 10

299

Figure 10.11: Adding and naming a column for Storage Location

Now that we have updated our data source, we will add more functionality to the app so that we can use the location functions.

Activity 2: Creating a new asset In this activity, we will update our Power App so that we can take advantage of the GPS functionality of the mobile device. We will add the new SharePoint column to our form, and add a button to be able to capture the current location. The reason for this is so that we can give the user the option to record the location manually, or automatically by using the device functionality: 1. Open the app that we have been building throughout the previous labs in edit mode:

Figure 10.12: App shown in edit mode

2. Open the Grocery screen from the Tree view on the left-hand side of the Power Apps Studio. 3. Click on the form that we added to that screen, and select Edit fields from the property bar.

Using GPS in Power Apps

300

4. Click Add field, select your Storage Location field, and click Add:

Figure 10.13: Adding a field to a form in Power Apps

5. Close the Fields blade, and scroll down in your form to confirm that you can now see Storage Location being displayed as a text input control. 6. Click on the Storage Location data card, and unlock it by selecting Advanced from the Properties pane on the right side of the screen:

Chapter 10

301

Figure 10.14: Opening the Advanced properties for a data card

7. With the card unlocked, resize the text box so that it is approximately two-thirds of the width of the form:

Figure 10.15: Example of how to resize the text box

302

Using GPS in Power Apps

8. To the right of the text box, add a button and resize it to take up the final third of the width:

Figure 10.16: Where to add the button for Storage Location

9. Change the text of the button to Location. This button will be used to capture the current location and add it to the text box. 10. We will now add a formula to this button to capture the current location and store it within a context variable. This way we can show the location in the text box after pressing the button. 11. With the button selected, change the OnSelect property of the button to the following: UpdateContext({locLocation: Concatenate(Text(Location.Latitude), ",", Text(Location.Longitude))})

12. Concatenate is being used to combine the component parts of our coordinates into a single string, and we are using the Text formula to convert the Location.Latitude and Longitude from a number to a string so that the Concatenate formula will work without errors:

Chapter 10

303

Figure 10.17: Developing the OnSelect property of the Location button

13. Click on the Storage location text box, and select the Default property. Notice that at the moment, the formula is Parent.Default. This is saying that this is going to take the default value from SharePoint, or the value already stored against the item, and display it. We will now add some conditional logic into this field so that if we have pressed our button, we will display our GPS information rather than the stored information. 14. Change the Default formula to: If(IsBlank(locLocation),Parent.Default,locLocation)

15. This will check to see if the variable we created in our button contains information. If not, it will just use the SharePoint default or existing value. 16. So, if we now click our Location button, it will replace the value with our current latitude and longitude:

Using GPS in Power Apps

304

Figure 10.18: Presenting latitude and longitude with the Location button

17. Now, when we press our save button, we will either store or update the value in SharePoint with our new location information. Now that we are writing geographic data back to our data source, let’s update our app so that we can display this data using a mapping API.

Activity 3: Displaying a map Now, we will continue to build out our app by adding a map to the view form, which will display the geographic location of where the groceries were added. This example will be based on the Bing Maps API, so ensure that you have signed up to https://www.bingmapsportal.com. Let’s get started: 1. Create a new blank screen, and call this View grocery. 2. Copy across the basic branding information from the home screen, such as the navigation gallery and header controls.

Chapter 10

305

3. Place a display form on the screen, name it frmView_ViewGrocery, and select Groceries as the data source. 4. With the form selected, select the Item property from the property dropdown. 5. Set the item to the following formula: galGroceries_Home.Selected. 6. When we update our gallery on the home screen to navigate to here, it will take whichever the clicked row was and use it to display the record in this form. 7. Increase the size of the form so that it takes up as much of the available screen as possible:

Figure 10.19: Example of how to adjust form size

8. Click on the Storage Location data card, and unlock it from the Advanced properties.

Using GPS in Power Apps

306

9. Expand the height of the data card so that it is big enough for us to add an image:

Figure 10.20: Example of how to adjust the height of the data card

10. With the data card selected, add an image from the Insert menu and position it below the Storage Location title:

Figure 10.21: Adding an image to the data card

11. With the image control selected, change the Image property to the Bing Maps API URL: ""https://dev.virtualearth.net/REST/v1/Imagery/Map/AerialWithLabels/"& ThisItem.'Storage Location' &"/18?mapSize=500,500&pp="& ThisItem.'Storage Location' &";66&mapLayer=Basemap,Buildings&key={Your API Key}"

Chapter 10

307

12. This will take the Storage Location field and use that to place a pin on the map.

Feel free to delete the label displaying the coordinates within the data card.

Now that we have prepared our details page, we will complete this section by allowing our users to navigate to the form to view the groceries.

Activity 4: Adding navigation Part of the functionality of this app is allowing our users to add new assets and then view their details afterward. Now, let’s update the various areas of navigation to make this possible: 1. From the screen list, go back to the Home screen:

Figure 10.22: Home screen of the app

2. Select the galGroceries_Home gallery control and select the right arrow icon:

Figure 10.23: Icon to select on-screen

3. Change OnSelect to Select(Parent); Navigate('View Grocery'). Now, run your app and click on the right arrow to see your asset information and a map being displayed.

308

Using GPS in Power Apps

Then, click on the hamburger menu and add a new item from the new screen so that the value of your current location will be placed in the data source:

Figure 10.24: Adding an item to test the location feature of the app

Chapter 10

309

Save and publish your app and feel free to test it on your mobile device.

Summary In this chapter, we looked at the most common type of data visualization: mapping. Mapping helps you display data in a context that’s easier for your users to understand than simply displaying latitude and longitude information on the screen. Specifically, we focused on how to display mapping data using the APIs provided by Bing Maps and Google Maps since they both offer free APIs for you to use within your apps. Power Apps provides signals that allow us to track the GPS location of the device, as well as the direction that it’s facing. The key thing to remember with signals is that their values constantly change. Therefore, if you wish to use signal values, then you should capture them. Remember that location services are extremely power-intensive, so only use GPS when you need to in order to avoid unnecessary battery drain. This should be done by calling the disable function. In the next chapter, we will develop our project further by learning how barcodes and QR codes work in Power Apps.

Questions 1. Why should a signal be captured rather than used directly in a formula? 2. What three pieces of data will the location formula retrieve? 3. How is direction expressed when using a compass? 4. What function can be used to disable GPS? 5. Why would you not leave location services on permanently?

Further reading Take a look at the following resources to find out more about the topics that were covered in this chapter: •

Bing Maps API documentation: https://www.microsoft.com/en-us/maps/documentation

•

Google Maps documentation: https://developers.google.com/maps/ documentation/

310

Using GPS in Power Apps

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

11

Working with Images and Barcodes In the previous chapter, we started to capture more contextual information within our apps by utilizing the built-in GPS functions of a mobile device. In this chapter, we will expand our utilization of mobile device capabilities by capturing and using images, as well as being able to read/ identify information from barcodes and Quick Response (QR) codes. Both barcodes and QR codes are available on almost everything that we interact with on a dayto-day basis, whether that is on our food goods or our electronics, and even for quickly locating apps. These unique identifiers can be utilized throughout our apps, allowing us to encode and read data using methods other than standard textual formats. In this chapter, we will be covering the following topics: •

Understanding how to store images within Power Apps

•

Using the Camera control

•

Using the Add picture control

•

Understanding the barcode scanner

•

Lab 9

By the end of this chapter, you will be able to leverage the camera-based capabilities of a mobile device to take and store photos and extract data from barcodes and QR codes.

312

Working with Images and Barcodes

Technical requirements To follow along with this chapter you will need to have completed the previous labs. In order to be able to use the camera controls, you will need a device with a camera. To use the barcode scanner, you will need a mobile device with the Power Apps app installed.

Understanding how to store images within Power Apps Before we start to utilize the image controls within Power Apps, it is important to understand where we can actually store them. Power Apps can read and use images from a number of different storage types, including SharePoint. However, while saving the images, we can only natively save them to Excel, SQL Server, and Dataverse, which we will discover more about in Chapter 19, Dataverse. While we can’t directly save the images to SharePoint (and other more obvious image stores), there are ways in which we can utilize other areas of Office 365 to save images, which we will investigate in the next chapter. When we talk about capturing images, we are introducing ways in which we can use visual inputs, rather than constantly using something textual. Really, when we are considering how we want to use images within Power Apps, especially given that we are designing for a mobile device, the obvious way of using images is with the camera.

Using the camera control The camera control is one of the controls that directly interacts with the camera attached to the device. This could be a camera that is built into the device itself, for example, the camera in a phone, or it could be a wired camera that is attached to a desktop device. The camera control allows us to directly capture an image using that device and then do something with it in Power Apps. The camera control can be inserted into the page from the Insert | Media menu, and when it appears on your page, it will immediately start to stream a feed from your camera:

Chapter 11

313

Figure 11.1: The camera control on the canvas showing a live feed

Within our app, we have the ability to select the camera that we want to take the feed from. The camera selection takes the form of a numerical value, with your primary camera being 0, and then subsequent cameras being numbered from there. If we take Microsoft Surface as an example, the front-facing camera is camera 0, while the rear-facing is camera 1. The selection of the camera can then be something that is user-driven by using a combination of the other controls within Power Apps. Once the user has the image lined up in the Camera control, we need to be able to capture the image.

Capturing the camera image There are two ways in which the user may wish to interact with the app in order to capture the image: •

By tapping the camera control

•

By clicking another control elsewhere on the screen

The first way of capturing a picture is when a user taps or clicks on the image on the screen. For us to handle this, we need to modify the OnSelect event property of the camera control. For this example, we will capture the image and place each image into a collection so that we can use the collection screen to see what is being stored.

Working with Images and Barcodes

314

The camera control has a property available called Photo that, at the point of click, will capture the frame currently being displayed. Therefore, if we use the following formula, we can begin to capture images and populate the collection with some other key pieces of information. In the following example, we will populate a collection called MyPhotos each time the camera control is used. This will capture the photo, the date and time the picture was taken, and the location it was taken at based on the GPS capabilities of the device: Collect( MyPhotos, { Photograph: Camera1.Photo, DateTimeTaken: Now(), LocationTaken: Location } )

It should be noted that the first time you use this functionality within the app, either as the creator or as the user, you will be prompted to allow the use of the camera. Effectively we see the same behavior as we would expect from a commercial app downloaded from the store. Other aspects of the collection should look somewhat familiar. In this case, I am capturing the photograph, the date and time that it was taken, and the location information as well:

Figure 11.2: A collection storing images taken by the camera

Chapter 11

315

Once the images are within a collection, we can use a gallery control to output them again. So, if we place a horizontal control on a page and select our collection, we can use an image control to display our pictures:

Figure 11.3: A gallery showing the images stored within a collection

In the following screenshot, I have left the textual representation of the image to illustrate how the image is actually saved. It is worth pointing out that the image format will differ, depending on the device the image is taken on. The preceding images were taken on a Microsoft Surface device, which captures the image in PNG format. iOS and Android generally capture in JPEG format. However, what provides a lot of value is the textual string that comes after the image type, which is a base64 string encoding of the image:

Figure 11.4: An illustration of the base64 encoded string representing the image

Working with Images and Barcodes

316

As long as you remove the initial image type, for example, data:image/png;base64, from the image encoding, then you have something that is quite useful for not only displaying the image but also for passing into Microsoft Power Automate to create a file elsewhere. To remove the preceding code, we can use some of the textual functions that we discussed earlier in this book to remove a specific number of characters and isolate just the base64 encoded string: Mid(ThisItem.Photograph,Find(",", ThisItem.Photograph))

However, there are times that, as an app designer, we won’t want our users to press the image to take the picture, and we would rather our users press a button to do that instead.

Capturing from an icon The Photo property that we used in the previous section will only capture the photo when it’s called from the OnSelect event of the camera control. Calling the same property from any other control will always result in a null value being stored. Therefore, we have to approach this problem in a slightly different way. There are two other properties to note about the camera control that we can use to capture an image from another control. Those properties are as follows: •

Stream: This is an image that is automatically updated based on the stream rate.

•

StreamRate: This tells us how often to update the image stream.

Consider StreamRate to be the equivalent of the shutter speed on a camera. The smallest value for this to work is 100, which equates to 1/10 of a second. These two properties are key to being able to configure our buttons on the screen. I will set StreamRate to 100 so that it spends the least amount of time capturing the image. Now, I can place an icon on the screen and assign the OnSelect event for that icon to capture the camera stream:

Chapter 11

317

Figure 11.5: An icon on the page interacting with the camera control

The end result is the same in that I have an image that I can now use within my app or pass to a data store. As well as being able to capture images directly from the device, I can also provide the user with the ability to upload images manually.

Using the add picture control Using the add picture control is the quickest and easiest way for images to be added to an app in Power Apps since it allows us to upload images from the local device. If this control is used and accessed using a desktop browser, then the local file explorer will be used to select the file, and if the control is used on a mobile device, then you will simply select the images from the local image store.

Working with Images and Barcodes

318

Power Apps supports all of the common image types, including the following: • • • • • • • •

.jpg .jpeg .png .gif .bmp .tif .tiff .svg

The behavior of the Add image control is quite interesting as it actually creates a group of controls. It adds a button for the user to click on to upload an image and adds an image control, all within a control group, as shown in the following screenshot:

Figure 11.6: Control group containing an add media button and an image control

The camera on a device is versatile and can be used to capture data as well as images.

Understanding the barcode scanner Barcodes come in a range of different sizes and types – even in different formats since you could consider a QR code to be a barcode. Both types of graphics are designed to encode data into a graphic that scanners can then retrieve and process. Barcodes are used within our day-to-day lives, most commonly associated with shopping, with the goods being scanned and the scanning solution being able to immediately recognize what the goods are based on the code. Domestically, we see this also being used more and more within selling services such as Ziffit or SellitBack, where the user scans a barcode and gets immediate product feedback. The same applies to QR codes, which are now more commonly associated with web pages so that someone can scan the image and the associated page loads in the browser. The Barcode scanner control supports the following barcodes: •

Universal Product Code A (UPC A)

•

UPC E

Chapter 11

319

•

European Article Number 8 (EAN 8)

•

CODE 39

•

CODE 128

•

Interleaved Two of Five (ITF)

•

PDF 417

The full list of the supported bar codes can be found on the Microsoft Docs site: https://learn. microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-new-barcodescanner. Ensure that you pay special attention to the device support for the bar codes, i.e. some

are only supported by Android devices. Some examples can be seen in the following image:

Figure 11.7: Examples of various barcodes

If we want to use this functionality with our app, we need to place a Barcode scanner control onto the page. This control can be found under the Insert group and the Media menu. I should point out here that, in Power Apps, barcodes and QR codes are treated in exactly the same way—we use the same control and the same properties to capture the input. Therefore, as we work through the examples, you can use barcodes and QR codes interchangeably. Notice that, when you place the Barcode scanner control on the page, all you are actually presented with is a button labeled Scan. The behavior that we will observe in the app is that when the Scan button is pressed, the device camera will be activated and will start to look for barcodes or QR codes within the viewfinder.

The functionality of the barcode scanner is not available while using the browser. This will only work in the Power Apps app, which can be installed on iOS or Android.

320

Working with Images and Barcodes

When it detects a barcode or QR code, it will execute any formulas that have been entered into the OnScan event:

Figure 11.8: The Barcode scanner mode on a mobile device

Chapter 11

321

Obviously, we are interested in capturing the information that’s stored within a barcode or QR code, so we can either push the data into a store or into another control to be displayed. For this example, I am going to push the data into a label so that we can see what is retrieved by setting the Text property to the following: BarcodeScanner1.Value

To illustrate what is returned, I have taken a photograph of a barcode and then scanned it using the barcode scanner:

Figure 11.9: The output of a barcode that has been scanned

Alternatively, I can scan a QR code and retrieve the data in exactly the same way. So, if I encode some information into a QR code (there are lots of websites for you to do this, which you can find with a simple Google search or search in the App or Play Store), then I can use my device camera to decode it and use the information within my app. In the following example, I have encoded a URL into the QR code and then read it using my app:

Figure 11.10: The output of a QR code that was scanned using the barcode scanner

There are times, however, when we actually want to give users the ability to import a picture from the local device, and that is where the add picture control is used.

Working with Images and Barcodes

322

If you wish to feed the inputs from this control into a collection, then you can populate it by utilizing the OnSelect property.

Now that we’ve seen how to work with images and barcodes, let’s conduct an experiment.

Lab 9 Within this lab, we are going to add two additional elements to our asset tracking app by capturing a picture of the asset and the barcode at the point of entry. The reason for using a barcode during this lab is because most products ship with at least one identifying barcode on them, making testing the solution much simpler.

Activity 1: Updating the data source To begin with, we will need to add a new field to our SharePoint list in order to receive the barcode information which we’ll scan in Activity 2: 1. Navigate to your My Groceries SharePoint site. 2. Open your Groceries list. 3. In your list, click on + Add column and select Single line of text. 4. Enter Barcode as the name of the field:

Figure 11.11: Naming the Barcode column

Chapter 11

323

5. Confirm that you can now see the Barcode column in your list view. We are now ready to start capturing some data and saving it to that column from our app.

Activity 2: Capturing bar code data In order for us to easily identify the product we’re scanning, we need to capture the identifier from the barcode. To do this, we’ll place a barcode scanner control into our app and then save the outputs in our list. 1. Open your My Groceries SharePoint site. 2. Navigate to the Grocery screen where we have our input form. 3. Select the form, frmGrocery_Grocery and select Edit fields from the property pane:

Figure 11.12: Edit fields button for the frmGrocery_Grocery form

4. When the Fields list appears, select + Add field:

Figure 11.13: Add field button on the Fields list

5. Select Barcode from the list of field and select Add so that it appears in your form. 6. Right-click on the Barcode field and select Unlock so that we can begin to edit the data card.

Working with Images and Barcodes

324

7. Reduce the size of the barcode text field so that it takes about two thirds of the width:

Figure 11.14: Adjusting the width of the text field

8. Ensure that you have the Barcode data card selected, and click the Insert menu. Click on the Media menu and insert a new Barcode scanner control. 9. Position the scan button and modify its size so that it fits in the gap to the right of the text box:

Figure 11.15: Postitioning a scan button

10. Rename the control to bcdeBarcode_Grocery. 11. Select the Barcode text box and select the Default property. We are going to make this text box get its input from the barcode scanner. Delete the Parent.Default formula, and replace it with bcdeBarcode_Grocery.Value. This will now populate with the barcode data when the scanner is used, and because we are using the text box that was placed there when we added the field, the data will be stored back in SharePoint in the barcode field.

Summary In this chapter, we have investigated how we can start to leverage media controls to capture images that we use in our Power Apps and highlighted the limitations around the storage, that is, we’re only able to directly store media in Excel, SQL Server, or Dataverse. However, we can convert the images into a base64 string that we can use within Microsoft Power Automate that we can store elsewhere. We investigated the camera and the ability to capture images from the camera control so that we can use them within our app. We also looked at two ways of being able to capture the image, the first of which is by tapping the image itself, which captures the Photo property of the control.

Chapter 11

325

The second way was by creating a separate button to take the picture, which uses the Stream property instead. The thing we must remember when using the Stream property is that we need to change StreamRate to a minimum value of 100. The barcode scanner control provides us with the ability to capture data from barcodes and quick response codes and use them within our app, which helps speed up the retrieval of information. The barcode scanner is one of the few controls that will only work when it’s used on a mobile device; it doesn’t work in a browser. In the next chapter, we will learn how to secure our app.

Questions 1. True or false: I can upload a .jfif image into my app. 2. Which control would I use to be able to upload an image into an app? 3. If I wanted to use the Camera1.Photo formula, which control would I interact with? 4. If I wanted to use another control to interact with the camera, which camera property should I change? 5. What format is a captured image stored in? 6. True or false: Text within a QR code can be retrieved and used within an app.

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

12

Securing Your Power Apps One of the most fundamental features of any system is the ability to secure the data that is being stored and processed. When developing any type of app, we should always keep security at the forefront of our mind, especially when our apps display or process any form of data. We need to ensure that the users have access to only the information that they are authorized to see, and that their levels of access are not higher than what they need to be able to perform their duties. In previous chapters, we investigated retrieving and displaying data from data sources. We will now start to look at how security at the data source affects our app and how we can implement some levels of security within the app to govern what people can and cannot do. App developers often make the mistake of simply hiding data in the app and assuming that this makes the data secure. This is certainly not the case as the underlying data source could be accessed in other ways, not just through Power Apps. This is often referred to as security through obscurity. So when designing your app, consideration should be given to three specific layers of user access— data source, app, and screen. It is imperative that all aspects of security should be considered when creating your app to ensure that data is presented to the correct users, and that the correct users interact with it. In this chapter, we will be covering the following topics: •

Applying in-app security

•

Securing data

Securing Your Power Apps

328

•

Securing the app

•

Lab 10

By the end of the chapter, you will have gained an understanding of the options for securing your data, and of how to apply basic security to your app. These considerations should always be taken into account before building your app.

Technical requirements To follow along with this example, you will need to have completed the previous labs. To be able to work through the examples relating to SharePoint permissions, you will need to have access ownership rights to your SharePoint site. If you created your site in the earlier labs, then you will have the correct level of permissions.

Securing your data First and foremost the most important thing that you do with any of your apps is consider the security of the data itself. We can put a number of protections into the app that allow people to only see what we want them to see, but if they have access to the underlying data source then they could still get the data. This is extremely important to understand when using data sources such as SharePoint, where the underlying service provides its own user interface. When using other data sources such as SQL, or Dataverse, it’s not as straight forward to be able to access the data directly, but that should be no reason why we shouldn’t still apply security to our data.

SharePoint There are numerous ways in which permissions can be applied within SharePoint to protect data, as well as varying levels at which permissions can be applied. Firstly, SharePoint can use groups of users to apply permissions, such as the following: •

Its own group structure called a SharePoint Group, which only applies to that one SharePoint site.

•

A Microsoft 365 Group, which you can think of as the users who can access a Microsoft Team.

•

An Azure Active Directory Security Group, which requires an IT administrator role to maintain.

Chapter 12

•

329

Direct user permissions.

All of these different methods for managing security can be applied to the actual SharePoint site, to a list or library, or even to an individual item or file. If our users do not have permissions to be able to see the data, the data is either hidden to them or security trimmed so that they can’t be seen in the browser in search results, or through any other mechanism for trying to return the data. This is an extremely important point to understand, as the user who is logged into the app will only be able to access or interact with SharePoint-based data if they have permissions to do so within SharePoint. This is referred to as user context, where all data interactions are undertaken with the logged in user. If we are using data that is stored within a file the same principle applies. If files are stored in any type of cloud storage, such as Excel files stored in OneDrive, the file location would need to be shared with every user who needs to see the data through the app, which means that often, as an app owner, you may end up managing two independent sets of permissions to ensure that your users are not denied access. If you are using one of the user aware data sources, remember to grant access to the underlying data for all of the users who will be using it, otherwise they will load the app and see a data retrieval error. When you are setting permissions, be aware that there are some limitations, such as a limit to the number of individual items that are permissioned. At the time of writing, a single list can have up to 10,000 individually permissioned items. The other limitation, particularly with SharePoint, is that security can only be applied to a level as low as rows in a table; it cannot individually apply permissions to columns. SharePoint permissions are fairly simple to apply, and will certainly be suitable for a large number of use cases. But if we need to go to a more granular level, and control our permissions to a lower level, then we’ll need to consider Dataverse.

Dataverse From a security perspective, Dataverse boils down to the same sets of rules which SharePoint operates on; it gives the ability to define permissions on various objects using a selection of group-based or individual permissions.

330

Securing Your Power Apps

There are, however, two key factors that set Dataverse apart from SharePoint, which are the ability to control permissions to multiple parts of the environment using Security Roles, also known as Role-Based Security, and the ability to apply permissions to an individual column. Dataverse starts to reach its limit when we need to start building different views of the data, which could then be permissioned to individual users or groups of users. That is where we escalate into the world of SQL Server.

SQL Servers SQL Server is an example of a service that uses a given username and password to authenticate and establish a connection with the data source. Any users of the app will automatically be able to access the data using the credentials that are stored within the connection, therefore due diligence must be given to the data that is made available to the account used for the connection. I’ve personally seen this controlled through the use of views to ensure that no more data than is required is available.

Which to use? As you start to understand the capabilities of different data sources, you are able to start thinking about the best solution for your needs. I personally always consider security first. What is it we’re trying to secure? Are we securing entire tables of data, individual rows, or even just columns? For anything beyond basic security, I personally start looking towards Dataverse as my data store as it allows much more granular control over all aspects of data, as well as making it extremely easy to manage group permissions through role-based access. If it is very simple data, with a very simple security model, then I will lean towards SharePoint. Once we have given enough thought to how we are securing our data, we can then consider how we will secure parts of our app.

Applying in-app security As we build our apps, there are going to be screens that we only want our elevated users to access—for example, administration screens. To achieve this, we need to be able to distinguish users from each other and understand what roles they have available to them. There are a number of ways in which you can achieve this depending on your exact requirements and how you want to manage your permissions. At the very basic level you can store your list of users and their roles directly within the app.

Chapter 12

331

If you want to drive your permissions in a slightly more managed way, then you could look at leveraging the security capabilities of the data source, such as SharePoint lists or groups, or even move the permissions away to Active Directory security groups. Just like with the data sources, you need to ask the question “how am I going to manage permissions?” The earlier you ask this in your app design and development, the less rework you’ll need to do later when you try to retrospectively apply your desired permission model. Let’s start with the first example of managing security and look at how we can employ some basic in-app checking.

Locally controlled access lists One of the simplest ways of being able to secure parts of your app is by using locally controlled access lists. This is a way that is usually favored by users who are producing less critical apps and want to maintain their own access control lists without the burden of managing groups or involving administrators. One common way of going about this is to store the user information within a collection that contains the username and the level of access you wish to give them. The advantage of this method is that it is completely within the control of the app owner to add and remove users from elevated rights; however, there is an admin overhead to changing the contents of the collection if new administrators are appointed or old ones are removed. There is also the risk that if the app owner is removed from the organization, we may lose the ability to easily update this list. In the following example, we will create two levels of users: •

User: These users have basic access to the app in order to carry out basic functions

•

Administrator: These users have access to screens that are not available to standard

users—for example settings screens Ideally, we want the app to populate the control list at the point of the app being loaded, in other words. OnStart, so that any data related to a user level can be loaded. Let’s populate a collection with our users: Collect(colUsers, {User: "[email protected]", Role: "Administrator"}, {User: "[email protected]", Role: "Administrator"}, {User: "[email protected]", Role: "User"}, {User: "[email protected]", Role: "User"} );

Securing Your Power Apps

332

Once the collection is populated, we can query this collection throughout the app to determine whether various areas should be accessible to the logged-in user. The simplest way of doing this is to query the collection to see whether the user exists and to return their access level, as shown in Figure 12.1:

Figure 12.1: Screenshot of the formula to check user access level for a collection

In the preceding example, I am querying the role of the logged-in user, which can then be used to show or hide controls in the app, for example, hiding navigation controls if the person using the app is just a user. Note that in the example we have also included the formula Lower within my query. This is because there can sometimes be a case mismatch between email addresses stored in Power Apps and what is stored elsewhere, such as in my collection. To ensure that we are not going to cause issues within mismatching cases, the formula ensures that both sides of the comparison are all in lowercase. It is not always feasible, however, to store lists of users within the app itself, especially if this involves large numbers of users or access lists that are frequently updated. In this case, you may consider using AAD to secure your apps.

Azure Active Directory (AAD) security groups One of the most common ways of securing data throughout the whole of Microsoft 365 is by using AAD groups. AAD security groups effectively give centralized control over permissions to the AAD administrators. This is a group of people who are usually based within IT who help govern the overall security of the organization.

Chapter 12

333

They will have the responsibility of adding people to these groups when people join the organization, and likewise, they will remove users who have left. In order to access AAD, you need to access the Azure portal by navigating to portal.azure.com, and then select Azure Active Directory from the left navigation menu. If you are prompted to log in, sign in using your Microsoft 365 credentials:

Figure 12.2: AAD left-hand navigation menu

Once you have navigated into Azure Active Directory, you are able to manage users and groups by selecting the relevant link from the left navigation menu. Groups are a way of gathering a number of users into a container which you can then use to assign permissions or even licenses. By selecting Groups from the navigation, you can then create a new group by clicking New group at the top of the screen.

334

Securing Your Power Apps

We can then follow the wizard and fill out the form, ensuring that we select the group type Security:

Figure 12.3: Adding a new security group to Azure Active Directory

Once we have navigated through the wizard, we are able to select our newly created group and begin working with it. If you don’t see your group straight away, just refresh your screen. Once we have our group created, we can then go into the group and start to change the membership and ownership of the group. We can add new members into the group so that we can give the users permission to both the app and also the specific elements within the app, simply by clicking on Add members at the top of the screen. We can then choose who we want to add, and then add them to our group.

Chapter 12

335

It may take a few seconds, and maybe a refresh for good measure, for the new member to appear in the group, but you will then see them listed:

Figure 12.4: AAD group membership

Being an owner of a security group does not automatically make you a member.

Before we go back to our app and start to look at how we can hook into our new Azure AD security group, we first need to get its ID to be able to identify the group within a formula. This is available from the Properties option on the menu, and is labeled as the Object Id.

Securing Your Power Apps

336

This has a really useful copy button on the right of the text box so you can easily store it on your clipboard:

Figure 12.5: Security group properties

Once we have completed our security group setup, and retrieved our ID, we need to be able to leverage the security group through our app. We can do this by using the AAD connector, which will allow us to connect to and directly interact with AAD. Firstly, please note that when leveraging some functionality, you may need your tenant administrators to grant permissions to use the connector:

Figure 12.6: Approval prompt if you are using connectors that require admin consent

Chapter 12

337

Once we have the necessary permissions, we can work with the AAD connector. Any time we use a connector, we add it as a new data source, and so we can add it to our app by going through the following steps: 1. Select Data from the left hand navigation menu. 2. Click Add Data and search for Azure AD:

Figure 12.7: The AAD connector being selected from Data

3. Once you have located AAD, we can select it and create a new connection to it. Once the connector has been created, we can then start to utilize the actions that are available with the AAD connector. The key one for us, in this scenario is the CheckMemberGroupsV2 function. The CheckMemberGroupsV2 formula will allow us to provide the User Principal Name (generally the email address), and the ID of the group that we want to check. If our response comes back with a value, then the user is part of that group, otherwise they’re not. We are then able to combine this with conditional logic, which we covered earlier in this book, to change the behavior of the app based on what comes back. The really nice thing about the CheckMemberGroupsV2 function is that we can check several groups to see whether a user is a member of any of them. Let’s work through an example where we show a label if a user is present in a specific AAD group. To allow us to test, we will use a button to set a context variable that will determine if we are going to show the label. We are going to start use the OnSelect property of the button and will start by entering our connector name, which is AzureAD.

Securing Your Power Apps

338

Once we’ve entered the name of the connector, we can select the relevant action, which in our case will be CheckMemberGroupsV2. The first thing which the formula requires is the UPN, which will we assume is identical to the email. If you’re ever in a scenario where the UPN and the email are not the same, you may need to go and use the Office 365 users connector to be able to find the main user object by searching for the email address. So, building up our formula, we will now see: AzureAD.CheckMemberGroupsV2(User().Email

The second argument that the action requires is a table containing the object IDs of the groups that we want to check. The table requires just a single column called “Value” that we set to the Object ID that we copied from AAD. We can build up our formula to look like this: AzureAD.CheckMemberGroupsV2(User().Email, {Value:"7b80df2f-16ec-443f-bed3a54c20ada233"})

Alternatively, the same formula could also be expressed as: AzureAD.CheckMemberGroupsV2(User().Email, ["7b80df2f-16ec-443f-bed3a54c20ada233"])

We now need to check what the action has returned to see if it contains any data. Whenever we are dealing with tables of data, we are able to use an IsEmpty formula to determine if the returned table contains data. If we also build this into an If statement, we can act on whether the returning data exists or not, and then set up our variable to show or hide a label. If( !IsEmpty( AzureAD.CheckMemberGroupsV2( User().Email, {Value:" 7b80df2f-16ec-443f-bed3-a54c20ada233"} ) ), UpdateContext({ctxShowLabel:false}), UpdateContext({ctxShowLabel:true}) )

As you become more familiar with formulas and start to understand their behavior a little more, you will realize that the IsEmpty formula already returns either a true or false value.

Chapter 12

339

Personally, I have found that when working with entry level citizen developers, explicitly setting true and false as outputs is easier to understand. As you become more comfortable, this could

then be consolidated to: UpdateContext( { ctxShowLabel: IsEmpty( AzureAD.CheckMemberGroupsV2( User().Email, {Value: "7b80df2f-16ec-443f-bed3-a54c20ada233"} ) ) })

If we then wanted to show or hide the label, we would use the ctxShowLabel contxt variable in the Visible property:

Figure 12.8: I HAVE ACCESS label shown because the user was found in the security group

Again, ideally this is set during the app start up so that we only have to perform the check once. Once we have looked at securing the various areas within our app, we can now turn our attention to the highest level of security for our app, looking at who can access it in the first place.

Sharing your app securely When the app is first published, it will only be available to the creator; therefore, it is up to that person to grant access to anyone else that needs it. Consideration should always be given to who needs to use the app, especially if the app is built to handle sensitive data, such as personally identifiable information. For example, is the app going to be available to everyone, or do we need to only make it available to a small number of people?

Securing Your Power Apps

340

Is there a portion of the app that only needs to be seen by “super users” compared to other areas? Are there considerations for the underlying data that need to be managed as well as what is being seen within the app? There are all questions which you should be asking yourself when developing. The process of giving people access to the app is referred to as sharing, and can be initiated from the File menu in the app, or from the Apps menu in the main Power Apps portal screen. Either way, we will be directed to the app Details section as shown in Figure 12.9:

Figure 12.9: The app Details screen navigation

When you share the app, you have a number of options for selecting the users you wish to share with: •

The first is that you can name each person individually and assign them as a user or a co-owner. Users and consumers of the app, and therefore can access and use the functionality which you have created. Co-owners will also be able to access and edit the app.

•

The second option is to invite AAD security groups, which will allow you to invite several users at once. Levels of access can be assigned to a security group in the same way that you can with individual users.

While security groups provide the ability to add multiple users, you lose direct visibility of who has been given access to your app from the Power Apps screen.

Chapter 12

341

Finally, you have the ability to invite everyone to use your app, which means that everyone within your organization will be able to see and access it. Regardless of who you choose to share your app with, you will also need to consider any data storage access that may apply to your app:

Figure 12.10: Options for sharing the app

When sharing the app with everyone, you won’t be able to select the co-owner permission. This is to help protect the app by only giving edit access to explicit users within the organization.

Now that we know how to secure our app by specifying who can modify it, let’s look at how to secure our data.

Lab 10 Within this lab, we are going to implement security for both the data stored within SharePoint and also within our app. This is a pattern that I have used a number of times to allow me to control both sets of permissions without having to manage multiple access lists. To do this, we will: 1. Create a SharePoint group 2. Assign permissions using this group 3. Update the app to reflect these permissions

Activity 1: Creating the SharePoint group In this first activity we are going to create a SharePoint group to hold a number of users who may be interacting with our app. This group is going to act as our Admin group. 1. Navigate to the SharePoint site that is hosting the data for our app.

342

Securing Your Power Apps

2. In the top right corner of the screen, click on the Settings cog, and select Site Permissions:

Figure 12.11: Opening Site permissions from Settings

3. When the Permissions blade appears, select Advanced permissions settings at the bottom of the list:

Chapter 12

343

Figure 12.12: Reaching group permissions from Advanced permissions settings

4. The screen will then change to a classic-looking SharePoint site, where you will see three groups labelled as Members, Owners, and Visitors. You can use these groups, or you can create your own. For the purpose of this exercise, we are going to create our own. 5. In the top left corner of the SharePoint ribbon, select Create Group:

Figure 12.13: Creating a group from PERMISSIONS tab

Securing Your Power Apps

344

6. We now need to complete the form. We are going to give the app administrators Contribute rights to the site so that they can edit and update items in lists, but can’t change the settings on the wider side. In the form, enter the following information: •

Name: App Administrators

•

Group Owner: Good practice is to change this to be the name of the site Owners group, e.g. My Groceries Owner

•

Give Group Permissions to this Site: Contribute

Once the group has been created, you will be presented with the group membership. By default, you will always be in there. If you wish to add any users to your App Administrators group, you can then add them by pressing New and Add Users:

Figure 12.14: Adding users to a SharePoint group

Now that we have created the SharePoint group that is going to hold our permissions, we are going to assign permissions within SharePoint to control what they can do within the app.

Activity 2: Assigning the permissions The approach that we are going to take in this activity is a pattern which I personally have used regularly. We are going to create a roles list and apply permissions to the list item created in this list. If a browsing user in SharePoint does not have access to a list item then they will not see it. Keep this in mind as we work through the remaining activities. Navigate back to the home page for your SharePoint site by clicking on the site logo or clicking home in the navigation. 1. Click the + New button, and select List from the options.

Chapter 12

345

2. Select Blank list. 3. Give this list the name: App Roles, and press Create:

Figure 12.15: Naming and creating a list

4. Once the list has been created, press the + New button at the top to create a new list item. Name this item Admin, and press Save:

Figure 12.16: Naming and saving a list item

Securing Your Power Apps

346

5. We will now change the permissions for this list item. Hover over your Admin list item so that you can see the button for more options (the three dots):

Figure 12.17: Opening more options for a list item

6. When the menu opens, select Manage access:

Figure 12.18: Selecting the option to manage access to a list item

7. The Manage access dialogue box will then appear, and you will see that there are multiple groups listed in there which have various levels of permissions. We are going to remove permissions to this item for all groups except for Owners and App Administrators. Click on the dropdown next to group, and select Stop sharing:

Chapter 12

347

Figure 12.19: Removing permissions to the Admin list item for certain groups

Now, members of the Owners group or the App Administrators group will be able to see this list item. Anyone in the Members or Visitors groups, will not. We are now ready to make our app respond to the permissions on this list.

Activity 3: Setting the app to respond to permissions We have now laid the groundwork for the permissions being set within our app. To implement our security, we will now add this new App Roles list into our app as a data source, and then query it to see if can find our role. If we are logged in as a user who is in the Owners or App Administrators group, they will be able to retrieve the item in the app. If not, they won’t. 1. Open the Groceries phone app that we have been working on throughout our labs. 2. Once loaded, select Data from the left navigation and select + Add data:

Figure 12.20: Adding a data source to the phone app

348

Securing Your Power Apps

3. Search for SharePoint as your data source and choose your existing connection. 4. When the Connect to a SharePoint site appears, select your My Groceries site, and choose the App Roles list:

Figure 12.21: Adding the App Roles list as a data source

5. Now that we have our App Roles list added, we now need to check if this user is an admin. From the Tree view, select the App. 6. From the property dropdown in the top left corner, select OnStart. You might remember that this was where we created our branding variable:

Figure 12.22: Selecting the OnStart property from the dropdown

7. Ensure that you have a ; at the end of your branding variable creation, and press enter to add a new line. Enter the following formula: If(CountRows(Filter('App Roles', Title = "Admin").ID) > 0, Set(gblRole, "Admin"), Set(gblRole, "User"));

Chapter 12

349

Figure 12.23: Entering formula into the formula bar

The formula is going to count how many rows are retrieve from the App Roles list, which match the title Admin. If we are logged in as a user who is in the Owners or App Administrators groups in SharePoint, then we will return 1, otherwise we won’t find anything. Based on this, we can use the If statement to set a variable to either Admin or User. 8. Click on the ellipsis (…) next to App in the Tree view, and select Run OnStart. 9. Click on the + icon in the bottom right corner of your app, which is going to take our app users to the grocery creation screen. Select the DisplayMode property for this icon:

Figure 12.24: Selecting properties for the + icon

10. Currently the DisplayMode is set to edit. If we are admin, we will keep the icon active, allowing the use to enter new items. If not, we’re going to disable it. Add the following formula to the DisplayMode: If(gblRole = "Admin", DisplayMode.Edit, DisplayMode.Disabled)

Note that the icon will now enabled or be disabled depending on whether you are listed in the admin group. You can change the permissions on the other assets within SharePoint, such as changing permissions on the Groceries list, by adding or removing SharePoint groups. Then to manage the permissions experience for both SharePoint and your app at the same time, you simply add or remove users from the SharePoint groups, negating the need for admins to create AAD groups.

Summary In this chapter, we looked at one of the most important aspects of any app development—the ability to secure our app and its data. We covered the topic of security by looking at three areas in particular—securing the app, securing the data, and creating in-app security.

350

Securing Your Power Apps

While securing the app, we saw how we have the ability to choose who we share the app with and to determine whether they are users of the app or co-owners. App owners are able to invite individual users, AAD security groups, or everyone within the organization. By inviting AAD security groups, you lose the ability to see who has access to the site within Power Apps. While it does secure the data, Power Apps is still just a user interface for a data source, and therefore security should always be considered regarding the data source itself. There are some data sources, such as SQL Server, that have the username and password defined in the connection, and therefore these will be used for all users. Other data sources, such as SharePoint, will take the credentials of the Power Apps user and carry them through to access the data. This is done by taking the context of the logged-in user and carrying it through from Power Apps to the data source, and therefore access to the data source needs to be granted to each user. While creating in-app security, there are always instances within an app where you will want to create the ability for elevated users to perform certain actions—for example, when authorizing an administrator role. We explored two possible ways of achieving this, firstly by storing the users within a collection, which means that it can be controlled by the app owner, and secondly by utilizing a broader scope of permission management by adopting the use of AAD security groups. Finally, through Lab 10, we explored a way in which we can use SharePoint permissions to be able to secure both our underlying data source as well as elements of our app. With our apps shared, our data secured, and our apps responding to user roles, we are now in a position where we have an app which works well in an online scenario. In the next chapter, we are going to build on our understanding of Power Apps capabilities by looking at how we can make our apps work when they are offline.

Questions 1. What is the name of the global store of users within Microsoft Cloud? 2. True or false: The security of the data is managed purely through the app. 3. True or false: When using SharePoint as a data source, the user needs to have full control rights to the underlying SharePoint site. 4. Access lists can be added to the app and stored in what type of data storage?

Chapter 12

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

351

13

Working Offline In the previous chapters, we discovered how to use controls, connectors, and data sources to work with data. All of this, however, has been dependent on a network connection, Wi-Fi, or mobile to be able to push and pull data. Given that apps in Power Apps are intended to be usable on a mobile device, we need to prepare our app to function without a consistent data connection. For us to mitigate potential issues with network dropouts, Power Apps allows us to cache data locally, which means that we can continue to work without interruption if we lose the connection to our data source. In this chapter, we will look at how we can achieve this and what steps we can take to ensure that a connection loss will not mean losing our app’s ability to function. We will, therefore, look at the following topics: •

Detecting a connection state

•

Storing and loading local data

•

Offline capability and synchronizing online

•

Lab 11

By the end of this chapter, we will have looked at the key points of creating offline capability and how to ensure that your data source is updated once it is back online.

Technical requirements To follow along with this chapter, it is recommended that you have completed the previous labs to build our example app. You will also need to have a mobile device with Power Apps installed to test the functionality we are exploring within this chapter.

Working Offline

354

Detecting a connection state One of the key things for making your app available offline is the ability to detect whether a network is present or not. First of all, Power Apps can detect the presence of a connection signal using a function that can then be used within the logic of your app: Connection.Connected

This function will return a Boolean value: true meaning it is connected and false meaning it is disconnected. Power Apps can also determine whether the connection is based on the cellular connection of the device or whether it is using Wi-Fi. If the device is using a mobile network, then it is classed as a Metered connection: Connection.Metered

Again, this returns a Boolean value: true for a metered network or false for an alternative connection. Both of these connection states should be considered while developing your app, as you can change the behavior of the app depending on whether the app is online or offline, and you can change the behavior of the app depending on the type of connection that it is using. For example, if you are using a mobile network, you may choose to limit the images that are displayed to reduce the data being pulled by the app. Now that we can make our app aware of the connection state, we need to start building in some functionality to allow us to react to these states.

Working with local data One of the key abilities that we need to build into our app to allow us to go offline is to store data locally and then retrieve it again. This is achieved by using the functions of SaveData and LoadData. It is key to understand what it means to you as a developer, and your users, where your data is being stored when it is taken offline; therefore, we will now focus on the following: •

Saving data locally

•

Loading data from the locally stored data file

Let’s see how the first part goes.

Chapter 13

355

Saving data locally Before we can load data, we, first of all, need to save it by using the SaveData function. This will securely save our collection of data in an area that is local to the device being used. We are obviously in a world where data security is paramount. In the previous chapter, we discussed securing parts of our app so that users can’t access data that they shouldn’t and the same concept applies to our offline data. Power Apps has excelled in this area because the SaveData function stores and encrypts data in a way that means that it is not accessible to other users or other apps made in Power Apps. The file is completely unique to the user and the app that has generated it, which means that different apps on the same device can’t share the same data file. If there is not enough space on the device to save the data file, the file will not be saved, and you will be faced with a message informing you that not enough space is available to complete the operation. When we use the SaveData function, it requires us to provide two pieces of information: •

The collection of data to save

•

The filename given to the data file

The filename is expected as a string so always remember to put it within double quotes. So, for example, if I have a collection of data called colGroceries, then my function will look like this: SaveData(colGroceries, "Groceries")

This will then generate the Assets data file on the local device.

Note that the first parameter is a collection; therefore, we need to ensure that our data is taken from the data source and stored within a collection first of all.

The key consideration when storing your data offline is related to the amount of storage space that you have available on the device. The amount of space is dependent on the device, the operating system, the complexity of the app, and how much memory it is using. With this in mind, storing hundreds of megabytes of data could result in an out-of-space error, so always give thought to what data we are going to store locally on the device. Now that we have our unique data file, we need to be able to retrieve that data to continue working.

Working Offline

356

Loading data from the local cache For us to retrieve the data stored within the data file, we need to use the LoadData function. LoadData requires us to provide three parameters, the first two being exactly the same as SaveData. We need to provide: •

The target collection—the collection of data we’re going to write to

•

The name of the data file

•

A Boolean flag to determine whether the function will continue to run if it can’t find the data file

The reason for doing this is because, potentially, at first load, the data file may not have been created; therefore, we would not want this to stop our app from running. So, if I continue the example from SaveData where we are saving our assets, I would call the function like this: LoadData(colGroceries, "Groceries", true) LoadData can now navigate the local cache using the parameters we have provided – the target

collection is colGroceries and the data file Groceries – with a Boolean flag at the end in case the file is missing. Having now looked at SaveData and LoadData, we are now ready to consider the steps within our app that we need to follow to make it work.

Implementing offline capability Now that we have discussed the SaveData and LoadData formulas, which are key components of building offline capability, we will look at the overall process to determine how and when each of the various functions should be used. The process will look at how and when we interact with the master source of data, most notably with the on-start properties to ensure that we are loading the correct data at the point that the app is launched. We will then look at how we can work offline, followed by the handling of data when the app comes back online. To achieve this, we need to consider the following: •

Implementing the on-start process

•

Working offline

•

Synchronizing data between the online and offline data stores

Chapter 13

357

The first element to consider is how we interact with the data and load it from the correct place to start building the offline capability.

Implementing the on-start process The most important part of working offline is that we need to start preparing for it from the point that the app loads. Users can open the app regardless of whether their device is online or not; however, your app will only be visible to launch offline if a local data file has been created. Therefore, if we have an offline data store, we need to be able to handle the detection of a connection state, and also retrieve the offline data as early in the app load as possible. This isn’t to say that you can’t implement this functionality elsewhere, such as on the OnVisible event or even on an OnSelect event for a control:

Figure 13.1: On-start process for an app depending on a connection state

The first thing that we should check for is whether an internet connection is available by using the Connection.Connected function. As stated earlier, this will return true if the connection is available, so we can use a condition, as we learned in Chapter 6, Exploring Formulas, to branch our logic. If the internet connection is available, then we can retrieve data from our data source and immediately store it within a collection. In Chapter 8, Working with Data, we discussed collections and so we know that, at this point, all of our data is stored within memory, resulting in the data only being available until the app is closed. Therefore, we need to save this collection to the local device using the SaveData function to build our offline cache. If the internet connection is not available, then we should simply try to retrieve the data from the local data file and use that to populate our collection.

Working Offline

358

The first load of data to build the offline cache will always require an internet connection to retrieve data.

The following code is an example of how we can implement offline data storage within Power Apps: If( Connection.Connected, ClearCollect(colGroceries, 'Groceries'); SaveData(colGroceries,"local_ Groceries"), LoadData(colGroceries,"local_Groceries", true) );

At this point, if you are building the offline capability retrospectively, it is to ensure that you can change any data output controls, for example, galleries and data tables, so that they get their data from the collection rather than directly from the data source. This will now allow our app to build the relevant collection and interact with the local cache if needed. However, we now need to consider the steps to allow our users to continue to work offline.

Working offline Now that we have a data store available to us, we need to consider how we allow users to create and update data, not just view it. For us to be able to do this, we need to develop the capability to save changes back to our data source once an internet connection is re-established. The offline process needs to be added to every piece of functionality that involves an interaction with the data source, for example, adding, updating, and deleting a new item:

Figure 13.2: Data-saving process for an app depending on a connection state

Chapter 13

359

Once again, detecting the connection state is of paramount importance as that will determine how your app behaves in relation to saving data changes. This time, if we have a connection, we can save our change directly to the data source; however, we then need to ensure that our local collection is updated to reflect the change we have just written back. Every time we update the main data source, we need to cascade that update through all levels of the offline capability to ensure that, regardless of whether we’re online or offline, we still have the most up-to-date version of the data. If the connection is not available, then we need to build a list of changes that we need to make when the connection returns. This is done by creating another collection to store our changes, which we will then sync back to our data source. To ensure that our offline changes are not lost, we should also save this collection to the local cache to provide resilience using the following code: If(Connection.Connected, SubmitForm(EditForm1); Refresh('Groceries'); ClearCollect(colGroceries,'Groceries'); SaveData(colGroceries,"local_Groceries"), Collect(colGroceryChanges, {Title:TitleDatacard.Text,Description:DescriptionDatacard.Text} ); SaveData(colGroceryChanges, "local_grocerychanges") );

In this example, if an asset is modified while the connection is available, the asset is updated within the data source and immediately updated by calling the Refresh function. The updated data is then cascaded down from the data source to the collection and then to the local cache. If the connection is not available (refer to the preceding formula in bold), then we will save the update to the changes collection, and then save that to local storage for processing later. Additions and deletions can be handled in a similar way, whereby each type of change has its own collection, that is, you have a collection of additions and a collection of deletions. Alternatively, you may wish to have a single collection that simply contains a status field to indicate the type of change it is expecting: Collect(colChanges,{ asset {Title: TitleDatacard.Text, Description: DescriptionDatacard.Text},

Working Offline

360 Change: "Update"} )

This will then give us a collection that contains both the record that we want to update and the action that we need to carry out when we return to an online state.

Consider adding some metrics to the screen for the user to see how many offline changes they have pending, by counting the number of items in the collection.

Now that we have our changes being made offline, we need to consider how to synchronize these changes back to our data source.

Synchronizing online and offline data Once our connection to the internet has been re-established, it is vitally important that our offline changes are processed back to the data source and that our local collections are refreshed. There are two ways in which this is normally done, either by using a timer control to periodically check whether the connection is available or by implementing a button for a user to manually initiate the sync. The choice of approach purely comes down to how you want your app to behave. If you want your checks and sync to take place without your users having to press a button, then the timer control is an ideal method. Speaking personally, I prefer to have control over how and when my app is syncing, so I include a sync button to ensure that I am confident that I have a stable connection to complete my sync. My personal preferences are always overridden by the actual requirements though!

Chapter 13

361

In this example, I’m going to use a timer control as this is the approach that I use most often:

Figure 13.3: Data-synchronizing process for an app depending on a connection state

Stepping through this, I could use a timer that checks every minute to see whether the connection has been established. Again, this uses the Connection.Connected function to determine whether the connection’s state has changed. We will also add an additional condition to this to ensure that we are only going to process if offline changes have been made. Assuming that the connection has been reestablished, we will take the items that have changed and feed those changes back to the data source. It is imperative that, at the point of the changes being synchronized, we clear the collection holding the change as we don’t want to risk processing it again. Just like the other steps, we then need to get the latest data back from the data source by using Refresh, rehydrating the collection, and then saving it to the local cache: If(Connection.Connected && CountRows(colAssetsToBeAdded) > 0, Collect('Assets',colAssetsToBeAdded); Clear(colAssetsToBeAdded); SaveData(colAssetsToBeAdded,"local_ AssetsToBeAdded"); Refresh('Assets'); ClearCollect(colAssets, 'Assets'); SaveData(colAssets,"local_Assets"))

Working Offline

362

The preceding formula assumes that we have a collection specifically storing additions to the data source; therefore, the new items are simply added to the data source. This formula could then be repeated to handle updates and deletions in the same manner. You should, however, bear in mind that other users may be using and updating the same data source while you are offline; therefore, you may need to give some thought to how you handle conflicts.

Lab 11 Within this lab, we will add the basic offline capabilities to the app that we have been developing throughout this book so far. We will add a connection indicator to give a visual representation of whether we are connected or not, and then we will add our data to an offline cache.

Activity 1: Adding a connection indicator Let’s follow these steps: 1. Open your app. 2. Navigate to the Home screen. 3. In the bottom-left corner of the screen, add a circle icon: a. Name: circOnline_Home b. Resize the circle to 30 x 30 c. X: 10 d. Y: App.DesignHeight - Self.Height – 10 4. Add a label to the screen with the following properties: a. Name: lblOnline_Home b. X: circOnline_Home.X + circOnline_Home.Width + 10 c. Y: circOnline_Home.Y d. Height: circOnline_Home.Height

Chapter 13

363

The created label can be seen below:

Figure 13.4: Adding a connection indicator at the bottom-left corner of the app

5. Select circOnline_Home and edit the Fill property. We will make it green when online, and red when offline. Add the following formula: If(Connection.Connected, Green, Red)

6. Select lblOnline_Home and edit the Text property. We will make it display Connected when online, and Not connected when offline. Add the following formula: If(Connection.Connected, "Connected", "Not connected")

The Connected display can be seen below:

Figure 13.5: Developing the connection indicator to display “Connected” when the app is online

Now that we have a status indicator on the screen to detect the connection state, we should add a capability to the app to allow it to continue running if the app goes offline.

Working Offline

364

Activity 2: Adding data to an offline cache We will now add the offline cache capability to our data so that we can take the data required by our app offline. We will create an offline version of our data source: 1. Click on App in the Tree view and select the OnStart property. The formula bar can be seen below:

Figure 13.6: Formula bar for the OnStart property

2. We will, first of all, retrieve our key information into a collection so that we can set ourselves up to use the offline cache. Beneath the existing formulas, add a couple of line breaks, and then add the following: ClearCollect(colGroceries, Groceries);

3. We will then save a copy of our data offline, just in case we lose connection by adding our SaveData formula. We will call our offline store offline_groceries: SaveData(colGroceries, "offline_groceries");

This can be seen in the following screenshot:

Figure 13.7: Adding a formula to save data to the offline store

4. Now that we are using our collection for the purposes of storing the data within the app, we need to update our various forms and galleries to start using this rather than directly going to the online data source.

Chapter 13

365

We therefore need to update the data source and items properties for the following controls: •

Home Screen: galGroceries_Home – change items

•

Grocery: frmGrocery_Grocery – change data source

•

View Grocery: frmView_ViewGrocery – change data source

5. Now that we have set ourselves up to use our collection rather than go directly to our online data store, let’s now finish off our formula in the OnStart property for the app to allow us to still run even if we’re offline. 6. Locate the line where we put the ClearCollect. We now need to check if we’re online before we try to retrieve data from SharePoint. We will put a condition around these two lines to allow us to handle the initial data retrieval: If(Connection.Connected, ClearCollect(colGroceries, Groceries); SaveData(colGroceries, "offline_groceries"), LoadData(colGroceries, "offline_groceries",true) );

This can be seen in the following screenshot:

Figure 13.8: Adding a condition to the OnStart formula for the app

Now that we have changed our controls to reference the collection, and we have our app using online and offline data sources, we need to ensure that we are handling updates.

Activity 3: Tracking new additions while offline We will now update our new asset form to allow it to write to the offline data store in the absence of a connection, or to the online store if we’re online. But each time, we need to make sure that our device has the most up-to-date versions of the data to ensure that: 1. Navigate to your Grocery screen so that we can update what happens when we use our form.

Working Offline

366

2. Select the form, frmGrocery_Grocery, and select the OnSuccess property. We will then write a formula to tell the app whether to update the online data source, or the offline one. 3. Enter the formula: If(Connection.Connected, Patch(Groceries,frmGrocery_Grocery.LastSubmit) ); SaveData(colGroceries,"offline_groceries")

Each time we save, we are going to check if we’re online, and we’re always going to save our changes back to the device. If we’re online, we’ll also save it to the cloud. Once the app has been published, switch to a mobile device to test it. Load the app, and then switch to airplane mode. Confirm that, when you switch back to the app, your indicator turns red after a short period and that you can still see your data.

Summary Throughout this chapter, we have looked at how we can build an offline capability into your app to provide resilience for the inevitable event of a connection loss. We looked at how to detect whether the connection is available or not by using the Connection.Connected function to return a Boolean result based on the connection status. Once we looked at how to detect the offline state, we then looked at how we could save our data locally to the device to ensure that our users could continue working without a live connection to the data source. To do that, we need to ensure that our data is replicated into a collection, a data source held within the memory of the app, and then replicated to the local device. The local data is encrypted and stored in a private area that is only accessible by the user and the app that created the file. While we have a connection, it is extremely important to ensure that any changes to the data source are replicated down through the collection to the local cache. If we are working offline, we need to store any updates to our data in collections, which would then be used to synchronize changes once the data connection is re-established. These collections should also be stored locally to ensure that the changes are not lost if the app session is restarted.

Chapter 13

367

Synchronization is usually achieved by using either the timer control or a manual synchronization button. Once the change has been successfully synchronized back to the data source, the entries in the changes collection must be removed to avoid any potential reprocessing. In the next chapter, we will look at how we can offload functionality, which may require complex processing, and doesn’t need to be performed by the app. For this we will be introducing Microsoft Power Automate.

Questions 1. What function would I use to check whether an app is connected to the internet? 2. True or false: My app can detect whether the app is using a metered connection or not? 3. Which function is used to save data from Power Apps to the local device? 4. Which function is used to load data from the local device? 5. True or false: A data file from one app in Power Apps can be used in another on the same device? 6. True or false: Devices have an unlimited amount of space available to them to store local data?

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

14

Using Power Automate with Power Apps Power Apps allows us to develop a huge amount of logic directly within an app, but this logic is limited to frontend processing rather than heavier processing. In the past, this would have been done with server-side code, but in Power Apps, we can offload this type of processing to Microsoft Power Automate, the Microsoft 365-based automation platform. Microsoft Power Automate was previously known as Microsoft Flow and was changed in November 2019. While the application has changed names, the individual workflows are still known as flows. Therefore, when we talk about the service, we refer to Power Automate, whereas when we discuss individual processes, we will refer to a cloud flow.

Using Power Automate alongside Power Apps allows you to unlock the door to almost limitless levels of functionality and interoperability with other services. It allows you to integrate not only with Microsoft services, but with other third-party services as well, such as Adobe, Salesforce, and even Google. In this chapter, we’ll cover the following topics: •

Understanding flows

•

Creating flows through the Power Automate service

•

Returning data to Power Apps

•

Lab 12

Using Power Automate with Power Apps

370

By the end of this chapter, you will be able to utilize Microsoft Power Automate to undertake some background processing for your app, including passing parameters from your app and also receiving a response, so that your app is able to respond to any output.

Technical requirements To follow along with this chapter, you will need the following: •

A Microsoft Power Automate license, which can be attained by getting a Microsoft 365/ Dynamics 365 seeded license, a per-user license, or a per-app license

•

A Bing Maps API key (previously used in Chapter 10, Using GPS in Power Apps)

Understanding flows Microsoft Power Automate is part of the Power Platform and serves as the automation platform within Microsoft 365. Power Automate, unlike SharePoint Designer workflows or Workflow Server, is completely browser-based and also accessible through the Microsoft Power Automate mobile app, which is available for both iOS and Android devices. The purpose of the platform, just like Power Apps, is to provide a no-code or low-code environment where you can create automated processes in a graphical way. Automated processes allow you to take your manual repetitive tasks and hand them over to an automation to allow you to spend more time on tasks that add value. Such things could be automated reminders, document generation, or even management of an entire process. An example of a cloud flow is shown in the following screenshot:

Chapter 14

371

Figure 14.1: Microsoft Power Automate in a browser

Power Automate is built upon the same foundation as Azure Logic Apps, but the key difference is that Power Automate is accessible through the Microsoft 365 portal (portal.office.com) and it targets business users rather than developers. Azure Logic Apps is accessible through the Azure portal (portal.azure.com) and is normally used by developers as there are more options with which to edit the underlying code compared to Power Automate. There are other differences between the two automation platforms; however, the key one to keep in mind for now is that the Power Apps connector is only available to Power Automate.

372

Using Power Automate with Power Apps

Power Automate can be considered for three specific types of work: •

Personal workflow: You can use flows to help automate any mundane, day-to-day tasks that eat into your productive time, such as sending email reminders.

•

Business workflow: Where businesses are inefficiently reliant on manual processes, you can use flows as an automated replacement that can be used to push documents to different parties for approval, for example.

•

Integration: Most services don’t talk to each other naturally, but when using the connectors that are available in flows, you can establish communications between different systems. This allows you to process data from one service to another so that you can perform actions between them.

If you have a Microsoft 365 license, then Power Automate is included with your subscription, but just like Power Apps, premium licenses are also available and enhance the existing functionality. Cloud flows are made up of two key components. The first key component is a trigger, which is the event that causes a cloud flow to execute. This could be an automated trigger that fires when an event takes place without direct interaction from a user, a recurrence trigger that fires on a scheduled basis, or a manual trigger that fires when a user interacts directly with the flow. The second key component is an action, which makes up the logic of our workflow and allows us to build interactions with numerous data sources and employ normal development practices such as loops or branches in logic. Actions generally have an input, i.e., some configuration or data that is processed and then returned as an output for us to use elsewhere in our cloud flows. We will become more familiar with actions as we go through building a flow in this chapter. When creating a flow with these key components, the first step is to choose the trigger that will be used. There are three types of triggers that are available in Power Automate: •

Automatic – these triggers start as a result of something happening indirectly, e.g., new items being created in a SharePoint list

•

Manual – these triggers are fired by a direct interaction by the user, such as pressing a button in an app

•

Scheduled – these triggers are similar to scheduled tasks within Windows, where we can run a process on specific schedules

Chapter 14

373

The manual trigger is the key component that we are most interested in as it allows us to trigger the cloud flow directly from within Power Apps, allowing us to pass data to it so that it can be processed. As we will see in the Creating flows from blank section, Power Automate has two versions of triggers available within Power Automate itself, “version 1” and “version 2.” “Version 2” is the easier one to work with, as it allows you to define your inputs. For example, if you want text or dates to be fed in from your app, then you can define it. If you create your flows directly from Power Apps, which we’ll see later, just be aware that it will create a “version 1” trigger, which doesn’t allow you to be as explicit about the information that gets passed into the flow. There are two ways to create a flow that we can use with Power Apps: through the flow portal and from Power Apps itself. Let’s take a look at creating flows through the flow portal first.

Creating flows through the Power Automate service To access Power Automate, we can either navigate directly to https://make.powerautomate. com or we can launch it from the Microsoft 365 portal (portal.office.com), which allows us to select Power Automate from the list of available applications. Once we have navigated to Power Automate, we have a variety of options available so that we can get started. These options are quite similar to those that are available for Power Apps since we can either start from a template, which has a number of preconfigured actions that we can then modify, or start from scratch, where we have a completely blank canvas on which to build the cloud flow as we see fit. The first option we will look at is creating a cloud flow from one of the existing templates.

Creating a cloud flow from templates If you are new to Power Automate, then there are a number of templates covering a vast array of scenarios, all of which can be accessed from the Templates menu option on the left-hand menu. These template flows can also be used to get you started with building your logic if there is one close enough to your requirements.

374

Using Power Automate with Power Apps

The following screenshot shows the screen that you go to in order to select your templates:

Figure 14.2: Flow templates selection screen

If, for example, we select the Send myself a reminder in 10 minutes template, then this will generate a cloud flow that contains a manual trigger based on a Flow button, a Delay action, and a push notification action so that we can send a response to the Power Automate mobile app:

Figure 14.3: Send myself a reminder in 10 minutes Flow template

Chapter 14

375

This template can then be modified, should you wish to add any further functionality. Alternatively, you can simply use it to see how this type of workflow can be configured. Just like Power Apps, once you have investigated templates, you will want to create your own. To do this, you can create a cloud flow from scratch, which means you have a blank canvas from which you can build the logic of a flow.

Creating flows from blank When you are creating a flow from scratch, the first thing you have to select is your trigger. Recalling the types of triggers we introduced earlier, if we are launching flows from our apps, then we are working with an instant trigger. This is because the user is physically pressing a button or doing something to launch the flow. There are alternative patterns as well, for example, our app could be updating a SharePoint list, in which case an automated trigger would run based on that item being updated. For the purpose of the example that we will cover here, though, we will concentrate on creating a flow that can be called from within our app. Perform the following steps to learn how to do this: 1. To select a trigger, go to the Create option on the navigation. This will show the creation options that are available:

Figure 14.4: Creation menu showing the various options

376

Using Power Automate with Power Apps

2. From here you can select the type of trigger that you’d like to use within your cloud flow. In this example, we’ll create an Instant cloud flow, which will give you the option to either start the automation from Power Automate (which will then be initiated from a Flow button) or from Power Apps (which will be initiated from an action call within an app), as well as other services, as shown in the following screenshot:

Figure 14.5: Instant trigger creation options

3. If we select the PowerApps trigger from this screen, it will create a flow that has a Power Apps trigger. This, however, is “version 1” of the trigger, which you may recall from earlier. Since we are working within Power Automate and not Power Apps, we also have “version 2” of the trigger, which allows you to define what information you wish to pass from your app into your flow. Personally, I always skip this screen and choose my own trigger on the main Power Automate canvas, and for this explanation, we’ll do the same. 4. When the flow is created, assuming you pressed Skip in the last step, you will be prompted to select the trigger that you want to use. If you already know the name of the trigger, then you can type straight into the search box to find what you want. What is often easier is to first of all find the service or connector that you wish to use.

Chapter 14

377

In this case, we’ll select PowerApps:

Figure 14.6: Selecting PowerApps to obtain a trigger

5. I always suggest selecting the connector first because it will reduce the number of options in the triggers list, from hundreds to the few that belong to that particular service. So now, our list of triggers has been reduced to two:

Figure 14.7: Finding triggers by selecting a connector

6. Now that we can see our triggers, we can choose which one we want to use. With the release of the PowerApps (V2) trigger, we will expect the Power Apps trigger to eventually be deprecated and retired, so we will select PowerApps (V2) now.

378

Using Power Automate with Power Apps

7. With “version 2” of the trigger, we can specify what data we want the flow to receive from our app. This is a huge improvement over “version 1,” where we need to request the data elsewhere in the flow without having control over the naming. So when our trigger is on the screen, we now see + Add an input, which is going to allow us to specify each piece of data that we want to receive. By clicking on the +, we can select the data type:

Figure 14.8: Selecting the data type for the trigger

8. Once we have selected the type of data that we want to receive, it will then appear in a list within the trigger. You can change the name, give it a description, and also click on the … to the right of the input to specify whether it is mandatory to fire the flow. You can even change the formatting of the field to make it a choice, i.e., based on a list of options, and even delete it. The key thing to be aware of is that once you have selected the data type, you can’t change it. You will need to delete it and recreate it.

Figure 14.9: Selecting and naming a data type

Once we have created and configured our trigger, we can then add actions and look at how we use the data from the trigger within those actions.

Chapter 14

379

Using actions Actions, within cloud flows, form the flow of logic taking us through to the end of the process. They are all added and managed within the graphical designer, so you have a visual representation of what your automated process looks like. Our actions can take on a large number of different functions, from declaring variables to interacting with services, or even stopping the flow from running any further. By clicking on the + New step button below the trigger, we can then add a new action to our flow. When we add a new action, we have the same selection process as when we selected our trigger. We can either search for our action or again we can choose the connector from the top part of the selector and then choose the action from the filtered list. For the purpose of demonstration, we’ll add an action to send an email to the email address from the trigger. Therefore, the first thing we’ll select is the service, which will be Office 365 Outlook:

Figure 14.10: Selecting a service to make a trigger send an email to a selected address

380

Using Power Automate with Power Apps

In the actions list, we can then select the Send an email (V2) action:

Figure 14.11: Selecting an action for the Flow from the actions list

As soon as our action appears, we can then begin to configure it. So, in our case, we can begin to configure our send email action by completing the elements of the form. So we will need to provide it with an email address that we’re going to send it to, the subject, and the body of the email. There are more options if we click on Show advanced options, but for now let’s concentrate on these three. We have the ability to type straight into each of these boxes, or to use the suggested people lookup for the To column, but what we really want to do is use the email that we created in the trigger. That way, when we pass an email address from our app, that is where the email will be sent to. In most instances, when we click into one of the boxes, we will have a toolbox appear with what is called dynamic content. Dynamic content allows us to select an output from a previous action to use in our current one.

Chapter 14

381

With Send an email, we need to select Add dynamic content below the To box to open up the dynamic content toolbox:

Figure 14.12: Opening the dynamic content toolbox

When your dynamic content appears, you can then select what you want to appear in the To box, so in this case, it will be Email, which takes the output from our trigger, which is the email address passed in from the app! Once you understand that flow of data, creating a cloud flow becomes a lot more simple.

Figure 14.13: Automatically sending an email to the address outputted from the trigger

382

Using Power Automate with Power Apps

Once you have configured your flow, you should then test it. Testing of the flow itself can be conducted within Power Automate itself; you don’t need to go back to your app just yet. Let’s run it through and make sure that we receive our email.

Testing your flow Microsoft Power Automate has built-in functionality that allows you to test your logic. You can find this by clicking on the Test button in the top-right corner of the screen, as shown in the following screenshot. If Test is still showing as disabled, make sure that you’ve saved your flow:

Figure 14.14: Microsoft Power Automate Test button

Chapter 14

383

Depending on the type of trigger that you have used, you will have different testing options available to you that allow you to debug effectively. If this is the first time you are running the flow, then you will only be able to select Manually. The behavior for manually initiating the flow will depend on the type of trigger that has been employed. If we were using a SharePoint trigger, then we would have needed to go into SharePoint and perform the triggering action, e.g., updating a document. In the case of the Power Apps trigger, we can test within Power Automate itself by using a blade that will appear on the right-hand side of the screen that will ask us to provide inputs as they would appear from Power Apps. For example, if our input is a string, then we will be asked to provide a string value. This is shown in the following screenshot:

Figure 14.15: Providing test values

Using Power Automate with Power Apps

384

Once the flow runs, it will allow you to check the state of each action, that is, whether it was successful, failed, was skipped, or anything else. You will also be able to see the inputs and outputs for each action to ensure that the data that is being passed is what you expect, which is a huge aid for debugging as you can quickly identify and rectify mistakes:

Figure 14.16: Flow successfully completed

The symbol against each action denotes the outcome: •

A green tick denotes success

•

A yellow tick denotes success after a retry cycle

•

A light-gray cross denotes skipped

•

A dark-gray cross denotes canceled

•

A red cross denotes an error

Chapter 14

385

Once we have created and tested the flow, we need to look at one more thing. We have so far passed data from our app to our flow to begin our processing; however, we also have the ability to return data from the flow to the app.

Returning data to Power Apps When we think about functions and processes from a pro-code perspective, more often than not we pass data into a function to get something back. We can apply exactly the same thinking to our flows. As well as having a trigger to bring data in, we have an action that will allow us to return data from the flow to the app. When we are looking for Power Apps actions, we need to follow the same process as we did for Outlook: search for the connector, and then select your action. So this time, when we search for our connector, we will search for PowerApps. There are certain areas where the branding for Power Apps hasn’t been updated, and Power Automate is unfortunately one of them. So make sure you search for it without the space!

When we have located our connector, we can then select the Respond to a PowerApp or flow action:

Figure 14.17: Searching for a connecter to find actions

386

Using Power Automate with Power Apps

When we use this action, we can configure it in exactly the same way as we did with our trigger. Rather than defining inputs, instead we define outputs, by selecting + Add an output and selecting the type of data that we want to return.

When running the flow in test mode, the Respond to a PowerApp or flow action will always show as skipped. It will only fire when actually called from an app.

In our example, we will just return a simple response to the app to say that the email has been sent, returning a Boolean (yes/no) value. Rather than being asked to provide the description this time, as this is only available to the flow, we are asked to provide the value that we want to send back. Just like with our email, we could use dynamic content to take the outputs of a previous action to send back to the app, or we could return the outputs of an expression. To keep it simple at the moment, let’s just return the value true. To do this, we will use the dynamic content toolbox, but this time we will select the Expression tab and use the expression true to return the Boolean value to our app:

Figure 14.18: Responding to the Power App by returning a Boolean value

Chapter 14

387

Now that we have looked at the ways in which we can build our flow, we need to look at how we can use this within our apps.

Calling a flow within Power Apps Being able to use flows to handle all of our heavy processing is a great feature of the Power Platform. It means that we can keep our apps as light as possible, or reduce some of the more complex formulas to something that we can build visually. In order to use our flow, we need to have an event that we can use to trigger the flow, such as the OnSelect event for a button, or the OnSuccess event for a form. To associate a flow and then use it, follow these steps: 1. The first thing we need to do is decide where we want the flow to be executed. Do we want it to be executed from the screen or from a control? In this example, we’re going to execute the flow from a button, so we will place a button on the screen and ensure that it has been selected, as shown in the following screenshot:

Figure 14.19: Placement of a button that will execute the flow

2. With the desired control selected, we need to navigate to the Power Automate button, on the left side of the screen. This will present a list of flows that are either already associated with the control or available for association. If you don’t see your flow listed, then you will need to make sure that your flow has been saved, and ensure that both the app and the flow are located in the same environment.

388

Using Power Automate with Power Apps

Look for the flow that you want to use and take note of the flow name on the second row of text, as this is what you will need to know when calling it. In this example, it is PowerAppsTriggeredFlow:

Figure 14.20: Flow name

3. To associate the flow with the control, we simply need to click on the desired control and property that we are going to use to execute the flow, such as the OnSelect event. We can then start typing the flow name identified in the previous step into our formula:

Chapter 14

389

Figure 14.21: Executing a flow using an event

4. Selecting the .Run formula then allows us to provide any arguments to our flow to make it run. In this example, we want to provide the email address of the user who is logged in by using the User() formula. For this we would use the following formula: PowerAppsTriggerFlow.Run(User().Email)

Now, when the Run flow button is pressed, our app will pass the current user email value to execute the logic contained within the flow. Creating our formula in this way will allow us to push data to the flow, but not capture what is returned. In order to capture the returned data, we need to use a variable.

390

Using Power Automate with Power Apps

If we think back to earlier in the book, we created variables to temporarily store the data, and we can use the exact same formulas here. If we use a global variable, we would use the formula: Set(gblFlowHasCompleted,PowerAppsTriggeredFlow.Run(User().Email))

Figure 14.22: Flow result from clicking the Run flow button in Power Apps

Once we have the output of the flow caught within a variable, we can then use that elsewhere in our app, e.g., we could then show a success message when the value is returned from the flow. Now that we have covered the key components of creating flows, and how they interact with Power Apps, let’s now add this to a lab-based app.

Lab 12 Within this lab, we will use Power Automate to implement notifications when a new grocery is added using our app. First, we will create a flow that generates an email and sends it to the person who is going to receive the asset. Next, we will need to update the data source so that we can store the assignee and then generate the flow. Additionally, we will also use Power Automate to create a reminder flow for groceries that are close to their “use by” date.

Chapter 14

391

To complete this lab, you will need to have a Power Automate license, which can be either a Microsoft 365/Dynamics 365 seeded license, a per-user plan, or a per-app plan.

Activity 1: Creating a flow for when a new grocery is added 1. Navigate to the Power Automate portal and select Create from the left navigation. 2. Select Instant cloud flow from the list of flows that we can create:

Figure 14.23: Cloud flows available to select from the Power Automate portal

3. When the Build an instant cloud flow window opens, press the Skip button:

Figure 14.24: Skipping the option to build an instant cloud flow

392

Using Power Automate with Power Apps

4. When the flow canvas loads, select PowerApps from the list of connectors:

Figure 14.25: Filtering search results for triggers by selecting a connector

5. When the list of triggers loads, choose PowerApps (V2) from the list of triggers:

Figure 14.26: Selecting from the trigger list of the selected connector

6. Press the + Add an input button on the trigger, and select Text as the data type, which we’re going to pass in. 7. Name the Input as Email, and set the description text to Provide the email address for the notification.

Chapter 14

393

8. Repeat step 6, and add another text input called Item added:

Figure 14.27: Adding a text input for the trigger

9. Below the trigger, select + New step. 10. Search the connectors for push notifications by typing Push into the search box. 11. Select Send push notification V2 from the list of actions:

Figure 14.28: Selecting an action for the flow

Using Power Automate with Power Apps

394

12. Configure the action in the following way: •

Mobile app: Power Apps

•

Your app: Select the name of your app, i.e., Groceries Phone App

•

Recipients: Select the Email dynamic content from your trigger

•

Message: Use the Item added dynamic content from your trigger in the following message: A new has been added to your groceries. Enjoy!

•

Open app: Yes

Figure 14.29: Configuring the action of the flow

13. Click on the Untitled name in the top-left corner of your flow, and rename it to Send notification when grocery added. 14. Finally, press Save. Now that we have created our flow, we need to update our app so that we can use this to send a notification when we save a new grocery.

Chapter 14

395

Activity 2: Adding the flow to the app Let’s now go and open our app and start editing it. We are going to add the flow to run when our form has successfully been submitted: 1. Open the Groceries Phone App that we’ve been working on throughout the labs. 2. Click on the Grocery screen. 3. Select the form frmGrocery_Grocery:

Figure 14.30: Opening the form from the Groceries phone app

4. For this form, select the property selector next to the formula bar. You will see our formula in there, which handles the online or offline submission. We will add the ability to send a notification if we’re online, as we need to be online to reach the flow.

396

Using Power Automate with Power Apps

5. With the OnSuccess formula still visible, start typing the name of the flow from Activity 1 without spaces: Sendnotificationwhengroceryadded and select the .Run function:

Figure 14.32: Viewing arguments in the formula bar

6. Our first argument was the email address, and the second was the grocery. So let’s update it based on the last-submitted record. Update your flow to look like this: Sendnotificationwhengroceryadded.Run(User().Email, frmGrocery_ Grocery.LastSubmit.Title)

7. Now, let’s bring our old formula back from Notepad. Our flow run formula needs to be directly below the Patch formula:

Figure 14.33: Typing the flow run formula below the Patch formula

Chapter 14

397

8. Finally, save, publish, and test your app and flow combination and observe the outcomes.

Activity 3: Creating a reminder flow One of the key pieces of information that we gather within our app is the “use by” date, so we have a good opportunity to create a really useful flow that will check to see how many of our groceries need to be used within the next seven days. This will help us prioritize using those rather than longer-life goods: 1. Navigate to the Power Automate portal (make.powerautomate.com) and select + Create from the left navigation. 2. Once again, we will start our flow from blank. This time, however, we will select a Scheduled cloud flow:

Figure 14.34: Option to create a scheduled cloud flow from the Power Automate portal

3. When the Build a scheduled flow window appears, enter the following configuration: a. Flow name: Use by date reminders b. Starting: Select tomorrow’s date, at 6 AM c. Repeat every: 1 Day

Using Power Automate with Power Apps

398

Your screen should then resemble the following screenshot:

Figure 14.35: Setting the flow name and run recurrence

Once completed, press Create. 4. Once our Power Automate canvas appears, notice that we have our recurrence trigger already created for us. Click + New step below our trigger to add our first action. 5. The first action that we’re going to use is a simple Compose action to allow us to calculate the date in 7 days’ time. The reason why we’re using Compose is so that we can see it building up step by step. Use the search box in the Choose an operation selector to search for the Compose action and click it so that it is added to the canvas. 6. We are going to use an expression within this Compose action to calculate our date. Click into the Inputs text box and then select Expression from the toolbox that has opened to the right-hand side:

Chapter 14

399

Figure 14.36: Opening the formula bar to enter an expression into the Compose action

7. Enter the following expression: addDays(utcNow(),7,'yyyy-MM-dd')

Then press OK:

Figure 14.37: Formula bar with the entered expression

400

Using Power Automate with Power Apps

8. We now need to tell our flow to retrieve data from SharePoint so that we can find the info we need. Click the + New step button below our Compose action. 9. When the Choose an operation box is displayed, we will first find our SharePoint connector, so that we can reduce the overall number of actions to just those we potentially want to use. Once you see SharePoint in your list, click the SharePoint icon:

Figure 14.38: Finding the SharePoint connector in the Choose an operation box

Chapter 14

401

10. Once we have our connector selected, choose the Get items action. You can reduce the overall list of actions by filtering for the word Item:

Figure 14.39: Finding the Get items action within the SharePoint connector

11. Once the Get items action has been added to the canvas, we can then configure it. Select the SharePoint site where you have created your list, and select the list that contains your list of groceries:

Figure 14.40: Entering a site address and list name into the Get items action

Using Power Automate with Power Apps

402

12. We have now told the flow to get a list of items, but currently, this will return everything from the list. We only want it to give us a list of items that are due to expire next week. For this, we need to add a filter query to our action, which we can see when we click on Show advanced options in the bottom left of the action. 13. When we write a filter query, we need to write them in a very specific way; otherwise, an error will occur. We need to write it as the ColumnName (with no spaces), then an operator such as equal to, and then finally what we want to compare it to. For this activity, we will build the query so that it will filter for any items where the use by date is less than or equal to today’s date + 7. The skeleton of our filter query will therefore be: UseByDate le ''

Note this uses two single quotes. This should resemble the following screenshot:

Figure 14.41: Adding a filter query to the Get items action

Chapter 14

403

14. Place your cursor between the two single quotes of the filter query '' and then select the outputs from your Compose action from the dynamic content selector:

Figure 14.42: Adding the output of the Compose action to the filter query

15. Now that we have a list of items being returned from SharePoint, we need to take the data and add it to an email so that we can be notified of what needs to be used as a priority. But first, we need to format the outputs into something that can be used. For that, we’re going to use a simple HTML table. Click + New step, locate the Create HTML table action, and place it onto your canvas. 16. Once the Create HTML table action is on your canvas, place your cursor in the From text box, and select value from the dynamic content selector:

Figure 14.43: Building the Create HTML table action

Using Power Automate with Power Apps

404

17. Click on Show advanced options, where you will see an option for Columns. The default is set to Automatic, so be sure to change this setting to Custom:

Figure 14.44: Adding a columns option to the Create HTML table action

18. We can now add our own headers and values. We will type into the Header column, and add dynamic content into the Value column. Use the following pairs: a. Header: Item, Value: Title b. Header: Type, Value: Grocery Type Value c. Header: Use by date, Value: Use By Date

Figure 14.45: Creating heads and values for the HTML table

Chapter 14

405

19. Now that we have our items being formatted into a basic table, we can add this to an email that can be sent to us each day. Click + New step and add the Send an email (V2) action:

Figure 14.46: Adding a Send an email (V2) action to the flow

20. Configure the action to use your chosen email address, and set the Subject to Daily grocery report. 21. In the Body text box, type in the following text, including the colon: The following grocery items need to be used within the next seven days:. 22. Below the text we’ve just typed, from the dynamic content selector, select Output from the Create HTML table action. Now, when our flow runs, we will be emailed with a basic list of items that are due to expire soon. You can test this by clicking on Test in the top-right corner of the screen, and then selecting Manual test. Follow the on-screen instructions and run the flow. Congratulations! You’ve now created a daily reminder by using a scheduled cloud flow, as well as creating a flow notifying you when new items are added by using an instant cloud flow, which we added to the app itself.

406

Using Power Automate with Power Apps

Summary In this chapter, we have unlocked a huge amount of potential by utilizing another part of the Power Platform. We did this by using Power Automate to provide integration services and a heavy processing platform for our apps. Power Automate can be used for personal workflow automation, business process automation, or integration between services, so it’s somewhat versatile. It has the same underlying engine as Azure Logic Apps, but while Logic Apps is aimed at developers, Power Automate is aimed at business users. It can be accessed through the Microsoft 365 portal. Power Automate shares the same connectors as Power Apps, which means it also has the ability to connect to hundreds of different services. The key advantage over directly connecting with Power Apps is that we can schedule workflows, handle files, and handle long-running processes that wouldn’t suit the client-facing aspect of Power Apps. For us to utilize flows within Power Apps, we need to use a Power Apps trigger. We now have the “version 2” Power Apps trigger, which allows us to define the exact data types that we want to receive from our app. Once we have created the trigger, we can then build out the logic using a number of actions to process the data as we see fit. The data that is requested by the trigger is presented to the app developer as arguments when the flow is added to the formula bar. Power Automate also has the ability to respond to an app by passing one or several pieces of data back for the app to consume. To achieve this, we need to wrap the flow call within a variable declaration so that we can use it in our other controls as dynamic content. In the next chapter, we will be using Azure in Power Apps to further extend the capabilities of the apps that we’re developing.

Questions 1. Microsoft Power Automate is built on another Microsoft technology. What is it? 2. What is the intended user base for Microsoft Power Automate? 3. There are three types of triggers. What are they? 4. What trigger should I use to request data from Power Apps?

Chapter 14

407

5. What action should I use to return data from Power Automate to Power Apps? 6. True or false: Power Automate can integrate with third-party data sources, not just Microsoft.

Further reading Power Automate has an extremely good community following and has support from Microsoft support staff, Microsoft MVPs, and Flownauts (Super Users), all of whom can be contacted through the Microsoft Power Automate Community: https://powerusers.microsoft.com/t5/ Microsoft-Flow-Community/ct-p/FlowCommunity.

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

15

Using Azure with Power Apps So far, we have created functionalities using the various components that are available through Power Apps and then extended those by using Power Automate. In this chapter, we are going to look at the Microsoft cloud platform, Azure, and how we can start to utilize the power of Azure to perform actions that we wouldn’t be able to perform directly through Power Apps, for example, using applications which developers have created that may be bespoke to your organization. Microsoft Azure is generally more focused on IT administrators and developers, with the user experiences not being quite as intuitive as those that have been created for Microsoft 365. Therefore, this chapter will feel as though it has a developer-focused feel to it as we start to explore how we can use scripts and code to build functionality for our app. There are a huge number of services that can be utilized within Azure to add depth to our apps, although some areas are more accessible by Power Apps than others. In this chapter, we will focus on the three areas that are used the most with Power Apps development to achieve outcomes that wouldn’t be possible otherwise. We will cover the following topics, starting with the areas where in-built connectors already exist, and going into those areas that step into the developers’ world: •

Introducing Microsoft Azure

•

Integrating with Azure Active Directory (AAD)

•

Implementing Azure Automation

•

Calling Azure functions

Using Azure with Power Apps

410

When we look at AAD, we will cover the user management abilities it offers and how they can be used within Power Apps. Using Azure Automation, we will extend our app functionality through the use of PowerShell, Microsoft’s task automation framework, stored within Azure Automation. Moving on, we’ll describe how we can interact with and trigger Azure functions through queues to provide a robust solution when it comes to interacting with serverless code running within the Microsoft cloud. By the end of this chapter, you will have an understanding of how you can leverage aspects of Microsoft Azure directly from within your app. Specifically, we will focus on how we can leverage the key Azure technologies that have connectors available.

Technical requirements To follow along with the topics that will be covered in this chapter, you will need access to a number of resources that are available through the Microsoft Azure portal (portal.azure.com). You can create Azure resources using a free trial at https://azure.microsoft.com/free, which will give you $200 of credit for 30 days. In order to carry out a number of tasks within this chapter, you will need to have administrator rights to Microsoft Azure. Therefore, it is recommended that you have signed up for the Developer program.

Introducing Microsoft Azure Azure allows you to create resources that you can call to provide additional processing resources, store data, or manage areas of your tenancy, such as AAD. Much like Power Automate, Azure can provide additional processing power to your apps through a number of Platform as a Service (PAAS), Software as a Service (SAAS), or Infrastructure as a Service (IAAS) offerings. There are a large number of connectors available to leverage Azure, some standard and others premium, which allow you to extend the functionality you have available to you within Power Apps.

You can find out much more about Azure by reading Azure Strategy and Implementation Guide, by Jason Milgram, Jack Lee, Greg Leonardo, and Dave Rendon.

There’s also a growing number of connectors in preview, and therefore they can be used for testing, which means that Microsoft is increasing the number of Azure resources that you have directly available within your app.

Chapter 15

411

The most common resources that are employed alongside Power Apps are as follows: •

Azure Active Directory

•

Azure Automation

•

Azure functions

We will begin by looking at the identity service provided by Microsoft Azure known as Azure Active Directory.

Integrating with Azure Active Directory (AAD) Integrating with AAD allows you to access a number of key pieces of information from the user store, as well as to create bespoke ways of putting data into Azure. AAD contains a large number of attributes about users, as well as groups, and serves as the primary user management portal for Microsoft 365. As shown in the following screenshot, AAD will consolidate all the users, regardless of whether they have been created on-premises (as long as AD Connect has been installed and configured), in Azure, or as guest accounts, into a single management screen:

Figure 15.1: AAD users

If AAD is your key user management provider – that is, you’re not using Active Directory Domain Services (ADDS) – then you can build graphically rich Power Apps to manage your users. In this case, you could consider building a Power App to allow users to be able to create, edit, or delete users, as well as assign groups through Power Apps. If, for example, our app was using AAD groups to manage security, it is possible for us to build an element within the app to control the membership of this group. This can open the door to creating lightweight management apps using Power Apps as the interface rather than always needing to log into Microsoft Azure.

412

Using Azure with Power Apps

To use key components of Azure, we can use some of the connectors that Microsoft has provided for us. Some examples can be seen in the following screenshot:

Figure 15.2: Examples of connectors provided by Microsoft

When it comes to our canvas app, we treat the Azure resources just like any data source, where we add the connector using the + Add data button. We’ll get started by adding Azure AD to allow our app to interact with AAD.

Chapter 15

413

Figure 15.3: Adding the Azure AD connector to the app

Once the connector has been added to your app, we can then start to utilize the actions associated with it, such as creating users. The first interaction we will look at is creating a user using the CreateUser function. Here, we need to supply some basic information: •

accountEnabled: This is a Boolean value that determines whether the account is active

or not. •

displayName: The name of the user as it would be seen by others, for example, Matt Weston.

•

mailNickname: The alias for the mailbox that is created for the user.

•

passwordProfile: The password that is assigned to the user.

•

userPrincipalName: The identifying name that allows the user to sign in.

Each of these pieces of information can be captured from controls within Power Apps or can be typed in, as shown in the following screenshot:

Figure 15.4: Creating a user in AAD using the CreateUser function

Using Azure with Power Apps

414

This formula will create a new user in AAD as a cloud user, that is, a user who has been created directly within the cloud. It should be noted here that this will only create a cloud user that will exist in Azure, and won’t create a user in any on-premises Active Directory instance. As well as being able to interact with user objects in AAD, we can also interact with groups in the same way as we can with users. Here, we would create a new group, which requires the following information: •

displayName: The name of the group, as seen by a user.

•

description: The description of the new group.

•

mailNickname: The email alias assigned to the group.

•

groupTypes: Allows the creation of an Office 365 group if we provide a string array with

the word Unified. If you just want a standard security group, then use the word None. •

securityEnabled: A Boolean value that will identify the group as a security group that

can be used across various applications. •

mailEnabled: A Boolean value that will identify whether the group in question is a mail-

ing group. Once again, all of this information can be captured from the controls within our apps or coded in, as shown in the following screenshot:

Figure 15.5: Creating a new Microsoft 365 group

The function in the preceding screenshot will create a new Microsoft 365 group within AAD called New Group.

Chapter 15

415

So far, we have focused on interactions with Azure Active Directory as it is a very simple element to interact with and is part of your standard-level licensing, but it is only one small part of what Azure can do. Where Azure adds even greater value to Power Apps is when it gives us the capability to offload some more complex tasks or process heavy automation, for example, the ability to provision new sites in SharePoint.

Implementing Azure Automation Azure Automation is a way of being able to extend your apps by implementing functionalities through PowerShell. PowerShell is a scripting language that allows administrators to automate tasks through line-based commands.

For an introduction to PowerShell in Azure, I recommend Azure PowerShell Quick Start Guide, by Thomas Mitchell.

PowerShell is commonly used when we need to perform actions that aren’t directly possible by using connectors and functions with our app, such as if we want to change tenancy settings or, as I’ve done a number of times, advanced SharePoint provisioning using the PnP.PowerShell modules. Given that PowerShell is a method of creating scripts, Azure Automation starts to take Power Apps developers out of the realm of creating no-code/low-code solutions as it requires us to create scripts to perform our actions rather than using something graphical. Azure Automation allows a number of different scripting languages to be used to create functionality, with the main options being PowerShell and Python. In the following examples, we will be using PowerShell since it is the most common scripting language that’s understood by both Microsoft 365 admins and developers. There are a huge number of advantages of using Azure Automation, the main one being that we can quickly and easily import any PowerShell modules from the PowerShell gallery and then manage them directly with our Azure Automation account. We also don’t need a local development environment as it provides a browser-based editor where we can develop and test our scripts. Like the other services provided by Azure, we can integrate with DevOps (dev.azure.com) or GitHub (www.github.com), which means that we can apply source control to the scripts, as well as configuring continuous deployment.

Using Azure with Power Apps

416

Azure Automation will run up to 500 minutes of compute time for free. This isn’t 500 minutes per month or 500 minutes since the PowerShell was created; this is 500 minutes of free time for each execution. If you’re familiar with PowerShell, then you will understand that you can execute a huge amount of PowerShell code in a 500-minute window. This makes Azure Automation an extremely cost-effective method of running scripts. Automation allows us to call PowerShell directly from Power Apps using the Azure Automation connector. This means that we now have the ability to perform a huge number of operations beyond what we can do through the standard user interface, or without having to interact with Power Automate first. To utilize Azure Automation, we need to create an Azure Automation account.

Creating an Azure Automation account To create an Azure Automation account, we need to log in and subscribe to Microsoft Azure. This can be configured through the Azure portal (portal.azure.com). The simplest way of finding Azure Automation is by using the search bar at the top of the Azure portal and selecting Automation Accounts:

Figure 15.6: The search bar at the top of the Azure portal allows you to quickly find resources

When you create an automation account, you need to provide a few details to get it up and running: •

The first is a unique Name for your automation account.

•

The Subscription where you are going to create the automation account.

•

The Resource group.

•

The location where the service will be hosted.

Chapter 15

417

The output of providing these details is shown in the following screenshot:

Figure 15.7: Create an Automation Account blade

Now that we have created an Azure Automation account, there are some elements that we need to configure before we can start scripting so that we can work more efficiently.

Preparing your Azure Automation account for use Just like writing PowerShell locally, we need to prepare our environment so that we can develop. For example, we need to check that we have the correct PowerShell modules installed, and that we have any credentials ready so that we can access our services. Exactly the same considerations are required when we work with Azure Automation, but we can do all of this through the Azure graphical user interface rather than doing it through scripts.

Using Azure with Power Apps

418

From the navigation on the left-hand menu, you will see the Shared Resources header, as shown in the following screenshot. Under this header, you will find three key areas, all of which you need to be aware of: •

Modules

•

Credentials

•

Variables

Figure 15.8: Shared Resources menu in Azure Automation

The most important of these menu options is the Modules menu, which allows us to install the modules that we need for our automation. Let’s learn how to install modules.

Installing modules Modules allow you to search for and import PowerShell modules directly from the PowerShell gallery (www.powershellgallery.com). This means that any modules that can be used with a standard PowerShell script, that is, scripts that you create on your local machine, are also available to use within Azure. For example, if we want to import the Microsoft Teams modules, we can do so by searching for and selecting them from the gallery. This is shown in the following screenshot:

Chapter 15

419

Figure 15.9: PowerShell Modules gallery in Azure Automation

Selecting and installing a module in this way is the equivalent of running the Install- Module commandlet from your local environment. When updates are available for the PowerShell modules, we can also update our installed modules through the user interface, which is the equivalent of running Update-Module. Once we have added all of the required modules, we can consider what credentials we need and store them securely within Azure Automation.

Storing credentials When connecting to Microsoft 365 using PowerShell, we often need to provide user credentials, such as the username and password of a service account. Often, these are stored within the PowerShell scripts themselves, but this means that anyone with access to the script can see these credentials.

Using Azure with Power Apps

420

The Azure Automation account has a built-in credential manager, as shown in the following screenshot. This allows us to securely store usernames and passwords, which then become easily usable through a PowerShell commandlet:

Figure 15.10: Azure Automation credential manager

When actually writing scripts, we can access our credentials using the following command within our script: Get-AutomationPSCredential -Name

This will retrieve the username and password in the correct format so that it can be used in authentication calls against a large number of services, such as when calling services within Office 365. In the same way that we have a central register of credentials, we also have the ability to create a centrally managed list of variables.

Chapter 15

421

Storing variables Just like we can store credentials within the Azure Automation account for reuse, we can also store variables. These are particularly useful for creating, managing, and reusing global variables throughout our PowerShell scripts. Just like credentials, variables are created through the Azure Automation screen in the Azure portal, as shown in the following screenshot. When creating a variable, we can define the data type and specify whether the field is encrypted or not. If we are going to store a client ID and secret, for example, we can ensure that the secret is encrypted and therefore protected from anyone going into the variables list and retrieving that information:

Figure 15.11: Azure Automation variables manager

Using Azure with Power Apps

422

When we want to use this variable within our PowerShell scripts, we can use a simple command to retrieve the value of the variable: Get-AutomationVariable -Name

This means that the value of our variable is now usable within our automation. Variables, however, are also subject to change and can be updated from within our scripts. Unlike credentials that are read-only from scripts, variables can be written using the following command: Set-AutomationVariable -Name 'DevOps Access Token' -Value

This means that our scripts are updating variables without a user physically having to change them. Once we have created a variety of variables or credentials, we need to create our runbook.

Creating runbooks The final thing we need to do so that we can utilize Azure Automation within our app is to write a PowerShell script to perform the desired actions. There are a number of basic scripts that are created as examples for runbooks – some are graphical, some use Python, and others use PowerShell. This gives you the flexibility to write your functionality in your desired language. Given that PowerShell is used for a lot of administration tasks within O365, the following example runbook will be demonstrated in PowerShell. To create a runbook, follow these steps: 1. Select Runbooks from the Process Automation menu on the left-hand side and select Create a runbook. Here, a blade appears on the right-hand side of the screen that will allow us to create the runbook by giving it a name, selecting its type, selecting the runtime version that we want to use, and giving it a description. When selecting the runtime version, i.e., the PowerShell version that you want to use, you’ll need to make sure that your modules are supported. You can see the version by finding the module in the PowerShell Gallery documentation at powershell.org:

Chapter 15

423

Figure 15.12: List of runbooks

2. Once the runbook has finished provisioning, we can add some lines of script to perform whatever functionality we desire by clicking on Edit. This will allow us to edit our script within the browser:

Figure 15.13: Basic PowerShell script in the online editor

Using Azure with Power Apps

424

3. Once we have written and tested the script, we need to ensure that it has been published by clicking on the Publish button at the top of the screen:

Figure 15.14: The Publish button in the runbook editor

Now that we have created our runbook, we can configure our app so that it calls and executes the script.

Using Azure Automation in Power Apps Within Power Apps, we can make use of runbooks to either kick off tasks that we want to run in the background or to run a task and return a response. There are two key functions of the Azure Automation connector that we can use within Power Apps: •

Create the job, which will start the execution of our Azure runbook.

•

Get the output, which will capture any responses from it.

To trigger this automation in Azure, we must create a job through the Azure Automation connector.

Calling CreateJob Using the CreateJob function will take our inputs from Power Apps and add an automation job to the queue in Azure. This will mean that, after a few seconds, the runbook will execute the script and perform the actions that we have scripted. Here, we need to provide some key parameters, all of which can be found on the runbook’s overview screen: •

subscriptionId: This is the GUID that identifies the subscription we’re going to create

the job in. •

resourceGroupName: This is the string that identifies the resource group.

•

automationAccount: A string that identifies the Automation account (called Account on

the screen).

Chapter 15

•

425

runbookProperties:

•

runbookName: The string that contains the title of our runbook.

•

wait: A Boolean that tells the app whether to just initiate the automation or wheth-

er to suspend any further processing until it is complete. •

Any properties that are required by the script.

Figure 15.15: The automation job has been received and added to the local queue

So, if we put this into practice, we would need to create a formula similar to the following one, whereby we’re providing the required information to queue a new automation job: Set(gblAutoJob,AzureAutomation.CreateJob( "45634c51-c503-48d7-96d11c47a2eed8aa", "DemoResourceGroup", "DemoAutomation", { runbookName: "LearningPowerApps", wait: true } ) )

The result is that the runbook will be queued in Azure and will execute the script. The formula above can be added to a button, or another control, so that when the button is pressed the runbook is then triggered. The response from the runbook, which initially is just the ID of the job, is then stored in a variable for us to use again later.

Getting the job’s output Once the runbook has successfully completed the action, we can retrieve the outputs from the runbook by using the GetJobOutput function.

Using Azure with Power Apps

426

This will take almost the same parameters that we provided when we initiated the job call: •

subscriptionId: This is a unique ID that identifies the subscription we’re going to create

the job in. •

resourceGroupName: This is the string that identifies the resource group.

•

automationAccount: A string that identifies the Automation account (called Account on

the screen). •

jobId: This is the job ID that was returned from the call when we created the job and can

be accessed by calling varAutoJob.properties.jobId (in my example). When we want to use the output of the automation job within our app, we would use the following formula and wrap it within a set variable function to allow the app to capture the output: Set( varAutoJobOutput, AzureAutomation.GetJobOutput( "45634c51-c503-48d7-96d1-1c47a2eed8aa", "DemoResourceGroup", "DemoAutomation", varAutoJob.properties.jobId ) )

Now, we can use any outputs from a runbook, for example, the URL of a newly generated SharePoint site within our app. An alternative method when it comes to extending our app using Azure is to use Azure Functions.

Using Azure Functions Functions are a way of creating small amounts of isolated code that run when a specific event is triggered. They differ from Azure Automation in the way that the amount of time a function should run for is less than 10 minutes, and if you require longer runtimes, then the code should be split across multiple functions. Azure Functions does, however, allow you to be much more flexible in terms of your development approach since you can use all the common development languages that are available, including C#, Node.js, and PowerShell. You can also use a number of different integrated development environments (IDEs) to create functions, such as Visual Studio Code or VS Code.

Chapter 15

427

There are a large number of events that can be used to trigger a function, with the common ones including calls to a webhook or creating an item within an Azure queue to then trigger the function. Both of these triggers could be used from within Power Apps, although the webhook trigger would need either a cloud flow to act as the broker between the app and the function or a custom connector. The reason for this is that it relies on making an HTTP call and providing header and body content in order to start the execution. Personally, I like to use queues with functions, as it allows me to catch items that fail and reprocess them. So let’s have a look at how we can do this within our app.

Using a queue As an alternative to using webhooks, a more Power Apps-friendly way of triggering a function is using the Azure queue connector, since this simply relies on passing a body of JSON containing the required data to the queue. Azure queues effectively act as storage accounts for messages so that they can be created and then processed by a number of other Azure resources. In this scenario, they are being picked up and processed by functions. To create a queue, you simply need to create a storage account through the Azure portal and then complete the form to generate a new account. Like we’ve done previously, you’ll need to provide a subscription and resource group that you want the storage account to be created within:

Figure 15.16: Azure storage account configuration screen

Using Azure with Power Apps

428

Once your storage account has been created, you’ll need to create a new queue to receive your Power Apps requests. This is achieved by selecting Queues from the storage account and selecting Add new:

Figure 15.17: Creating a new queue

Chapter 15

429

Now that we have a queue, we can use the Azure queues connector from Power Apps to be able to create a message and place that into the relevant queue for a function to pick it up and process. This requires using the AzureQueues.PutMessage function. For this, we simply need the name of the Azure queue and the message that we want to place in the queue: AzureQueues.PutMessage("packtqueue","My Info")

This will place the value My Info into the queue, which can then be picked up and processed by the function. This is shown in the following screenshot:

Figure 15.18: A message that has been placed into an Azure queue

Now that we have a queue, we need to create some logic to take the information from the queue and then process it. For that, we are going to create a function.

Using Azure with Power Apps

430

Creating an function To create a function, we need to be logged into the Azure portal (portal.azure.com). Once we’re there, we can create a function by following some basic steps: 1. The first thing that we need to do is create a new function app by navigating to Create a resource and then searching for function. Officially, it is called a function app since it is a serverless app that’s hosted within the Microsoft cloud:

Figure 15.19: Search results when searching for a function app

Chapter 15

431

2. Once we are faced with the creation screen, we can click Create and fill in the required details for the creation of the function. These details include the following: •

Subscription: The payment subscription that this function app belongs to.

•

Resource Group: This is the collection of Azure resources which share policies and permissions.

•

Function App name: This is the unique name that you wish to give to your web app, and will be a sub-domain of azurewebsites.net.

•

Publish: There are now options for what you want to make available to your function app. You can choose to publish code, or you can publish a Docker container.

•

Runtime stack: If you have chosen Code from the Publish options, then you’ll need to provide which language you are going to use within your app. This could be .NET, PowerShell Core, Node.js, and more.

•

Version: There are different versions of the runtime available dependent on what we’ve selected for Runtime stack. So we need to choose the relevant version based on support for what we’re writing.

•

Region: Which data center region you want your app to be hosted from.

•

Operating System: Which base operating system is going to be used to host your app. The defaults for this will change depending on which runtime stack you select; for example, .NET will default to Windows whereas Python will default to Linux.

Using Azure with Power Apps

432

•

Plan type: Lastly, we have to select which plan type we want this app to be based upon, which will be based upon your requirements. The lowest cost model is the consumption model; however, if you need the app to be isolated on your own virtual network then you may select Premium.

Figure 15.20: The function app creation blade

3. Once the function app has finished provisioning, we can start to configure it so that we can host our logic by clicking on Go to resource:

Chapter 15

433

Figure 15.21: Successful deployment confirmed

4. Once we get to the Function App screen, we are able to create functions by clicking on Functions on the left-hand menu and then selecting + Create. This will present us with some options that we can use to edit our function. Here, we have the ability to select our chosen editor, whether that’s VS Code, another editor, or the in-browser editor. For the following steps, we will use the browser:

Figure 15.22: Function apps options

434

Using Azure with Power Apps

5. Then, we have the ability to select how we would like the trigger to be scaffolded. For example, this could be based on a webhook (HTTP trigger) or a queue. Alternatively, you can view and filter the other templates should you wish to use one of the others available. Selecting this option will present you with a full range of templates that you can use to create your function app. Here, we will be using the Azure Queue Storage trigger template. If you have never used one of these templates before, it will automatically install any dependencies for you:

Figure 15.23: Creating a function from the Azure Queue Storage trigger template

Now that we have created the function app, it will listen to the queue and look for any new items that have been placed on it. Now, we can write logic that can be placed in the queue, which will then be processed by our function. Normally, at this point, we would be looking at how we then return data from our function to our app, and how we return it will depend on the method that we used to call it. As an example, if we used a cloud flow to orchestrate the execution of our function, then we could return the output in the same way as we discussed in Chapter 14, Using Power Automate with Power Apps.

Chapter 15

435

Summary In this chapter, we have looked at some of the elements that currently exist within Microsoft Azure that provide a lot of benefits to the creators of Power Apps. There are a number of connectors that exist within Power Apps, some standard and some premium, that allow us to exploit various areas of Azure. The first area that we looked at was AAD, where we can interact with and manage user objects within the user profile manager. This is quite useful when we want to create interactions with user objects, such as the ability to add or remove users from a security group within a Power App, which could be extremely useful if combined with some of the techniques we discovered in Chapter 12, Securing Your Power Apps, where we spoke about using Azure AD security groups to control access to our apps. The biggest area of exploration was Azure Automation, which allows us to execute and get responses from PowerShell scripts directly from our app. This type of Azure interaction is extremely popular within Power Apps development as it doesn’t require huge amounts of development experience – it just requires that we have the skills to develop scripts, which can be learned quite quickly. Check out Automate administrative tasks by using PowerShell on Microsoft Learn: https://learn.microsoft.com/en-us/training/paths/powershell/. Or, check any of the great resources listed in Further reading.

These scripts are often used to perform actions that neither Power Apps nor Power Automate can achieve on its own, such as the creation of SharePoint sites or further configuration with Microsoft Teams. The third area that we explored was Azure Functions, which allows developers to create functionality using a larger range of programming languages, including C# and Node.js. Functions contain small amounts of functionality that typically take less than 10 minutes to execute. In particular, we focused on the use of the connectors that are available through Power Apps by looking at how we can push a message to a queue in Azure, which is then processed by the function. Regardless of which way we choose to extend our apps, through automation or Azure Functions, we have the ability to reach out to other services so that we can start taking our apps to the next level.

Using Azure with Power Apps

436

Questions 1. What two Azure services that were mentioned in this chapter can we use to host custom code? 2. What URL do we use to access Microsoft Azure? 3. What native connector is available to Power Apps that allows us to interact with functions in Azure? 4. Which service provides us with an amount of free processing time so that we can run scripts? 5. If we want to write functionality using Node.js, what service would we use?

Further reading •

Azure DevOps Explained, by Sjoukje Zaal, Stefano Demiliani, and Amit Malik

•

Azure for Developers, by Kamil Mrzygłód

•

Azure Networking Cookbook, by Mustafa Toroman

•

Azure PowerShell Quick Start Guide, by Thomas Mitchell

•

Azure Strategy and Implementation Guide, by Jason Milgram, Jack Lee, Greg Leonardo, and Dave Rendon

•

Hands-On Azure for Developers, by Kamil Mrzygłód

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

16

Visualizing Data So far throughout the book, we have focused on the controlled capture and storage of data through the use of Power Apps. Capturing lots of data, albeit a good commodity to have, can be overwhelming when just looking at potentially millions of lines. Particularly from a reporting perspective, using visualizations to represent our data is a great way of allowing users to understand what the data is telling them without having to read it in its entirety. Power Apps has a number of ways to create these representations; in this chapter we are going to introduce: •

Using chart controls

•

Embedding Power BI into your app

•

Lab 13

By the end of this chapter, you will have an understanding of the options available to you to make your data easier to understand, and the options on how and where you present them. To get us started, let’s discuss why analyzing our data is important.

Technical requirements In order to follow along with all of the example in this chapter, you will require a Power BI Pro license assigned to your user. This is available if you have a Microsoft 365 or Office 365 E5 license; alternatively, it is available as an add-on license.

Visualizing Data

438

The use of data Data is now one of the most valuable resources on the planet, as it allows us to analyze what has happened in the past. By looking at the past, we can draw lessons and analyze what went well, and what didn’t go well. This is known as insight, or hindsight. If you continue analyzing and modeling based on the data you have captured, then you can start to make predictions about what is going to happen in the future. This is known as foresight. For the latter, we are venturing into the realm of data science, but for the former, where we can create visualizations to help us understand our data, we have a number of options within Power Apps. In the first instance, let’s look at the chart controls.

Using chart controls When we are working with data in our apps, there are three basic chart controls that we can use to create a simple visualization: •

Column (or bar) charts

•

Line charts

•

Pie charts

The chart controls that we use within Power Apps are designed to take very simple data structures and create a graphical representation of them. When we talk about it being simple, we effectively want the data source to contain a textual column that can be used as the label and then at least one numerical field that can be used to show the data. As an example, we could create a simple collection that will contain some data for us to start visualizing. We could use a button to populate some data with the OnSelect formula as follows: Clear(colData); Collect(colData, { Country: "China", Population: 1439323776, 'Land Area': 9388211 }, { Country: "India", Population: 1380004385, 'Land Area': 2973190 }, { Country: "United States", Population: 331002651, 'Land Area': 9147420 }, { Country: "United Kingdom", Population: 67886011, 'Land Area': 241930 } )

Chapter 16

439

Once we have our data created, we can then use it with our visualizations. Let’s start with a column chart.

Using a column chart Now that we have our data, let’s represent it in our app as a column chart so that we can do a visual comparison between the different countries. We know already that there is a huge population difference between the United Kingdom and China, but if we create this in a chart, we can then visualize the difference. From the Insert menu at the top of Power Apps Studio, we can select Charts and then the type of chart we want. In this case, we will select Column chart. This will then place a column chart on our screen, with some example data:

Figure 16.1: Column chart with default sample data

Visualizing Data

440

When our chart is added, we can observe in the Tree view on the left of the screen that a group of controls has been created. We have a: •

Legend – the textual description of the value groups

•

ColumnChart – the graph itself

•

Title – the name for the visualization, which appears at the top of the control group

Figure 16.2: Chart controls on the Tree view

For us to configure the chart to show the data that we want, we need to first of all select the ColumnChart control, which will then show us the chart-specific properties in the property bar on the right side of the screen.

Chapter 16

441

The first property is called Items, which is the source of the data to be shown within the chart. When clicking on the dropdown, you will be able to select any of the data that is currently available to your app, regardless of whether it is an online data source using a connector as we discussed in Chapter 8, Working with Data, or a local collection as we discovered in Chapter 13, Working Offline.

Figure 16.3: Selecting a data source for the chart

Visualizing Data

442

As soon as we select our new data source, which in our example will be the colData collection that we populated with our button, the example data will disappear and be replaced with the data from our collection:

Figure 16.4: Column chart with the selected data source

As you can see from the screenshot, the chart has defaulted to showing the Land Area statistic, and we can immediately see some of the surprising differences between these countries. In its current configuration, the chart is showing just the land area; however, our data source also contains population data. We can, therefore, include additional data to enhance our visualization by changing the control configuration.

Chapter 16

443

When we look at the Properties pane for the chart control, we see that there are a number of options that we can change to make the graphical display appear as we want it to:

Figure 16.5: Options available on the Properties pane

The Grid style property, as an example, will allow you to choose which of the axes you display, e.g. show only the X axis and labels, the Y axis and labels, or show all. Showing all will then show the countries across the bottom of the graphic and numerical intervals on the Y axis at the side. Items gap allows you to put spacing in between each column so that you can have some white space between each column on the graph. You also have the ability to change the minimum and maximum values that will appear on the Y axis. What we should draw attention to, however, is the property called Number of series. Currently this is set to 1; however, in our data source we have two lots of data that we could potentially show on our chart.

Visualizing Data

444

If we increase this to 2, we can then see that an additional label appears, and an additional data series appears on the graphic:

Figure 16.6: Column chart presenting two series of data

Chapter 16

445

In this case, the Y axis does not work very well for presenting Land Area and Population simultaneously, since the number of square kilometers that make up a country is obviously outweighed by the number of individual people within the country. It is important for us to consider what our data is when creating displays with chart controls, as it may not always give you the effect you’re looking for. Consider multiple chart controls on the same screen.

If we want to present the data separately, then we can switch to the advanced view of our graphic properties to see each of the series individually defined. If we only have one series visible on the chart control, then we can use this to change the chart from showing only Land Area to only Population. As well as selecting the series, we can also define the color for each series by changing the ItemColorSet property. This has a table of colors defined in it, by default all represented as RGBA values, which then correspond to each data point. The first color is used for point 1, the second for point 2, and so on. Let’s take a look at the line chart to see how that differs from our column chart.

Using a line chart Unlike a column chart, which is good for giving us the ability to make visual comparisons, a line chart is a great way of being able to see trends. Each of the points is plotted and connected to each other using a line that makes it immediately visible if something is increasing, decreasing, or staying at an almost consistent level. We insert the line chart onto the screen in the same way as the column chart, by going to the Insert menu, but this time selecting Line chart.

Visualizing Data

446

Once again, the line chart will be added to the screen with sample data so that you can get a feel for what a line chart control is, and how it looks when populated:

Figure 16.7: Line chart with default sample data

Given that both the column chart and line chart are fundamentally the same in the way that they work and are configured, let’s move swiftly onto the final chart type, which is a pie chart.

Using a pie chart A pie chart is the perfect chart type if you want to see how each value in your dataset is apportioned in relation to the total value. In the data that we have been using within our examples in this chapter, it would be perfect to represent how the populations of our countries make up the overall population of the world.

Chapter 16

447

To insert the pie chart control, we will return to the Insert menu, click on Charts, and then select Pie chart. Just like we saw with the other chart types, a prepopulated pie chart is created on the screen with the legend and colors all configured:

Figure 16.8: Pie chart with default sample data

Once again, the control is created as a group that contains the legend, pie chart, and a label for the title. Clicking on the PieChart control will bring up the properties within the Properties pane on the right-hand side of the screen. Given that we are now working with a different type of chart, we can observe that the properties are fundamentally different.

Visualizing Data

448

We firstly begin by selecting the items, just like we did with the other chart types, but then we can start to change the look and feel of the pie chart.

Figure 16.9: Properties pane for a pie chart

With our pie chart control, we have the ability to define whether we are going to show labels next to the relevant segment on the pie chart, or even whether it appears outside or inside the chart visualization.

Chapter 16

449

One key difference is the Explode property, which allows us to break apart the pie chart. This is so that we can more clearly see the segments, which helps us to identify smaller segments that might otherwise be ignored:

Figure 16.10: Pie chart display with the Explode property

When we switch to the Advanced options within the Properties pane, we once again have the ability to define our columns. However, the key difference is that we only have the ability to select one series. We could select multiple on the other chart types, so we need to make sure that we are selecting the correct data that we want to display.

450

Visualizing Data

For example, if we wanted the pie chart to be representing the population rather than the land area, we would need to change the series:

Figure 16.11: Selecting the singular data series we wish to present in the pie chart

Once you have really got to grips with the different charts, you could use a combination of them to build a very simple dashboard, which is built directly within your app, and requires no uplift in terms of licensing unless your data is coming from a premium data source:

Chapter 16

451

Figure 16.12: Creating a dashboard using multiple chart controls

With a number of chart controls on the same screen, we can create a very basic report which allows us to draw some level of conclusion, for example, more people live in China and India than in the USA and the UK. This, however, is not related to the land area; the United States has a much larger land area than India. The options for visualizing your data only using Power Apps are extremely limited. To really make your data work for you, and to go even further with your visualizations, we need to explore another member of the Power family, Power BI.

Embedding Power BI in your app Power BI is another fantastic tool that sits in the low-code Power Platform family, allowing us to build interactive visualizations without having to write any code. Effectively, the key selling points for both Power Apps and Power Automate also relate to Power BI.

Visualizing Data

452

We have the ability to create visualizations within Power BI, and then use the Power BI tile control that you may have already noticed on the Charts menu, which allows us to display a report directly within our app.

For this functionality to be available, you will require Power BI Pro licenses for both the report creator as well as any users.

A brief intro to Power BI We will have a very quick walk-through of bringing our data into Power BI and creating a basic report. If you’d like to learn more then you could check out Mastering Microsoft Power BI (2nd ed), by Brett Powell and Greg Deckler, which will enable you to really unlock its full potential. In order for us to get going though, we first need to have a Power BI license assigned to us, which enables us to publish and share Power BI reports with our other users. This is available as an add-on to most Office 365 and Microsoft 365 licenses, but if you have either Microsoft 365 E5 or Office 365 E5 licenses then you’ll find that Power BI is included. Before we can start to look at how we can use this within Power Apps, first of all, we need to create a Power BI report, starting with importing data.

Creating a basic report Before we can create our report, we need to create some data from which we can create visualizations. There is a desktop application called Power BI Desktop that you can install from the Microsoft Store and run locally to import your data; however, for the purpose of this explanation we’ll stay with the browser.

Chapter 16

453

To access the Power BI service, we need to be logged into the Microsoft 365 portal and select Power BI from the list of services on the app launcher. Alternatively you could navigate directly to https://app.powerbi.com/ by entering the address in your browser. This will bring us to the Power BI portal home page, where you can see your existing reports, datasets, and other assets. In the top-right corner of the screen, you will see a button that allows you to create a new report, so we will click that first of all to start the creation process:

Figure 16.13: Button to create a new report on Power BI

When we click on + New report, we are asked to add some data to get started. From this screen we have the ability to either enter our own data straight into Power BI, or we can use an already published dataset.

If you wish to create your own datasets, then you’ll need to use Power BI Desktop.

For this example, we’ll stick with manually entering data by selecting Paste or manually enter data, which will then open a Power Query window in the browser. From here we can paste some data in.

Visualizing Data

454

For simplicity, we’ll use a table of data displaying seismic activity in the UK, which can be found at the following URL: http://www.earthquakes.bgs.ac.uk/earthquakes/recent_uk_events.html.

Figure 16.14: Data source we will be using in Power BI

Let’s highlight the data in the table and paste it into the Power Query window, which we do by clicking in the top-left cell and pasting in what we copied from the web page.

Figure 16.15: Data source pasted into Power BI

Chapter 16

455

Before we click on Auto-create report, click on Use first row as headers above the table. This is so that the Column1 and Column2 headers actually become what we want, e.g. the date. In the bottom-left corner, rename your date from Table to Earthquakes and then press Auto-create report. After a few seconds, you’ll be presented with the visualizations of the data, which we can then think about using in our app. Granted, the visualizations may not be what you want, and by all means start to play with Power BI more, but this is all we need for now to get us going. To save the report, we’ll need to click on Save at the top of the screen and then give it a name:

Figure 16.16: Saving and naming the Earthquakes report

The final activity before we bring this data into our app is to add our report to a dashboard. To do this, let’s focus on the bar at the top of the report where we previously clicked Save. To the far right of this bar, you’ll see more actions represented by an ellipsis (…).

Visualizing Data

456

When you open up the more actions menu, you’ll see Pin to a dashboard:

Figure 16.17: Navigating to the Pin to a dashboard option

The same action can also be carried out for an individual visualization.

Once we click on Pin to a dashboard, we can create ourselves a new dashboard by selecting New dashboard and then giving it a name:

Figure 16.18: Creating a new dashboard

Chapter 16

457

Now that we have a dashboard, we have something that is easily shareable and that we can now start to use within our app. Should your dashboard not appear immediately, be patient as it can sometimes take a period of time to appear within Power Apps.

Embedding the report into your canvas app With all of our prep work done, we can now bring our Power BI dashboard into the app, which means that we can see our richer visualizations alongside any other controls that we put on our screen. Within Power Apps Studio, let’s revisit the Charts menu, which is where previously we placed the line chart and pie chart onto the canvas. The bottom option is for us to use a Power BI tile. If we click on the Power BI tile option, we can then start to look at the process for selecting what we want to display. The configuration for our Power BI tile allows us to select the Workspace, Dashboard, and exact Tile that we wish to use within the app:

Figure 16.19: Selecting the Power BI tile to use within the app

Visualizing Data

458

The dashboard will then be rendered within the app so that you can see your visualizations. Rather than you having to process, shape, and build your visualizations in your app, you’re letting Power BI do all of the hard work presenting the results for you!

Figure 16.20: Presenting data with Power BI

Now that we have explored how to embed Power BI into our app, let’s now look at how we can bring an element of visualization into our app.

Lab 13 In this lab we will take some of the data from our groceries list and then use it to create a chart in our list.

Activity 1 – Formatting the data In this activity, we are first of all going to take the data that we have stored within the SharePoint list and manipulate it within the app to give us the key structure of a label and a value: 1. Open the app that you have been creating throughout our labs.

Chapter 16

459

2. If you have some data in your SharePoint list, let’s bring it into the app by running the App OnStart formula. This will populate our collection and show the collection in the gallery on the home screen. 3. Now that we have the data populated in our collection, let’s add some more formulas to dynamically build the required data structure for our visualization. Click on App on the left side of the screen. 4. From the property dropdown, select OnStart. You should see the formulas that we entered in the previous labs to build our navigation and handle our offline capabilities. 5. Place at least two carriage returns after the end of our final if statement so that we can add more formulas to it:

Figure 16.21: Adding space after the if statement

6. Enter the formula below: ClearCollect(colStats, Distinct(colGroceries, 'Grocery Type'.Value))

Figure 16.22: Adding a ClearCollect formula to the OnStart

7. We are building a collection that is going to contain each type of grocery. The Distinct formula allows us to pick the unique values that are contained in Grocery Type. Therefore, if we have three cereal items on our groceries list, we will see Cereal. For more information on the Distinct formula as well as other formulas, check out the official Microsoft documentation: https://docs.microsoft. com/en-us/power-platform/power-fx/reference/function-distinct.

8. Run the OnStart at this point by clicking on the ellipsis next to App, click Run OnStart, and observe what has happened with your collection.

Visualizing Data

460

Depending on the contents of your list, it should resemble something like this:

Figure 16.23: Testing the results of running the OnStart

9. Let’s now tidy this collection up by changing the name of this column. Currently it is called Result, but really it should be called Grocery Type. Therefore, we can use the RenameColumns formula to shape our collection by wrapping it around the formula we created in Step 6. For ease, the new parts of the formula have been made bold: ClearCollect( colStats, RenameColumns(Distinct(colGroceries, 'Grocery Type'. Value),"Result","Grocery Class") )

Chapter 16

461

Figure 16.24: Adding the RenameColumns formula

10. Once again if we run OnStart, we will see the changes in our collection. 11. Next, let’s bring in some numbers. We’re going to do two things here: firstly we will create a formula to add an additional column; secondly we will create a formula to count each of our items. Let’s look at adding the column first, by adding in AddColumns and a column called "Items": ClearCollect(colStats, AddColumns(RenameColumns(Distinct(colGroceries, 'Grocery Type'. Value),"Result","Grocery Class"),"Items",0) )

12. At the moment, all of our values are 0, so let’s add one more formula in to replace the 0. We are going to use a filter so that we can match the value to the number of items that belong to a row, e.g. if we have 4 cereal items in our app then we’ll have 4 in our collection. Let’s update our formula one more time for it to look like this: ClearCollect( colStats, AddColumns(RenameColumns(Distinct(colGroceries, 'Grocery Type'.Value),"Result","Grocery Class"), "Items", CountIf(colGroceries,'Grocery Type'.Value = 'Grocery Class') ) )

Figure 16.25: Adding the CountIf formula

Note that CountIf is a non-delegable function, meaning that it must be processed locally and data must be brought to the device first. In some cases, that can involve a lot of data having to be retrieved over the network, which impacts performance. You can read more about non-delegable functions here: https://docs.microsoft.com/en-us/powerapps/maker/canvasapps/delegation-overview#non-delegable-functions.

Visualizing Data

462

13. Now when we run our OnStart, we will see each of our grocery types listed with the number of items against them:

Figure 16.26: Layout of grocery types and quantity

Now that we have created a collection for us to plug into a chart, let’s place a chart on the screen to represent our groceries.

Activity 2 – Displaying the chart On our home screen, we will place a pie chart control so that we can display how our grocery stock is spread out among the various grocery types: 1. With your app open, select the Home screen. 2. If your gallery is still taking up the full height of the screen, reduce the size to approximately 50% so that we can place our graph below it:

Figure 16.27: Shrinking the gallery on the app

Chapter 16

463

3. Navigate to the Insert menu, select Charts, and then Pie Chart. 4. Place the pie chart in the area below the gallery. Resize the pie chart so that it takes up the available space:

Figure 16.28: Fitting the pie chart under the gallery

Visualizing Data

464

5. In the Tree view on the left-hand side, expand the control group that contains your pie chart; it will be named similar to CompositePieChart1. 6. Select the Legend control in the control group and delete it. 7. Expand the size of the PieChart control so that we can see it more clearly:

Figure 16.29: Expanded pie chart without legend

8. With the pie chart selected, click on Items in the Properties panel on the right-hand side of the screen, and select colStats. We should see our pie chart immediately update with the spread of our groceries. Mine looks like this:

Chapter 16

465

Figure 16.30: Connecting a data source to the pie chart

9. Finally, click on the title of the chart, and change the title to Grocery distribution. We have now got a chart on the screen that will update each time the app loads! You could also consider adding the formulas that built this chart into your save operation for whenever you interact with the data.

Summary In this chapter we have started to open the doors to what we can achieve with the data that we are collecting within our app. We are able to collect huge amounts of data, which means that we can control the accuracy of what we are capturing. Once we have the data captured, we can start to visualize the data to make it easily readable to a wider audience rather than just having rows and rows of data. Being able to visualize data allows us to gain insight into the data as we are more easily able to see patterns and trends. Going forward, you could even start to apply data science to begin driving foresight.

Visualizing Data

466

Within Power Apps we have two ways in which we can visualize our data. We can use the inbuilt chart controls, which allow us to create basic column, line, and pie charts, or we can create reports that involve more data processing and greater visualizations using Power BI, another part of the Power Platform family. In order for us to utilize Power BI in our app, we need to have a Power BI Pro license assigned to both the creator and users of the app, as the visualizations need to be published before they can be used. If we have this, however, adding the dashboard from Power BI can be achieved by using the Power BI tile control. Finally, we added a basic visualization into our app as part of the lab where we also took the opportunity to expand on our mastery of formulas by formatting our data in a specific way, directly within the app. In the next chapter, we will look at some of the newer, more advanced features that we can introduce to our apps, by bringing in artificial intelligence to enable us to capture and process data more quickly.

Further reading •

Power Apps reference guide: https://docs.microsoft.com/en-us/power-platform/ power-fx/reference/function-distinct

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

17

Introducing Artificial Intelligence

All the techniques covered throughout the book so far have been reliant on creating ways for users to manually enter data. We made that as easy as possible by using controls such as media or forms, but we still relied on the user doing something else after that to add context or additional information. As an example, in our groceries app, we utilized forms and other user-interactive controls. More and more apps are now starting to introduce artificial intelligence (AI) into their operations to reduce the amount of work or data entry the end user needs to do. With the introduction of AI Builder, we can employ AI in our apps to improve the user experience. In this chapter, we will cover the following topics: •

What is AI Builder?

•

What are the different types of AI models?

•

Using a basic model within an app

•

Building and using a custom model

Technical requirements The techniques and areas covered in this chapter require a Power Apps per-user plan assigned to you, or an AI Builder add-on.

Introducing Artificial Intelligence

468

What is AI Builder? AI Builder is a fantastic addition to the capabilities of the Power Platform. It provides the ability to create and utilize AI models to improve our apps and flows, ultimately allowing us to easily use AI within our business processes. Just like the rest of the Power Platform family, AI Builder is a no-code/low-code tool, which means we are freed from needing coding or data science skills to be able to leverage the benefits of what AI can bring. Imagine being able to capture a photograph with your Power Apps app and detect the objects within the image, or being able to capture data and then automatically classify it. This is where AI can truly add value to your developments within the Power Platform. AI Builder is now utilized multiple times across the whole of the Microsoft 365 ecosystem, including being the base for Microsoft Syntex, the AI-driven document-processing technology.

What are the different types of AI models? There are many types of AI models available depending on exactly what we are trying to achieve. At a high level, these can be broken down into the data types that the models work with: •

Text

•

Documents

•

Structured data

•

Images

A full breakdown of the model types can be found here: https://learn.microsoft.com/en-us/ ai-builder/model-types

Each of the data types, however, has different AI models that can be used with them. As an example, the documents data type allows you to utilize key models such as text recognition, document processing, business-card reading, and receipt processing – in essence, extracting data from a physical document of some kind.

Chapter 17

469

Image-based models could use object recognition to try to automatically identify items within an image, or optical character recognition (OCR) to extract textual data from pictures. There are some great use cases that you can explore, but first, let’s address the elephant in the room.

How is AI Builder licensed? The thing to remember about AI Builder is that it is a bolt-on to the standard Power Platform offering – your standard Power Apps or Power Automate licenses – or your Dynamics 365 licensing. AI Builder is licensed through capacity add-ons. What this means is that you purchase credits on a monthly basis, and then assign them to a Power Platform environment. Once the capacity has been assigned, it becomes available for apps and flows in which you want to use AI Builder. Some of the premium-level licenses also include AI Builder credits, such as the Power Apps per - user or Power Automate with RPA plans, so it is always worth checking to see what you already have available before you start purchasing. As you use actions that leverage AI Builder, the number of credits reduces. The rate at which the credits are reduced, however, is dependent on the specific actions you use. The full AI Builder Rate Card can be found in the Power Platform Licensing Guide, but to illustrate the differences: image classification uses 4 credits per image (at the time of writing), while the business card reader uses 100 credits per card. The difference is based on the complexity and processing requirements of the model. For more information, you can also refer to Microsoft Learn: https://learn.microsoft.com/ en-us/ai-builder/administer-licensing

Therefore, if you are looking to utilize AI Builder, you will need to think about which models will be used in your environments and assign credits as required. Microsoft does, however, offer a calculator to help you figure out how many credits you will need. Having used this several times, I can say that this really makes it simple to calculate what you may need.

Introducing Artificial Intelligence

470

You can find it through the following link: https://powerautomate.microsoft.com/en-gb/aibuilder-calculator/

Figure 17.1: AI Builder credit calculator

If you haven’t yet got AI Builder licenses active within your tenant, then you can try AI Builder for free by starting a trial that will last for 30 days.

Exploring the capabilities AI Builder is such a fundamental part of the Power Platform that it is presented as a standalone item on the left menu when we load the Power Apps portal:

Chapter 17

471

Figure 17.2: AI Builder on the Power Apps portal

Clicking on AI models will load the AI Builder home screen, which looks and feels like many other parts of the Power Platform, where it lists any assets that we’ve already created and gives us the option to create a new asset by clicking on + New AI model at the top of the screen:

Figure 17.3: Button for building a new AI model

Introducing Artificial Intelligence

472

When you click on + New AI model, you are taken to the Explore screen, where you pick which capability you wish to use for your model. As you scroll down the page, you will be presented with examples of the AI capabilities that you have within the Power Platform. Treat this in the same way as you would the Templates screen in Power Apps and Power Automate, where you can learn from some of the predefined models. As an example, we can see what it would look like if we reviewed the information from receipts and are shown a scan of a sales receipt, with bounding boxes around the key information, and a view of what data has been identified:

Figure 17.4: Example AI capabilities

The example screens associated with the models are really useful to get clarity on which model we want to use. Once we’re happy, we can then look at the bottom of the preview and opt to create a model. The models that are flagged with the Custom model label, such as Extract custom information from documents, mean that you must fully configure the model. Those that don’t have the Custom model label are preconfigured models that you can use immediately within your apps and flows.

Chapter 17

473

With a basic understanding of the models under our belts, let’s first explore the basic models that are already baked into Power Apps.

Using the basic models Power Apps has a small number of basic AI models, with associated controls, already built into the app studio. Since they are baked in, they are ready for you to drop straight onto your canvas to start using without having to go through any bespoke customization or creation of an AI model. The models immediately available to you are the following: •

Business card reader

•

Receipt processor

•

Text recognizer

Let’s focus on one of my personal favorite models, the receipt processor. This has featured in several solutions that I’ve built around the collection of expense receipts, where a picture of the receipt can be taken and the model will extract key information such as the date of purchase, the total amount, the line items, and even the tax amount. All the models can be found from the Insert menu under the AI Builder heading:

Figure 17.5: List of AI Builder models

Selecting one of the AI Builder controls will place a control onto the screen ready to take an input, and then process it according to the model. As with all of the other controls that we have explored on our journey, there are various configurable properties that allow you to apply some level of customization, such as the colors being used.

474

Introducing Artificial Intelligence

Specifically for AI models, you can customize whether you are going to show bounding boxes to highlight the data that has been identified:

Figure 17.6: Configuring bounding box properties

This control then allows us to capture a receipt, either by uploading if we’re using a desktop or by using the camera on a mobile device. As soon as the control receives the input, it will start processing it based on the model being used, identify the key data, and apply a bounding box around it. In this example, we have a receipt that has been uploaded into the model, and we can see from the boxes around it that the model has identified some key data:

Chapter 17

475

Figure 17.7: Bounding boxes used on an uploaded receipt

So far, we haven’t written a single piece of code to make this happen, or even any formulas. This is completely no-code. But if we now want to make some use of the captured data, we need to write some formulas to pull the data out.

476

Introducing Artificial Intelligence

All the data identifiable by the model is made available as a property of the given control. So, for example, if we place a label on the screen and reference the Total property of the ReceiptProcessor control, then the label will display the total amount that it detected in the receipt. In this example, it will identify the total as being £32.30:

Figure 17.8: Receipt processor detecting the total amount on a receipt

Chapter 17

477

It also makes other key data available for you to use, such as the transaction date, the name of the merchant, or even the line items in the receipt. Now consider how this could be used in conjunction with an input form, where you could have the AI model run across a receipt and automatically fill the fields in the form with the data captured from the image, and allow you to take the original image and then store it somewhere for later use. On a personal note, I still get so excited when I think about exactly how much potential this can unlock and how many great use cases there are for AI in apps, particularly when it is placed in the hands of business users. Getting back to business, however, we have just used a basic out-of-the-box model. But let’s face it, we want to try to create our own! For that, we need to create a custom model, so let’s work through that together.

Creating a custom model To start with, we need to select a model from AI Builder that carries the Custom model label. As an example, let’s use extract custom information from documents, and then click on Get started. What you will see next is a wizard that will guide you through how to create your model. Before you get going, however, we need a few documents ready for us to be able to use for training the model. It’s a good idea to have these to hand before you start rather than needing to go and find them later in the process. The ideal number is 10 documents of the type you’re trying to train the model to recognize, and a small number of documents that aren’t. This is so that the model can gain a good sense of the comparisons between the two to build its confidence levels. In the model that we’re using, there are two types of documents that we can select. We can choose structured documents, those documents that have a set layout where key data can be found in similar places every time. Think of invoices that you may generate where you have control over the structured layout and presentation of the data.

Introducing Artificial Intelligence

478

The alternative is unstructured data, where there is no defined structure to the layout of the document, with the data appearing in different places. Think of invoices that you may receive, where the layout is defined by the company sending it:

Figure 17.9: Unstructured documents document type

In this example, let’s choose a structured document and press Next, and move to the Choose information to extract screen where we tell the model what we want it to provide to us. This screen has a single Add button in the middle of the screen that we use to define the fields that we want to identify. These could be individual lines of data, tables of data, or the population of a checkbox:

Figure 17.10: Selecting a data type

Chapter 17

479

Once you’ve chosen the data type, you just need to give it a name, for example, Recipient. This is how you identify the contents later in the process. As you name your data types, it is added to the list on this screen.

Figure 17.11: List of named data types

Once our information has been named, we can then press Next and move on to adding the documents to train the model. This is where we need our example documents. We add our documents as collections. A collection is a group of documents that are similar in layout and wording, which allows the model to understand what it is looking for. You need to add a minimum of five documents here. TIP Aim for approximately 10 documents with slight variations in the data so that the model can really understand the documents. Don’t use too many, however, as you will spend a huge amount of time creating the boxes to identify the data.

Introducing Artificial Intelligence

480

When you’re adding your documents, you can select files stored locally on your device or those already stored on SharePoint. If the documents are PDF, JPG, or PNG files, then you can upload them into your collection:

Figure 17.12: Uploading documents

Once our files have uploaded, we can then click Next and start tagging our documents.

Chapter 17

481

Tagging the documents involves us outlining the relevant data within previews of each document. We must identify each piece of data within our document by dragging a rectangle around the data, and then selecting which piece of information it is:

Figure 17.13: Identifying data in the test documents manually

482

Introducing Artificial Intelligence

Once you’ve dragged a box over a piece of data, you will see a popup box appear asking you which piece of information you have identified:

Figure 17.14: Selecting the field type for the highlighted piece of information

Chapter 17

483

As you progress through your tagging, you will notice that the right side of the screen updates. As you identify information, you will see a tick appear against it, and if all elements of the document have been processed, then you will see a tick on the document:

Figure 17.15: Processing the elements of a document

There will be times when the data that you want to identify isn’t present; therefore, clicking on the three dots to the right of your field allows you to specify that it isn’t present in the document, or in the collection. We now need to work through each of the documents in the collection and process them. Once they’re all done, you can press Next and move to the Model summary screen. The Model summary screen is your chance to review everything you’ve done so far, including the information fields you’ve selected and the document collection you’re using for training. You also have the option to go back and edit these previous steps if needed.

Introducing Artificial Intelligence

484

Once you’re happy that everything is ready, you can then press Train, which begins the process of getting your AI model ready for use:

Figure 17.16: Training the AI model

Once you press Train, you’ll then be redirected back to the Models screen, where you’ll be able to see the status of the model. Depending on the complexity of the model, it may take a few minutes or a few hours to train. You can keep checking back to this screen until you see that it is complete:

Figure 17.17: Checking the training status of the AI model

Chapter 17

485

Once the model has been trained, we can then get ready to use it within our app, but first, we must publish it. Click on the model to bring up the Summary screen, which will give you the confidence score of the model based on the documents that you used to train it, along with the ability to publish it. Simply hit the Publish button and we can then use it within our app:

Figure 17.18: Accuracy score of the AI model

Once the publishing process is complete, you will see a message appear informing you that it is ready. Now, you can switch back to your app studio and put it to work within your app.

Using a custom model in our app As well as the controls intended for use with the preconfigured models, there are other controls built into the app studio that allow you to utilize custom models in your app. They are the following: •

Form processor

•

Object detector

Given that the model we trained is used to recognize text in a document, we need to use the form processor. This is accessible from the Insert menu.

486

Introducing Artificial Intelligence

When you first place the control on the screen, notice that it prompts you to select a model for it to use, unlike the receipt processor, which just placed the control straight on the screen:

Figure 17.19: Selecting the AI model for a control

After selecting the model to be used from this box, the form processor control will be ready for us to use. Before selecting the model, the control didn’t have an input button, but as soon as it’s bound to a model, this appears. We can now go ahead and upload a document into this control to test it. We can then use the properties identified by the model, in this case, Recipient, to display the information in another control, such as a label, text input, or another type of control that you might wish to use:

Chapter 17

487

Figure 17.20: Displaying the information detected by a model

These models are extremely versatile and can be leveraged from both apps and flows. They can add a huge amount of power to the apps you create, and all without writing any code or needing any deep understanding of data science.

Summary In this chapter, we started to discover how we can leverage AI within our apps using the Power Platform AI Builder. This is a new and extremely powerful part of the Power Platform family that allows business users to leverage AI without having a deep understanding of AI models, coding, or data science. It fits firmly into the no-code/low-code family. There are several different types of models that we can create, including text-based ones such as language recognition, text translation, and sentiment analysis. Alternatively, we have image-based models such as text recognition, retrieving textual information from an image, and object detection. We also have document-related models that allow us to extract and process key information from business cards or receipts.

488

Introducing Artificial Intelligence

AI Builder is an add-on to Power Apps standalone licensing, Power Apps for Microsoft 365, or Power Apps for Dynamics 365 licensing, and works on a credit basis, where we use a certain number of credits for each AI Builder process. Some models use more credits than others, so always remember to refer back to the Power Platform Licensing Guide if you need an idea of the required quantities. Also, don’t forget the calculator, which can be used to get an idea of how many credits you’ll need monthly. When we use AI Builder within our apps, we have several controls in place to allow us to leverage our models. Some we can put directly on the screen and start using immediately, such as the receipt processor. Others, such as the form processor, require you to create your own custom model. Custom models need to be configured and trained to make them usable, so ensure that you have five to ten documents or images in advance to use for training. Following the wizard makes it really easy to complete the configuration and training process, uploading a collection of files in the first instance, then providing the relevant information, such as where the data is located in each file. Once the model is configured and trained, you can then publish it and use it within your apps and flows. Whichever model you use, you can leverage the data that has been extracted through properties, displaying that data on a screen, prefilling a form, or undertaking checks on an object before you submit it. There are many use cases where this could be applied! But for now, this is the end of our canvas app journey. We now need to look at the other great apps that we can create within the Power Platform. Let’s start to discover what it means to use Dataverse as an alternative method for storing data, and what it means to create our other type of Power Apps app – a model-driven app.

Questions 1. What are the four types of AI models we can use? 2. All models in AI Builder use the same number of AI Builder credits to process the data. True or false? 3. What are the three models that have preconfigured controls in Power Apps? 4. What is the name given to the box that highlights the data discovered by a model? 5. How many documents should you have ready for training your model?

Chapter 17

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

489

18

Introducing Microsoft Dataverse

We have already mentioned Microsoft Dataverse in past chapters, but we have not yet expanded all the features that this data storage offers us. During this chapter, we will not deal as much with Power Apps, but we will provide a solid background so that in the next two chapters we can learn how to make model-driven applications. In November 2020, Microsoft announced that the Common Data Service (CDS) would be rebranded, changing its name to Dataverse. From then until now a lot of changes have been implemented, but to give more insights into it, we must first know what Dataverse offers us. Microsoft Dataverse is a low-code relational database that allows users to work with data models and store their data in a scalable and secure environment, without requiring advanced technical knowledge. Among all the utilities of Dataverse for companies, examples that stand out are the abilities to establish automatic workflows and to create applications in minutes without coding. Data in Dataverse is kept within a set of tables consisting of rows and columns, and it also includes a set of standard tables that are intended to cover common scenarios, but they also allow us to create custom tables for each organization and populate them with data from multiple data sources, using built-in import capabilities. This chapter will help you understand the fundamentals of Dataverse, how it can be managed, and which characteristics regarding integration, security, and versatility it has. Dataverse is different from other databases, especially when it comes to the ease of integration with Power Platform and Dynamics 365. Therefore, we will need to be aware of what the differences are to know how we can make the most out of Dataverse.

Introducing Microsoft Dataverse

492

In this chapter, we will look at the following topics: •

What is Dataverse?

•

Working with environments and solutions

•

Data migration

•

Dataverse for Teams

•

Lab 14

The key thing to remember is that Dataverse is easy-to-manage and secure storage for our data. It is important to know how to manage it and how to start working with it so that we have the basis for powering new apps or building reports with its data. By the end of this chapter, you will understand what it means to choose Dataverse as data storage and how it can help us to increase business productivity and data integration.

Technical requirements All the Dataverse-related components from the Power Platform are premium; therefore, you will either need to sign up for the Power Apps Developer Plan (https://powerapps.microsoft.com/ en-us/developerplan/) or have a Power Apps per app/per user plan license assigned to you.

What is Dataverse? Dataverse is a data storage solution available in the Power Platform. It allows us to store data in the structure of a relational database. Data is stored in tables that contain columns and rows. Dataverse enables users to share data across several different applications within Microsoft 365, including all Power Platform apps or Dynamics 365. One of the main differences that Dataverse presents compared to other databases is that to use it, we do not need to provide specific connection information, as the database is automatically connected to the environment where the app is developed:

Chapter 18

493

Figure 18.1: Power Platform schema of apps and services

Dataverse consists of tables that can be related to each other, as with other databases, but with the advantage of being able to build them through a web portal rather than having to rely on other applications. We should consider that, to start using Dataverse, we need to have access to the full capabilities of Power Apps so that it allows us to create a database for the environment in the Power Apps maker portal, as we will see in Chapter 19, Introducing Model-Driven Apps. This means that we need to have the proper license and role assigned (see the Technical requirements section).

494

Introducing Microsoft Dataverse

Differences from other data storage solutions Deciding where to store data is key for any enterprise app makers today. As enterprise data volumes are growing exponentially, it is crucial to have proper data storage, no matter what size the organization is. As app makers, we need to know what characteristics and advantages Dataverse has over other storage solutions, to determine how best to use it for specific projects, and to best fit a client’s needs. We have seen a deep change through the years, from the traditional paper-based data storage system to digital data storage. In the late 1970s, computer-aided design and manufacturing were first used in businesses, followed by the introduction of ERPs in 1980s, CRMs in 1990s, and social media in the mid-2000s. Each of these technologies aimed to improve efficiency and productivity by digitizing manual processes. Today, there are two main types of data storage: Direct-attached (DAS) and network-based. Examples of DAS are external hard drives, USB drives, flash drives, etc. Network-based storage allows users to access information from networked devices and can be also divided into different common setups: Network-attached storage (NAS) and a storage-area network (SAN). NAS creates a single volume of stored data in a centralized location, while SAN is designed for many more users. Examples of SAN are solid-state drives or cloud storage. Since the COVID-19 pandemic, remote work has increased dramatically, so more and more people now need to access information from their own homes. As a result, the use of cloud storage has only grown, reaching record levels (https://www.infoworld.com/article/3614809/the-covidpandemics-lasting-impact-on-cloud-usage.html). Why is that? What are the advantages of cloud storage over other types of storage?

Chapter 18

495

1. Scalability As a business grows, the information that needs to be managed and stored also grows, so the amount of data increases. It is important that the business is prepared for changing demands, having the ability to increase or decrease IT resources. Cloud computing infrastructure allows us to quickly and easily scale data storage capacity to adjust to business needs. In the past, with physical infrastructure, this same process could take a lot of time and expense.

2. Data security When data is stored in the cloud, files are continuously monitored and encrypted to keep information protected against cybersecurity threats. Besides, it is also important that we individually take extra steps to help enhance this security, like enabling two-factor authentication, so that when logging in with our username and password we receive a code to our primary email address or phone.

3. Disaster recovery The biggest cloud providers practice redundancy, which means that several copies of our data are stored in different data centers, so if any catastrophe happens, a backup copy will always be available. That way, we will be protected against data loss, theft, and corruption.

4. Cost-effectiveness and energy efficiency As it is only required to buy the space you need for your storage, waste is minimized both in terms of helping to reduce expenses and also electricity consumption.

Introducing Microsoft Dataverse

496

5. Accessibility In today’s business environment, it is crucial for people to communicate and collaborate with their peers and clients on different projects. Cloud-based storage makes data accessible continuously at any time and from anywhere, enabling collaboration to be seamless and boosting productivity:

Figure 18.2: Benefits of cloud storage

Chapter 18

497

So, as Microsoft Dataverse is a cloud-based storage space, it presents all the mentioned advantages. Dataverse additionally has the following benefits:

1. No technical knowledge required Dataverse is an easy and fast tool for managing the data each person in an organization can see with role-based security. As part of the Power Platform, Dataverse requires no, or less, code to accomplish functionality, making it simple for people with no technical knowledge to use.

2. Simple data migration With several of Dataverse’s built-in tools, there’s no need to manually import data from other data storage, as you can easily transform and adapt them with Dataflows using Power Query. Besides, it also has interesting features such as duplicate detection rules, field translations, and data mapping, which helps enhance the automatic migration experience.

3. Analytics and auditing Metrics for your organization can be accessed from the Analytics section in the Power Platform admin center (https://admin.powerplatform.microsoft.com), where it is really easy to identify and monitor storage use to optimize performance. In addition, Dataverse has an auditing feature that allows tracking changes to data over time.

4. Create apps without coding As we will be seeing in the following chapters, thanks to the complete integration with Power Platform, model-driven applications can be created in minutes using the tables and relationships hosted in Dataverse.

Introducing Microsoft Dataverse

498

5. Automatic workflows Business operations can be automated through workflows. Dataverse incorporates real-time workflows, which, combined with Power Automate integrated cloud flows, can ensure data quality and drive business processes. These workflows can integrate, update data, synchronize files, get notifications, and much more. In the following diagram, you can see a summarization of the points we have covered:

Figure 18.3: Benefits of Microsoft Dataverse

Dataverse allows organizations to store data with extensive metadata options; relate tables to each other; build business rules, automation, interactions, AI, logic, and validations; and manage robust security (row-level security included). Because of this, it would be appropriate to use it as a data storage solution when data needs to be frequently created, read, updated, and deleted. It would also be an effective solution when we have a large data volume or expect our data to grow, or when role-based access, audit capabilities, and AI capabilities are required. As a few examples, you might want to apply Dataverse for CRM, service management, tracking apps, enterprise inventory management, or apps that require complex business processes and automation.

Chapter 18

499

If we had a small data volume, no item-level permissions required, or no premium connectors, we could choose SharePoint Online or Dataverse for Teams as alternative data storage solutions that do not require paying the Power Apps license fee. We will discuss these differences and examples in more detail in Chapter 22, Good Practices for Creating Power Apps. We have already covered the benefits of Dataverse, so now we will go into the details of how it works.

Working with environments and solutions The fundamental containers in which we can begin to structure our data model are environments and solutions. These containers will hold all Power Platform components. One of those components that carry this information is tables, which store data in columns and rows. If we were to make the analogy of comparing Dataverse to a neuron, the environments would be the nucleus in which the information is contained, the solutions would be the axons and dendrites that transmit information, and the tables would be the DNA that is contained inside the nucleus and transmitted by the axons and dendrites. In this section, we will be explaining how to work with environments and solutions, so that we ensure that we have a good starting point from which to begin to work on modeling our data and building a model-driven application, explained in Chapter 19, Introducing Model-Driven Apps, and Chapter 20, Creating Model-Driven Apps.

Environments The container that houses data, applications, flows, variables, and other parts of a Dataverse solution is known as an environment. A frequent use case for creating additional Dataverse environments is to keep production, test, and development activities separated.

More information about environment types can be found at https://learn. microsoft.com/en-us/power-platform/admin/environments-overview.

Dataverse offers six different environment types, each of which is designed for a certain purpose. For instance, the Trial type is used for short-term testing whereas the Production type is used for an organization’s long-term projects or work. You can choose the type of environment you want to create by understanding their functions.

Introducing Microsoft Dataverse

500

The six environment categories are as follows:

Figure 18.4: Types of Dataverse environments

Developer environments were updated in January 2023; for further information, see https://powerapps.microsoft.com/en-us/blog/making-it-easier-towork-with-dataverse/.

Considering these different usages of the environments, when a new business project is starting, the first step we would take is to build a sandbox environment to start developing. Start by connecting to the Power Platform admin center (admin.powerplatform.microsoft.com): 1. Select Environments in the left side panel and then click New:

Chapter 18

501

Figure 18.5: Environments screen

2. Define an environment Name, select a Region, select the Sandbox type, set Create a database for this environment to Yes, and finally, click Next:

Figure 18.6: New environment blade

502

Introducing Microsoft Dataverse

3. Review the options for Language and Currency and update them as needed. Then, click Save. Find available options for creating and managing environments at https:// learn.microsoft.com/en-gb/power-platform/admin/createenvironment#create-an-environment-and-add-model-driven-apps.

4. When the State of the newly created environment is Ready, you can access it by clicking on its name. This will let you perform administrative actions like performing backups, applying updates, and granting access:

Figure 18.7: Environment management menu

Chapter 18

503

5. If you want to know which environment you are working in, or you want to switch between environments, go to https://make.powerapps.com/ and select your target environment:

Figure 18.8: Environment selection

Not all permissions and licensing allow you to create new environments. Find further information at https://learn.microsoft.com/en-us/power-platform/admin/ create-environment#who-can-create-environments.

If you intend to create and implement Dataverse solutions, make sure to do it in the appropriate environment, which is rarely the default environment, because of its limited characteristics. The usual environments that we will need for a successful application lifecycle management (ALM) implementation will be a sandbox environment for development, a trial environment for feature testing, and a production environment to support permanent work in the organization. But how do I transfer changes from one environment to another? That is when solutions come into the picture.

Introducing Microsoft Dataverse

504

Solutions A solution is essentially just a container that collects several components. If we revisit the neuron analogy in the Working with environments and solutions section of this chapter, solutions would be the axons and dendrites that transfer the required components to build your applications. A solution is used for implementing ALM in Power Apps and Power Automate. Once all your components are contained within a solution, you may use the solution to transfer components to a different environment. It must be mentioned that not all Dataverse components may be elements of a solution. Basically, customizations such as tables, columns, flows, and many more can be added to a solution, whereas data such as table row values cannot. The topic of managed vs. unmanaged solutions has been a source of discussion for a long time. Let me describe the distinction for you. A new solution will always be created as unmanaged. The difference comes when we export the solution; then, it could be either unmanaged or managed (default). But what does it mean? •

If a solution is set up in an environment as unmanaged, you will be able to include/remove components and export the solution as managed/unmanaged, and if this type of solution is deleted, only the container will be deleted, because the components will be still present in the environment. You could compare an unmanaged solution to a loose container of components.

•

If a solution is set up in an environment as managed, you will not be able to change it (include/remove components). When this type of solution is deleted, all the included components will be deleted as well. It could be compared to a tight container of components.

Figure 18.9: Distribute a solution from a development to a test environment

Chapter 18

505

Essentially, every environment not used for development should be handled using managed solutions, according to Microsoft’s advice (https://learn.microsoft.com/en-us/power-platform/ alm/solution-concepts-alm), because the developer might always want to protect their original unmanaged solution from bugs created afterward by clients or other development teams. In the following instructions, we will learn how to create a new, unmanaged solution: 1. Log in to https://make.powerapps.com/, select Solutions in the left side panel, and click New solution:

Figure 18.10: Solutions screen

2. A new blade will appear on the right. Write a display name. The Name field will automatically be filled from that display name, but it can be changed before saving.

Introducing Microsoft Dataverse

506

3. As it is the first solution we are creating, we will need to create a publisher. Select New publisher and fill in the information required. Click Save:

Figure 18.11: New publisher blade

4. The publisher of a solution where a component is created is considered the owner of that component. The publisher who owns a component determines what modifications other publishers of solutions, including that component, may make or are prohibited from making. Within the same publisher, but not between publishers, the ownership of a component can be transferred from one solution to another. It is impossible to alter the publisher for a component once it has been added to a managed solution. 5. The solution publisher specifies who developed the app. For this reason, you should create a solution publisher name that’s meaningful.

Chapter 18

507

6. Select the newly created publisher from the drop-down menu in the New solution blade and click Create:

Figure 18.12: New solution blade

7. Immediately, the solution is ready to be used, and we can start adding our components using either the ones already created (the Add existing button) or new ones (the New button). Make sure just one solution contains the same component. If you use a component in many solutions, you risk creating dependencies that you won’t be able to address in the future. Because of the same problem, you should also not add existing tables with all the subcomponents. Find further information at https://learn.microsoft. com/en-us/power-apps/maker/data-platform/create-solution#create-asegmented-solution.

When all components are included in the solution and you’ve made sure there are no dependencies, you are ready to export your solution and then import it into either the trial or production environment (depending on the ALM procedure). We will be practicing this in Activity 1: Export/ import solutions, so now we should consider a key concept when working with solutions, layering.

508

Introducing Microsoft Dataverse

If you have different solutions installed, the system must decide which changes “win,” meaning that the system must decide which solution’s changes should take place instead of the others. That is when layering is relevant (https://learn.microsoft.com/en-us/power-platform/alm/ solution-layers-alm). Unmanaged layers contain all unmanaged solutions and ad hoc adjustments. It might be challenging to identify the “winner” when employing unmanaged solutions alone. Meanwhile, every managed solution establishes a layer of its own, with the most recent installation sitting on top of the one that came before it. We already know how components can be migrated from and to different environments within the same tenant (see the Solutions section in this chapter), but how can data be migrated if we originally have it inside or outside Dataverse? Let’s find out in the following section.

Data migration What would happen if we had the information stored in another Dataverse tenant or another data source? We will need to migrate this data to our Dataverse tables so that we can start using it as data storage and take advantage of all of the previously mentioned benefits. This is where dataflows come into play. Dataflows are a Power Platform feature that enables users to extract, process, and load data from many different sources. Basically, a dataflow is an ETL process that takes data from the source, uses Power Query to transform it, and places it in Dataverse. It is a quick and effective method for bringing data into Dataverse. One of the main advantages of Dataflows is the ability to do complicated data transformations without the need for coding. Users may quickly transform data by adding stages like filters, aggregations, and data cleansing, all using a visual interface. This also makes it easy for non-technical users to extract and prepare data for additional analysis and reporting. Users may keep their data updated and refreshed on a frequent basis by scheduling dataflows. This is especially helpful for data sources like CRM programs and social media platforms that are constantly changing. Data may be utilized in several ways after it has been retrieved and modified using dataflows. It can also be used as the source for Power Apps and Power Automate to create unique business apps and automate activities.

Chapter 18

509

It can be put into Dataverse for additional analysis and reporting using Power BI: 1. To create our first Dataflow we must log in to https://make.powerapps.com/, select More | Dataflows in the left side panel, and click either New link to data lake, if we have our information stored in Azure Data Lake, or New dataflow and start from scratch, if we want to retrieve the whole list of data sources from which we can easily migrate data:

Figure 18.13: Dataflows screen

2. We need to define a name and check Analytical entities only if we want to load data only to a data lake for analytical purposes. In this case, we want to upload our data to our Dataverse environment without needing analytics because afterward we would like to start using model-driven applications, as we will see in the following chapters, so for now we will leave this field unchecked.

510

Introducing Microsoft Dataverse

3. We must choose the data source from which we want to retrieve data from a list of many different sources:

Figure 18.14: Choose data source blade

Chapter 18

511

4. As an example, we will choose the SQL Server database connector:

Figure 18.15: Connection settings blade

5. After you fill out all the credentials, as shown in the previous screenshot, click Next. 6. In the following blade, you must select which table you would like to select from your SQL database; check it and click Transform data.

Introducing Microsoft Dataverse

512

7. Dataflow’s data transformation engine is Power Query. This engine can handle a variety of modifications, such as creating new columns or replacing values with a graphical user interface:

Figure 18.16: Power Query editor

Find further information about dataflow creation at https://learn. microsoft.com/en-us/power-query/dataflows/overview-dataflowsacross-power-platform-dynamics-365.

8. After you finish the transformations, click Next. 9. In the Load settings screen, you can either Load to new table, which means that a new table will be created with the column names taken from the original data source columns, or Load to existing table, which allows mapping values from the data source to the already created table in Dataverse. We will select the latter option because it allows us to control the column types of the Dataverse table. There is also a third option for when we have several tables loaded to Power Query, which allows us to control which ones we load. 10. You could also check Delete rows that no longer exist in the query output if, when refreshing the dataflow, no rows with the same key are detected. Those rows will then be deleted from Dataverse. For this check to function correctly, you need to select a key, which is the column that will be compared to the data source to determine whether a row must be updated, created, or deleted.

Chapter 18

513

Find further information about keys at https://learn.microsoft.com/ en-us/power-apps/maker/data-platform/define-alternate-keys -portal.

Figure 18.17: Dataflow load settings

11. After you finish mapping the source columns to the destination columns, click Next. 12. In the Refresh settings screen you will be able to schedule a refresh frequency so that data is constantly up to date in your Dataverse tables. The maximum number of refreshes per day is 48, which means that you cannot schedule a frequency of fewer than 30 minutes.

514

Introducing Microsoft Dataverse

13. After selecting the frequency, you can either publish now or later. If you publish later, it will remain in the draft state until you decide to publish it. The dataflow will start running at the date and time you have selected in the Start at field:

Figure 18.18: Dataflow refresh settings

It must be mentioned that it is also possible to transfer data using dataflows from a data source that is not in the cloud, such as an on-premises SQL Server database or an on-premises SharePoint site. Here is where data gateways help us. If you have that situation, you will need to first install a data gateway to afterward select it in the connection credentials from our dataflow. It is important to note the difference between gateways and dataflows: with gateways the result is not getting data stored in Dataverse, but just connecting to a new service as a data source for our Power Apps or Power Automate flows. You can find all the information needed for installing data gateways at https://learn.microsoft. com/en-us/power-query/dataflows/using-dataflows-with-on-premises-data. Another interesting tool that Dataverse offers us is custom connectors.

Chapter 18

515

The Power Platform allows us to connect to almost every service out there. There are many different connections that you can use; however, if you need a connector that does not exist yet, you can create your own custom connector for any web service with an API. Custom connectors will allow you to connect your custom APIs to the Power Platform. As a Power App subscription plan is required for using these custom connectors, this same license will allow you to use Dataverse databases, so I would personally recommend entering the information in Dataverse tables using gateways and dataflows rather than just using custom connectors, because then you will have the opportunity to create model-driven applications (which are quicker to create) instead of just canvas applications or cloud flows. We will be seeing these kinds of applications in the next two chapters.

More information about custom connectors can be found at https://learn. microsoft.com/en-us/connectors/custom-connectors/define-blank.

Dataverse for Teams Microsoft Dataverse for Teams, which was released in September 2020, is a built-in, low-code data platform for Microsoft Teams that enables users to create original applications, bots, and processes using Power Apps, Power Virtual Agents, and Power Automate. Dataverse for Teams, which is based on Microsoft Dataverse, offers one-click solution deployment to the Microsoft Teams app store, relational data storage, rich data types, and enterprise-grade governance. When you first build an app or bot in Microsoft Teams, or when you first install an app made using Power Apps from the Microsoft Teams application store, the Dataverse for Teams environment is automatically built for the chosen team. Team-specific data, apps, and processes are stored, managed, and shared using this environment. Each team can have a single environment, and its database contains all the data, applications, bots, and flows produced by Power Apps inside that team. It is possible to manage that environment using the Power Platform admin center and it is also possible to be upgraded to Dataverse.

Introducing Microsoft Dataverse

516

There are some differences between Dataverse and Dataverse for Teams that must be noted; more information can be found at https://learn.microsoft.com/en-gb/power-apps/teams/ data-platform-compare or https://learn.microsoft.com/en-us/power-platform/admin/ about-teams-environment.

Figure 18.19: Dataverse vs Dataverse for Teams comparison

Information about how to provision Dataverse for Teams can be found at https://learn.microsoft.com/en-us/training/modules/get-started -dataverse-teams/.

Chapter 18

517

You can add, update, and remove apps and tables in Dataverse for Teams using the Power Apps application for Teams. 1. To get started, open Teams and search for the Apps button in the window’s lower-left corner. Use the search bar on the App Marketplace screen to look for Power Apps. Select Power Apps:

Figure 18.20: Power Apps for Teams

2. Click the Add button to include the application in your Teams client. You will be sent to the main Power Apps panel once the process has successfully finished. 3. You may now construct the first app, which will automatically supply the environment. You will see that there are several app templates built for common business scenarios. 4. We can also start an application from scratch by selecting the Start now button:

Figure 18.21: Start a new Dataverse for Teams application

518

Introducing Microsoft Dataverse

5. Select a team for this new app. You will get a message announcing that you are the team’s first app creator. 6. To build the Dataverse for Teams environment, select Create. 7. You can shut the window and carry out other tasks while you wait for the procedure to be finished. A pop-up box will appear in the lower-right corner of your screen to inform you when your environment has been provisioned. 8. The Power Apps editor will show up. Enter a name for your app and then select Save. 9. Because of the creation of your first app, you now have a Dataverse for Teams environment to help you start building tables. 10. The Power Apps editor enables you to quickly create tables with the Create new table button:

Figure 18.22: Create a table in a newly created environment

Chapter 18

519

The process of app building is very similar to canvas app creation using Dataverse as a database. It is just a little bit more limited, not only in the size of the storage but also in managing permissions. We could say that Dataverse for Teams is a “lite” version of Dataverse. Dataverse for Teams might be useful if your organization does not have a Dynamics 365 or Power Apps license but does have Microsoft 365 licenses and wants to start using Power Apps on a modest scale. It is always possible to switch to Dataverse if more functionality is needed in the future. Dataverse for Teams is also useful if you intend to build a chatbot for your company at no extra cost, or if you see an opportunity to more efficiently organize your workload or automate some tasks by building simple productivity apps or flows.

Lab 14 Within this lab, we are going to migrate changes from a sandbox environment to a production environment and migrate data to Dataverse. We are using the solutions and environments that we have created during the chapter. We will understand the basics of how the background of Dataverse works and how the process of ALM can be deployed. Let’s begin with solutions management.

Activity 1: Export and import solutions In this section, we will practice exporting and importing solutions from one environment to another, crucial to the process of ALM deployment: 1. Open the Power Apps maker portal by navigating to make.powerapps.com. 2. Select Solutions on the left-hand menu. 3. Select the solution you would like to export.

Introducing Microsoft Dataverse

520

4. Click either the ellipsis on the right of the solution and then Export solution, or directly click the Export solution button in the top bar:

Figure 18.23: Export solution

5. Select Publish to publish all changes. 6. Run the solution checker by selecting Run and review if there is any issue. 7. Click Next. 8. Select which type of solution, Managed or Unmanaged, you want to export. In this case, it will be Managed because we are moving it to a production environment:

Chapter 18

521

Figure 18.24: Export a managed solution

9. Click the Export button. 10. Wait for the solution to export. A gray-colored message will appear to show the process right under the top bar. 11. When the message confirms the successful export and turns green, the process is completed:

Figure 18.25: Export message

12. Click Download. 13. A .zip file is downloaded. Now we need to change to the environment in which we want to import the solution. We are currently in Contoso Sandbox.

Introducing Microsoft Dataverse

522

14. Select the Contoso Production environment:

Figure 18.26: Select environment blade

15. In the production environment, click Import solution in the top bar of the Solutions screen:

Figure 18.27: Import a solution blade

16. Browse for the .zip file and, when loaded, the Next button will be enabled. Click on it. 17. Review the details and, if correct, click the Import button. 18. A message similar to the Export message appears in the top bar to show the progress. 19. When the message turns green, the solution is imported.

Chapter 18

523

20. If you click on the newly imported solution name, you can navigate to see its components. 21. You will see that a lot of functionalities available in an unmanaged solution are forbidden for a managed solution:

Figure 18.28: Managed solution options

We can now start migrating data to our newly imported solution tables.

Activity 2: Migrate with dataflows Having created our tables in the new environment within a managed solution, we need to also import data so that those tables are not empty when we start using them to build our applications: 1. Navigate back to the Power Apps maker portal. 2. On the left-hand menu, click Dataverse. Then select Dataflows. 3. Select + New dataflow and after the dropdown is displayed, select + Start from blank. 4. Name your Dataflow Users data and click Create.

524

Introducing Microsoft Dataverse

5. As we already have the information we need in the sandbox environment, we will choose Dataverse’s connector:

Figure 18.29: Dataverse connection settings

6. Fill in the fields and sign in with your Microsoft 365 credentials. 7. Select the table from which to retrieve data, which is systemuser in this example. Any table would do here. Even though this table is standard, there are many fields that you need to fill in, like address, phone number, and job title. 8. After that table is checked, select Transform data. The amount of time that it will take to get all the rows depends on the amount of data stored.

Chapter 18

525

9. Delete all columns that are not required to be migrated in the Power Query editor. Rightclick on the unrequired columns and click Remove columns:

Figure 18.30: Remove columns in Power Query

10. Changes can be seen and modified in the Applied steps section at the right of the blade. 11. When all the required changes have been applied, click Next. 12. Apply the following configuration. The key selected is the AAD ID because it does not change, unlike environment IDs, which change and would not detect the values to be updated, deleted, or created.

Figure 18.31: Load settings

Introducing Microsoft Dataverse

526

13. As the names of the columns are the same, you can select Auto map in the top-right corner of the blade to help you map all the fields. 14. Click Next. 15. This is not a table that will constantly be modified, so for now we will not be setting an automatic refresh. Select Refresh manually. 16. Publish your dataflow now by clicking Publish now. 17. The blade closes and the dataflow will start running as soon as publishing finishes. 18. You can check its status, indicated with a cross if it has failed or a check mark if it succeeded. If it failed, you can check a log to help you solve the issue by clicking on the cross:

Figure 18.32: Dataflow status

We now have operational environments and solutions running, and data in our tables. We are ready to get deeper into model-driven applications based on Dataverse.

Summary During this chapter, we have taken a slight detour from talking directly about Power Apps. We have given some background theoretical information that is necessary and important so that we can start developing model-driven applications in the next two chapters.

Chapter 18

527

As you have already seen, Dataverse is one of the most complete services of the Microsoft ecosystem, and like the real universe, it keeps continuously expanding. It is cloud-based relational data storage completely integrated with Power Platform. Information within Dataverse is structured into environments, solutions, and the components that are carried by those containers (tables, applications, flows, etc.). Throughout this chapter, we have looked at the main advantages of Dataverse over other data storage options, the different types of environments and solutions in which we can work with it, and the recommended way to structure those containers. This helps us to understand the importance of getting a data structure right from the very beginning. Microsoft wanted Dataverse to appeal to citizen developers and not be restricted to technical professionals, so they simplified the processes as much as possible. For example, the process of migrating data from multiple sources is extremely easy, quick, and efficient thanks to the use of Dataflows. Over the years, more and more connectors have been added, which means that efforts are being invested in the continuous improvement of Dataverse, and over time it will become even more user-friendly. If we have fewer than 1 million records or 2 GB of data and we need quick Teams-based projects, there is a lite version of Dataverse called Dataverse for Teams that can be used with regular Microsoft 365 licenses and allows us to develop bots, flows, or simple applications for use by teams in a very optimized way. Now, we can start working with model-driven applications in the following chapters, which we will see are a good alternative to canvas apps if you want to shorten development times.

Questions 1. True or false: Dataverse allows us to create applications without coding? 2. What are the two fundamental containers into which we can begin to structure our data model? 3. How many environment types are there? 4. How can you connect a dataflow with an on-premises service? 5. What are the differences regarding licensing between Dataverse and Dataverse for Teams?

Introducing Microsoft Dataverse

528

Further reading Environments •

https://learn.microsoft.com/en-us/power-platform/admin/environmentsoverview

•

https://learn.microsoft.com/en-us/power-platform/admin/createenvironment#who-can-create-environments

•

https://learn.microsoft.com/en-gb/power-platform/admin/createenvironment#create-an-environment-and-add-model-driven-apps

Solutions •

https://learn.microsoft.com/en-us/power-apps/maker/data-platform/createsolution

• •

https://learn.microsoft.com/en-us/power-platform/alm/solution-layers-alm https://learn.microsoft.com/en-us/power-platform/alm/solution-concepts-alm

Dataflows •

https://learn.microsoft.com/en-us/power-query/dataflows/overview-dataflowsacross-power-platform-dynamics-365

•

https://learn.microsoft.com/en-us/power-apps/maker/data-platform/definealternate-keys-portal

Gateways •

https://learn.microsoft.com/en-us/power-query/dataflows/using-dataflowswith-on-premises-data

Custom connectors •

https://learn.microsoft.com/en-us/connectors/custom-connectors/define-blank

Dataverse for Teams • • • •

https://learn.microsoft.com/en-us/power-apps/teams/overview-data-platform https://learn.microsoft.com/en-us/training/modules/get-started-dataverseteams/ https://learn.microsoft.com/en-gb/power-apps/teams/data-platform-compare https://learn.microsoft.com/en-us/power-platform/admin/about-teamsenvironment

Chapter 18

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

529

19

Introducing Model-Driven Apps In the previous chapters of this book, we used several data sources that are external to the Power Platform. We are now going to explore how we can use Microsoft Dataverse as a data source that underpins the Power Platform applications and provides a robust, yet simple, method for storing data in a way that feels very similar to creating tables within a database.

We have already learned about canvas apps as we’ve progressed through this book; now, it is time to introduce another kind of Power Apps application: model-driven apps, which have a different look, feel, and editing experience to what we have covered so far. The emphasis switches from the design aspect to the data, meaning that much more work takes place around the data structures before the actual app build begins. Within this chapter, we will cover the following topics: •

Understanding Dataverse

•

Understanding the Common Data Model (CDM)

•

Modeling data

•

Building a basic model-driven app

•

Lab 15

In this chapter, we will look at the rationale for using Dataverse and how it is structured. We will then start to create our own tables within Dataverse to prepare for the creation of an app. We will also learn the basics of model-driven apps and how they differ from canvas apps. By the end of this chapter, you will have an understanding of Microsoft Dataverse, what it is used for, and how you can start to use it to architect your model-driven apps.

Introducing Model-Driven Apps

532

Technical requirements This chapter works with premium components of the Power Platform; therefore, you will either need to work in a community plan, sign up for the Power Apps Developer Plan, or have a Power Apps per app/per user plan license assigned to you.

Understanding Dataverse Dataverse, which until November 2020 was known as Common Data Service (CDS), is a data source that is available on the Power Platform and that allows you to store data in a structure that shares a lot of similarities to a database. The data is structured in tables (previously known as entities) that use columns (previously known as fields) to hold and structure the data very much like a database table that you would expect to see in a simple Microsoft Access database. Dataverse enables users to share data across several different applications within Microsoft 365 including Power Apps, Microsoft Power Automate, Power Virtual Agents, Power BI, and Power Pages. Unlike other data sources, to use Dataverse, we do not need to provide specific connection information as the underlying database is automatically connected to the environment where the app exists. Dataverse allows you to build relationships between tables. Most developers within Microsoft 365 would default to using lookup columns between SharePoint lists, whereas Dataverse allows us to define and manage relationships between the different entities, tables in the same way we would define relationships in databases. This may seem quite daunting, but one of the key features of Dataverse is that it can be built through the web portal rather than having to rely on another application.

Creating a Dataverse database Databases are associated with an environment, which we will investigate more in Chapter 21, Exploring Environments within Our Tenancy. We are limited to creating one database per environment. We can either create the database from within the Power Apps portal or through the Power Apps admin center (https://admin.microsoft.com/). In the following example, we are going to do this through the Power Apps portal: 1. As a user, the easiest way to achieve this is to navigate to make.powerapps.com and then select Tables from the left side panel. This will then present you with a screen allowing you to create a database:

Chapter 19

533

Figure 19.1: Create a database screen

For business usage, it is not advisable to create a database in the default environment, because it has limited control and all users have the environment maker role by default. For further information about environment usage, check out Chapter 18, Introducing Microsoft Dataverse, and https://learn.microsoft.com/enus/power-platform/admin/environments-overview.

2. As a part of the database creation process, you will be asked to set some local details, in particular, the language and the currency. You must select the correct currency and language at this point. Once the database has been created, you will no longer be able to change it. In this example, I’ve set my currency to USD and the language as English. 3. If you are creating a database for demonstration purposes, you may want to check the Include sample apps and data checkbox, as shown in the following screenshot (these apps can be deleted later):

Introducing Model-Driven Apps

534

Figure 19.2: New database blade

4. You will notice that a warning is shown in a gray box. This states that, by agreeing to use the database, you are allowing Microsoft to collect data on the tables to improve the CDM. It does point out, however, that Microsoft will only collect information on the models that you create, not the actual data within the tables themselves. Microsoft has a strict policy on accessing content stored across their cloud services: only accessing it with explicit permission from the tenant owners. This also applies to the content within your databases. 5. Once you click Create my database, the database will then begin to build, including the sample apps if you selected that option during the configuration. After a few minutes, you will be presented with the Solutions gallery, as shown in the following screenshot:

Chapter 19

535

Figure 19.3: Example model-driven apps that are created with the database

As we already mentioned in Chapter 18, Introducing Microsoft Dataverse, solutions are used to transport apps and components from one environment to another and update existing apps. As a personal recommendation, I would suggest creating a sandbox environment to start developing with, and creating or adding tables and applications directly inside an unmanaged solution, so that afterward it is easier to export the solution as a managed one and import it into a production environment. Once the database has been created, we can then start to look at how to create our data models ready for use within apps. To achieve this, we must first understand the CDM, and how we can apply that to our apps.

536

Introducing Model-Driven Apps

Understanding the CDM The CDM is a standard set of commonly used data collections and activities across Microsoft business and productivity applications. We can compare it to common database schemas such as users, addresses, and more. The CDM, just like a database, is made up of several key elements such as tables, columns, and relationships. Relationships are particularly important for reducing the amount of data duplication and being able to reference data from one table to another. Tables, previously known as entities, as we mentioned earlier, are ways of classifying data and providing metadata about that data, essentially building up the model that our data will follow. To do this, we need to access the Power Apps portal and select Tables again from the left side panel of the screen. First, let’s start by introducing tables.

Introducing tables When you first access the Tables screen, you will notice that the database has already been populated with several examples. These examples are based on tables frequently created using Dataverse and identified by Microsoft as a common pattern:

Chapter 19

537

Figure 19.4: Tables created as part of the CDM

To create tables, users need to have the relevant permissions assigned to them. A full description of those roles can be found at https://docs.microsoft.com/en-us/ power-platform/admin/database-security.

Introducing Model-Driven Apps

538

The list of tables can be quite difficult to browse, especially when you start building your own tables within the list; therefore, you should be aware of three pieces of functionality that have been included to assist you:

Consider using these three functionalities as a quick way to filter the list on this screen.

•

The first is Search, which appears in the top-right corner of the screen. This will allow you to search throughout the list of templates for a specific keyword. This keyword can appear in any of the columns that are being displayed.

•

The second is the view selector, which is set by default to Recommended. This feature allows us to select three different views to find our tables more easily. For example, if we select Custom, we will see the tables that were created by users, not by the system.

•

The third is the column filters, which allow us to search by terms or choices. After selecting the criteria we want to filter by, we must click Apply to see the results:

Figure 19.5: Tables being filtered

Chapter 19

539

Let’s now click on one of the tables and explore its structure further.

Exploring a table When we navigate into a table, we start to unlock all the functionality that surrounds it – we don’t just see columns, but also relationships, views, forms, and other key operational areas that will help us to build our model-driven app. A table helps to pull together all the key components of the data model, which then feeds into the model-driven app creation process, which we will see in more detail in Chapter 20, Creating Model-Driven Apps. To explore the workings of a table, let’s look at something that we can all relate to – a User table containing all the usual information that you would expect to find about a person:

Figure 19.6: The display screen of a table when we navigate to User

Introducing Model-Driven Apps

540

Once we have navigated into the table, you will notice that the screen contains a lot of information. Besides table properties and table data, it contains several navigation links that allow us to investigate the key areas of the table, as shown in the following screenshot:

Figure 19.7: The table navigation links that help to move in and out of the screens

Over the next few pages, we will look at each of the following areas:

The full list of data types available in Dataverse can be found at https://learn. microsoft.com/en-us/power-apps/maker/data-platform/types-of-fields.

•

Columns are the individual pieces of data for each record, covering, for example, each user, their associated data types, and whether they are managed, customizable, required, or searchable.

•

Relationships allow you to link tables together, in the same way as you can relate tables within SQL databases, and help you to enforce referential integrity. You can apply the same relationship rules as with databases, for example, many-to-one, one-to-many, and many-to-many. We will cover this later in the chapter.

•

Keys: Alternate keys are meant to provide integration with external data stores. This means that as well as having one primary key column, we can also have a unique combination of columns that link records from external systems to Dataverse without modifying the external system schema.

•

Forms: In the same way that we can create views of the data for model-driven apps, we can also define forms for inputting, editing, or viewing the data. There will always be a main form associated with the table; however, we can define additional forms with different formats such as data cards or quick create/view that allow us to create or view information without navigating forward and backward.

Chapter 19

541

•

Views allow you to create predefined filters on the records within the table, which makes the queries more efficient when we use Dataverse as a data source within model-driven Power Apps. Column display names cannot be edited in views.

•

Charts are single graphical representations of the data that can then be used within a dashboard.

•

Dashboards allow you to create preconfigured graphical representations of the data using multiple controls.

•

Business rules allow you to apply logic and validation to records through a browser-based editor without having to write code.

•

Commands are custom buttons that can be added to your table to call actions coded in a JavaScript or a Power Fx library. These libraries can be accessed via the app designer or the form screen.

•

Messages: Dataverse exposes APIs using messages. There are many out-of-the-box messages available to use. Custom messages are typically used to add new domain-specific functionality to combine multiple message requests into a single request.

All these areas combine to build our data model. Some of them will feature prominently in the next chapter when we create a model-driven app. Now, let’s look at how exactly we can model our data.

Modeling data The modeling of our data is the first aspect of creating a model-driven app. It is imperative that your data structures and relationships are all defined as much as possible. There are many out-ofthe-box tables that we can use within our apps; however, these tables become more useful when we start to create our own to meet our specific requirements, as every organization is different. Modeling data in this scenario really means deciding what the high-level data types are, and then identifying the data we need for each type. This method of thinking can then be applied to the creation process. To walk through the creation process, we will take books as an example. A book has a title, author, editor, publication date, and ISBN.

Creating a table The first thing we need to create when modeling our data is a table. This is so that we can build the definition of our data and create the rules and artifacts that relate to it.

Introducing Model-Driven Apps

542

To create a new table, we need to navigate to our Tables list and then click + New table at the top of the screen:

Figure 19.8: New table button

Clicking on this button reveals the New table blade on the right-hand side of the screen. We need to populate the following required fields: •

Display name: This is the singular name of the item we are creating the model for, so, in our example, this will be Book.

•

Plural name: This is the collective name for multiple instances of your table. Notice that it has been populated automatically with the Display name value with an s appended to it. Feel free to change this if it is not correct grammatically (for example, if your Display name is Goose, then your plural name would be Geese).

•

Schema name: This is displayed when expanding Advanced options. This becomes the internal name for the table; it will have a unique prefix (defined by the publisher), followed by the Display Name. This field is used when we refer to the column programmatically.

•

Type: Use Standard for most tables. Activity tables are a special type of table that can only be owned by a user or team, not an organization. Virtual tables have to be populated with data from an external source.

•

Record ownership: By default, User or team will be selected. That is because security can be defined according to the business unit using security roles, while organization ownership records contain data that can be viewed by the whole organization.

•

Primary column: This is displayed on the tab to the right of the Properties tab. This is the main identifier for your record and will be shown to users when they need to select a record from the list. Ideally, this should be unique, so, in our example, I will enter ISBN.

There are also several additional settings that you can explore, such as setting a description, choosing a table image, and updating settings (such as duplicate detection).

Chapter 19

543

Find further information at https://learn.microsoft.com/en-us/power-apps/maker/dataplatform/data-platform-create-entity#create-a-table. Once you have finished with your configuration, click Save:

Figure 19.9: New table blade

Introducing Model-Driven Apps

544

If you wish to use a custom prefix within your tables, they should be created from the Solutions screen under the Publishers tab; otherwise, they will be created with the default prefix. Further information can be found at https://learn.microsoft. com/en-us/power-platform/alm/solution-concepts-alm.

When your table has first been created, it will show you the main screen. Navigating to the columns, we can see the column that was defined in the creation blade. You will notice that many columns were automatically created for you, for example, a unique identifier called Book alongside the created and modified columns:

Figure 19.10: Tables list showing the columns in our new table called Book

We have created a table; we now need to create additional columns.

Chapter 19

545

Creating columns While we are on the Columns link within our table, we can add additional columns by clicking + New column in the toolbar at the top of the screen. Once again, this will open a blade on the right-hand side of the screen, this time called New Column:

Figure 19.11: The New column button located on the table columns screen

On this blade, let’s again fill in the fields that are presented to us. Display name is the friendly name, which is presented to the user, while the Name (Schema Name) field is the internal name. You can also select whether the column is required, recommended, or optional. If it is required, people will not be able to save a record until it is filled.

The schema name of your column must be unique across your environment, and it cannot be changed once created.

As a part of the column creation, I can set Data type, which controls how they are stored within the database and how they are formatted when the data is being output by our apps. The data types contained within this list are the common types of data that you use across all applications, including the ability to create lookup columns that can reference other tables to provide selectable data. Depending on the data type selected, different behaviors can be chosen.

546

Introducing Model-Driven Apps

Calculated columns are used to automate manual calculations while rollup columns get an aggregate value calculated over the records related to a specific record.

Figure 19.12: Column creation blade being completed

Now, follow this exact same process for two other additional columns, Book Title and Published Date, remembering to click Save to add them as columns to the table. For Author, we will get that information from the User table (which we talked about earlier, in the Exploring a table section) to create a relationship.

Chapter 19

547

Creating table relationships A relationship is a way of connecting two tables together, just as relationships work within databases. As we start to build our data model, we can use relationships to ensure that our data is normalized, that is, it is only stored once and then referenced by other tables. A key principle of good information management is to maintain a single version of the truth, meaning that it is best for data warehousing setups to have a single centralized database to store data in a consistent and non-redundant way. Using relationships allows us not to have unnecessary duplicated columns that could lead to contradiction or confusion between the data. To create the relationship, we should first click the Relationships link on the main screen of the table and then select + New relationship:

Figure 19.13: The New relationship button

When we first select the relationship, we should consider how the two tables are related. The types of relationships are as follows: •

One-to-many/many-to-one: This type of relationship makes a connection from a record in one table to many records in another. For example, users (authors) may write many books; therefore, the relationship will be one-to-many from User to Book. Using this example, another way to create this relationship is to add a new lookup column in the Book table that has User as a related table.

•

Many-to-many: This type of relationship creates a join where many records in one table are related to many records in another. This relationship behaves slightly differently, as it does not result in a lookup column being created. Instead, a hidden link table is created and maintained by Dataverse.

In this example, we will assume that a single author writes a book. Therefore, we are going to create a relationship from the Book table to User, where many books could have a single author and an author could have many books. Since we are creating a relationship from books to users, we select the many-to-one relationship. This means that many books could have a single author. If we were creating a relationship from User to Book, we would use one-to-many.

Introducing Model-Driven Apps

548

When the blade appears, we first need to specify which table we are creating the relationship for; in this case, we are linking to User. Notice that the Current box automatically generates a display name and column name for our related column, which defaults to User in this case. However, we want this to be called Author, so let’s rename the Display Name to Author:

Figure 19.14: Create relationship blade

The other key aspect of the relationship to consider is the type of behavior, found under Advanced options. This defines how you can interact with a record in the related table. For example, you could set the behavior to Referential, Restrict, or Delete, the latter of which means that the parent record cannot be deleted while a child record exists (that is, an author cannot be deleted if a book exists).

Chapter 19

549

There are Type of behavior, or you can select Custom, which then allows you to define exactly what happens in each scenario, including deletion, assignment, sharing, and more. Always consider the what-if scenario; for example, what would you do if someone deletes a parent record, as this will have an impact on the data stored within your table? Find further information at https://learn.microsoft.com/en-us/powerapps/maker/data-platform/create-edit-entity-relationships.

Now that we have learned how to create tables and model our data, we can move on and build a model-driven application.

Building a model-driven app Model-driven apps are created through the Power Apps portal and share some similarities with canvas apps, such as not requiring you to write code to create your functionality. The key difference, however, is that while canvas apps allow you to have almost full control over the look and feel of the screen layout, model-driven apps are much more rigid in terms of the layout, which is mostly determined by the components that you place on the screen. Model-driven apps are more commonly used in back-office apps, as they are less graphical and engaging than canvas apps. Both types of app, however, can be combined to create a good endto-end solution. Canvas apps provide a richer user experience and mobile capability, whereas model-driven apps can be used for the management of data. The approach to building a model-driven app is also much more rigid than when you are creating a canvas app. The most important thing, to start with, is the modeling of business data within Dataverse, which is why the first part of this chapter went into detail about how to create tables, columns, and relationships. Once the data is modeled, you need to think about the business processes, which involves creating logic and validation rules around the tables to ensure that you are getting the correct data and behaviors when data is entered. When all the data, rules, and logic are ready, you can build the app. This is done by selecting components that we want to display on a page. We will look at how we can build an app from scratch in the next chapter. There are, however, templates that we can use in the meantime to explore model-driven apps.

550

Introducing Model-Driven Apps

If we revisit the templates page in the Power Apps portal, there are several template apps available for us to create, such as Fundraiser or Innovation Challenge. Have a go at creating one of these to immediately gain an appreciation for the different feel of the interface. Just like a canvas app, we can also click on Play in the top-right corner of the screen to start using the app within the designer:

Figure 19.15: The design screen for a model-driven app

This will then render all the components that you have put on the screen and will allow you to click through the different dashboards, as follows:

Figure 19.16: The model-driven app running within the browser

Chapter 19

551

We have now explored the basic concepts of how we can create a model-driven app. We will build on this further in Chapter 20, Creating Model-Driven Apps.

Lab 15 Within this lab, we are going to create our database and some basic tables so that we can build an app in the next chapter. Within this lab, we are going to store and assign cars to members of staff. Let’s start by creating the database first.

Activity 1: Creating the database This is an optional activity; if you already have a database within your environment, then you won’t need to go through the creation steps: 1. Log in to the Microsoft 365 portal by navigating to office.com. 2. Click on the app launcher and select Power Apps (if it is not on the app launcher, then select All apps):

Figure 19.17: Launch the Power Apps application

Introducing Model-Driven Apps

552

3. From the left-hand navigation, select Tables:

Figure 19.18: Power Apps home menu

4. If the database has not been created, click the Create a database button in the center of the screen: Remember, it is recommended that when we are developing an application that we will later migrate from one environment to another, we should build the CDM inside a solution.

Chapter 19

553

Figure 19.19: Create a Dataverse database

5. On the New database blade, make selections for Currency and Language. Leave Include sample apps and data checked, and then click Create my database:

Figure 19.20: New database blade

Introducing Model-Driven Apps

554

After a few seconds, your database will have been created – you are now ready to start modeling your data.

Activity 2: Modeling data In this part of the lab, we are going to create the tables that we are going to use within our model-driven app. The structure will be as follows: •

•

•

Car manufacturer: •

Manufacturer

•

Date established

•

History

Car model: •

Model

•

Description

Car variant: •

Variant name

•

Engine size

•

Transmission

•

Doors

Now, let’s follow these steps to model our data: 1. Navigate to the Power Apps portal. 2. From the left navigation, select Tables:

Chapter 19

555

Figure 19.21: Dataverse Tables screen

3. On the Tables screen, click + New table. 4. Create the Car Manufacturer table with the following configuration: •

Display name: Car Manufacturer

•

Plural name: Car Manufacturers

•

Schema name: Leave as default

•

Primary Column – Display name: Manufacturer

•

Primary Column – Schema name: Leave as default

Introducing Model-Driven Apps

556

5. Click Save:

Figure 19.22: New table blade

6. Once your table has been provisioned, you will automatically be taken to your table. Notice that in the column link the table will display our Manufacturer primary column:

Figure 19.23: Table columns screen

Chapter 19

557

7. Now, add a new column by clicking on the + New column button at the top of the screen. 8. Create a new column with the following configuration and click Save: •

Display name: Date Established

•

Data type: Date and time

•

Format: Date only

•

Behavior: Simple

•

Required: Business required

Figure 19.24: New column blade

9. Create another column with the following configuration, as seen in the following screenshot: •

Display name: History

•

Data type: Multiple lines of text

•

Format: Text

•

Required: Business required

Introducing Model-Driven Apps

558

10. To finish creating our columns, click Save in the bottom-right corner of the screen:

Figure 19.25: New column blade

11. Navigate back to the Tables screen by clicking on Tables in the left navigation so that we can create a new table called Model. Create this table with the columns that were defined at the start of the lab:

Chapter 19

559

Figure 19.26: Table columns screen

12. Within the Model table, select the Relationships link:

Figure 19.27: Table relationships screen

Introducing Model-Driven Apps

560

13. Select + New relationship from the top of the screen and select Many-to-one. 14. The Current (Many) table will already be populated; however, you need to select the Car Manufacturer table from the drop - down list under Related (One):

Figure 19.28: New relationship blade

15. We now have a relationship established between Car Manufacturer and Model.

Chapter 19

561

16. Repeat the process for the Variant table:

Figure 19.29: Table columns screen

17. Create a many-to-one relationship from Variant to Model:

Figure 19.30: Table relationships screen

562

Introducing Model-Driven Apps

We have now modeled our data. These relationships will be important when we create a model-driven app in the next chapter’s lab!

Summary In this chapter, we introduced Dataverse – a premium data storage element that underpins all aspects of the Power Platform. Being completely cloud-based and having the same feel as simple database solutions such as Microsoft Access, Dataverse is an excellent choice for storing data. If you are looking to structure your data in a more controlled way rather than using other data sources such as SharePoint or Excel, then Dataverse is the preferred way. The databases generated by Dataverse are directly linked to environments, and therefore there is a limit of only one database per environment. Due to the integration within the environment, however, there are no requirements for database names or credentials to connect to the database. We learned how data within Dataverse is held within tables, as in every database. Within those tables, we can define columns with a large range of data types available to us to ensure that we are storing and correctly presenting data. When we create columns, the schema name, which is the programmatic name, must be unique within the environment and cannot be changed once it has been committed to the database. The display name, however, can be changed. We also saw how columns are used to create relationships with other tables in the same way as with databases, defining relationships such as one-to-many or many-to-many. These relationships allow you to define behaviors, so that if an action such as a deletion occurs on one side of the relationship, then you can define what happens on the other. Tables also allow us to define other elements that become extremely useful within model-driven apps, such as logic and validations, forms, views, dashboards, charts, and business rules. We can use Dataverse within canvas apps, which we looked at earlier in this book; however, the database really lends itself more to model-driven apps, which allow us to create apps directly from the tables and rules that we define. As we have seen, there are several templates available to us, which have allowed us to explore the look and feel of this type of app. However, we do not truly understand model-driven apps until we can create one ourselves. In the next chapter, we will use the data models we have already defined to create a model-driven app from scratch.

Chapter 19

563

Questions 1. What types of apps can use Dataverse as a data source? 2. What do we need to create before being able to use Dataverse? 3. What are the primary data structures within Dataverse called? 4. What types of relationships can be created between tables? 5. True or false: The schema name of a column can be changed after it is saved.

Further reading •

Dataverse: https://learn.microsoft.com/en-us/power-apps/maker/data-platform/ data-platform-intro

•

Tables: https://learn.microsoft.com/en-us/power-apps/maker/data-platform/ data-platform-create-entity#create-a-table

•

Relationships: https://learn.microsoft.com/en-us/power-apps/maker/dataplatform/create-edit-entity-relationships

•

Environments: https://learn.microsoft.com/en-us/power-platform/admin/ environments-overview

•

Solutions: https://learn.microsoft.com/en-us/power-apps/maker/data-platform/ solutions-overview

•

Solution concepts: https://learn.microsoft.com/en-us/power-platform/alm/ solution-concepts-alm

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

20

Creating Model-Driven Apps In the previous chapter, we learned that model-driven apps are designed to share the same type of development principles as canvas apps, in that you can create apps that are simple or complex in nature without the need to write code.

This chapter will go further into the creation of model-driven apps, so you can understand how and when to use them. The whole approach to model-driven apps is different from that of canvas apps in that we need to define more of our functionality around the data, and define it upfront before we start to build. Therefore, we will need to be aware of what these building blocks are and how we can use them. Finally, when we have our foundations in place and the building blocks ready, we can start to combine them all together to create our app. In this chapter, we will look at how we can create a model-driven app. Model-driven apps are based on a Dataverse relational database, which makes these kinds of applications particularly well suited to data-dense, process-driven situations where there is a need for simple navigation between related records, and where there needs to be a certainty that data is not repeated unnecessarily. They were released in March 2018, and since then they have only grown in popularity. In this chapter, we will look at the following topics: •

Introducing the building blocks of model-driven apps

•

Creating a model-driven app from scratch

•

Using your model-driven app

•

Lab 16

The key thing to remember is that model-driven apps will always conform to your data, so it is extremely important to ensure that your data structures are correct and that you have all the building blocks in place before you try to construct the app itself.

Creating Model-Driven Apps

566

By the end of this chapter, you will understand how to create a model-driven app, including data interactions and visual presentations.

Technical requirements This chapter involves working with premium components of the Power Platform; therefore, you will either need to sign up for the Power Apps Developer Plan (https://powerapps.microsoft. com/en-us/developerplan/) or have a Power Apps per-app/per-user plan license assigned to you (https://powerapps.microsoft.com/en-us/pricing/).

Introducing views, forms, and dashboards In the previous chapter, we really focused on creating the data elements of our tables. Now, we will look at the other features that will start to feed into our model-driven app – views, forms, and dashboards: •

Views: Views allow you to create predefined filters on the records within the table, which makes the queries more efficient when we use Dataverse as a data source within model-driven apps.

•

Forms: In the same way in which we can create views of the data for model- driven apps, we can also define forms for inputting, editing, or viewing the data.

•

Dashboards: Dashboards allow you to create preconfigured graphical representations of the data using multiple controls.

We should always keep in mind the differences in approach between creating a model- driven app and creating a canvas app. With model-driven apps, you ideally need to consider what your views and other components are going to be before you really get into the build phase of your app. You can come back later to revisit these components; however, you will need to create at least one of each element to be able to add some functionality to your app. In Chapter 19, Introducing Model-Driven Apps, when we talked about modeling data, we looked at the links that were available across the table. Now we will investigate some more of these links, as well as what they do:

Chapter 20

567

Figure 20.1: Table navigation links

First, let’s start with Views, in the Data experiences section.

Creating views As we discussed in Chapter 19, Introducing Model-Driven Apps, in the Exploring a table section, views allow us to create predefined column selections and filters on our data. Views should always be created for the common ways that the user queries the data—for example, if the users often look for data that has been created with a specific value, such as the date or a customer for whom an invoice has been created. To create a view, go through the following steps: 1. From any table menu, we simply need to select the Views link from the link menu and select + New view, which will then prompt you to give the view a name and a description (both optional):

Figure 20.2: + New view button

2. When the view creator screen opens, you will notice that it looks quite similar to the editing experience of Dynamics. In the following screenshot, you can see that the view creator window is broken up into three distinct sections: •

Table columns: This shows the columns available for the table.

Creating Model-Driven Apps

568

•

View display: This shows the view as it will appear, displaying the columns that have been selected.

•

Properties: The Properties pane appears on the far right of the window, with the title New Accounts in the following screenshot, and shows the configuration options for the view. This area gives you the option to add a name and description for the view, allowing you to configure how the data is sorted and filtered.

Figure 20.3: View creation screen

3. The left-hand panel contains all of the columns that are available within your table and allows you to drag and drop them into the center of the screen, which is where your view is being constructed. 4. Another way to add a column is to hover over it within the column list, click the ellipsis, and then click + Add to view. You will then see the column in the central area:

Chapter 20

569

Figure 20.4: Add column to view

5. On the Properties blade on the right-hand side, we can define some rules around what data is being shown by applying filters to the columns. We can also specify the order in which the data is displayed by defining the Sort by... criteria. When you are defining your filters, you simply select your column and the criteria that you would like to apply—for example, records that have been created in the last 7 days:

Figure 20.5: Filter creation

6. Once we have finished defining our view, we can click Save and then publish it to be able to use it within our app.

Creating Model-Driven Apps

570

When we navigate back to our table, we will then see our new view in the list. As well as being able to see the records, we need to be able to create and edit them, and provide more detail about them. This is where we start to look at forms.

Creating forms Forms allow us to primarily add and edit data in our tables. However, they also provide us with more detail when clicking through from our views. By selecting + New form at the top of the Forms screen, a drop - down menu is displayed showing the different types of forms that can be created:

Figure 20.6: Types of forms

The following list summarizes the different types of forms: •

Main Form: Provides the default user interface for viewing and modifying table data.

•

Quick View Form: Displays relevant read-only information from related tables being embedded inside the main form of the viewed record.

•

Quick Create Form: Offers an alternative to switching between main forms to add new records of related tables. It is a condensed version of the main form for in-context record creation.

•

Card Form: Presents information in a compact format suitable for mobile devices.

Chapter 20

571

When any of the types are selected, you will again be presented with a Power Apps-style editor that will allow you to create a form. Just like the view editor, the forms editor uses the same interface, with the columns, libraries, business rules, and components displayed on the left-hand side, the canvas in the center, and the properties and events available on the right. The layout of the form will conform to preset tabs and sections. On them, you can add components (UI elements) and table columns (fields). Actions inside the form can also be managed via libraries (code components) and business rules (data-driven actions). Adding columns and other components is as simple as dragging them into the canvas:

Figure 20.7: Component selection list

Creating Model-Driven Apps

572

On the right-hand side of your screen, you can change some of the basic properties related to the control, layout, or column that you have placed on the screen, as shown in the following screenshot:

Figure 20.8: Properties blade

Chapter 20

573

Some of the potential options that you could see here are related to the responsiveness of the app when being viewed on a mobile phone—for example, you may wish to hide larger columns when viewing the app on a smaller screen. Once you have added your components and columns into the layout that you wish to use for your form, you can publish it by clicking the Publish button in the top-right corner of the form editor screen. The form will then become visible within the Forms list of the table. The final elements of the table that we can build before we start to build our model-driven app are dashboards and charts.

Creating dashboards and charts Dashboards allow you to create visual representations of the data stored within your table so that you are not just looking at rows and rows of data. Consider the proverb: A picture paints a thousand words. Depending on the audience of your app, you may wish to bring your data and charts together in order to build a more interactive interface for users. Before we can create our dashboard, however, we need to create a chart.

Creating charts Charts have their own link on the table navigation menu, and when selected, it will show you a list of any charts that have already been created. We can add our own chart by clicking the + New chart button at the top of the screen. While a lot of the model-driven app development experience has now been converted to the Power Apps user experience, there are a few elements and areas that still look and feel very much like Dynamics.

Creating Model-Driven Apps

574

At the time of writing, charts are one of them:

Figure 20.9: Chart editor screen

Even though the user experience is slightly older, the method of creating a chart is somewhat simple, in that you just need to supply it with some basic information and the designer will do the rest. You will need to tell the chart creator screen which view of the data the chart is going to use, so ensure that you have your views configured before you try to build your chart.

The best thing to do here is simply complete the form, and provide the view that is going to supply your chart with the data, the name of the chart, and the type of chart you are going to use. This doesn’t have the same depth of customization that you may be used to if you have used Power BI for creating dashboards, but it will allow you to create some basic chart types, such as bar charts and pie charts.

Chapter 20

575

Once you have provided the form builder with enough information, it will render a preview of your chart in the center of the screen. When you are happy with it, click Save & Close to close the editor. Now that we have created a chart, we need to include it within a dashboard.

Creating dashboards Like charts, dashboards still use the classic Dynamics experience when they are being built. They are accessed from the Dashboards link in the table link menu and can be created by clicking + New dashboard. You have several options with dashboards in terms of layouts; however, these options are limited because of the number of columns that you can have displayed. Once you have made your selection, you will be presented with the dashboard editor, as shown in the following screenshot:

Figure 20.10: Dashboard editor screen

Creating Model-Driven Apps

576

The editor for the dashboard is, again, quite simple in that you just need to enter the details into the form and the editor will take care of the rest. When you select the charts that you wish to display, you will be presented with a list of charts that have been created within this table, so ensure that you have your charts in place before you try to edit your dashboard. Once you have provided all your data, you can then save it, close it, and return to the table. Now that we have all our building blocks in place, we can go ahead and create a model-driven app.

Creating a model-driven app from scratch The process of creating a model-driven app starts off in the same way as the process of creating a canvas app: we first navigate to the Power Apps maker portal. The option that we need is next to Canvas App on the app selection screen and is titled Model-driven App. When we create a new model-driven app, the editing experience starts to change immediately. Unlike when we created a canvas app, there is no mention of whether we are developing it for a mobile or tablet. Instead, we now need to shift our mindset into creating just a single app that is responsive to both being viewed in browsers and on mobile devices. We can create a model-driven app in the following way: 1. The initial creation of the model-driven app shares some similarities with the creation of canvas apps. Such similarities include being able to define what the name of the app is and the description. After you enter those fields and click Create, the app will be given a unique name that, by default, will be derived from what you enter in the Name field, and the app tile can be edited with web resources. You can see the New model-driven app window in the following screenshot:

Figure 20.11: New model-driven app screen

Chapter 20

577

2. The modern app designer guides you through the process of model-driven app creation. This designer is fundamentally different from canvas apps. The designer screen, rather than being graphical like canvas apps, is built by selecting tables and dashboards (via the Add page button) and placing them on the screen. Those components are the ones that were created during the data-preparation stage. As a reminder, the recommended process for creating your model-driven app is as follows: 1.

Model your data

2. Define the business processes 3. Create the app You can find further information about steps 1 and 2 in Chapter 19, Introducing Model-Driven Apps. Step 3 is what we are learning about here!

3. The following screenshot shows the first window after you create and open the app:

Figure 20.12: Modern model-driven app designer

578

Creating Model-Driven Apps

4. After adding our tables and dashboards in the Pages section, if we click on the Navigation icon on the left side of the designer, we will be able to build up our sections within our model-driven app and you will notice that we have a default group and subarea created, as can be seen in Figure 20.13. To add a new subarea is equivalent to adding a page, so if we edit the default subarea to add any content that we have already added in the Pages section, we will have duplicated navigation links. More information about app navigation in model-driven apps can be found at https://learn.microsoft.com/en-us/power-apps/maker/modeldriven-apps/app-navigation.

5. By selecting one of the components on the screen, the blade on the right-hand side of the screen will display the configuration items that we are able to edit. By clicking on the subarea, for example, we can change the component type by specifying whether it is a table, dashboard, custom page, web resource, or URL. Another important change within the modern app designer is the way that default home, recent, and pinned tabs can be so easily hidden or shown:

Figure 20.13: Navigation within a model-driven app

6. The modern app designer allows us to see how the application is coming along as we implement the changes. 7. Once we have already organized the app navigation, we can return to the Pages section to edit which forms and views shall be displayed within our app. By default, all the forms and views are selected, but we can remove some of them either by clicking on the ellipsis symbol of each one or by disabling the Include all forms/views in the app button:

Chapter 20

579

Figure 20.14: Table assets

8. The forms and views are all configured as a part of the table. So again, this highlights that the data preparation and modeling need to be completed before you start building the app. 9. Once we have selected the assets we want to include within the app, we can then save the app by clicking the Save button in the top-right corner of the screen. To see the changes when you click the Play button, you will have to have previously published the app. With our app created and ready, let’s learn how to use it.

Using your model-driven app First, we should publish the app, and then we can click Play to launch it. This will allow us to interact with the app within the browser in the same way that we can with canvas apps. Once you have launched your app, you will be faced with your working model-driven app. This is where it becomes apparent to users that we are extremely limited in terms of what we can do with the look and feel of the app; it is the price to pay for it being so quick to design. This lack of design freedom really means that model-driven apps are better suited to back-office functions. We will now run the app so that we can see the user interface: 1. Click the Play button in the top-right corner of the model-driven app designer window to see the app in fullscreen mode.

Creating Model-Driven Apps

580

2. Click on one of the navigation items on the left of the screen. This will then display the data contained within the table in the center of the screen. 3. After clicking on Accounts, we will then be presented with the data that is retrieved by the selected view. 4. The view of the data, which is shown in the center of the app, can be changed by using the drop-down arrow to the right of the view title, which can be seen in the following screenshot:

Figure 20.15: Data view within the app

5. Across the top of our screen, we have our data toolbar, which allows us to create new data, trigger flows, or export to and import from Excel. This is always available at the top of any model-driven app:

Chapter 20

581

Figure 20.16: App toolbar

6. This toolbar can be edited using the app designer or external tools like Ribbon Workbench, which is an XrmToolBox plugin (https://www.xrmtoolbox.com/):

Figure 20.17: Edit command bar

7. Using the Show Chart functionality will open a new part of the page that displays a graphical representation of the data that is being displayed, where you can generate charts on the fly. The chart area behaves much like you would expect it to if you have any experience with Power BI, where we can click on the chart to drill through to further data.

Creating Model-Driven Apps

582

8. When we click on the chart, we will be asked for the column (for example, drill down by) and the type of chart. In our case, we could select City and then a column chart to see the geographic breakdown of the data:

Figure 20.18: Example of a chart

Chapter 20

583

9. As well as being able to see the overall list of data, which is stored within the table, we can click on one of the records and then see the data on a form. Using the form, you can edit and interact with the data or create new data entries or records. The interface can be seen in the following screenshot:

Figure 20.19: Rendering of a form within the app

Generally, the feel of model-driven apps is always quite similar, although there are some differences in the layouts that can be applied depending on the app requirements.

Lab 16 In this lab, we will build upon the tables that we created in Chapter 19, Introducing Model-Driven Apps, and use those tables to begin building a model-driven app. In this lab, we will create views, charts, and dashboards of the data and use those within a model-driven app. Remember that by creating the table, Power Apps has already created several predefined forms and views for us to use.

Creating Model-Driven Apps

584

Activity 1: Creating views In this section, we will practice creating views on the data that we have stored within our table: 1. Open the Power Apps maker portal by navigating to make.powerapps.com. 2. Select Tables to bring up our tables list:

Figure 20.20: Table list

3. Select Model from the list of tables. 4. Select Views from the table navigation and click + New view:

Figure 20.21: New view button

Chapter 20

585

5. Name the view Ford Cars and click Create:

Figure 20.22: Create a view blade

6. When the view editor appears, hover your mouse over the Description column, select the ellipsis, and click + Add to view, which will then add the column to the area in the middle. We could also directly drag and drop the column:

Figure 20.23: View designer

Creating Model-Driven Apps

586

7. Select Edit filters on the right-hand side of the view designer and click + Add followed by Add row to create a new filter:

Figure 20.24: View filters

8. Configure the filter to select the cars where the manufacturer is equal to Ford:

Figure 20.25: Edit filters blade

9. Repeat step 6 to step 9 for the following: •

Tesla

•

Skoda

If you do not have data stored in your table yet, you will not be allowed to create the filter with Equals, but you can use Contains instead.

Those views will help us to quickly display the records associated with the different models that we have in our data. This way, we will not have to filter every time we need that information, and we can also use those views to build our charts and dashboards.

Chapter 20

587

Activity 2: Creating charts and dashboards Now that we have already created different views for our Model table, we can use them to create different charts that give us some graphical information about our data. Those charts can then be grouped in a dashboard. Imagine that we would like to see a breakdown of different cities and how many clients we have for a specific car model in each one. We will take advantage of the views that we have already created previously: 1. Navigate to the Model table menu. Select Charts on the links menu. 2. At the top bar, select + New chart. A new tab is opened. 3. Starting from top to bottom, we first select a stacked column chart. 4. Then we select the specific view that we created for Ford Cars and set the name to Ford Cars by location. 5. The legend will be the car model. While on the horizontal axis, we will select both the city and car model. We can see how the chart is looking with the preview in the center of the screen. 6. The design should look like the following screenshot:

Figure 20.26: Chart settings

Creating Model-Driven Apps

588

7. Then, repeat the preceding steps for the Tesla Cars and Skoda Cars views. 8. As we would like to have all these created charts displayed on the same dashboard, let’s navigate to the Dashboards link from the Car Model table menu. 9. Click on + New dashboard | 3-Column overview. This selection is just for adjusting how many columns we would like our charts to display. 10. We must fill out the Name field, select which entity view is used to filter the charts, and the time frame for the selection (by default it will be this week’s records). For example, if we want to retrieve the records created this month, it would look like the following screenshot:

Figure 20.27: New dashboard settings

11. On the Visual Filters section, we select which charts to display in our dashboard, by clicking the Insert Chart central button in each of them:

Figure 20.28: Visual filters in dashboards

12. On the Streams section, we can see tiles from different views that count and display how many records are in each view. Find further information about creating and editing dashboards at https://learn. microsoft.com/en-us/power-apps/maker/model-driven-apps/create-editdashboards.

With these charts and dashboards, we have an interesting visual panel to be displayed when our model-driven app starts running.

Chapter 20

589

Activity 3: Building a model-driven app Having built our data model, including views and dashboards, we now need to start to build the app to allow us to surface the data and interact with it. To accomplish this, we will first create a new model-driven app: 1. Navigate back to the Power Apps maker portal. 2. On the left-hand menu, click Apps. 3. Select + New app and after the dropdown is displayed, select model-driven app. 4. Name your app Cars and click Create. The following screenshot shows the New model-driven app window:

Figure 20.29: New model-driven app blade

5. We will start editing the app navigation, known as the site map in the classic app designer. In the navigation bar, we can enable areas to be edited:

Figure 20.30: Navigation bar editor in modern app designer

Creating Model-Driven Apps

590

6. When the default Area1 is displayed, click on it, and rename it Car Details. Also click on Group1, below Car Details, and change the title to Cars:

Figure 20.31: Groups and areas in modern app designer

7. Click on Subarea1 on the left-hand panel and apply the following configuration: •

Content type: Table

•

Table: Car Manufacturer

•

Title: Car Manufacturers

Figure 20.32: Subareas editor in modern app designer

8. Repeat step 7, adding new subareas for the Model and Variant tables and the new dashboard:

Chapter 20

591

Figure 20.33: Navigation bar editor in modern app designer

9. Save and publish your app. View your app by clicking Play. We now have the basic model-driven app up and running, with our tables included as subareas. Let’s take a look at how we would navigate through the app from a user’s perspective.

Activity 4: Navigating through records With the model-driven app open, we can see the navigation we configured on the left menu, including the visual dashboard. Let’s begin interacting with our app by creating, editing, and deleting records: 1. Navigate to the manufacturer and select + New. Add Ford and other manufacturers:

Figure 20.34: Records in the Car Manufacturers table

Creating Model-Driven Apps

592

2. Click on Ford from the view we created. The default main form will open with only two columns of information included. 3. Since we created relationships within our tables in the previous chapter (see the Creating table relationships section and Activity 2 of Chapter 19, Introducing Model-Driven Apps), we have a Related tab that allows us to enter related models into the model table. Click on the Related tab and select Car Models from the context menu that opens:

Figure 20.35: Record Related tab

4. Click + New Car Model to add a new model and enter Fiesta, Focus, and Kuga:

Figure 20.36: Associated records

You are now starting to see the behavior of the app, navigating through records that are related to one another through the app and observing how it displays data in views, forms, and dashboards.

Chapter 20

593

We now have an operational model-driven app that we can use as a foundation for testing the other aspects of model-driven apps.

Summary Throughout this chapter, we have looked at what it means to build a model-driven app. This helps us to understand the importance of getting the data structure right before we really start to build a working app. The data that we are working with is stored in tables, and those tables have a number of areas that we can use to prebuild components ready for use within our apps. These components are views, forms, charts, and dashboards. Views allow us to create predefined queries against the list data, forms allow us to create the input and edit forms for the data, and charts on dashboards allow us to provide defined outputs that can be used in a model-driven app. Before you commit yourself to building a model-driven app, you should remember that you don’t have the same freedom of design as you do with canvas apps. On the other hand, you will be able to create applications in a short time, so it can be optimal for many projects and business cases. The final aspect of Power Apps that we are going to look at in the next chapter is related to the management of apps through the use of environments.

Questions 1. Where is the data for a model-driven app stored? 2. What are the four key components created within a model-driven app? 3. What can I do within a view to display a predefined subset of data? 4. What is the recommended three-step process to create a model-driven app? 5. What control allows users to interact with data?

594

Creating Model-Driven Apps

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

21

Exploring Environments and Data Policies In the previous chapters, we concentrated on the creation of apps in Power Apps, creating both canvas and model-driven apps. This chapter will help you understand what lies beneath these apps and how we can use environments to provide additional controls and protection for your organization.

When your use of the Power Platform starts to grow within your organization, it is important to consider the use of environments to help segregate your apps and apply different user roles to them. It is vital that you understand when to use them, how to use them, and what their benefits are. Environments, in the context of Power Apps, have two key functions. The first is to separate apps into different permission groups—for example, the finance department may have an environment where only finance users are allowed to use the apps. Secondly, environments can be used to provide additional safeguards for your data using data loss prevention (DLP). In this chapter, we will look at the following topics: •

Introducing environments

•

Viewing and creating environments

•

Applying security to an environment

•

Introducing DLP

By the end of this chapter, you will have a better understanding of how to create and secure environments for different users, and you will also be able to configure DLP policies to determine how various connectors within your environment can be used.

Exploring Environments and Data Policies

596

Technical requirements The techniques and topics covered in this chapter require a Power Apps per user plan assigned to you, to be used within your environment.

Introducing environments In its most simple form, an environment is an area that contains and allows you to store and share business data, apps, and other services within the Power Platform. They fulfill an important role in the security and separation of apps, especially if the apps have different intended audiences, or the data needs to be completely isolated from anything else, or if you want to apply different policies to control what users are doing. Every tenancy will already have one environment created, the default environment, where all apps and flows are created.

A tenancy is the organizational instance of Microsoft 365 that serves all of the various applications.

All users who are licensed to use Power Apps and Power Automate automatically get maker access to this environment, which means that they can immediately start building, creating, and sharing connections. Microsoft refers to the default environment as the personal productivity environment, which allows users to create, innovate, and find solutions to their own problems. As your organization starts to begin working with the Power Platform, it is recommended that multiple environments are considered. The reason for this is to provide additional security for the data that is being stored, as well as being able to enforce an application lifecycle management model, where you move your apps to different environments based on where they are within their life. For example, they will start in a dev environment, before being moved to a test environment, and then a live environment.

The creation of new environments requires you to have premium licenses available to your organization.

Chapter 21

597

As we already have an environment created, let’s look at how we can view it.

Viewing your environments By default, every tenancy has one environment that everyone in the organization can create resources in and that allows all connectors. So, let’s first look at how we find a list of environments. When we navigate to the Power Platform admin center (https://admin.powerplatform.com), we have an Environments navigation option on the left-hand menu. This will allow us to see and search for any environments that are associated with our tenancy. It also provides some key information about the environment, such as its name, its type, who it was created by and when, and which region hosts the service. The following screenshot shows the Environments screen:

Figure 21.1: A list of environments within a tenancy

You can click on each of these environments to drill through to the environment management screen. This screen allows you to discover more about the environments such as permissions, database sizes, and any apps or flows that are stored within. As previously mentioned, if we are an organization that is starting to work more with the Power Platform, then we should consider creating more environments.

Creating environments Creating additional environments allows you to create new containers to hold all your logic. However, you first need to have the relevant licensing in place. As stated in the last section, you will need to assign premium licensing, whether that is per user or per app license, to create the new environment.

598

Exploring Environments and Data Policies

There are several types of environments that you can create, or can be seen, from within the Power Platform admin center: •

Sandbox: These environments are not intended for production apps and should be used for development and testing. Due to their nature of being for dev and testing, these environments have fewer resources allocated to them than production environments, which means that performance may be degraded on some of your more complex apps.

•

Developer: Developer environments belong to users who have signed up for the developer plan, just like you may have done at the start of this book. They are intended for use only by the user who has created them, and they will remain in your environment list unless they become inactive and are automatically deleted by Microsoft. They can also now be provisioned on behalf of your users, using the same methods as other environments, which we will discuss later in this chapter.

•

Production: Production environments exist as permanent homes for your business-critical and approved Power Platform solutions.

•

Trial: These are available for short-term testing and expire after 30 days.

You can only have one trial environment per user.

Creating additional environments is a great way of separating development, test, and production apps to ensure that your users are not sharing apps that don’t meet your organizational standards. To create a new environment, you first of all need 1 GB of Dataverse storage space (regardless of whether you’re using the database for data storage), with additional capacity being made available for each premium license that gets assigned. If we’re happy that we have sufficient capacity, then we can create a new environment. Let’s look at the steps that we need to go through to create an environment: 1. To create a new environment, you need to navigate to the Power Platform admin center, click on Environments, and click + New, which is in the top-left corner of the environment screen.

Chapter 21

599

2. A blade will appear on the right, asking you to provide some basic information that will allow you to set up your environment:

Figure 21.2: The New environment dialog box

3. The following main fields are presented on this screen: •

Name: This is the display name that is given to your environment and will be visible in the environment selector on the Microsoft 365 suite bar. You are limited to 65 characters within this field, so a concise name should always be given to your environments.

Exploring Environments and Data Policies

600

•

Region: This is the regional location that your database and any resources will be served from. It should be noted that not all sub-regional data centers are currently available; however, regional data centers, such as Europe, Asia, and the United States, are available.

•

Type: This is the type of environment that you wish to create, and is bound by your licensing and the types of environments that you already have provisioned.

•

Purpose: This is a description field so that you can articulate to other admins what this environment is being created for.

•

Create a database for this environment: Each environment can be created with or without a Dataverse database. Leaving this as No will create the environment without the database, but you can add it later.

Ensure that you select the correct region for your environment as it cannot be changed once it has been created.

Once we have an environment created, we can assign permissions to allow specific users to have more control over one environment than they do over others, thereby improving the overall security.

Setting security on the environment Setting security on your environment involves two very different processes, depending on whether you opted to create a database or not.

Managing security without a Dataverse database When we are working with an environment that isn’t using a database, the security model is extremely simple. Users are categorized as either Environment Admins or Environment Makers. Environment Admins can perform all actions across the environment, including the creation of DLP policies, which we will look at in the Introducing data policies section. A user can be an Environment Admin without being a Global Admin, and so they will only get admin access to their specific environments. Environment Makers are users who can create new resources—that is, apps and flows—within the environment and are listed as Environment Admins.

Chapter 21

601

Figure 21.3: Setting permissions on an environment

To set permissions on an environment without a database, perform the following steps: 1. First, navigate to the Power Platform admin center and select the environment that you would like to set permissions on. 2. Select the Security tab to display the roles that are available to you.

Environment Admin and Environment Maker Once the Environment Admin and Environment Maker security roles are set up, we can start to add people to the roles. This can be done in two steps: 1. In the Enter names box, you can start to type the name of a user within your tenancy. After you have typed approximately three characters, the picker will appear, allowing you to pick the user or group that you want to give permissions to, as shown in the following screenshot:

Figure 21.4: Searching for a person to add to a role

602

Exploring Environments and Data Policies

2. Once you have added the relevant users, you can click Add. After a short period, you will see a message across the top of the screen, informing you that you have successfully saved your permissions:

Figure 21.5: Message upon saving changes to permissions

Now that we have looked at setting security without a database, we should look at how to do this with an environment that contains a database.

Working with security with a Dataverse database When we have a database within an environment, the permissions are managed through Dataverse, which we found out about in Chapter 18, Dataverse. When we have a database, security is managed using security roles, which gives additional levels of security that you can assign, giving you greater granularity and control. A security role is a group of permissions to various tables and components stored within Dataverse, and it can be applied to individual users as well as groups of people, such as those in Microsoft 365 Groups or Azure AD Security Groups. When we are working through security, everything we need is available in the Access box on the right side of the Environment summary screen. You will see that it allows us to quickly access the Security roles definitions, Teams (groups of people), and Users. It also allows us to manage the security for server-to-server authentication (S2S).

Figure 21.6: The Access panel located on the right of the Environment summary screen

Chapter 21

603

Let’s start to bring security to life by briefly looking at the security roles within Dataverse.

Creating security roles As previously mentioned, security roles are grouped sets of permissions. This could be a combination of read access to one table and update permissions to another. They can also be defined by what level of access is going to be assigned, whether it is scoped to just an individual and the records that they own, or team or organizational level permissions that allow them to see everything else within a table. When you click on Security roles, you will be presented with a list of all the security roles that are present within your environment, with the ability to Copy, Edit, or Delete those roles:

Figure 21.7: Listing the security roles in Dataverse

Clicking on Edit will open the security role config screen, where you can select different tables (you might also see them referred to as entities) and configure what abilities the security role has access to for the selected table. This is simply done by filling in the various selection circles.

Exploring Environments and Data Policies

604

Be aware that, at the time of writing, this screen is still classed as legacy, meaning the user interface hasn’t been updated to match the rest of the Power Platform admin center.

Figure 21.8: Applying permissions to the security role

You can use the existing out-of-the-box roles, and you can create your own by clicking New role from the Security roles screen, which will then bring you back into the legacy role configuration screen. Once you are happy with your security roles, you then need to apply them to users so that they can access your assets with the correct permissions.

Assigning roles to users or teams Before we get too far into the assignment of roles, let’s understand that the word teams, in this case, does not correspond to teams as we understand them from Microsoft Teams, or have any relationship with team sites in SharePoint. The term is purely used to refer to groups of users.

Chapter 21

605

Clicking on Teams from within the Access box will present you with a list of existing teams that have been created within your environment. These teams can be configured in a few ways: •

Owner and Access teams are both groups that are stored and managed through the Power Platform admin center, and only exist within this environment

•

AAD Security Group is a security group created within Azure AD where your administrators can manage the membership as they would with any traditional type of resource permission management

•

AAD Office Group, now more commonly referred to elsewhere as a Microsoft 365 Group, allows you to use the membership of the groups that are created within Microsoft 365 services, such as Microsoft teams

An example of these configurations can be seen in the following screenshot:

Figure 21.9: Team creation blade

606

Exploring Environments and Data Policies

Once the team has been created, you are prompted to assign roles to it. This can be a single role or a combination of several if you want to use the same group to access multiple resources.

Figure 21.10: Assigning roles to a team

This same process also applies to users within your environment, whereby clicking Users will display a list of Power Platform users, allowing you to assign roles to them. It is worth giving some thought to how you are going to manage the security roles within your environment. While giving individual users roles is a quick way of giving a specific user permission, you won’t be able to do this at scale.

Chapter 21

607

Tip Consider creating a team with a security group for your permissions as early in development as possible. This will reduce the amount of security rework that you need to do later.

Personally, I create teams as soon as possible and manage groups of users, even though a group may only contain one person initially. At least this is going to future-proof me to ensure that if I need to give others identical permissions, then I can add them to the team. Security roles are only one of the methods of protecting our data within our environment, ensuring users can only access data where they have the necessary rights. However, we should also consider putting in place protections for what users can do with the data that they are accessing.

Introducing data policies Without a doubt, data is one of the most valuable commodities in the world. Therefore, organizations must take all necessary steps to protect their data to ensure that it cannot be used to exploit or damage them or their users. Data is critical to an operation and, therefore, the success of an organization. Because of this, the Power Platform admin center gives you the ability to employ protective measures using policies. Employing protective measures, through policies, means that we define which connectors may access and share your organization’s data. The policies we define relate to both Power Apps and Power Automate and define which connectors can be used together. For example, we can stop SharePoint data being used for external connectors, such as Twitter. It also ensures that business data is being handled in a consistent manner across the whole organization. Data policies within the Power Platform are not the same as DLP policies, which can be created within Microsoft 365, where the focus is on the sharing, or prevention of sharing, of data with entities outside of our tenancy. The key thing to remember is that Microsoft 365 DLP policies are designed to protect the underlying data. Data policies within the Power Platform define how it can interact with that data. If your data is being stored within Microsoft 365, then you should still consider applying DLP policies to protect your business data. These should then be used as well as data policies within the Power Platform.

Exploring Environments and Data Policies

608

All Microsoft DLP tools should be considered useful tools for security, but using them won’t guarantee that you will never have a breach.

When you are creating data policies, you are effectively assigning each of the available connectors to “buckets.” They can be classified as: •

Business

•

Non-Business

•

Blocked

Placing connectors in different buckets, such as SharePoint in Business and Dropbox in Non-Business, means that no apps or flows can use a combination of both connectors. We can have an app that uses Business or Non-Business, but not both. For example, if we wanted to stop a flow from automatically posting information from SharePoint to Twitter, we could categorize SharePoint as Business and Twitter as Non-Business. If we want to outright stop a connector from being used, then we can add it to the Blocked bucket. There are, however, some connectors that cannot be blocked, which are those that relate to core services within Microsoft 365, such as SharePoint or Outlook. These policies and classifications can be applied to both the prebuilt connectors as well as any custom connectors that you have deployed. When you first create a new environment, there are no data policies in place; therefore, we must create some.

Chapter 21

609

Creating data policies Policies are the rules that define what combinations of connectors we can use within an environment. Compared with policy creation in other areas of Microsoft 365, creation is very simple, as you can see from the following steps: 1. Navigate to the Power Platform admin center and select Data policies from the left-hand menu, as shown in the following screenshot:

Figure 21.11: DLP screen

610

Exploring Environments and Data Policies

2. To create a new policy, simply click on + New Policy in the center of the screen, from which you will be driven through a policy creation wizard. You can start by simply giving it a name before clicking Next. 3. The next screen is where we define the behaviors of our various connectors, grouping them together into Business, Non-Business, and Blocked buckets. Here you will see the entire list of connectors that are currently available for your Power Platform environment:

Figure 21.12: List of available connectors

4. Clicking on the menu for the connector will give you the option to move it to another bucket, or even to customize which actions are available for that connector. Once we have the assignments completed, we can click Next. 5. Next, we can perform a similar categorization process with any custom connectors that we have within our environment, which also gives us the option to specify patterns to automatically classify. So, as an example, if we want api.learningpowerapps.com to be classified as Business Data, then we can specify that here. Otherwise, we can click Next. 6. This final step is where we have the option to select which environments our policy is going to apply to, as shown in Figure 21.13. As a tenant administrator, you can choose to apply your policy to all environments. If you’re an Environment Admin, then you can select which environments to apply your policy to:

Chapter 21

611

Figure 21.13: Selecting the environment

Once saved, the data policy becomes active in the relevant environments, and so applies to all users who are using Power Apps and Power Automate. If anyone then tries to create an app or a flow that mixes the connectors, they will see an error message displayed, informing them that their actions contradict the data policy for that environment. If there are any apps or flows that are using an invalid combination of connectors, the flows will be disabled, and the apps will stop working. So, if you do apply a policy retrospectively to an environment, ensure that your users are aware that it is going to be applied so that they have time to change their apps and flows. Then remind them, once it’s been applied, so that they can test and fix any apps or flows that they may have missed. Once your data policies have been created, they should then be reviewed on a regular basis to ensure that any new connectors that are added to Power Apps are correctly classified as either business data or non-business data, as well as any actions that are associated with them.

Summary In this chapter, we have looked at environments, with a key focus on what environments are and how they are created, as well as how they can be used to apply security and data policies. Environments are a key piece of technology, particularly in organizations that need to compartmentalize apps and flows or begin looking at a full application lifecycle.

Exploring Environments and Data Policies

612

Therefore, a lot of organizations now use environments as a way of being able to separate development, test, and production apps and flows, allowing only specific users to create assets in each environment, depending on their role. We looked at the key types of environments that can be created from within the Power Platform admin center: trial, developer, sandbox, and production. Trial environments last for 30 days and give access to the full range of functionality available to the Power Platform, but are only available to a single user. Developer environments belong to those users who have signed up for the Power Platform Developer plan, where each user is able to create their own developer environment. Developer environments are the perfect temporary area to allow users to trial functionality within the Power Platform without any risk to live apps. Sandbox environments are intended for organizational development, and finally, production environments are the home to any business-critical and permanent solutions. Other than trial environments, all the other types will remain within your tenancy until deleted. We saw how environments allow us to configure data policies that govern which connectors can be used together. There are three categories that can be applied to the connectors: Business, Non-Business, and Blocked. If a connector is classed as business data, then it cannot be used alongside a connector classified as non-business —for example, you cannot use SharePoint and Twitter connectors together. All these elements—environments, security, and data policies—are designed to help you provide as much protection for your environment as possible. You can—and it is recommended that you should—consider all of these within any governance plans that you have in place for Microsoft 365.

Questions 1. How many environments do you have created within your tenancy by default? 2. What are the types of environments that can be created? 3. In a Dataverse-enabled environment, what would you create to apply and manage permissions for a group of users in an Azure AD Security Group? 4. How long does a trial environment last for? 5. Within a data policy, what are the three classifications that can be applied to a connector? 6. What is the key difference between Power Platform data policies and Microsoft 365 DLP policies?

Chapter 21

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

613

22

Introducing the Future of Power Apps You can probably tell from the topics that we have covered throughout the book that Power Apps is a progressive platform, with new features being added, interfaces being improved, and updates constantly landing. All of these make Power Apps a great place to be working, not only because of the excitement of what these changes mean but also because Microsoft is constantly striving to bring the latest and greatest technology to business users. The biggest subject for everyone throughout 2022 and 2023 has been the mainstream introduction of artificial intelligence. In this chapter, we are going to look at one of the most exciting additions to Power Apps, the introduction of Copilot. By the end of this chapter, you will gain an understanding of the following: •

How artificial intelligence is becoming more mainstream within our working lives

•

How Copilot is going to help you in the future

•

How you will be able to use Copilot once its rollout is complete

Let’s begin by talking about what Copilot is.

Introducing Microsoft Copilot There is a huge buzz around the concept of Copilot in the Microsoft community, and with the widespread implementation of Copilot throughout Microsoft 365, it’s hard to not get excited.

616

Introducing the Future of Power Apps

In 2022, a company called OpenAI became known globally for launching a web-based service called ChatGPT. Building on over a decade of experience of building AI models and mining data, ChatGPT introduced the concept of interactive chat with a bot that answered the questions that you asked of it. Based on deep learning, this brought a difference to the way that we as users find information. Where we are usually sign-posted to a website to consume information, instead, it presented an answer to us in natural language based on the content that it had crawled. Similar models were also launched to allow for the creation of AI art, Dall-E as an example, where I could describe what I want and AI would generate a completely unique image for me. At the start of 2023, Microsoft announced a multi-billion-dollar partnership with OpenAI, building upon previous investments to accelerate the rate at which the advancement of AI breakthroughs could be made. This was the start of the Copilot journey. With the new AI-powered experiences available, it was only a matter of time until these AI models began to have an impact on Microsoft 365 and the Power Platform. What we already know is: •

AI is going to be added to Microsoft Teams to summarize and generate notes from meetings

•

Copilot is being added to SharePoint for easier generation of sites and content

•

Copilot is being added to Power Automate for easier creation of flows and formulas

•

And as you can imagine, it’s also being added in many more places around the Microsoft stack

Microsoft released an article describing more of the use cases in March 2023, which you can read here: https://www.microsoft.com/en-us/microsoft-365/blog/2023/03/16/introducingmicrosoft-365-copilot-a-whole-new-way-to-work/

What we are most interested in is that it is being added to Power Apps. So, what does it mean for Power Apps?

How Copilot in Power Apps will help you Copilot is simply an AI-based assistant for helping to build apps in Power Apps. Certainly, for the next few years, it is not going to be a replacement for human intelligence, but where it will help us is by allowing us to speed up our development process.

Chapter 22

617

On a personal note, I should point out that the reason that this chapter is located after we have learned to do everything manually is you will still need to develop the core skills for developing apps in Power Apps. But as you grow in your confidence, using Copilot to give you an accelerated start is going to be a game changer, especially given that you will still be comfortable in going back into the screens, the controls, and the formulas and changing the generated content to be exactly what you want. Ultimately, this is exactly what Copilot is going to be, an assistant. A service that is there for you to be able to make yourself more productive, to increase the speed at which you can create apps, to provide suggestions for where you could improve, and to help you to remove some of the more common errors that we all make regardless of how long we’ve been developing. So, now that we’ve set the scene, let’s talk more about how it is going to work.

Using Copilot in Power Apps At the time of writing, Copilot in Power Apps is still in limited trial. However, if you create a new Dataverse environment with the United States as the location, then you can benefit from the preview version that has been made available. Let’s work through a basic example: 1. When we load the Power Apps portal (make.powerapps.com) in the North America geo, Copilot is the very first thing that we see. But it’s not labeled as Copilot; it is simply a chat box that asks you to describe what you want to do. This is the whole basis of Copilot, natural language being used to create an outcome.

Figure 22.1: Copilot chat box on the Power Apps home screen

618

Introducing the Future of Power Apps

2. For us to be able to test Copilot, we will build an app that allows us to track the number of miles that we spend on journeys in a car. The difference is that we are going to build it by using natural language. So, we can tell Copilot “I want to track my car journeys” and then press Enter to start the process:

Figure 22.2: The Copilot chat interface with natural language providing the command

3. When you press Enter, you will then be taken to a creation wizard, which is where you can continue to chat with the AI chat bot to add further information. You will be able to see on the screen that it is generating a data table in Dataverse.

Please note that at this time, Copilot is focused purely on the creation of data structures within Dataverse, and won’t currently be supported on SharePoint.

Chapter 22

619

4. On the first pass, it will create start and end dates, tracking of locations, and even a distance column:

Figure 22.3: The Create an app screen showing the table structure and the ongoing chat

5. Notice that it has even provided some test data for you to illustrate how your model is going to work. We also have the chat box on the right side of the screen to ask for more information.

620

Introducing the Future of Power Apps

So, as an enhancement, maybe we want the distance to be in both miles and kilometers, so once again, we can ask the bot to make that happen:

Figure 22.4: Using natural language to further develop the data structure

6. The result? It has created two columns for me to measure the distance, one for miles and one for kilometers:

Figure 22.5: The result of asking Copilot to create an additional column

Chapter 22

621

7. You could also try asking it to add more columns, and even more test data. You can keep talking to the bot until you’re happy with your data structure, and then when you’re ready, you can click the Create app button to leave Copilot and start working on the canvas app:

Figure 22.6: A canvas app that has been generated from Copilot

This is really the start of the journey of Copilot and how it is going to be used within Power Apps, but where will it be going next?

What’s next? So far, Copilot is very much giving us a taste for the creation of the underlying data model and a basic app using natural language. The roadmap is also very clear that conversation AI will also become available for us to use in our apps too, allowing for more ways for users to query and interact with their data.

Introducing the Future of Power Apps

622

A new Copilot control for Power Apps will be introduced, which will allow users to interact with their data through the chat experience within the app itself. Again, this brings the use of natural language into play, where someone can describe what they want to see or do and artificial intelligence will be able to build the queries on demand.

Figure 22.7: An early view of the Copilot control that will be available to canvas apps

As the development of Copilot continues, there will be more and more added – suggestions, improvements, and even assistance for those annoying red underlines that take us time and effort to resolve.

Summary The introduction of Copilot into Microsoft 365 and the Power Platform is a giant step forward for all business users in terms of how they interact with the various services that they use on a dayto-day basis. It is also a great show of strength in the partnership between Microsoft and OpenAI, who are trying to accelerate the rate at which new AI experiences are brought to the business user. Copilot is being added to multiple services, most notably to Power Apps, which is going to allow us to generate data models and apps by simply describing what we want to an AI-driven chat bot. This means that we can use natural language to build the foundations of our apps rather than building everything from scratch, which ultimately is going to save us time. We should remember that Copilot is going to be there as an assistant, not a replacement for human intelligence. We still need to build on and maintain all of the skills that we have learned throughout this book, as Copilot is not, and may never be, capable of building an entire app with every single experience just through natural language.

Chapter 22

623

It is also still in preview at the moment, but those of you who have a North American environment should already be seeing the Copilot chat interface. If you don’t, then create a new environment with United States as the location, and you can also take part in the public preview.

Questions 1. Who is Microsoft partnered with to drive forward these AI-based experiences? 2. Where do I need to create an environment to take part in the preview? 3. Where will my Copilot-generated app store its data? 4. How do I tell Copilot how my app should be built? 5. What language do I use to communicate with Copilot?

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

23

Good Practices for Creating Power Apps

Throughout this book, we have focussed on the technical elements of creating apps, covering everything from data sources to controls and user interactions. Knowledge of all these topics will certainly help you to get a good grasp of creating apps, but there are many other considerations that should be considered to help you create amazing apps each time, with reduced rework and the frustrations that come with that. To wrap things up, I’m going to share the key things that I believe should be thought about when creating your apps. This is very subjective, and you may find your own ways of doing things, but this will get you started. We will cover: •

Security – thinking about it sooner rather than later

•

Data sources – considering your options before deciding on the one to use

•

User journeys – putting yourself in the shoes of your users

•

Wireframes – saving yourself time by considering your layouts

•

Design – ensuring engagement by making it visually appealing

•

Reusability – how you can avoid reinventing the wheel

•

Updates – consider how you’re going to manage your improvements

Let’s start with my first consideration, which is the security of data.

Good Practices for Creating Power Apps

626

Don’t leave security until last For me, the most important consideration that should be thought about is the security of the underlying data. Too many times I have seen apps created without the necessary thought about what protective measures should be applied to the data. Is there a risk if any of the data that I’m storing can be seen by other members of the organization? Do I need to lock that data away somewhere that gives me the utmost control over what goes into it? Do I need to configure permissions for each row or record in a table? Or do I need to go lower than that and apply security to a column? They’re all questions that you need to ask. Secure by design is a key development principle that we should all be working toward. Creating an app and then trying to shoehorn security in afterward is extremely difficult, as I guarantee you’ll need to go back and make some quite fundamental changes. Whether those changes are to the data source itself, or whether you need to start building lots of checks into your app, you will inevitably end up doing more work to achieve the right level of security. The danger with doing it afterward, workload aside, is that you will start to look for workarounds, or ways of hiding the data rather than securing it. I’ve seen this so many times, where apps have been developed and the data has been obscured, or hidden, rather than secured. You will often hear the term “security through obscurity,” which is generally what happens when you don’t adopt a secure-by-design approach. If you are unsure about the implications of your data being seen, then it is worth speaking to your Security Officer, if you have one, or if dealing with personal data in the European Union, your GDPR specialist, to get their views on it. Remember that data is the most important commodity in an organization, so we have to apply the right protective measures to ensure that it is only used for the correct purpose.

Key point: Obscurity is not security. Make your apps secure by design.

Once we have our security requirements understood, we can then begin to think about the data sources that are going to support our development, thinking all the while about how your data source can help you achieve your security objectives.

Chapter 23

627

Consider your data source options carefully One of the great things about Power Apps is that we can use a multitude of different data sources, but we have to be constantly aware of the advantages and disadvantages of each. Personally, I have a method of escalation for my various data sources that helps me to find the right tool for the job.

Excel Excel is where I tend to start a lot of my developments, although realistically I never consider this as a data source for anything in production. The risk of the file accidentally being deleted, the lack of control over each row, plus issues with a lack of simple data validation carry far too much of a risk for me. Where Excel does really play a part in my development, though, is for quick and easy modeling of my data structures. Using Excel, I plan out my various tables of data, along with any columns of data that could be included within the table. I don’t worry about relationships at this point, but having my data mapped out will help me to identify where they could come in later. When it comes to agreeing on a data structure with end users, Excel again is a great tool because I can make the sweeping assumption that almost everyone knows how to use Excel. This makes getting the initial agreement for the data structure much quicker and easier to get signed off. While Excel can be used as a data source, even though it can store a million rows of data, due to some of the issues I mentioned earlier, I would never use Excel as my data source. Instead, the first step on my journey is to think about whether SharePoint lists will allow me to store my data in the right way.

SharePoint Using SharePoint as a data source is one of the most common methods of storing data for Power Apps. It’s part of almost every Microsoft license pack, and with the changes to its interface, Microsoft has made the process for creating new lists almost as simple as creating columns within Excel. Where SharePoint has a major advantage over Excel, in the first instance, is that you can very simply enforce the integrity of your data through the field creation process. This way, if you select a date column, you know you are going to see a date in that column.

628

Good Practices for Creating Power Apps

Having version control, the recycle bin, and the ability to apply security to each row (up to 10,000 rows) ensures that your users are only going to be accessing the rows that they should be. But we must keep in mind that the permissions model for SharePoint is quite simplistic, where I can secure the site, the list, or the list item. For my users to be able to see data, they need to be able to access the data source, so unless you go to great lengths to obfuscate the data, there’s always the possibility that a user could navigate to the underlying data through SharePoint. SharePoint can handle simple relationships, handling simple one-to-many relationships from one list to another, but more complex relationships mean you’re going to struggle. So as soon as I need more complex relationships, or need more control over my data, then I start to look at Dataverse.

Dataverse I’m not going to lie to you – it took me quite a while to warm to Dataverse. As a long-standing SharePoint consultant, for a long time I was in the camp of SharePoint rather than Dataverse and would always try to find every excuse possible to just use what I’d been using for years. Now that I understand where Dataverse adds value, it is a huge part of my arsenal when I’m putting new solutions together. When I need a data structure that will handle more complex relationships, or more often where I need to employ a more complex security model, e.g., column-level security, then I look to Dataverse. The interface, I personally don’t find quite as intuitive as those of SharePoint or Excel, but the power that I can unlock more than makes up for it. Even the usual taboo subject of the additional cost to use Dataverse as a data store becomes less of an issue when you start to explain where the additional value of the platform can be realized. What we need to remember, though, is that Dataverse is a no-code/low-code platform, and therefore if I need more in terms of the functionality, e.g., writing stored procedures or other database-driven functionality, then we need to look higher again, and for that, we would look at an enterprise database management system such as SQL Server.

And, not or One of the biggest areas of clarity that I’ve personally gained over the last few years is that I need to adopt a position of and, not or. What does this mean? It means that I don’t have to see each of my data sources as black and white: I can use SharePoint, or I can use Dataverse. As much as possible, I now use the word and.

Chapter 23

629

As an example, I recently created a solution that required lots of data to be stored in a secure area, but needed to generate documents that could then be collaborated on before being sent to a customer. The old me would have thought, I’ll just do it all in SharePoint, hide the sites and lists as much as possible, and then I can store the data and the documents together in one SharePoint site. Don’t get me wrong – there are times when this approach still works. However, having learned the strengths and weaknesses of each platform, I know that Dataverse is extremely good at storing and managing data securely. I know that SharePoint is extremely good at document management and collaboration. Therefore, my solution became a combination of both sources, where my data was being managed and stored in Dataverse, but all of the documentation was stored and linked to a SharePoint document library. So, next time you create a new app, challenge yourself not to just accept one platform, but to see if you can create a much better experience by leveraging multiple.

Key point: Think better together! Don’t fall foul of tunnel vision and miss the key advantages of using multiple technologies together.

Now that we have our security considered, and we have a data source defined, we now need to start thinking about planning our way through the app.

Plan your user journey So many times, I have seen the user journey neglected by budding app developers. Again, I’ll hold my hands up and say that sometimes I’m so excited by the prospect of what my app could be, that I just dive straight in and start creating. This has then meant that I’ve ended up missing key considerations about what my user journey through the app is going to be. What I’ve found more useful though is planning the user journey before I start writing. So what does this mean to you as a developer? It means that you need to first consider what the user needs to do to achieve an effect, e.g., my user needs to use the app to create a new entry in a system, or my user needs to use the app to update an existing entry. Once you have your key activities noted, you can then start to plan how the users achieve that. Keep in mind that you don’t need premium tools for a basic journey; quite often, I just use something as simple as PowerPoint with a process flow graphic.

Good Practices for Creating Power Apps

630

For example: •

My user wants to create a new entry; they must click a button to open a new form, which they then fill out, and click a button to save their entry:

Figure 23.1: Process flow for creating a new entry

•

My user wants to update an entry, so they need to be presented with a list of data that they can update, select the relevant entry, open an edit form, and then save their changes using a button:

Figure 23.2: Process flow for updating an entry

There, we have two simple user journeys. But now we need to flesh those out a little more. What happens when the user submits their form? Maybe they go to a success screen before being returned to their main menu. What happens if they change their mind and have clicked New instead of Edit? Planning out user journeys allows you to think about all these considerations and allows you to identify any dead ends, i.e., areas in the app where the user could find themselves without a way of getting back.

Chapter 23

631

You may be lucky enough in your organization to have UX planners or business analysts who are skilled in this area and can do this for you, but if not, the more thought you can give to this upfront, the better the experience is going to be for your user, and for you as a developer too.

Key point: Think about how your user is going to navigate around the app, and where you want them to go after each action.

Once we have our journeys planned out, we can start to imagine how our app is going to work, so let’s start getting some of those thoughts into something a little more visual.

Wireframes Wireframes are an awesome tool for being able to bring your user journey to life, but also for communicating your thinking to your end users. We’ve all heard the saying “A picture paints a thousand words,” and wireframes do exactly that. They allow you to start planning out what screens you will need to achieve the goals defined in your user experience mapping. But now we can delve a little bit deeper and start thinking about how we’re going to lay out the screens. There are tools out there that allow you to develop wireframes, for example, Figma (figma.com), where Power Apps can read the wireframe and construct the app for you. Alternatively, I commonly use something as simple as PowerPoint, with several rectangles on a slide to articulate where I see various controls being:

Figure 23.3: Wireframe for app layout

632

Good Practices for Creating Power Apps

If I am planning a canvas app, then I will go as deep as what controls I want and where, and doing it in a software solution means I can easily move them around. This allows me to identify whether I have too much on my screen, whether my navigation is going to work, and allows me to follow through my screens to make sure that my user journey is achievable. If I am planning a model-driven app, then again, I can plan out what tabs I need, what areas I need on my forms, and where I need sub-grids to show related tables. With your wireframes created, the great thing is that you can then present these to your users and walk them through the journey as well. The earlier you can do this, the more you will be able to identify if you have missed anything from your initial gathering of requirements, or even to align expectations between you and the users to ensure that there are going to be no surprises later on.

Key point: Planning your screens before you start developing will help to avoid rework later.

Everything that we’ve done so far, though, has really been focused on the development of the app. Let’s give some thought to the key thing that our apps are generally judged on – design.

Design Depending on where you are in the world, the importance of design may be the highest priority, or it may be slightly lower. As an example, when I have worked with organizations in Western Europe, the key focus has always been on functionality first and design second. So, as long as it works, making it look shiny is secondary. Here in the UK, we are very quick to judge something based on its appearance, so if the app doesn’t look good, then immediately there’s a negative impression generated. These are very sweeping statements and there will be exceptions to those rules, but the key thing is to be aware of what your users are expecting. Regardless of whether design is a priority or not, we should never underestimate what a good design can do to our app. If we have something that looks and performs well, then we will build engagement, and a nice-looking app can keep users coming back. This doesn’t necessarily mean that you need to start going out and looking for graphic designers, but some nice imagery or nice iconography from sites such as pexels.com or flaticon.com allows you to apply good-quality graphics to your app.

Chapter 23

633

Key point: Keep in mind the sizes of your images; too often I’ve seen apps loading slowly because of the size of some of the pictures being used!

As we build our apps, we should always consider whether we can reuse our functionality.

Develop for reusability – remember to use components Reuse is one of the key concepts of pro-code development and is also an area that I see massively neglected in no-code/low-code environments. This is usually because there are lots of little cottage industries appearing consisting of many organizations, who are all creating apps to solve their own problems. While this is a great thing, there must be a body of people, whether that is a champions network or another group, that can try to break down some of the silos to allow others to see what else is being created. In Chapter 7, Reusable Controls, we looked at the use of components and reusable groups of controls that can be shared with others. While it’s easy for me to say that you should be creating components, putting them in your component library, and using them globally across your organization, in reality it’s a struggle to get this going from the start. While it’s something that you should still strive to do, in the first instance keep building components, even if it’s just for your own use. In a lot of apps, I generally have a consistent header section, so I now have that as a component, which means that I don’t have to worry about creating a header every time. That saves me time and promotes consistency. I have other components that I have created, e.g., a current date calendar component and a countdown timer component, which I’ve used across several apps. Once again, I’ve saved myself time by putting in the extra effort to create these as reusable components so that I don’t have to reinvent the wheel every single time. Now, whenever I develop apps, I’m constantly looking at everything that I do and I ask myself, could I use this again? Could my colleagues use this in the future? This has been a huge time- and effort-saving process, which just needs good habits to be established from the start. It’s always something that I spend time on when I’m teaching Power Apps courses.

Key point: Create once and use forever!

634

Good Practices for Creating Power Apps

Now that we’ve looked at the planning aspect of our apps, and we’ve started developing, we need to consider what’s next. I’m talking about the constant evolution of our apps in the form of updates.

Updates As much as we like to think that we’ve delivered a great app and that we’re never going to work on it again, that’s rarely the case. There are always things that we want to improve. There are always new technologies and methods of working that we want to introduce into our app. There are constantly those “It would be good if…” statements that we get from our users once they start using it. None of these are a bad thing, because if users are suggesting enhancements, then they are engaged! When I’ve instructed courses in the past, evolution and updates for apps are a great topic of discussion. From my personal view, I am all for what I call stabilization of the app, which involves checking where the app has been created, whether it’s working, and whether the processes are running smoothly, and I maybe just carry out some basic maintenance when needed. That being said, what I’m always concerned about is the stagnation of the app; although it still works, it might not be keeping pace with the process changes or ways of working that an organization demands. What happens to those apps? Eventually, they just end up withering away into the background and users start to find other ways of working that are more suitable. Updates and changes are key parts of our app lifecycle. We’ve designed it, developed it, deployed it, and now we must support it. While we’re supporting it, we may also be going back around the design, develop, and deploy cycle to add new functionality, or maybe new additions for AI or mixed reality now need to be included. This can help slow down the stagnation of the app. But remember that this is a live system; therefore, we must consider how and when our updates are made. If you are using solutions in Dataverse environments, then this process is much easier to manage. You develop your changes in a dev environment, export the solution as a managed package, and at an agreed time you import your updated solution into your production environment. The Power Platform then takes care of the rest. Again, from a personal note, this is one of the biggest reasons that I am now using Dataverse and environments much more than ever now – because my lifecycle management is so simple:

Chapter 23

635

Figure 23.4: ALM made simpler with Dataverse environments

But if we’re not using solutions and environments, then we need to give some consideration to how we develop and how we publish our changes. If we’re just modifying an app, and most apps developed will just have that one version, we must consider how our changes are going to impact our live users. Remember, as soon as you publish, your changes are live. In a normal canvas app, you can undertake a lot of testing while you’re in the studio without any impact on the current live version. Therefore, you can follow through with all your main processes and test the key functions that you’ve been working on.

TIP: Remember where your test data is being stored! Even though you may not have published your app, your interactions will still be having an effect.

If you have a tester or someone else who can look at the app, you can even make those people co-owners of the app to test it before clicking the publish button and making your changes live to an organization. The biggest issue, for updates, comes when you’re using Power Apps as a replacement for SharePoint list forms. There is only one place that app exists…on the list. Due to the integration with SharePoint, there’s only one way to fully test it…publish it! Now, over the years, there have been some practices that I’ve put into place to help me reduce the risk of updates to SharePoint list forms, namely duplicating the screen that needs to be changed, and then creating a formula in OnNew or OnEdit to navigate to the dev screen if the user is me.

636

Good Practices for Creating Power Apps

Everyone else will continue working with the normal screen. But even this carries some risk if I need to make changes to the app-level or integration-level formulas. It’s something that you will need to give some consideration to if you are using Power Apps in this way, and there may need to be a conversation in your own organization as to how you want to handle it. Regardless of what we are updating, or how we are updating, the biggest thing to remember is that you need to communicate with your users to let them know something is happening. I’ll hold my hands up that I’ve been caught out by not communicating effectively enough to say that something is happening. If you can manage the expectations of your users, you will avoid a lot of queries or support issues. At the very minimum, I recommend communicating when something is going to happen, what is going to change, what to do if there are any expected issues during the upgrade process, and when the users should expect to be using the system again. It all seems like common sense, but so often this is forgotten, and the resultant user experience begins to erode, because we all like to know what is going on.

Summary While the rest of this book has been very technically focused, this chapter has been very subjective, based on my experience. We have gone through the key areas that I feel all developers should go through when creating apps. We’ve looked at some of the easy ways in which you can design your apps, by first taking into account the key drivers and requirements for a system. The biggest one for me is always security. Giving some thought to not only the security but also the data model means that I can then choose the right storage platform for my data. Remember that you are not limited to one OR another; quite often you may be able to create a better solution by using one AND another. We spoke about the user element of the app, from both a user’s journey through the app and their interactions to the overall look and feel. An app may be functional, but users’ first impressions may be worse than if you’d spent some time thinking about the overall design and making it look engaging. Our biggest win is an app that is used time and again! Finally, we looked at the latter parts of the app lifecycle, development, and updates, and some of the key points to consider through this process. Develop like you’re going to use all your individual parts again, and constantly challenge yourself to build your toolkit so that eventually your apps are just a case of pulling the right components together.

Chapter 23

637

Finally, when you make your changes, consider how you’re going to release them, and don’t forget to communicate with your users! Avoid any unnecessary emails, phone calls, or Teams messages by letting them know when you’re doing something, what is going to change, and what to do if something is not quite right.

My final thoughts We are now at the end of this book, but it is by no means the end of the journey. We have tried to cover as much ground as possible, looking at as many parts of the platform as we possibly can, but there are going to be many more challenges awaiting you. Think of this as passing your driving test. While you’re with the instructor, you’re learning the fundamentals. Once you’re out there on your own driving, then you learn how to drive. The Power Platform has the potential to help people from all walks of life and all aspects of business, which makes it such an important part of the Microsoft ecosystem. To avoid it or to be ignorant of it is so limiting because everyone should be able to take hold of it and resolve their day-to-day problems. Why should we suffer from poor data when a simple form can help us capture information accurately and effectively? Why should we do the same repetitive tasks when we could automate them? A lot of the time, the answer to both questions is because I didn’t know where to start. You have now taken your first steps. Now you need to apply your learning to your life and start reaping the benefits of what this technology can bring. Finally, from myself and on behalf of the whole team that has been involved in bringing this together, I’d like to thank you and wish you all the best for your future using Power Platform.

Join our community on Discord Join our community’s Discord space for discussion with the author and other readers: https://packt.link/powerusers

Appendix Answers Chapter 1 1. What are the three app types that we can build? Canvas app, model-driven app, Dataverse for Teams app. 2. What is the name of the underlying database? Dataverse. 3. What is used to bridge Power Apps and Power Automate to other services? Connectors. 4. Which type of app gives you full control over the layout of your components? Canvas app. 5. Which type of Power Apps license do you have with Microsoft 365? Seeded license. 6. What URL allows us to directly access Power Apps? https://make.powerapps.com.

7. For an app to be classified as an Org app, who must it be shared with? Everyone in the organization. 8. True or false: You can access Power Automate from the Power Apps portal. True. It is located on the More menu.

Appendix

640

9. What is the name of the text bar across the top of the studio where you can type your formulas? Formula bar.

Chapter 2 1. What are the two formats of canvas that can be created within Power Apps? Phone and tablet 2. Which canvas allows you to define custom dimensions? Tablet 3. Which app setting would you go to in order to change the icon of your app? The App icon setting in the App settings menu 4. Which set of features should you test on a regular basis to ensure that your app will continue to work? Preview features 5. Which option should you set so that your app rotates when the device rotates? Lock orientation to off

Chapter 3 1. Which user experience does SharePoint need to use to allow auto-generation of an app? SharePoint modern experience 2. Which canvas is the app generated on? Phone canvas 3. What do I need to do to allow users to use my new form? Publish the app 4. What is the key addition to the screens picker on the left-hand side of the screen? SharePointIntegration

Appendix

641

5. True or false: Managed Metadata fields are fully supported by Power Apps. False 6. If I wanted to change which form was used by SharePoint for editing, where would I go? To Form Settings, under General Settings

Chapter 4 1. What information do I need to provide to the SharePoint web part to render the Power App? The App ID or the App Link. 2. How is an app identified as being the current version that users are actively using? It has a Live badge against it in the version history. 3. Can I add a sample app to a Microsoft Teams channel? Yes. 4. Is the Power Apps app available for Android? Yes, the Power Apps app is available for Apple and Android devices. 5. What would I do to create the illusion of having the app installed locally on the device? Create a shortcut on the home screen. 6. True or false: A Power App can be installed on a classic SharePoint page. False. 7. If I have three versions of an app, that is, 1.0, 2.0, and 3.0 (live), what happens if I restore version 2.0? It becomes version 4.0, but remains in a draft state.

Chapter 5 1. Which control allows you to capture either a number or a string of text? Text box input.

Appendix

642

2. What is the maximum value for the rating control? 200. 3. Why would you use a dropdown control over a list box control? A dropdown takes up less estate on your canvas than a list box. 4. What is the main difference between a combo box and a dropdown? A combo box combines a text input with a drop-down interface allowing you to search within the control. You can also have multiple lines of data being displayed about the selection. 5. What can I use to build up visual effects within my App? Geometric shapes are used to build up the visuals in your app. 6. What two values can a checkbox take? Checked/unchecked (true or false). 7. Which control should I use to capture a signature from a user? Pen input.

Chapter 6 1. In the following date format, dd mm yyyy, what does mm return? The month 2. If you see the following logical operator, &&, what does it mean? And 3. If I had multiple outcomes from a single condition, what would be the best function to use? Switch

4. What would I use to validate a string against a known pattern? Regular expressions 5. Cos, Sin, and Tan are examples of what type of function? Trigonometry

Appendix

643

6. What would precede any comments that I am put into my formula? Two forward slashes, // 7. What are the two results that can be returned from an If statement? True or False

8. What type of variable would I use if it is only going to be used on one screen or manually passed to another? Context variable (also commonly referred to as a local variable)

Chapter 7 No questions

Chapter 8 1. What two formulas that are available within Power Apps can you use to populate a collection with data? Collect and ClearCollect.Collect

2. Which control offers the quickest way to create an edit form for an item of data? Edit form, from the Insert control view 3. Which control allows you to define a flexible, repetitive design for each record or item of data? The Data table control 4. Which formula should you use to update a record in a data source or collection? A patch formula 5. Which formula should you use to submit a form control back to the data source? A SubmitForm formula

Chapter 9 1. There are two types of built-in connector. What are they? Standard and Premium

Appendix

644

2. True or false: Custom connectors can be created from a URL to an OData file. True 3. True or false: I can use an Excel workbook stored on a filesystem as a data source. True 4. True or false: Azure AD can be used as an authentication method when defining a custom connector. True 5. What is the name of the free tool that can be used to test an API? Postman

Chapter 10 1. Why should a signal be captured rather than used directly in a formula? To avoid unnecessary drain on the battery 2. What three pieces of data will the location formula retrieve? Latitude, longitude, altitude 3. How is direction expressed when using a compass? In degrees 4. What function can be used to disable GPS? Disable(Location)

5. Why would you not leave location services on permanently? To avoid your app consuming a lot of power from the device

Chapter 11 1. True or false: I can upload a .jfif image into my app. False 2. Which control would I use to be able to upload an image into an app? The add media control

Appendix

645

3. If I wanted to use the Camera1.Photo formula, which control would I interact with? The camera control 4. If I wanted to use another control to interact with the camera, which camera property should I change? StreamRate

5. What format is a captured image stored in? Base64 string 6. True or false: Text within a QR code can be retrieved and used within an app. True

Chapter 12 1. What is the name of the global store of users within the Microsoft cloud? Azure Active Directory 2. True or false: The security of the data is managed purely through the app. False. Its security is managed on the data source. 3. True or false: When using SharePoint as a data source, the user needs to have full control rights to the underlying SharePoint site. False. They only need the minimum levels of access to perform the actions, for example, Contribute. 4. Access lists can be added to the app and stored in what type of data storage? Collections

Chapter 13 1. What function would I use to check whether an app is connected to the internet? Connection.Connected

2. True or false: My Power Apps app can detect whether the app is using a metered connection or not. True

Appendix

646

3. Which function is used to save data from Power Apps to the local device? SaveData()

4. Which function is used to load data from the local device? LoadData()

5. True or false: A data file from one app in Power Apps can be used in another on the same device. False 6. True or false: Devices have an unlimited amount of space available to them to store local data. False

Chapter 14 1. Microsoft Power Automate is built on another Microsoft technology. What is it? Azure Logic Apps 2. What is the intended user base for Microsoft Power Automate? Business users 3. There are three types of triggers. What are they? Automated, manual, scheduled 4. What trigger should I use to request data from Power Apps? Power Apps (V2) 5. What action should I use to return data from Power Automate to Power Apps? The Respond to an App or Flow action 6. True or false: Power Automate can integrate with third-party data sources, not just Microsoft. True

Appendix

647

Chapter 15 1. What two Azure services that were mentioned in this chapter can we use to host custom code? Azure Functions and Azure Automation runbooks 2. What URL do we use to access Microsoft Azure? https://portal.azure.com

3. What native connector is available to Power Apps that allows us to interact with Azure Functions? HTTP, but it needs to be called from Power Automate 4. Which service provides us with an amount of free processing time so that we can run scripts? Azure Automation 5. If we wanted to write functionality using Node.js, what service would we use? Azure Functions

Chapter 16 No questions

Chapter 17 1. What are the four types of AI models we can use? Text, documents, structured data, and images 2. True or false: All models in AI Builder use the same number of AI Builder credits to process the data. False 3. What are the three models that have pre-configured controls in Power Apps? Business card reader, receipt processor, and text recognizer

Appendix

648

4. What is the name given to the box that highlights the data discovered by a model? Bounding box 5. How many documents should you have ready for training your model? 10

Chapter 18 1. True or false: Dataverse allows us to create applications without coding? True 2. What are the two fundamental containers into which we can begin to structure our data model? Environments and solutions 3. How many environment types are there? Six: Default, Production, Sandbox, Trial, Developer, and Dataverse for Teams 4. How can you connect a dataflow with an on-premises service? Installing a data gateway and afterward selecting it in the connection credentials from our dataflow. 5. What are the differences regarding licensing between Dataverse and Dataverse for Teams? Dataverse for Teams can be used with one standard Microsoft 365 subscription with Power Platform capabilities while Dataverse needs one Power Apps premium license besides.

Chapter 19 1. What types of apps can use Dataverse as a data source? Both model-driven and canvas, but model-driven can only use Dataverse as a data source. 2. What do we need to create before being able to use Dataverse? A Dataverse database 3. What are the primary data structures within Dataverse called? Tables, columns, and relationships

Appendix

649

4. What types of relationships can be created between tables? Many-to-one, one-to-many, and many-to-many 5. True or false: The schema name of a column can be changed after it is saved. False, only the display name can be changed after saving.

Chapter 20 1. Where is the data for a model-driven app stored? In a Dataverse relational database 2. What are the four key components created within a model-driven app? Views, forms, dashboards, and charts 3. What can I do within a view to display a predefined subset of data? Filter the columns 4. What is the recommended three-step process to create a model-driven app? Model your data, define the business processes, and create the app. 5. What control allows users to interact with data? A form

Chapter 21 1. How many environments do you have created within your tenancy by default? By default, every tenancy has one environment 2. What are the types of environments that can be created? There are four types: sandbox, developer, production, and trial 3. In a Dataverse-enabled environment, what would you create to apply and manage permissions for a group of users in an Azure AD Security Group? A security role 4. How long does a trial environment last for? 30 days

Appendix

650

5. Within a data policy, what are the three classifications that can be applied to a connector? Business, Non-Business, and Blocked 6. What is the key difference between Power Platform data policies and Microsoft 365 DLP policies? Microsoft 365 DLP policies protect data, whereas Power Platform data policies define how the Power Platform can interact with data.

Chapter 22 1. Who is Microsoft partnered with to drive forward these AI-based experiences? OpenAI 2. Where do I need to create an environment to take part in the preview? United States 3. Where will my Copilot-generated app store its data? Dataverse 4. How do I tell Copilot how my app should be built? Through the use of a chatbot 5. What language do I use to communicate with Copilot? Natural language

Chapter 23 No questions

packt.com

Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe? •

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

•

Improve your learning with Skill Plans built especially for you

•

Get a free eBook or video every month

•

Fully searchable for easy access to vital information

•

Copy and paste, print, and bookmark content

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Other Books You May Enjoy If you enjoyed this book, you may be interested in these other books by Packt:

Workflow Automation with Microsoft Power Automate Second edition Aaron Guilmette ISBN: 9781803237671 •

Learn the basic building blocks of Power Automate capabilities

•

Explore connectors in Power Automate to automate email workflows

•

Discover how to make a flow for copying files between cloud services

•

Configure Power Automate Desktop flows for your business needs

•

Build on examples to create complex database and approval flows

Other Books You May Enjoy

654

•

Connect common business applications like Outlook, Forms, and Teams

•

Learn the introductory concepts for robotic process automation

•

Discover how to use AI sentiment analysis

Other Books You May Enjoy

655

Microsoft Power Apps Cookbook Second edition Eickhel Mendoza ISBN: 9781803238029 •

Learn to integrate and test canvas apps

•

Design model-driven solutions using various features of Microsoft Dataverse

•

Automate business processes such as triggered events, status change notifications, and approval systems with Power Automate

•

Implement RPA technologies with Power Automate

•

Extend your platform using maps and mixed reality

•

Implement AI Builder s intelligent capabilities in your solutions

•

Extend your business applications capabilities using Power Apps Component Framework

•

Create website experiences for users beyond the organization with Microsoft Power Pages

Other Books You May Enjoy

656

Microsoft Power Platform Enterprise Architecture Second edition Robert Rybaric ISBN: 9781804612637 •

Understand various Microsoft Dynamics 365 CRM, ERP, and AI modules for creating Power Platform solutions

•

Combine Power Platform capabilities with Microsoft 365 and Azure

•

Find out which regions, staging environments, and user licensing groups need to be employed when creating enterprise solutions

•

Implement sophisticated security by using various authentication and authorization techniques

•

Extend Microsoft Power BI, Power Apps, and Power Automate to create custom applications

•

Integrate your solution with various in-house Microsoft components or third-party systems using integration patterns

•

Migrate data using a variety of approaches and best practices

Other Books You May Enjoy

657

Packt is searching for authors like you If you’re interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Share your thoughts Now you’ve finished Learn Microsoft Power Apps, Second Edition, we’d love to hear your thoughts! If you purchased the book from Amazon, please click here to go straight to the Amazon review page for this book and share your feedback or leave a review on the site that you purchased it from. Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Index A actions 372 using , in Power Automate 379-382 Active Directory Domain Services (ADDS) 411 Add picture control using 317, 318 AI Builder 468 licensed 469, 470

app navigation, in model-driven app reference link 578 App OnStart formula 459 app settings, Power Apps Studio Display settings, modifying 48 General settings, exploring 45 modifying 44, 45 Support settings, using 54 Upcoming features, accessing 53

AI capabilities exploring 470-472

Apps screen 15

AI models types 468 reference link 468

asset creating 299-304

alternate keys, creating with Power Apps reference link 513

auto-generated Power Apps app browse screen 69 detail screen 70 edit screen 70, 71 exploring 68, 69

app creating, from SharePoint 64 maps, placing into 288 Power BI, embedding 451, 452 publishing 76, 77 setting, to respond to permissions 347-349 application lifecycle management (ALM) 503 Application Protocol Interface (API) 269 app manifest 110 exporting, from Power Apps 110-113

artificial intelligence (AI) 467

Azure Active Directory (AAD) integrating with 411-415 Azure Active Directory (AAD) security groups using, to apply in-app security 332-339 Azure Automation 415 implementing 415, 416 runbooks, creating 422-424

Index

660

Azure Automation account creating 416, 417 credentials, storing 419, 420 modules, installing 418, 419 preparing, for use 417, 418 variables, storing 422 Azure Automation, in Power Apps CreateJob function, using 424, 425 job’s output, obtaining 425, 426 using 424 Azure Functions 426 creating 431-434 queues, using with 427-429 using 426

B barcode data capturing 323, 324 barcode scanner 318-322 control 318 best pratices, for creating Power Apps data source options, considering 627-629 design 632 reusability 633 security, considering 626 updates 634-636 user journey, planning 629-631 wireframes 631, 632 Binary Large Object (BLOb) 131 Bing Maps Power App controls, used for mapping parameters 291, 292 reference link 288, 304 using 288-290 blank phone app creating 55, 56

identity, creating 57, 58 saving 58, 59 Boolean controls 140 Check box 140, 141 Toggle 141 business workflow 372 buttons 132

C Camera control capturing, from icon 316, 317 image, capturing 313-316 using 312, 313 Canvas apps 8, 9 Power BI report, embedding into 457, 458 channels 104 chart 149 creating 573, 574, 587 displaying 462-465 chart controls column chart, using 439-445 line chart, using 445, 446 pie chart, using 446-451 using 438, 439 ChatGPT 616 Check box 140, 141 Default property 140 Text property 140 cloud flow creating, from templates 373-375 cloud storage advantages 495, 496 collections 230 filling 230-232 updating 233-235

Index

column chart using 439-445 Combo box 136, 137 DefaultSelectedItems property 136 IsSearchable property 137 Items property 136 SearchFields property 137 SelectMultiple property 136 Common Data Model (CDM) table, exploring 540, 541 Common Data Service (CDS) 491 component library components, updating 217, 218 component, using 215, 216 creating 213, 215 using 212, 213 components 202 adding, to screen 210-212 basic properties 204 creating 202, 203 custom properties, creating 205-207 property defaults, setting 208, 210 scope 207, 208 conditions if statement 181 switch statement 182, 183 using 181 connection indicator adding 362, 363 connection state detecting 354 connectors 240, 265 creating, from within Postman 282, 283 custom connectors 270 premium connectors 269

661

reference link 269 standard connectors 266-268 Container control 144, 145 Align property 145 Direction property 145 Horizontal property 145 Justify property 145 Vertical Overflow property 145 Wrap property 145 context variables 184, 185 controls 123, 124 data controls 146 icon controls 150-152 input controls 131 properties 124 text controls 125 Copilot 615, 616 Copilot control 622 Copilot in Power Apps 617 using 617-621 custom connectors 270, 514 creating 271, 272 Definition tab 276-279 General tab 272-274 reference link 515 Security tab 274, 275 Test tab 280 custom model creating 477-485 using 485, 486 custom properties creating 205-207

D Dall-E 616

Index

662

dashboards creating 573-576, 588

data table control data, displaying in 238-240

data 438 adding, to offline cache 364, 365 columns, creating 545, 546 displaying 236 displaying, in Data table control 238-240 displaying, in gallery 236-238 formatting 458-462 modeling 541, 554-562 returning, to Power Apps 385, 386 securing 328 table, creating 541-544 table relationships, creating 547-549 usage 438

data transformations 508

database creating 551-554 data controls 146 chart 149 form 148 gallery control 146, 147 media control 148

Dataverse 329, 492, 493, 628 benefits 497-499 security, managing without 600, 601 security role, working with 602 Dataverse, data types reference link 540 Dataverse for Teams 515-519 Dataverse for Teams versus Dataverse reference link 516 Date picker 133 DefaultDate property 133 Format property 134 Language property 134 Start Year property 134 dates calculating 179, 180 formatting 178, 179 working with 177 Default environment 503

dataflows 508 migrating with 523-526 reference link 512

design 632

data gateways 514

developer plan 6, 7

data migration 508-515

DevOps reference link 415

data policies 607, 608 creating 609-611 data source connecting to 240-243 updating 322, 323 updating, to capture and store location data 298, 299 using 330 data storage solutions 494

Defaults keyword 234

direct-attached (DAS) 494 Display settings modifying 48 phone app, using 49-51 tablet app, using 52 distinct function in Power Apps reference link 459 Dropdown control 134-137

Index

Default property 135 Items property 135 Selected property 136 dynamic content 380

E environment 499-503, 596 creating 597-600 viewing 597 working with 499 Environment Admin 600, 601 Environment Maker 600, 602 environments license reference link 503 environments security setting 600 managing, without Dataverse database 600, 601 working, with Dataverse database 602 environments types Developer 598 Production 598 reference link 499 Sandbox 598 Trial 598 Excel 627

F Figma reference link 631 filter query 402 Find function 170 flows 370 actions 372 calling, within Power Apps 387-390 creating 375-378

663

creating, through Power Automate service 373 testing 382-384 triggers 372 foresight 438 forms 148 creating 570-573 customizing 71-74 customizing, advanced options 75, 76 mode, modifying 245, 246 modifying 74 state, modifying with formulas 247 submitting 247, 248 types 570 using 243-245 formulas 162 key rules 162, 163 using 166 function bar using 164-166 function browser 163, 164 functions 162

G gallery 236 data, displaying in 236-238 gallery controls 146, 147 flexible height 146 horizontal 146 vertical 146 General settings app icon, setting 46, 47 app name and description, modifying 45, 46 autosave function 47 exploring 45 other settings 48

Index

664

geographic position capturing 296 GitHub reference link 415 global variables 183, 184 Google Maps longitude and latitude, used for mapping parameters 294, 295 using 292, 294

H

input controls 131 Boolean controls 140 buttons 132 Date picker 133, 134 multiple choices 134 numerical inputs 141 input properties 205 insight 438 integrated development environments (IDEs) 426 integration 372

hindsight 438

international dateline 296

Home screen 12, 13 Horizontal control 315

ismatch patterns reference link 173

HTML Color Picker reference link 273

L

HTML text control 128, 129

I

lab, activity database, creating 551-554 data, modeling 554-562

icon capturing from 316, 317

layering 507

labels 125, 126

icon controls 150-152 Fill property 150 OnSelect property 150

Learning Resources screen 13, 14

if function 181

list box 137 Default property 138 Items property 138

image control 315 images storing, withing Power Apps 312 in-app security applying 330 applying, with Azure Active Directory (AAD) security groups 332-339 applying, with locally controlled access lists 331, 332 Infrastructure as a Service (IAAS) 410

line chart using 445, 446

list form app creating 88-90 local data loading, from local cache 356 saving 355 working with 354 locally controlled access lists using, to apply in-app security 331, 332

Index

665

M

N

managed solution 504, 505

navigation adding 307-309

maps displaying 304-307 placing, into apps 288

network-attached storage (NAS) 494 network-based data storage 494

Maps Static API usage and billing reference link 292

non-delegable function 461 reference link 461

media controls 148 Microsoft Azure 410

numerical data using 173

Microsoft Dataverse 491

numerical functions 176

Microsoft Learn reference link 469

Microsoft Power Automate 370, 371

numerical inputs 141 Containers 144, 145 Rating 142, 143 Slider 141, 142 Timer 143, 144

Microsoft Teams Power App, accessing 104

O

Microsoft Teams Power Apps 11

offline cache data, adding to 364, 365

Microsoft Most Valuable Professionals (MVPs) 54

Microsoft Tech Community reference link 14 mobile app creating 38-42 using 113-116 model-driven app 10, 11 building 549-551, 589, 590 creating 576-578 using 579-583 multiple-choice controls 134 Combo box 136, 137 Dropdown control 134-136 List box 137 Radio buttons 138, 140 MyPhotos 314

offline capability implementing 356 online and offline data, synchronizing 360-362 on-start process, implementing 357, 358 working 358, 359 offline data tracking 365 on-premises data gateway, using in Power Platform dataflows reference link 514 OnSelect event 316 OnSelect formula 438 OnStart event 29

Index

666

on-start process implementing 357, 358 OpenAI 616 OpenAPI file 280 importing 281 optical character recognition (OCR) 469

P Patch function 233, 234 reference link 233 Pen input control 130 Mode property 131 Show controls property 131 permissions assigning 344-347 personal workflow 372

images, storing within 312 location, finding 296-298 mobile app, installing 119, 120 mobile app, using 113-116 publishing 94 SharePoint field types 63, 64 sharing, securely 339-341 types 8 version history 95-97 Power Apps application for Teams 517 Power Apps canvas 30 breadcrumb 31 zoom 31 Power Apps Component Framework (PCF) 4 Power Apps form removing 78- 81

Platform as a Service (PAAS) 410

Power Apps licensing 5 developer plan 6, 8 per-app plan 6 per-user plans 5 seeded apps 5

Postman 282 connectors, creating 282, 283

Power Apps, released versions reference link 54

Power App controls used, for mapping parameters 291, 292

Power Apps start screen 12 Apps screen 15 Home screen 12, 13 Learning Resources screen 13, 14

per-user plan 5 pie chart using 446-451

Power App ID obtaining 98, 99 Power Apps 2-4 accessing, through SharePoint Online 97, 98 accessing, through Microsoft Teams 104 adding, to SharePoint 99-103 app manifest, exporting 110-113 basic models, using 473-477 data, returning to 385, 386 direction, finding 298 flows, calling within 387-390

Power Apps Studio 40 formula bar 27, 28 Power Apps canvas 30 Properties area 31, 32 Tree view 28 Power Apps tab adding 105-109 Power Apps Teams app adding 109

Index

Power Automate service flows, creating through 373 Power BI 452 embedding, in app 451, 452 reference link 453 report, creating 452-457 report, embedding into canvas app 457, 458 Power BI Desktop 452 Power BI tile control 452 Power Platform 5 Power Platform admin center reference link 497 PowerShell 415 PowerShell gallery reference link 418 premium connectors 269 prime meridian 296 production environment 503, 507 properties area, Power Apps Studio 32 Advanced tab 34 Properties area 33 Properties group 33

Q queues using, with Azure Functions 427-429

R Radio buttons 138, 140 Default property 139 Items property 139 Layout property 139

667

Rating control 142, 143 Default property 142 Maximum property 142 records navigating through 591, 592 regular expressions (RegEx) 172, 173 Remove function 235 Representational State Transfer (REST) 270 reusability 633 reusable dialog box creating, as component 219-227 Rich text editor 129, 130 Role-Based Security 330 RoundDown function 175 Round function 175 Rounding function 175 RoundUp function 175 runbooks creating 422-424

S Sandbox environment 500, 503 Scalable Vector Graphic (SVG) 129 security 626 managing, without Dataverse database 600, 601 security role 602 assigning, to users or teams 604-607 creating 603, 604 working with, Dataverse database 602 seeded apps 5 segmented solution reference link 507

Index

668

server-to-server authentication (S2S) 602 SharePoint 328, 329, 627-629 app, creating from 64-68 app, launching 194-196 branding variable, creating 187-191 list, preparing within 65 personalization, adding 192-194 Power App, adding to 99-103 SharePoint field types supported, within Power Apps 63, 64 SharePoint Group creating 341-344 SharePoint list creating 82-88 SharePoint List Form apps 11 SharePoint Online Power App, accessing 97, 98 signals 296 Slider 141, 142 Default property 142 Maximum property 141 Minimum property 141 Software as a Service (SAAS) 410 solutions 504-508 exporting 519-522 importing 522 reference link 505 working with 499 SQL Servers 330

Support settings using 54 switch statement 182, 183

T tables 499 tablet app creating 42-44 templates cloud flow, creating from 373-375 text controls 125 HTML text control 128, 129 labels 125, 126 Pen input 130, 131 Rich text editor 129, 130 text input 126, 128 text input controls 126, 128 text interaction 167, 168 regular expressions (RegEx) 172, 173 replace and substitute 168, 169 searching and matching 170, 171 Timer control 143 AutoStart property 144 Duration property 144 OnStart property 143 OnTimerEnd property 143 Repeat property 144 Toggle control 141

standard connectors 266-268

Tree view 28, 29 App selection option 29

storage-area network (SAN) 494

Trial environment 503, 507

strings example 178

triggers 372, 373 automatic 372

Index

manual 372 scheduled 372

U unmanaged solution versus managed solution 504 Upcoming features accessing 53 experimental features 53 preview features 53 retired features 54 updates 634-636 user context 329 user journey planning 629-631

669

V variables 183 context variables 184, 185 global variables 183, 184 reviewing 185, 186 views creating 567-570, 584-586

W What You See Is What You Get (WYSIWIG) editor 129 wireframes 631, 632

Download a free PDF copy of this book Thanks for purchasing this book! Do you like to read on the go but are unable to carry your print books everywhere? Is your eBook purchase not compatible with the device of your choice? Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost. Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.  The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily Follow these simple steps to get the benefits: 1. Scan the QR code or visit the link below

https://packt.link/free-ebook/978-1-80107-064-5

2. Submit your proof of purchase 3. That’s it! We’ll send your free PDF and other benefits to your email directly