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

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

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
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: