An introduction to microsoft power apps

An Introduction to Microsoft Power Apps
How to get started & drive innovation through Power Apps
Mitul Rana
Community Speaker / Microsoft Certified Trainer /Solution Architect

Agenda
•Day 1
•Power Apps Overview
Power Apps Components
•Extended Power Apps Capabilities
•Day 2
•Power Apps Canvas
•Power Apps Formulas
•PowerApps Integration.

Day 1
Power Apps Overview
•Introduction to Power Apps
•Power Apps Licensing
•Explore Power Apps for free
•PowerApps Potentials
•Types of PowerApps
•Check your knowledge
•Basic Components Understanding
•PowerApps Studio
•App Format
•Galleries
•Forms
•Input Controls
•Intelligent Controls
•Functions
Extended Power Apps Capabilities
•Extending Microsoft Power Apps with Power Apps Component Framework
•Introduction to Power Apps component framework
•Power Apps component framework architecture
•Power Apps component tooling
•Check your knowledge

Day 2
•Power Apps Canvas
•Get started with Power Apps
•Customize a canvas app in Power Apps
•Manage apps in Power Apps
•Navigation in canvas app in Power Apps
•How to build the UI in a canvas app in Power Apps
•Use and understand Controls in a canvas app in Power Apps
Power Apps Formulas
• Formula's overview
•Use a formula to modify the format of controls
•Use formulas to perform calculations
•Use a control to modify the property of other controls
•Conditional formatting
•Functions for validating data
PowerApps Integration
•PowerApps in SharePoint
•PowerApps in Teams
•Power Automate
•Power BI
•Cognitive Services

Power Apps Overview
•Power
Apps
Overview
•Introduction to Power Apps
•Power Apps Licensing
•Explore Power Apps for free
•PowerApps Potentials
•Types of PowerApps
•Knowledge Check

Power Apps and what it can do for you
Low/no-code platform for building apps
Work with data where it lives
Types of Power Apps:
Canvas apps: Build an app from a blank canvas
Model-driven apps: Build from data in Microsoft Dataverse
Portals: Externally-facing websites
Add artificial intelligence to your app with no code
The prediction model: Create a model with AI Builder that can predict a yes or no answer based on
historical data

Licensing Programs
• Enterprise Agreement (EA)
• Enterprise Agreement Subscription (EAS)
• Server and Cloud Enrollment (SCE)
• Enrollment for Education Solutions (under the Campus and
School Agreement) (EES)
• Standalone Power Apps licensing
Options
• Power Apps per app plan
• Power Apps use rights with Dynamics 365 applications
• Power Apps use rights included with Office 365 licenses
Power Apps Licensing

Power Apps for free for 30 days
• https://docs.microsoft.com/en-us/powerapps/maker/signup-for-
powerapps
Power Apps Developer Plan
• https://docs.microsoft.com/en-us/powerapps/maker/developer-plan
Create and use apps anywhere
• https://powerapps.microsoft.com/en-us/downloads/
Explore Power Apps for free

Canvas apps
Canvas apps are a great option when you want
to build an app from a blank canvas. You start
by choosing the screen size: tablet or mobile,
then you have a blank screen from which
to build
You can interact with data in your app by
adding data sources. Drag and drop various
controls and add the desired functionality by
writing Excel style formulas. Canvas apps
provide you complete flexibility when building
your apps

Model-driven apps
Model-driven apps build from data in Microsoft
Dataverse. Power Apps will build you a great
looking, fully functional app to act upon and
interact with this data. With model-driven apps,
there is no need to worry about choosing the app
size; it is responsive, meaning it works on mobile or
tablet with no extra work by you
You define the relationships, forms, views, business
rules, and more at the data layer, inside of
Dataverse, giving you enough control to get your
business result without writing all the formulas
yourself

Portals
Portals bring the power of no-code solutions
to building externally facing websites.
Through the Power Apps interface, you can
build an anonymous or authenticated website
that allows users to interact with data held in
Dataverse.
The same drag and drop experience you
enjoy when building apps is available to build
these rich, interactive websites.

