Start with First PowerApp

In my previous blog post, I have explained about canvas apps and model driven apps. Let us first see how to build a canvas app in PowerApps.

Development for PowerApps can be done either in web PowerApps studio or desktop PowerApps studio. First step is to create the Environment for the development. You can start with the trial version for free.

Login to the Powerapps.microsoft.com

Let us first create the environment to create our app.

To create the environment follow the steps as shown in following screenshots

Click on the setting icon at the right top of the screen and select Admin center.

Then click on the Create New Environment again at the top right corner.

Enter the details about the new environment and create the new environment.

Create EnvironmentCreate Environment1Create Environment2

Once you create the environment, you can select that environment to start the app development. Make sure that you have chosen the right environment and then start with the application development.

We can develop apps based on various backends such as CDS, Excel, OneDrive, Sharepoint etc  Let us build our first app for some specific requirement in Dynamics 365 CE for the  scenario mentioned below:

A product company, has a call center and sends the service mechanics  to repair existing machines or install new machines at the customer site. They are always on the move and while doing assigned jobs if they find that there is additional work to be done, they should be able to create the case or opportunity on their mobile quickly.

As a first step, select Apps from the left menu as shown in below screenshot and click on create an app button.Create New App1

Powerapps studio would provide you options to select the base data on which you want to create an app. Here since we want to create case or  Opportunity in Dynamics 365, select Dynamics 365 as show in below snip.

Create new App2

Studio would guide you to step by step to connect the D365 instance

Create new App3Create New App4

Once you are connected to D365 CE, you have to select the entity on which you would like to do the operations through the PowerApps app.Create New App5Create New App6

Let us select case entity and see what PowerApps does it for you.

Create New App7Create New App8

Just save the app with appropriate name and even you can select icon for the same.Create New App9

PowerApps would build the complete app for you to view the cases, view the  case details and editing particular case or creating a new case as shown below

Create New App8

Let us see all these screens in details one by one

Browser screen : It is a list screen where you can find all the cases, you can search for specific cases, you can sort the order of the cases. All these functionalities are given by PowerApps automatically and you don’t have to do anything to achieve the same.

Now let us see the components of this screen. Major component is BrowserGallery1. This is the gallery control which can be connected to the the database table Case. You can see the property pane at If you look at the properties of the gallery, Data is the most important property of the gallery which connects to the data. With this property you can change the data source if required. Browsescreen1

Browsescreen3

With the layout property, you can change the way your data is displayed, even select the columns which should be displayed in the gallery.

Browsescreen4Browsescreen5

When you see the items property of the gallery, you can see below text

SortByColumns(Search(Cases, TextSearchBox1.Text, “description”), “description”, If(SortDescending1, Descending, Ascending))

This function actually works for the sorting and searching functionality.  I would recommend you to go through the all controls present on the screen and try to understand their properties.

Once you understand these properties, you will be able to play with those based on your requirements. These are very intuitive and can be easily learned

If you click on the “>” next to any item in this gallery , that record would open in edit mode in the new screen.  Just check the action defined to achieve this functionality.

Browsescreen7

Similarly you can see the “+” symbol which would navigate to the new entry page and you can create new case from this screen. Just check the action defined to achieve this functionality.Browsescreen8

Now let us see second screen in this App.

In the second screen, you would understand the usage of data card control of the PowerApps. This screen has DetailForm which consists of various data cards.

The form is bound to the data source and the record which is selected in previous screen.

Detailedform1Detailedform2Detailedform3Detailedform6

The datacard is created for each field and fields can be selected from the layout.

Based on the type of the  field, the type of data card is selected, which can be changed later if required. If you want to do any changes in datacard, you must first unlock it and do the changes.

Detailedform4Detailedform5

Each Datacard consists of a Value and Key which represents the actual data value and field name correspondingly I would recommend you to look at the various properties of these data cards and understand how intuitive it is to use.

I am hoping you must have understood of the basics of PowerApps app development with this post.

Thanks for reading. In case you have  any questions about the PowerApps, please leave in comments and I would get back to you.

If you like  my blog, please hit the like button or share with others

PowerApps Model Driven/Canvas Apps

PowerApps Case Studies : Its much more than just replacement of Infopath

About Myself

 

 

 

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s