Advertisements

Archive

Posts Tagged ‘Canvas’

[Step by step] Basic Canvas app using Dynamics 365 as Data Source

November 8, 2019 1 comment

In this article, I am going to provide steps to build a basic Canvas app which uses Dynamics 365 (CDS) as Data Source.

If you are new to Power Apps, refer my blog on steps to get started.

The App we are going to build will have 3 screens.

  • Manage Contacts – Displays the list of Contacts using ‘Gallery’ control.
  • Create Contact – Creates a new Contact.
  • Edit Contact – Updates an existing Contact.

Create a new Canvas app:

  • Connect to the Power Apps portal and select the ‘Environment’.
  • Create a new ‘Canvas app from blank’.

PA_Env3

Connect to Dynamics 365 data source:

Now we have the blank App and as a first step, create a new data source by connecting to your D365 instance using ‘Dynamics 365’ connector.

  • Click on the ‘Data source’ tab.
  • Under the ‘Connectors’, select ‘Dynamics 365’ and choose the ‘dataset’.
    • ‘dataset’ is your Dynamics organization name.

PA_Env4

  • Next, under the ‘Choose a table’ pane, select the entities you would like to work with.
    • I’ve chosen ‘Contacts’ entity for this App

PA_Env5

  • Click on ‘Connect’
  • You should see the ‘Contacts’ table under ‘Data sources’ as below:

PA_Env20

Design ‘Manage Contacts’ screen:

Now we have ‘Data source’ ready and lets design our first screen.

  • By default the Canvas app will have a screen.
  • Rename the out of the box screen to ‘ManageContacts’
    • Providing appropriate name to the controls is a best practice.
  • As we need to display available ‘Contacts’ on the screen, select ‘Insert -> Gallery’ and choose ‘Blank Vertical’.
    • ‘Gallery’ is a grid kind of a control.

PA_Env6

  • Now we need to map ‘Contacts’ table to the Gallery.
  • Select the ‘Gallery’ and click on ‘Edit gallery’ icon.

PA_Env7

  • In the ‘Select a data source’ pane, select ‘Contacts’ table. Now the ‘Gallery’ gets mapped with ‘Contacts’ from Dynamics.

PA_Env8

  • To display the Contact details (i.e., Full Name, Email, etc…), add ‘Label’ controls to the ‘Gallery’ and rename the Labels with meaningful names.
  • Labels will not show anything until you map them with the Contacts field.
  • So, select the Label and in the ‘Text’ property, type ‘ThisItem.{field_Name}
    • To map, ‘Full Name’ of the Contact to a label, set ‘Text’ as ThisItem.’Full Name’

PA_Env9

Design ‘New Contact’ screen:

In the ‘Manage Contacts’ screen, we configured a ‘Gallery’ which displays all the Contacts. Now lets design a ‘New Contact’ screen.

  • Add a ‘New Screen’ and rename it.
  • To Create/Edit records, we need to add ‘Forms’ control
    • ‘Edit’ form: Use this to Create or Edit a record.
    • ‘Display’ form: Use this to display the record (Read-only).
  • So, lets add a new ‘Edit’ form to the screen and rename it to ‘formCreateContact‘.

PA_Env12

  • Next, we need to map the ‘formCreateContact’ to ‘Contacts’ Data source and then select and arrange the ‘Contact’ fields, which allows us to input and save.
    • Set the ‘DataSource’ property of ‘formCreateContact’ to ‘Contacts’
    • Click on the highlighted link and add the required columns and click ‘Add’.

PA_Env13

  • Next, we can rearrange the columns using ‘Move up’ and ‘Move down’ options.

PA_Env14

  • We can also set ‘Columns’ to 1 of the ‘formCreateContact‘ which arranges the fields in a single column.
  • Add ‘Save’ icon to the ‘CreateContact’ screen.

PA_Env16.PNG

  • As we need to save the ‘Contact’ (i.e., Submit the Form) on ‘Save’ icon click, add below statement

SubmitForm(formCreateContact);

Link ‘Manage Contacts’ screen and ‘New Contact’ screen:

Now, we have the ‘New Contact’ screen ready. Lets hook it up to ‘ManageContacts’ screen.

  • Go to ‘ManageContacts’ screen and add + icon.
  • There are 2 key steps to create a new Contact
    • First create a new form of type ‘formCreateContact’.
    • Navigate to ‘New Contact’ screen.
  • We need to execute these key steps on click of + icon.
  • Select the + icon and on the ‘OnSelect’ event, add below statement

    NewForm(formCreateContact);Navigate(CreateContact);

PA_Env15.PNG

  • That’s it, run the App and you should be able to see the Contacts on ‘Manage Contact’ screen.

PA_Preview1.PNG

  • Click on + icon, which will take you to ‘New Contact’ screen.

PA_Preview2

  • Lets see ‘Edit Screen’ and Navigation’s in next article.

🙂

 

Advertisements
Categories: CRM, PowerApps Tags: ,

PowerApps – Getting started

August 12, 2018 5 comments

PowerApp is a service from Microsoft Business Application Platform (BAP) for creating business applications that can run in a browser or on a phone or tablet, and no coding experience is required.

Its a 3 step approach to create an App

  • Connect to a Data Source; It can be your Dynamics 365, Azure SQL/SQL On premise, API, etc…
  • Build the UI forms and add business logic using Workflows (i.e., Microsoft Flow, Azure Functions etc..)
  • Publish the App

PAPP_Intro

In this article, I am going to walk you through the steps to subscribe to Microsoft PowerApps and getting started with your first App.

Steps to connect to PowerApp Studio:

PAPP_SignIn

  • Click ‘Sign up free’ if you don’t have account already
    • Note: You can sign in with your 30 days trail account, if you already have one.
  • Click ‘Sign In’ if you have an account
  • Once you login to the Portal
  • PAPP_1
    • Select ‘Apps’ from the Menu
    • Choose ‘Design Mode’
      • Canvas : This mode allows to create the app by dragging and dropping elements onto a canvas, just as you would design a slide in PowerPoint. This mode is apt if your requirement is to build a custom forms with rich UI.
      • Model-drivenModel-driven app design is a component-focused approach to app development. Example of this mode is creating ‘Apps’ in D365.
  • Click on ‘Create an App’ button

PAPP_1

  • Pick your App style
    • If you are beginner, go with Canvas ‘Tablet Layout’

PAPP_2

PowerApp IDE’s:

There are 2 ways to build the Apps

  • PowerApp Studio – Web : In this option, you can build and Publish the App from the browser.
  • PowerApp Studio – Desktop App: You can also download the PowerApp desktop application from Here

In the next article, lets see how to create a simple Calculator App.

🙂

 

Categories: PowerApps Tags: , ,