Power Apps and what it can do for you – continued
Security and Administration:
• To manage security for Power Apps you
can access admin.powerplatform.com/
• Power Apps also has its own set of
PowerShell cmdlets for app creators,
administrators, and developers that allow
you to automate many of your
administrative duties
Driving business value:
Users can build apps with ease
Power Apps allows even the most entry level
users to reduce paperwork, increase process
efficiency, and ensure a single source of truth

Customer case study: Heathrow Airport
76,000 workers and 200,000 travelers
in a single day
Empowered front-line workers to build
apps and solve problems
Samit Saini: Former security worker
turned app maker
Created an app that held security information
translated into dozens of different languages

Power Apps in action
Demo: Build an app
Knowledge Check : https://docs.microsoft.com/en-
us/learn/modules/introduction-power-apps/5-knowledge-check

Power Apps
Components
• Basic Components Understanding
• PowerApps Studio
• App Format
• Galleries
• Forms
• Input Controls
• Intelligent Controls
• Functions

Learn basic Component of PowerApps
Power Apps Studio Interface you use to build your app
App format Mobile or tablet
Galleries Display rows from a table of data
Forms Display details from a specific table row
Input controls Text inputs, buttons, dropdowns, toggles, and more
Intelligent controls Rich controls for more advanced operations
Functions Glue that binds all the controls, inputs and data sources

Functions
Formulas combine many elements. Listed below are:
• Functions take parameters, perform an operation, and
return a value. For example, Sqrt(25) returns 5.
Functions are modeled after Microsoft Excel functions.
Some functions have side effects, such as SubmitForm,
which are appropriate only in a behavior formula such
as Button.OnSelect.
• Signals return information about the environment. For
example, Location returns the device's current GPS
coordinates. Signals don't take parameters or have side
effects.
• Enumerations return a pre-defined constant value. For
example, Color is an enumeration that has pre-defined
values for Color.Red, Color.Blue, and so forth. Common
enumerations are included here; function-specific
enumerations are described with the function.
• Named operators, such as ThisItem and Parent, provide
access to information from within a container.

Build a canvas app
Connect to a data source
Explore the generated app
Install the app on your device
Explore the app
Customize the app
Browse screen
Details screen
Edit/create screen
Controls in Power Apps
Galleries
Forms
Media
Charts

Extending Microsoft Power Apps with Power Apps
Component Framework
• Introduction to Power Apps component framework
• Power Apps component framework architecture
• Power Apps component tooling
• Check your knowledge
oPower Apps Component Framework
Power Apps Top 10: innovation areas

Microsoft Power Apps component framework enables you to create reusable code components that can be used within your Power
Apps applications.
•Access to a rich set of framework APIs that expose capabilities like component lifecycle management, contextual data, and
metadata.
•Support of client frameworks such as React and AngularJS.
•Seamless server access through Web API, utility and data formatting methods, device features like camera, location, and
microphone.
•Optimization for performance.
•Reusability
•Use of responsive web design principles to provide an optimal viewing and interaction experience for any screen size, device, or
orientation.
•Ability to bundle all files into a single solution file with other app resources.
Power Apps Component Framework : Introduction

An existing app detail form might look similar to the following image.

Reconfigured your app to use custom code components, your app might
look something like the following image.

Power Apps component framework architecture

Power Apps component tooling
• Create
Dataverse
solution file
and package
the
component as
part of that
solution.
• Power Apps
CLI and Visual
Studio
msbuild
Package
• Validate and
troubleshoot
component
behavior
without
deploying it
to a
Dataverse
environment.
• Power Apps
CLI
Debug
• Validate and
transpile
TypeScript
code, create
component
manifest.
• Power Apps
CLI or Visual
Studio Code
Build
• Describe and
implement
your
component
behavior and
styling.
• Code editor
or Integrated
Development
Environment
(IDE) of your
choice.
Implement
• Create and
initialize the
component
project using
a template.
• Power Apps
Command
Line Interface
(CLI)
Create

https://docs.microsoft.com/en-
us/learn/modules/get-started-component-
framework/4-check
Knowledge Check

• Millions of new developers
• The professional business applications community
• Savvy IT leaders are bringing professionals and citizens together
# Less Code More Power
Modern intranet: Teams + SharePoint + Power Platform
Power in the Dataverse (Common Data Service)
Bring your best cloud with “no limits” extensibility
Now, for everyone
Power Apps Top 10: innovation areas that are reshaping app development

