Canvas apps are a great way to boost the productivity and way of interacting. This blog post will focus on how to add an image with notes taken during an appointment with a customer and send it over to the appointment in your Dynamics 365 CE Environment. The first part will focus on the creation of the Canvas app.

Creating The Canvas App

Wireframing

When creating a canvas app, one should start from wireframes describing how your app should look like and how the data is presented to the end user. For this application, I made a few sketches of some screens. The home screen will contain a gallery displaying the appointments for the current day. The detail screen will show the appointment details with the option to take a picture for the selected appointment.

Home Screen

The homescreen consists of a gallery, which is a repetitive representation of a data source, and a calendar input which allows the gallery to filter based on the date.

For connecting to our CE environment, a CDS (common data service) connector is used. Be aware, when you share your canvas app, the CDS connector takes in place the security role of the user which is connecting via the canvas app. Make sure they have read/write access to the appointment records.

Visually, you end up with something similar like this. Note that the filter only checks the date. If you want to check it’s past due in time of now, you should extend the condition.

SortByColumns(
    Filter(
        Appointments,
        'Start Time' >= datePicker.SelectedDate && 'Start Time' < DateAdd(
            datePicker.SelectedDate,
            1
        )
    ),
    "scheduledstart"
)

In the end, the Gallery function looks like this:

post3_0

Detail Screen

When clicking on an appointment on the home screen, you should navigate to the details of that appointment. For the sake of the demo, I only exposed the Subject, Location and timestamp. You can easily achieve this by adding a Form viewer. To do this, go to Insert > Forms > Display. When added to the canvas, you can select which properties of the selected entity should be displayed.

I also added a horizontal gallery to list all the notes related to the appointment.

The datasource of this gallery is as follows:

Filter(Notes,Regarding = lstAppointments.Selected)

This will evaluate each time the gallery on the homescreen got a selection change.

Behind the button add note, we navigate to the Camera screen, where only a Camera control is placed.

post3_1

Camera Control

In the select of the camera control, you can add following function:

ClearCollect(
    CameraImages,
    Camera1.Photo
);
Back()

Let’s elaborate this a bit. The ClearCollect function does two things. It will first empty our collection “CameraImages”, and will instantaneously add the Photo of the Cameracontrol to the same collection. Finally, navigate back to the previous screen.

To actually have it uploaded, you will need to pass the most important property on the Photo which is Url. This is a base64 string encoded url which the flow will need to handle.

In part two, I will show you how to setup the flow and bringing the picture taken to our appointment timeline as a note in Dynamics 365 CE.