Archive

Archive for November 13, 2019

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

November 13, 2019 Leave a comment

This article is continuation to the Part I where we had gone through the following steps:

  • Creating a basic Canvas app
  • How to add a Dynamics 365 Data source.
  • How to add a Gallery to show list of records
  • How to create a new record using ‘Form’ control

In this article, lets see how we perform the ‘Edit’ record by

  • Adding a new ‘Edit Contact’ screen
  • Adding an ‘Edit’ icon to the Gallery item
  • On click of ‘Edit’ icon, redirect to ‘Edit Contact’ screen

Design ‘Edit Contact’ screen:

  • Add a new screen to the Canvas app and rename it to ‘Edit Contact’
  • Add a form to the ‘Edit Contact’ screen by navigating to ‘Insert -> Forms -> Edit’
  • Rename the form to ‘formEditContact‘ and set below properties
    • Set ‘DataSource’ to ‘Contacts’ (i.e., Dynamics ‘Contacts’ Data Set Name)
    • PA_Edt1
    • Set ‘Item’ to ‘galContacts.Selected’ (i.e., Selected Item in the Gallery)
    • PA_Edt2
  • Add a Save icon to the screen and set ‘OnSelect’ as

SubmitForm(formEditContact);Navigate(ManageContacts);

PA_Edt3

  • In the above statement
    • SubmitForm(formEditContact) – Saves the content and updates the Contact.
    • Navigate(ManageContacts) – Post Save, redirects to ‘ManageContacts’ screen (i..e, Gallery screen)

Add ‘Edit’ Icon to Gallery:

  • Go to the ‘ManageContacts’ screen.
  • Select ‘galContacts’ Gallery control and click on ‘Edit Gallery’ icon.
  • Now add a new ‘Edit’ icon to the Gallery item.
  • Set ‘Edit’ icons ‘OnSelect’ as

EditForm(formEditContact);Navigate(EditContact,ScreenTransition.Fade);

PA_Edt4.PNG

  • In the above statement
    • EditForm(formEditContact) – Sets the ‘formEditContact’ form control with selected item from Gallery on ‘EditContact’ screen.
    • Navigate(EditContact,ScreenTransition.Fade) – Navigates to ‘EditContact’ screen.

Test the Application:

  • Run the ‘Application’ and click on ‘Edit’ icon.

PA_Edt5

  • In the next screen, change the data and click on Save icon.

PA_Edt6

  • You should see the modified values in the ‘galContacts’ Gallery.

PA_Edt7

In the next article, we will see how to render ‘Option Sets’ and ‘Look up’ controls.

🙂

Categories: CRM