How to Programmatically set Date Picker and Days Controls in a Canvas PowerApp

Colin Maitland, 03 September 2019

In this article, I demonstrate how to configure the default values for a Days From and Days To date picker controls and a related Days control in a Canvas PowerApp. I also demonstrate how to programmatically update the Days control to display the number of days between the two selected dates when these are changed by a User, ensuring that all changes are correctly saved to the underlying record when submitted.

The demonstration application is a sample ‘Leave Requests’ Canvas PowerApp. The app uses the Common Data Service (CDS) connector to access a Leave Requests entity in Microsoft Dynamics 365.

The following image shows the app’s Edit Form open for adding a new Leave Request. There are currently no default values configured for the Days From, Days To or Days controls on the form.

These controls are bound to the corresponding Date/Time, and Number fields from the underlying Microsoft Dynamics 365 ‘Leave Requests’ entity.

The desired default values for these fields are the current date for Date From and Date To and 1 for Days.

The first step is to change the formula for the Default property of the Date From data card to the following:

The second step is to change the formula for the Default property of the Date To data card to the following:

The third step is to change the formula for the Default property of the Days data card to the following:

These initial three steps ensure that the corresponding controls display the desired default value for new records or the current data value for existing records. It is essential in these steps that the formulas for the Default property of the data cards rather than the DefaultDate and Default properties of the controls are configured in this way.

The fourth step is to add the following formula to the OnVisible event of the Edit Form. This formula initialises three variables, varDateFrom, varDateTo and varDays, to the default values of the Default property on the corresponding data cards. The OnVisible event runs when the Edit Form is opened for adding a new or updating an existing record.

The fifth step is to change the Default property on the Date From date picker control to varDateFrom. This configuration ensures that the Date From date picker control now always displays the value of varDateFrom.

The sixth step is to change the Default property on the Date To date picker control to varDateTo. This configuration ensures that the Date To date picker control now always displays the value of varDateTo.

The seventh step is to change the Default property on the Days control to varDays. This ensures that the Days control now always displays the value of varDays.

The eighth step is to change the formula for the OnChange property of the Date From date picker control to the following. This configuration ensures that varDateFrom and varDays are updated whenever the User changes the Date From date.

The ninth step is to change the formula for the OnChange property of the Date To date picker control to the following. This configuration ensures that varDateTo and varDays are updated whenever the User changes the Date To date.

In the preceding two steps, the Reset function is used to update the Days control to display its Default value, which happens to be configured to display the updated value of varDays.

The tenth step is to change the Update property of the Date From data card to varDateFrom.

The eleventh step is to change the Update property of the Date To data card to varDateTo.

The twelfth step is to change the Update property of the Days data card to varDateTo.

These preceding three steps, ensure that the current value of varDateFrom, varDateTo and varDays is saved to the underlying record whenever the form is submitted.

As a result of this configuration of the Edit Form, when working with new or existing Leave Requests, the controls now display the desired default values for Date From, Date To and Days as shown in the following image:

In addition, when the User changes the Date From or Date To date, the Days value is automatically updated as shown in the following image:

Completing the other fields on the form and then clicking Accept, results in the successful creation of the new Leave Request.

In my next article, I will demonstrate the configuration of additional functionality, including how to ensure that Date To will never be less than Date From and Date To will never be less than Date From.