In this Power Apps Tutorial, we will discuss how to add a time picker control in the Power Apps canvas app.

One of our clients recently asked us to add a time picker control alongside the date picker control while working with the Power Apps canvas app. They want to combine the time picker and date picker controls to collect the date and time.

Here, we will see how to add a time picker control to the Power Apps canvas app.

Also, Read: How to Highlight the Selected Item within a Power Apps Gallery?

Add time picker control to the Power Apps canvas app

In Power Apps, we can find a most common inbuilt control named ‘Date picker‘. As per the recent requirement, we will see how to add a time picker to the Power Apps canvas app.

To achieve the requirement, the following steps are:

• On the Power Apps screen, we have prepared a certain form using the Power Apps controls such as text input and date picker control.

• But, as per the requirement, we need to add a time picker control with the above Date picker control.
• Let’s insert the below expression to create two collections on the Power Apps screen’s OnVisible property. One is for hours (ColHours) and the other is for minutes (ColMinutes).

OnVisible = 

//Create collection for hours

ForAll(
    Sequence(
        25,
        0,
        1
    ),
    Collect(
        ColHours,
        {
            HourText: If(
                ThisRecord.Value < 10,
                "0" & ThisRecord.Value,
                ThisRecord.Value
            ),
            HourValue: ThisRecord.Value
        }
    )
);
//Create collection for minutes
ForAll(
    Sequence(
        61,
        0,
        1
    ),
    Collect(
        ColMinutes,
        {
            MinuteText: If(
                ThisRecord.Value < 10,
                "0" & ThisRecord.Value,
                ThisRecord.Value
            ),
            MinuteValue: ThisRecord.Value
        }
    )
)

• Next, add two Power Apps drop-down controls to the screen and place them near the date picker control as shown below.
• Set the collections on each dropdown control’s Items property respectively. (i.e., ColHours & ColMinutes)

• To collect the name, selected date, and times, add a button control to the form.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Collect(
    CollAppointment,
    {
        FullName: Name_txt.Text,
        AppointmentTime: Concatenate(
            DatePicker1.SelectedDate,
            " ",
            Hour_Dropdown.Selected.HourValue,
            ":",
            Minute_Dropdown.Selected.MinuteValue
        )
    }
)

Where,

• CollAppointment is the name of the collection
• Name_txt is the name of the Power Apps text input control.
• Hour_Dropdown and Minute_Dropdown are the names of the Power Apps dropdown controls.

• To display the collected values, add a Power Apps data table control and connect that data table to the collection I.e., CollAppointment.

• That’s all! Let’s fill out the form (Power Apps controls) and hit the Save button. As shown below, the inserted data will be collected and displayed in the data table:

This is how to work with the Power Apps time picker control within the canvas app.

Furthermore, you may like some more Power Apps tutorials:

• How to get current date in Power Apps?
• How to get month name from date in Power Apps
• Power Apps Timer Control Examples
• Power Apps Filter With Date Picker
• How to Patch Dataverse Choice Column in Power Apps
• Power Apps Table vs Collection

Conclusion

From this Power Apps Tutorial, we have learned how to build and use the time picker control within the Power Apps canvas app.

So today I got a question on the PowerApps community on how to display a Pie chart based on DataVerse tables.

So the Scenario is as below, Locations Table and Visits where location is a lookup and on the pie chart we need to display the number of Visits per Location, I thought initially this should be easy the same as it should be on model driven app, so added the pie chart on on the Items I thought it would be as easy as linking it to visits and use the location column in the series but this did not work as expected as the Lookup (Location) was not showing up so I ended up by doing the solution described below, so this is the steps to create the data and do the pie chart!

Let’s Go!

1. I have created a Table called Location Primary column Name is Location Name

2. Visits Table where location is a lookup

 To be able to get the pie chart working I had to do a Join using Add Columns , then Group BY , Then Add Columns again to get the row counts, this is the final expression:

AddColumns(GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup"),"count",CountRows(myGroup))

Let me explain part by part the above Expression:

No. 1 the Join: So We join the table visits with the table Locations and show the new Column in the Location Name

ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName")

 No. 2 Add Grouping by Location and the location group name is myGrouping

GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup")

No. 3 Then add another column to count the grouping

AddColumns(GroupBy(ShowColumns(AddColumns(Visits,"LocationName",LookUp(Locations,'Location Name'=Visits[@Location].'Location Name').'Location Name'),"LocationName"),"LocationName","myGroup"),"count",CountRows(myGroup))

This yield the below collection as below:

The Pie Chart looks like below:

Hope this is useful!

Reference to Expressions Used to learn more about them:

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-table-shaping?WT.mc_id=DX-MVP-5004221

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-table-counts?WT.mc_id=DX-MVP-5004221

https://docs.microsoft.com/en-us/power-platform/power-fx/reference/function-groupby?WT.mc_id=DX-MVP-5004221

I have run into a scenario where the embedded canvas app is not showing in other environments correctly after deployment, with error message the app is not shown correctly please ask the app owner to grant you sufficient permissions, so I followed the below steps to troubleshoot my issue:

1. Shared the canvas app after it has been deployed to everyone.. This did not fix the issue
2. Made sure that the security roles assigned to me has the permission on canvas app through customization..This did not fix the issue
3. While I was going through this article for troubleshooting the embedded canvas apps I came through this point below:

The App Name property value is missing or is incorrectly defined

To resolve this issue, choose the correct option:

• Managed solutions: If the solution was imported into an environment as a managed solution, follow these steps:
  1. Sign into Power Apps and go to the development environment where you originally created your embedded canvas app. This is also the environment where the solution was exported.
  2. Open the unmanaged solution that includes the canvas app, and then find the canvas app in the list of solution components. Copy the canvas app Name exactly as it appears in the components list. For example, contoso_flooringestimatesapp_624d7. 
  3. In the same solution, edit the model-driven app that has the embedded canvas app control, and then set the canvas App Name to the embedded canvas app control using the value from the previous step. More information: Add an embedded canvas app on a model-driven form
  4. Export the solution from the development environment and then import the solution into your target environment.
• Unmanaged solutions: If the solution was imported into an environment as an unmanaged solution, edit the model-driven app, that has the embedded canvas app control, and then follow similar steps as described for a managed solution to set the canvas App Name property.

So I simply went to my model driven form and changed the app name to the app name similar to the above screenshot and that did the trick.

Happy Low Code debugging