Platform-wide innovation from AI to RPA to Virtual Agents and beyond
The future is componentized
• The professional business applications community
• Savvy IT leaders are bringing professionals and citizens together
Full stack low code: the new quality assurance
Think in thousand app scale
You are not alone
Power Apps Top 10: innovation areas that are reshaping app development

More questions about PowerApps?
Read these Courses from Microsoft Learn Docs
Introduction to Power Apps
Power Apps Component Framework
Innovation Areas

Power Apps Canvas
oPower
Apps
Canvas
•Get started with Canvas Power Apps
•Customize a canvas app in Power Apps
•Manage apps in Power Apps
•Navigation in canvas app in Power Apps
•How to build the UI in a canvas app in
Power Apps
•Use and understand Controls in a canvas
app in Power Apps

© Copyright Microsoft Corporation. All rights reserved.
Get started with Power Apps
With Power Apps, you can:
•Build an app quickly by using the skills that you already have.
•Connect to the cloud services and data sources that you're already using.
•Share your apps instantly so that coworkers can use them on their phones and tablets

Ways to build Power Apps
• There are three primary ways that apps can be created:
• From a Template • From a Data Source • From a blank Canvas

Create an app from a data source
The following app was created from a SharePoint list and lets you browse items in
the list, view item details, and create and edit items

Designing a Power Apps app
• As an App Maker, before you begin building your Power Apps solution, it’s
recommended to go through a design process
Consider factors such as:
Business requirements
Offline Mode
Data Model
User Experience (UX)
User Interface (UI)
Business Logic
Output
Go from this To this

Exercise: Create your first app in Power Apps
Follow the exercise
https://docs.microsoft.com/en-us/learn/modules/get-started-with-powerapps/5-powerapps-create-first
Knowledge Check 01 : https://docs.microsoft.com/en-us/learn/modules/get-started-with-powerapps/6-
powerapps-quiz-get-started

Customize a canvas app in Power Apps

Customize a canvas app in Power Apps
• Demo

Controls in Power Apps
UI elements that produces an action or shows information
Common controls include:
Galleries:
Layout containers
that hold a set of
controls that show
rows from a data
source
Forms:
Show details about
your data and let you
create and edit rows
Media:
Lets you add
background images,
include a camera
button, a barcode
reader, and more
Charts:
Add charts so that
users can perform
instant analysis while
they’re on the road

Explore screens and controls in Power Apps
• Demo

Using controls: Browse screen
BrowseGallery1:
Gallery control that is displaying a list of rows
from your data source
NextArrow1:
Icon button that when selected, has a formula
that opens the details screen
IconNewItem1:
Icon button that when selected, has a formula
that opens the edit/create screen

Using controls: Details screen
DetailForm1:
Contains other controls and a data card for
each column of the row that is being displayed
DataCard1:
Card control that represents a single column
of the row
IconEdit1:
Icon control that when selected, opens the
edit/create screen so that the user can edit the
current item

Using controls: Details screen
EditForm1:
Form control contains other controls data card
for each column of the row that is being edited
DataCard8:
Card control that shows a flooring category
from the Flooring Estimates table, as shown in
the previous unit
IconAccept1:
When this control is selected, it saves the user’s
changes

Exercise: Get started with functions in Power Apps
Let's Exercise it

Knowledge Check (Customize Apps in PowerApps)
https://docs.microsoft.com/en-us/learn/modules/customize-apps-in-powerapps/4-knowledge-check

Manage apps in Power Apps

Managing Power Apps
• Each canvas app has multiple management options available including:
• Version
Management
• Sharing apps
with other users
• Managing
environments

Navigation in canvas app in Power Apps

Understanding navigation
• Since most apps have multiple
screens, understanding how to
implement the Navigate function in
your app is critical
• Typically added to the OnSelect
property of a Button or Icon control
Specifies which screen transition effect if any,
should be used in the app to navigate to
Navigate(Screen2,ScreenTransition.Cover)
Specifies which screen in the app to navigate to

