Creating custom pages as contextual modal dialogs for model driven app entity records in PowerApps

This article explains an approach to build custom pages as contextual model dialogs, integrated to the command bar controls in PowerApps. 

In the previous articles, 

• we have seen about the custom page introduction in PowerApps. Introduction to custom page on Power Apps.
• The detailed approach to build custom pages and add as landing pages in the model driven app. Power Apps custom landing page with model driven entity views sample

The solution, model driven app and a custom landing page for model driven app was created and demonstrated in the previous article. As a continuation from the previous articles, we will take dealership scenario for the model dialog demonstration in this article. The scenario considered here is to send a task to the dealer from the main grid view in model driven app, without navigating to the entity record form or associated views. This provides flexibility to send out quick actions/tasks for the business users, assuming this feature is most used actions in the business.

Building custom page for model dialog

Creating canvas app like custom page might be familiar for you. This can be done from the solutions on PowerApps https://make.preview.powerapps.com, create a new custom page by clicking on New -> App -> Page.

The following snapshot shows one simple view created to show the selected dealer and option to send out the quick actions/tasks to the user (entity record) in model driven app.

PowerApps custom page for dialog view in model driven app

The app is configured with the following.

• The app onStart is configured to pick the records passed from the PowerApps model driven app entity grid view. 
• Set(RecordItem, If(!IsBlank(Param("recordId")), LookUp(Dealers, Dealers = GUID(Param("recordId")))))
• For saving/sending the activity to the dealer (contacts entity), the onSelect property needs to be configured as shown below. 
• Patch(Tasks,Defaults(Tasks),{Subject:TextBox1.Value,Regarding:RecordItem})

Save and publish. The next step is to integrate the page with the model driven app.

Power Apps custom landing page with model driven entity views sample

In the previous post, the necessity for custom page which converges canvas app with model driven app was explained. 

• Introduction to custom page on Power Apps

In this article post, we will look at a basic example for convergence of canvas app as custom page with model driven app.

From PowerApps portal https://make.preview.powerapps.com/, create a solution under solutions tab.

Create/Add the model driven app, entities and page:

In this case I have leveraged the model driven app with dealer example created in one of my previous article.

From the solution objects, create/add the apps. 

The following high level steps shows what elements are added to the solution.

• Model driven app: Add the existing solution from add -> app -> model driven app. search and add the model driven app.
• Entities (Tables): From the solution, create the necessary tables (entities) for the solution. In this solution, the tables added are dealers/users, models, manufacturing units and vehicles.
• Page (Landing page): From the solution, create a page as landing page for the solution. Creating the new page by click on New -> app -> page.

Introduction to custom page on Power Apps

This article series explains the new low-code development concept/feature introduced on Power Apps. That is custom page on Power Apps, which is still a preview feature. Recently Microsoft has announced the release of custom page preview feature with Power Apps. we will explore more about this feature with some samples. https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

Custom page for model driven apps:

Over the time, Microsoft has introduced multiple types of apps. Now Microsoft has introduced custom page which converges canvas app experience with model driven app.

• That is, custom page is introduced to enhance the experience of model driven apps.
• The custom page development looks similar to Power Apps canvas app development. 
• So canvas app is not straightaway integrated with model driven app. Instead custom page option is introduced.

However there are also other points to note in comparing custom page with canvas app.

• Only one screen can be created on custom page. The redirection in this case is mostly to entities/forms. However canvas app can support multiple screens, and redirection between these screens are possible.
• Apps to be built with canvas apps type can stand alone, but custom page can only work with model driven app solution and cannot standalone.

What are various integration options available for custom page with model driven app on power apps?

• You can create and add a custom page as landing page for model driven app, along with other standard entity forms/views.
• You can integrate custom page to be available as dialog or side panels on click of command buttons on model driven app forms/views.

Migrating existing canvas app

What if you have already developed app with canvas app type, and you want to migrate this to custom page which can work with model driven app?

• Answer is simple, copy and paste the screen from canvas app to custom page. This has been outlined here. https://docs.microsoft.com/en-gb/powerapps/maker/model-driven-apps/model-app-page-overview#migrating-standalone-canvas-app-content-to-custom-pages
• you should do this migration only, if you want the model driven features available for your solution.

Connectors

Will custom page support connectors?

• Yes, connectors are supported as like canvas app. 
• But very limited standard connectors are verified. As of writing, only connectors like office 365 users, outlook, SharePoint online, SQL server, Power Automate, Teams, and excel online for business are verified.
• Custom connector are also available which helps you to build your own actions for integrations with other API services or on-premise data.

The below snapshot shows the custom page app created on Power Apps, with options available.

We will look at samples of custom page integrations with model driven apps in the next articles.

• Power Apps custom landing page with model driven entity views sample

Power Automate: Sending Emails without User Context

This article helps us to understand the way to send emails without the user context. This could be applicable for applications, where consumers/users are non-licensed.  

This could be achieved with the help of few set of actions on Power Automate flow. Here Microsoft graph end points are used to send emails on power automate, based on application permissions. The app permission needs to be enabled on Azure AD app. 

