Power Community

Power Community

Power Apps Portals

Extend modern commands with custom pages and geospatial mapping

Buttons and command bars control the core behavior for any application. Without them, we can’t print the latest report, start our time-sensitive process, or make our hero storm the castle and save the day in our favorite video game. In Power Apps Model-Driven Apps, they are everywhere, and this blog will show you how to leverage geospatial features with modern commands, custom pages, model-driven apps, and a little bit of JavaScript. Use commanding to display a custom control image Walkthrough In this walkthrough, we will be using custom pages, map control, and app notifications for plotting a contact’s address on a map. Map for an individual record image What if you wanted to plan your trip around town to visit clients to be more effective and review the relative locations of your clients? And what if you were asked to do this by your CEO or VP and needed to let them know it was ready to view and where to find this map in your model-driven app?  You could build them a beautiful app that looks something like this. Send notification to CEO or VIP with link to the map image Setup We need to create a custom page with a map control that will read contact data. What ingredients do we need to build all this? A solution, model-driven app, contacts, canvas app, custom page and JavaScript. Prerequisites As an admin, go to the admin center, turn on geospatial controls and turn on Bing Maps. Detailed steps are here  Add geospatial controls to canvas apps and Manage Bing Maps for your organizations Enable maps Let’s start with creating a solution, model-driven app, and contacts From your Power Apps portal, go-to solutions and create a new solutionCreate a new model-driven appOpen the model-driven appAdd the contacts table to your model-driven appGo to contact and enter new contacts with addresses using the main Contact form. Enter City, State/Province, Country/Region For more information Create a model-driven app using the account page Create canvas app Why do we need a canvas app? You can copy and paste controls that aren’t shown on a custom page from a canvas app. In this case, we want the map control From the solution, add a blank canvas app. See Create a blank canvas app from scratchAdd a data table that uses contacts as the data source. See Data table control in Power AppsAdd the map control. See Use an interactive map control in Power AppsEnable the Show current location property and use the formula bar to set the CurrentLocationLongitude and CurrentLocationLatitude So that when the user selects a row, the map highlights the location with a blue circleWhen you’re happy with formatting the data table and map. Select the controls and on your keyboard, use CTRL+C. See Copy and Paste controls across Canvas Apps available Map advanced current latitude and longitude properties image Create a custom page From your solution open the model-driven app.Click the top + Add page button. See Add a custom page to your model-driven appWhile on the custom page use CTRL+V to add the data table and map to your custom page. See Copy and Paste controls across Canvas Apps availableOpen your map from a button From your solution open the model-driven app and navigate to command designer. When prompted leave the default to the Main grid. See Open the app designerWhen prompted select to use JavaScriptFrom the left pane, add a new dropdown using the +New buttonYou will see a group is added by defaultFrom the left pane select the group and using the same +New button create a command button under the groupCreate a local JS file and add the JS script below to open a centered dialog window.Click + Add library linkClick + new web resourceUpload your file and enter all the fields.Select your new libraryEnter the name of the function in this case openCustomPage. See Use commands with custom pages with cloud flowsEnter the custom page logical name as the first param and the page title as the second param. See Use Javascript for actions and Finding the logical name For more information see Create and edit web resources Example code for openCustomPage sample function function openCustomPage(customPageLogicalName, customPageTitle) { // Opens a centered custom page dialog let pageInput = { pageType: "custom", name: customPageLogicalName, }; let navigationOptions = { target: 2, position: 1, width: { value: 50, unit: "%" }, title: customPageTitle, }; Xrm.Navigation.navigateTo(pageInput, navigationOptions) .then(function () { // Called when the dialog closes }) .catch(function (error) { // Handle error }); } Add send notification button To get this working we are going to need to get the system user id. You can use OData to get the system user id quickly using this snippet. As a test, you can use your own system user id before sending it to someone. See User (SystemUser) table/entity reference Example query /api/data/v9.0/systemusers?$select=fullname&$filter=startswith(fullname,’Alfredo C’) While still on the command designer, select the group againAdd another command using the +New button create command buttonAdd the below JS as a web resource just like you did above and this time the function name is sendNotification.Enter the system user id of the person to see the notification as the first param. Enter the page title as the second param and the custom page URL for the third param.When you are done save and publish your changes Example URL  ?appid=0b02a3a4-16da-ec11-bb3b-000d3a33d9bf&ribbondebug=true&pagetype=custom&name=cr1c6_contactslocations_24f66 Example code for send notification function function sendNotification(systemuserid, customPageTitle, customPageUrl) { var notificationRecord = { "title": "Congratulations", "body": "You can review the location of your contacts", "ownerid@odata.bind": "/systemusers(" + systemuserid + ")", "icontype": 100000001, // success "data": JSON.stringify({ "actions": [{ "title": customPageTitle, "data": { "url": customPageUrl } } ] }) } Xrm.WebApi.createRecord("appnotification", notificationRecord). then( function success(result) { console.log("notification created with single action: " + result.id); }, function (error) { console.log(error.message); // handle error conditions }); } 🥳 Congratulations! Now you have your map and a way to notify your CEO or VP that it’s available. The next time they open the app they will see the notification and can click on the link to review the map.  Note that the JS functions are reusable, and can be applied for different tables such as Accounts, Organizations, etc. You can discover your own scenarios. One example is you are planning a conference with different event locations. Team Credits Huge thanks to the commanding engineering team. Alfredo Cerritos LinkedIn, Anshul Jain LinkedIn, Brad Flood LinkedIn, Casey Burke LinkedIn, Prabhat Pandey LinkedIn, Sanket Patadia LinkedIn, Sergio Escalera Costa LinkedIn, Srinivas Dandu LinkedIn Thanks to Scott Durrow LinkedIn, Adrian Orth LinkedIn for collaboration

What’s new: Power Apps August 2022 Feature Update

Clay Wesener, Principal GPM, Power Apps Studio, Wednesday, August 31, 2022 Welcome to the Power Apps monthly feature update! We will use this blog to share a summary of product, community, and learning updates from throughout the month so you can access it in one easy place. A variety of new and highly anticipated features are now available which we are very excited to share: Trust Build apps across multiple tenants with Azure B2B makerImproved Canvas App monitoring with Experimental Application Insights FeaturesESLint rules for Power Apps and Dynamics 365Creating canvas apps as Dataverse solutions by default Maker Productivity Table designer now in preview in the canvas and model-driven app designersAutomatically create a Power App from a REST APIModern command bar in CanvasInstall Apps via Power Platform CLI & Install API Trust Build apps across multiple tenants with Azure B2B maker With the new Power Apps B2B maker preview, working across subsidiaries and partners is easier. Makers can now build apps as a guest in another tenant: apps can be built in the Azure Active Directory tenant it is expected to be hosted. For example, it is now possible for maker@contoso.com to build apps directly in the ContosoSubsidiaryA.com tenant. This reduces the overhead in building and deploying apps in organizations with multiple tenants because of mergers and acquisitions, organizations that use multiple AD tenants for compliance and auditing purposes, e.g. users authenticate in one tenant and access and edit resources in alternate tenants, and organizations that have business partners or contractors working on across tenant boundaries. Learn more with admin documentation and maker documentation.  Improved app monitoring with experimental Application Insights features Two new experimental features are now available for canvas apps connected to Application Insights. The first feature reports unhandled errors experienced by end-users. The second enables correlation tracing across canvas apps and connected custom connectors. Both features can be enabled in the upcoming features menu. Error reporting will pass unhandled errors during runtime, which end-users experience as a red error banner notification, to Application Insights. Error reporting is a powerful feature that enables trend analysis and proactive alerting on errors experienced by app users. No longer do you have to rely on users to report issues with production apps! Correlation tracing is a powerful tool to join telemetry events across apps and connected services. Without any added work you can now see outbound requests to custom connectors. For custom connectors that are instrumented with Application Insights, telemetry associated with a call from an app to the connector can be joined to supply a full picture of the call stack. This can be incredibly helpful in debugging issues. Learn more at Analyze telemetry of a canvas app using Application Insights – Power Apps | Microsoft Docs ESLint rules for Power Apps and Dynamics 365 In 2019, we announced the general availability of Solution Checker. This helped many of you analyze your solutions and packages for any issues in your customizations. We got feedback from you that this is very valuable in finding and addressing issues before deploying to production environments. Today we’re taking a step further and bringing these validations to your development environment to help you find and fix issues in your JavaScript code before being added to a solution. We are excited to announce the public preview of ESLint rules for Power Apps model-driven apps and Dynamics 365 CE. Learn more at the original blog post. Creating canvas apps as Dataverse solutions by default We are excited to announce the release of canvas apps creation as Dataverse solutions by default in public preview. Solutions are used to transport apps, flows, tables and other components from one environment to another and are a key mechanism for implementing healthy application lifecycle management (ALM) in the Power Platform. Unlike model-driven apps and most other objects, makers can optionally create their canvas apps outside of a solution and outside Dataverse. This can lead to unhealthy ALM practices, and create an overhead for DevOps teams and admins as they try to automate their ALM process. With this feature, environment admins will be able to set citizen makers and developers in a healthy ALM ready state from day one by enabling canvas apps as Dataverse solutions by default for one or more environments. Learn more at the original blog post. Maker Productivity Table designer now in preview in the canvas and model-driven app designers We are excited to announce that you can now create new Dataverse tables and edit them using the table designer in the standalone model-driven app designer. This new feature allows you to have a one stop shop for all your table creation and data editing needs by saving you the time it takes moving between designers.  Create a new table – While creating a new Dataverse table is easy to do today, as a user who might have the need to add multiple tables to your app page or even continue from an already existing table, this newly launched experience will allow you to do all of these while still working in the model-driven app designer.  Edit your Dataverse table – Formerly, to create a new Dataverse table you would have to go to the Data sources pane from the model-driven app design to select the actual table needed to be edited which would usually automatically open up in a new tab causing loss of context between the action being taken and the work being done. With this new experience you can now make all your edits in one place, have your changes saved automatically and continue with the order of business.  Learn more about how to work-with-model-driven-app-pages  And this isn’t limited to just model driven apps! Also, for canvas apps, you can now create and edit Dataverse tables in the current Dataverse environment right from the canvas app designer.  You can also add and edit data in those tables right within the canvas studio without leaving the context of your work. Ready to get started? Learn more about creating Dataverse tables in the canvas app designer here. Automatically create a Power App from a REST API Custom connectors exist today to be the bridge between Power Platform and Azure Functions (or other REST APIs). But, there are still many manual steps that must be followed to create a functional Power App once a custom connector is in place. The ‘canvas create’ feature of the PAC CLI gives pro developers an easy way to get up and running by letting them automatically generate a functional Power App directly from a custom connector. With this feature, a single command line function will let developers generate a canvas app from their API definition.  The app can then be imported into Power Apps Studio for further edits or customization. Makers and developers alike can benefit from the productivity of low code and Power Apps to quickly build rich user experiences over their APIs. Learn more at the original blog post. Modern command bar in Canvas The modern command bar is now officially available behind the preview toggle in Settings for canvas page authoring. The new command bar not only has a modern look and feel but is also designed to improve your authoring experience. It allows a seamless customization experience of editing common controls by dynamically displaying the common properties directly within the command bar. This experience can be enabled via ‘Settings’ under ‘Upcoming features’ > ‘Preview’ in canvas web today and will soon be available by default. Learn more at the docs page. Install Apps via Power Platform CLI & Install API This capability enables automation of install and update experiences that are offered only through the Power Platform Admin Center experience today. Installs can also be automated for applications available from AppSource provided at least one such install of the said application has been made to another environment within the tenant. This public API and tools support opens the possibility for Admins and developers to install applications as part of CI/CD automated processes using their tool of choice. We have enabled this capability directly from Power Platform CLI to ease the onboarding effort for our customers; GitHub and Azure DevOps actions support is forthcoming. Enabling this API and associated tooling addresses a major gap in the Application Lifecycle Management (ALM) story for the Power Platform. We expect significant productivity gains for Pro-developers with this investment; they can now provision Dev, Test and Prod environments and install applications of their choice to those environments before importing their solution(s) ensuring the whole process can be fully automated. In many instances, solutions being developed require pre-requisite applications to be installed already in the target environment; this capability makes this achievable. Learn more at the original blog post and the App Install CLI Command, Step-By-Step Tutorial, and API Reference docs pages. Learning and Doc Updates We’ve also released new, and made updates to some of documentation – see a summary before of some of the key updates : We are looking forward to seeing everyone at the Microsoft sponsored Power Platform Conference on September 18-23 in Orlando, Florida. If you haven’t already you can register here. Please continue sending us your feedback on features you would like to see in Power Apps. We hope that you enjoy the update!

Improve monitoring of Dataverse plugins using Application insights

We are excited to announce that Application insights is now Generally Available for Dataverse plugins. We learnt from our customers how important it is to have monitoring available out-of-the-box and to easily get started with samples and recommendations including effective alerts, optimal queries, and customizable reports. To ensure that you can monitor your production workloads anywhere in a trustworthy manner, we have enabled state-of-art monitoring solution built on the Azure Monitor ecosystem designed to help prodevs to diagnose plugin timeouts, create custom alerts and reports, monitor global usage, and automatically detect patterns and anomalies in the telemetry data using the built-in Smart Detection feature, thus helping you to keep it always available, reliable and performant. How to enable it? 3 easy steps: Step1- Link your Dataverse environment with Application insights   workspace Step3- Login to Azure portal >Application insights workspace for plugin diagnostics Troubleshooting plugins inside Application Insights workspace Get Started Today! For more in-depth look, you can learn more about monitoring best practices here:

PowerApps Portals Build Tools – An Azure DevOps Extension to Automate Portal Deployment

 About PowerApps Portals Build ToolsThis tool empowers developers to enable CI/CD (Continuous Integration/Continuous Deployment) of portal configuration. You can use this tool to check-in the portal configuration to source control and move the portal configuration to any environment using...

Quick guide to use PCF Controls (Custom Code Components) in PowerApps Portals

IntroductionHi Everyone,I hope you are well, staying safe and healthy.Today I am extremely happy to share the recent Microsoft update, that Custom Code Components (PowerApps Component Framework Controls) or PCF Controls are now supported in PowerApps Portals.For those who...

PowerApps Portal – Control Azure AD User Access

Introduction:Hi Everyone,Welcome to the Power Guide Blog series. Hope you all are doing great and staying safe!In the past few days, I have got several queries regarding controlling the PowerApps Portal access to a particular group/subsidiaries or business unit.Let's...
- Advertisement -spot_img

Latest News

Deployment pipelines – announcing ‘Deployment History’ feature and ‘Azure DevOps extension’ GA

We’re excited to announce Deployment History, a new feature of Deployment pipelines, available today! Having troubles tracking a pipeline’s deployment executions? Something...
- Advertisement -spot_img