Screen transitions
• ScreenTransition.Cover – New screen slides into view, covering the current screen
• ScreenTransition.Fade – Old screen fades away to reveal the new screen
• ScreenTransition.None – Old screen is quickly replaced with the new screen
• ScreenTransition.UnCover – Old screen slides out of view, uncovering the new screen
• Note: The Back() function can be used to users back to the previous screen that they navigated from.
This provides greater flexibility over the Navigate Function

Hidden screens
Allows the creator of the app to add screens but not give users to access those screens
Accomplished by not creating any navigation for users to those screens
Examples:
• Documentation screen
• Settings screen
• Special permissions screen

Demo: Use Back and Navigate functions
• Demo

Exercise: Use Navigate functions
Follow the exercise in the student manual

How to build the UI in a canvas app in Power Apps

Use themes to quickly change the appearance of your app
A quick and easy way to change the colors in your app is to apply a theme

Branding a control
By adjusting a few of the Control properties, like Fill, Hover, and Border you can
completely change how the control looks
Example: Button Control:
Typical Properties: BorderColor, BorderStyle, Color, and Fill
Disabled Properties: DisabledColor, DisabledFill
Hover Properties: HoverColor, HoveFill
These are just some of the properties you can modify, and each control will have
different properties available

Some color settings are only controlled by the theme
There are certain aspects of controls that
cannot be altered and are specific to the theme
that you select

Icons
• Shapes and Icon controls are an easy way to enhance the user experience of your app. They include properties like
other controls
Icons include:
Arrows
Geometric shapes
Actions
Symbol

Images
• The Image control is a control that shows an image:
Image:
The name of the image that
appears in an image, audio, or
microphone control
Image Position:
The position (Fill, Fit, Stretch,
Tile, or Center) of the image
in a screen or a control if it
isn’t the same size as the
image
Transparency:
The degree to which the
controls behind an image
remain visible

Personalization
• User() function returns a row of information about the current user
Property Description
User().Email Email address of the current user
Uer().FullName Full name of the current user, including first and last name
User()Image
Image of the current user. This will be an image URL of the
form “blob:identifier”

Using the tablet or phone form factors
It is important to design your app for the primary device that it will be used on

Using the tablet or phone form factors
• App size can be altered based on the form factor will be consumed on. Be sure to
select the appropriate size for the majority of your app users
• Tablet sizes available:
• 16:9 (Default)
• 3:2 (Surface Pro 3)
• 16:10 (Widescreen)
• 4:3 (iPad)
• Custom
• Note: The Phone form factor does not include screen size options

Use and understand controls in a canvas app in Power Apps

Core properties of controls
• While each control may have slightly different properties the following are important ones to be aware of:
Default: Initial value of control before it is changed by the user
Items: The source of data that appears in a control such as a gallery, list, or chart
OnChange: How the app responds when the user changes the value of a control. For example, when a user selects
a different value in a Dropdown control
OnSelect: How the app responds when the user taps or clicks a control
Text: Text that appears on a control or that the user types into a control
Tooltip: Explanatory text that appears when the user hovers over a control
Visible: Whether a control appears or is hidden

Entering and displaying data with text controls
• Text controls are used for all kinds of purposes, such as displaying text, numbers,
dates, and calculating currency
• Available text controls:
Label:
A label shows data
that you specify as a
literal string of text,
which appears
exactly the way you
type it, or as a
formula that
evaluates to a string
of text
Text input:
A box in which the
user can type text,
numbers, and other
data
HTML text:
An HTML text control
not only shows plain
text and numbers but
also converts HTML
tags, such as non-
breaking spaces
Rich text editor:
The rich text editor
control provides the
app user a WYSIWYG
editing area for
formatting text
Pen input:
A control in which
the user can draw,
erase, and highlight
areas of an image

Demo: Text controls
• Demo

Controls with pre-populated values
Drop down: Helps conserve screen real estate. The control takes up only one line unless the user
selects the chevron to reveal more choices. It can show a maximum of 500 items
Combo box: Allows you to search for items you will select. The search is performed on the server on
the SearchField property so performance is not affected by very large data sources
List box: Always shows all available choices (unlike a Dropdowncontrol) and in which the user can
choose more than one item at a time (unlike a Radiocontrol)
Check box: Control that the user can select or clear to set its value to true or false. The user can
specify a Boolean value by using this familiar control
Radio: A Radio control, a standard HTML input control, is best used with only a few, mutually-
exclusive options