Let us only look at the power automate configuration, instead of end-end business scenario. The following snapshot shows the actions. 

Power Apps: Different type of Apps with Detailed Understanding

Power Apps provides options to create app based on the requirement and usage. There are three different type of apps available.

• Canvas 
• Model Driven  
• Portal 

Power Apps with the above three type of apps, adds more value to the Microsoft power platform, along with Power Automate. With both of these services from power platform, some of the complex business scenarios could be achieved with no-code or less-code approach. You will get this fact at the end of this article.

Let us quickly understand these different types.

Canvas App

When power Apps was introduced few years ago, this was the only type available. This type provides options to customize the user experience. That means, you can build the app from scratch defining each and every aspect of it. That includes,

• Design and UI elements –  
• Helps creating screens and adding necessary controls with just drag and drop approach.  
• Business logic can be  manipulated and achieved with functions/formulas with less-code or no-code scenarios. 
• Data connectivity – 
• There are default connectors available, providing flexibility to connect to multiple services without even writing code. This includes underlying common data service, and other SAAS services. 
• On top of this, Power Automate provides greater flexibility in integrating the multiple services/systems data with no-code configurations. 
• Users: 
• This canvas type is available for Azure AD or external users. 
• Only licensed users can only access the app. - The basic options available as of writing are for single app or multiple apps per user.

Setting up Microsoft Teams Shifts Schedule Reminders

This article will help us to setup reminders for Shifts on Microsoft Teams using Power Automate. This will help to understand how shift reminders are triggered to shift owners a day before the shift schedules, as gentle reminders.

Before getting into implementation, we will see short introduction of Shifts app. Recently Microsoft has retired the Staffhub service, and Shift app is available as replacement and is available as an app on Microsoft Teams.

Microsoft Team's Shifts App

Shifts App, as quoted on Microsoft documentations: The Shifts app in Microsoft Teams keeps Firstline Workers connected and in sync. It's built mobile first for fast and effective time management and communication for teams.

Shifts app lets users on Microsoft Teams to create necessary shift schedules, and assign/share the schedules with teams. Once the schedule is created and shared on Teams, users will be able to view the schedules on their Teams login.

• Currently, notifications are not working as expected. In my case, after sharing the schedule with a team, the notifications were not triggered to teams users. 
• The shift schedule is not currently synced up with calendars. 

Hope the above drawbacks would be addressed in the near future by Microsoft product team.

This article helps us to understand a reminder notification requirement, which I came across recently. Let us look at how to trigger reminder notifications to respective schedule owners a day before the shift schedule.

Create a necessary shift schedules and share it with teams on Microsoft Teams interface.

Microsoft Team Shifts App - Sample Shift Schedule

Microsoft Teams List (Part II) – Building End-user interface on PowerApps to identify Membership Information

Let us see how to create an interface on Power Apps platform, listing down all the teams under office 365 Microsoft teams tenant, also enable options to join the team if user is already not a member.

In the previous article, we have seen the ways to identify the user membership information via Microsoft Graph API. Using these Graph API and information, we will build the user interface functionality.

• Microsoft Teams List (Part I) – Exploring MS Graph API to find the Teams membership information on Office 365 Groups - http://www.techwithnakkeeran.com/2019/12/microsoft-teams-list-part-i-exploring.html

Here, a simple app is built for end-users on Power Apps platform, which in turn connects to Microsoft Graph API data explained in the previous article. The below snapshot shows the end result.

Microsoft Teams List - Options showing if user is member of /or join team button 

Microsoft Teams List (Part I) – Exploring MS Graph API to find the Teams membership information on Office 365 Groups

In the Microsoft teams, there is a way to find public teams, and also private teams if discovery option is enabled on the tenant wide settings.

But is it possible to see all teams irrespective of discovery option on the Microsoft teams tenant? Answer is yes, there is a way for administrators with Microsoft graph API, and building some app interfaces showing the teams list with the help of graph API.

To create the necessary interface showing the teams list,

• In this article, let us see how to identify the teams membership information with graph APIs. Let us see how to extract all teams list under a tenant using Office 365 groups data, and to extract my teams list. This data will help us drive to build an interface to list down teams and enable options to join a team if user is not a member.
• In the next article, let us create a simple app on Power Apps to show users about the teams list, with options showing membership and join button if user is not member of the team. - http://www.techwithnakkeeran.com/2019/12/microsoft-teams-list-part-ii-building.html

Use MS Graph API to user relationship with a Team 

Let us quickly see how to find if you want to find the your team membership via Microsoft graph API.

• Login to Microsoft graph explorer with your administrator rights. https://developer.microsoft.com/en-us/graph/graph-explorer 
• With major version of graph API (v1.0), you will be able to identify the groups which has teams association. Note this lists down all Office 365 groups without teams filter, you will have to manually find the groups which has only teams association, using resourceProvisioningOptions parameter. https://graph.microsoft.com/v1.0/groups?$select=displayName,id,resourceProvisioningOptions 

List all Office 365 Groups without any filter - showing Group Name and team associate property