Controls for ratings
Slider: User can indicate a value, between a minimum and a maximum value that you
specify, by dragging the handle of a slider left-right or up-down, depending on the
direction that you choose
Rating: User can indicate, for example, how much they liked something by selecting a
certain number of stars

Other available controls
Toggle: Enhances the UI of the app. It functions in the same manner as the check box
control
Timer: Can determine how your app responds after a certain amount of time passes
Button: Configure the OnSelect property of a button control to run one or more formulas
when the user clicks or taps the control. The button control is frequently used to submit
data to the data source

Media controls
• Media controls give the app designer a way to display and share an audio file or video file easily, take a picture,
scan bar codes, etc.
Video:
Plays a video clip from a file or
from YouTube or Azure Media
Services
Audio:
Plays a sound clip from a file, a
recording from a Microphone
control, or the audio track from a
video file
Camera:
Allows the user to take photos by
using the camera on the device
Barcode scanner:
Opens a native scanner on an
Android or iOS device
Microphone:
Control that allows app users to
row sounds from their device
as long as the device has a
microphone accessible
Add picture:
Users can take photos or upload
image files from their device and
update the data source with this
content

Exercise: Add media to an app
Follow the exercise

Using App checker
Indicates in real-time if
an app contains errors
Clicking on the item will
take you to that formula
Clicking on the > on the
item will take you to the
details of the error
• This tool also finds potential accessibility issues and explains why each might be a potential problem
No Errors
Errors
Detected

Variables
• Global variables:
• App wide scope
• Primary function:
Set(CurrentName,”Juli
e”)
• Context variables:
• Local screen scope (the
screen’s “context”)
• Pass values to a screen
• Primary functions:
Navigate, UpdateContext
• E.g.
UpdateContext({Current
Total:CurrentTotal+ThisIte
m.
Price})
• Collections:
• App wide scope
• Tables only
• Primary functions:
Collect, Clear,
ClearCollect, Update,
Remove
• Can be saved to the
local device with
SaveData, LoadData

Components
Reusable building blocks
Can be used multiple times
Custom properties define interface with hosting screen
Import and export components

Component custom properties
Can be Input or Output
Default value is assigned based on data type

Demo: Create components
• Demo

Offline-capable canvas apps

Limitations
LoadData and SaveData combine to form a simple mechanism to store small
amounts of data on a local device. By using these functions, you can add simple
offline capabilities to your app.

Knowledge Check (Manage Apps in PowerApps)
https://docs.microsoft.com/en-us/learn/modules/manage-apps-in-powerapps/5-knowledge-check

Power Apps Formulas
oPower
Apps
Formulas
•Formula's overview
•Use a formula to modify the format of
controls
•Use formulas to perform calculations
•Use a control to modify the property of
other controls
•Conditional formatting
•Functions for validating data

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

Text function
in Power
Apps
https://docs.microsoft.com/en-us/powerapps/maker/canvas-
apps/functions/function-text
Modify the format of controls
This Photo by Unknown Author is licensed
under CC BY-SA

Use formulas to perform calculations

Use a control to modify the property of other controls

Conditional formatting
Color
enumeration
https://docs.microsoft.com/en-us/powerapps/maker/canvas-
apps/functions/function-colors

Functions for validating data

Knowledge Check (Formula)
https://docs.microsoft.com/en-us/learn/modules/author-basic-formula-change-properties-powerapps/7-
knowledge-check

PowerApps Integration
•PowerApps
Integration
•PowerApps in SharePoint
•PowerApps in Teams
•Power Automate
•Power BI
•Cognitive Services

Event Organizer Demo
https://github.com/pnp/sp-power-platform-solutions/tree/master/solutions/EventOrganizer

Microsoft Certified: Power Platform App
Maker Associate
Certification Path
https://docs.microsoft.com/en-us/learn/certifications/power-platform-app-maker/?azure-
portal=true

An introduction to microsoft power apps

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a An introduction to microsoft power apps

Similar a An introduction to microsoft power apps (20)

Último

Último (20)

An introduction to microsoft power apps