If you’ve been working with AI in your business processes lately, you’ve probably run into a really frustrating roadblock: the gap between the chatty text an AI wants to give you and the structured data your automation actually needs.

Let’s say you’re building a Power Automate flow to pull details out of customer emails. You want the person’s name, the priority, and the category. Ideally, you want to get back something clean like this:

JSON:

{

"customer_name": "Sarah Johnson",

"priority": "High",

"issue_category": "Billing"

}

Instead, the AI usually gives out a whole paragraph:

“The customer, Sarah Johnson, appears to have a high-priority concern related to billing. It would be advisable to route this to the finance team for further assistance.”

That’s great if a human is reading it. But for an automated flow? It’s a nightmare. You end up trying to write expressions using ‘split()’ or regular expressions just to grab the values you want, and if the AI rephrases even slightly on the next run, those expressions break. The core issue is straightforward: AI produces conversational text, but automated systems require structured, predictable data.

Microsoft’s Power Platform has a fix for this inside the AI Builder Prompt action. Whether you are using Power Automate or Copilot Studio, you can just tell the AI to hand you back perfectly formatted JSON instead of a paragraph. And the best part? That JSON maps straight into your Dynamics 365 fields, your flow conditions, or your Copilot variables. No messy parsing needed.

Understanding AI Builder Prompts

The Prompt tool can be accessed via the Power Apps maker portal, under AI Builder in Prompts. It allows users to define a custom AI instruction with optional dynamic input variables, and the generated response can be consumed in Power Automate or in Copilot Studio. By default, the output is plain text, but switching the output format to JSON enables the AI to return a structured object that downstream actions consume directly.

As a general guideline: use text output when communicating with a user, and JSON output when communicating with a system.

Setting Up a Prompt with JSON Output:

Navigate to Power Apps maker portal, under AI Builder in Prompts select the Build your own Prompt.

When writing the prompt, three elements are essential: a clear task definition, the JSON schema (field names, data types, allowed values), and explicit output constraints (return only the JSON, no extra text or formatting). Define dynamic inputs by clicking on Input, for example, an ‘EmailBody’ variable to hold customer email text passed from a flow.

In the configuration panel, change the Output format from Text to JSON. Use the built-in Test feature to validate the response structure.

Once tested, integrate it into Power Automate via the “Run a prompt” action, or into Copilot Studio as a Prompt Tool directly or use it within a topic.

Automated Email Categorization with Power Automate

Support teams get flooded with emails every single day. Usually, a human has to sit there, read each one, figure out the priority, guess the customer’s mood, and write a summary.

By combining the Prompt tool with JSON output, you can put this whole categorization process on autopilot. Here is roughly how it flows:

– An Email Arrives: A distressed customer sends an email regarding a critical payment failure on their account.

– The Prompt Analyzes: Your flow triggers immediately, grabs that email text, and ships it over to the AI Builder Prompt you built.

– Clean Data is Structured: The AI reads it, understands the context, and hands you back a neat JSON block.

– Parsed for Automation: Using the “Parse JSON” action in Power Automate, the structured data is instantly converted into dynamic content. You can now use these variables anywhere in your flow to route the email to the right team, trigger an urgent alert, or seamlessly create a record in Dataverse.

Conclusion

Switching AI Builder Prompts to JSON output is a simple but powerful enhancement for building production-ready automation.

While text responses are useful for human interaction, JSON output provides the structure required for reliable system integration.

This approach:

• Eliminates fragile parsing logic
• Ensures consistent AI responses
• Enables direct mapping to business systems

For any solution involving Power Automate, Copilot Studio, or Dynamics 365, using JSON output is one of the most impactful improvements you can make with minimal effort.

FAQs

What is JSON output in AI Builder Prompts?

JSON output is a structured response format in AI Builder Prompts that returns data as key-value pairs instead of conversational text, making it easier for automation systems to process.

 Can JSON output integrate with Dynamics 365?

Yes, structured JSON fields can map directly into Dynamics 365 entities and records without additional transformation.

 Can JSON output integrate with Dynamics 365?

Yes, structured JSON fields can map directly into Dynamics 365 entities and records without additional transformation.

What problems does JSON output solve in AI automation?

It eliminates inconsistent AI responses, removes the need for regex or string parsing, and ensures stable automation workflows.

How do I enable JSON output in Power Apps AI Builder Prompts?

In the Power Apps maker portal, go to AI Builder → Prompts, create or edit a prompt, and change the output format from Text to JSON in the configuration panel.

The post How to Use JSON Output in AI Builder Prompts for Structured Automation first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

Earlier, the Task Details pane in Project Operations was standard and not customizable at admin level. When users clicked the info icon present next to a task, a fixed task pane from Project showed only predefined fields. Organizations could not add custom fields or modify the layout, so users often had to navigate away from the task grid to view or update additional task details.

Now, with the latest update, the task pane is customizable. Using this feature, we can customize tasks of a project within the Task Pane itself. This allows users to view and update all relevant task information directly from the task pane, improving efficiency while still keeping the option to access the original standard view if needed.

In this blog, let us explore how to Customize Task Pane in Project Operations.

• To enable theCustomize Task Pane feature in Project Operations, navigate to the Parameters entity present in the Settings
• Click on the Feature Control button on the ribbon bar, as shown below.

• After enabling Customize Task Pane feature, navigate to Projects area under Projects group click on Projects

Note: Choose Existing Project or create a New Project.

• Let us create a project with all the required details, save it and then navigate to the Tasks tab

• Add the tasks required to complete your project. Click on any task’s ⓘ icon to view its details in the new Task Side Pane.

• Now, let us navigate to Power Apps to customize the Task Side Pane. This customization allows users to view and update task details directly from the Task Grid, eliminating the need to open separate pages or navigate away from their current screen.
• As a result, users can manage tasks more efficiently within a single, streamlined interface.

 Steps to customize the Task Pane:

1. Navigate to Power Apps and click on Tables as below –

2. Search Project Task form and click on it.

3. In Data experiences select Forms & click on Task details

4. Customize the Task details form according to your requirements.

Note: You can customize the task pane whenever you want in Task details and publish it according to your requirements.

Note:  A Resource field is added in Task details form for customization.

5. Click on Save and Publish button to apply the changes.

6. Navigate to Project, Click on Tasks tab and click on any Task’s ⓘ icon to view Task details in new Task Side Pane.

Note: Resource field added in Task details form is visible in Task Pane.

Conclusion:

This approach allows us to customize the Task Details form so users can view and update additional task information directly in the Task Side Pane, without navigating away from the task grid.

The post How to Customize the Task Pane in Project Operations first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

In the Dynamics 365 and Power Apps ecosystem, we have several options for building applications, each one is for a specific type of requirement. Model-driven Apps works well when we need a structured UI with standard components, while we use Canvas Apps to create custom, mobile-friendly interfaces with a low-code approach. Recently, Microsoft introduced another application type called Code Apps, which offers a completely different way to build applications using pro code approach.

With the introduction of  Power Apps Code Apps, things have changed. Code Apps let us build standalone single page applications using modern web frameworks. These are independent applications that cannot be integrated with Canvas Apps or Model-driven Apps.

The best part is that we get direct access to more than 1,500 standard and premium connectors through the Power Apps SDK. We do not have to write any authentication code, no OAuth flows, no custom APIs, no middleware. We just have to connect and use.

In this article, we’ll walk you through creating a Code App from scratch. We’ll build Personal Dashboard, a simple application that pulls assigned cases and leads from Dataverse and shows current logged in user details using the Office 365 Users and Dataverse connectors.

What Makes Code Apps Different?

We can build a UI of our own choice and connect to a wide range of data sources using more than 1,500 standard and premium connectors provided by the Power Platform. All connections are secure because the Power Apps SDK handles authentication, and each connector enforces user-level permissions. This means the app can only access data that the signed-in user is allowed to see, so there’s no need to write custom authentication code.

Code Apps provide a balanced approach with several key advantages:

• A standalone application that runs directly within Power Platform
• Full development with modern web frameworks such as React, Vue, or Angular, with support for  your preferred libraries
• Direct access to connectors through the Power Apps SDK without custom authentication code
• Streamlined deployment through a single command to your environment

The connector integration is particularly valuable. Whether the need is to query Dataverse, access current user profile details, or use other services, the connector can be called directly. There’s no need to configure service principals, manage app registrations, or implement token management. The integration works seamlessly within the platform.

Prerequisites

Before getting started, we have to make sure the following prerequisites are in place:

• Power Apps Premium license with Code Apps enabled environment
• Visual Studio Code installed
• Node.js LTS version
• Power Platform Tools for VS Code extension

Step 1: Setting Up the Code App

Let’s create the app. Open VS Code, launch a PowerShell terminal, and run the following command:

npm create vite@latest PersonalDashboard — –template react-ts

For this application, we are using React as the framework and TypeScript as the variant. After that, navigate to the project folder and install the dependencies:

npm install

Install the node type definitions:

npm i –save-dev @types/node

After executing these commands, the project structure will appear as shown in the image below.

According to the official Microsoft documentation, the Power Apps SDK currently requires the port to be 3000 in the default configuration. To configure this, open vite.config.ts and replace the content with the following code:

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import * as path from 'path'

 

// https://vite.dev/config/

export default defineConfig({

base: "./",

server: {

host: "::",

port: 3000,

},

plugins: [react()],

resolve: {

alias: {

"@": path.resolve(__dirname, "./src"),

},

},

});

Note for Mac users: It may be necessary to modify the package.json scripts section.

Change from:

"scripts":  {

"dev": "start vite && start pac code run",

"build": "tsc -b && vite build",

"lint": "eslint .",

"preview": "vite preview"

}

to this

"scripts": {
"dev": "vite && pac code run",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
}

Save the file and run the Code App locally by executing:

npm run dev

Browse to http://localhost:3000. If the application loads successfully, press Ctrl+C to stop the server.

Step 2: Initialize the Code App

First authenticate to Power Platform:

pac auth create

After that, sign in with the credentials and select the environment:

pac env select -env <environment-url>

Initialize the Code App:

pac code init –displayName “Personal Dashboard”

This will create a power.config.json file in the project as shown in the image below.

Now install the Power Apps SDK. This package provides APIs that allow the application to interact directly with Power Platform services and includes built-in logic to manage connections automatically as they are added or removed.

npm install –save-dev “@microsoft/power-apps

Update package.json to run both Vite and the Power Apps SDK server:

"scripts": {
"dev": "start pac code run && vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
}

Step 3: Configure Power Provider

Create PowerProvider.tsx under src and add the Power SDK context provider code given below.

import { initialize } from "@microsoft/power-apps/app";

import { useEffect, type ReactNode } from "react";

interface PowerProviderProps {

children: ReactNode;

}

export default function PowerProvider({ children }: PowerProviderProps) {

useEffect(() => {

const initApp = async () => {

try {

await initialize();

console.log('Power Platform SDK initialized successfully');

} catch (error) {

console.error('Failed to initialize Power Platform SDK:', error);

}

};

initApp();

}, []);

return <>{children}</>;

}

Update the main.tsx and add this line in the imports section:

import PowerProvider from './PowerProvider.tsx'

and change this code snippet

<StrictMode>
<App />
</StrictMode>,

to this

<StrictMode>

<PowerProvider>

<App />

</PowerProvider>

</StrictMode>,

Run the app by executing :

npm run dev

Open the URL provided by the Power SDK Server in the same browser profile as that of power platform tenant.

Step 4: Adding Dataverse Connector

Now comes the part where we will add the data source to our application. In this step, we’ll use the Dataverse connector to fetch assigned cases and leads for the logged-in user.

For that First, we need to create a connection:

1. Go to Power Apps and open Connections.

2. Click New Connection and select Dataverse.

Follow the instruction properly to create the connection, as shown in the

Once the connection is ready, we have to open the terminal. For Dataverse, we have to add the tables required for the application. For this example, we’ll add the Leads and Incident (Cases) tables using the following commands:

pac code add-data-source -a dataverse -t lead

pac code add-data-source -a dataverse -t incident

After running these commands, we can see that some files and folders are added to the project. Inside the generated folder, there are services and models folders. These contain the files for Leads, Incidents, and other tables, which can be used in the code. For example:

import { AccountsService } from './generated/services/AccountsService';

Import type { Accounts } from './generated/models/AccountsModel';

CRUD operations can be performed on Dataverse using the app. Before accessing any data, we have to initialize the Power Apps SDK to avoid errors. An async function or state check can ensure the SDK is ready before making API calls. For example:

useEffect(() => {

// Define a function of asynchronous type to properly initialize the Power Apps SDK to avoid any error during runtime

 

const init = async () => {

try {

await initialize(); // Wait for SDK initialization

setIsInitialized(true); // Mark the app as ready for data operations

} catch (err) {

setError('Failed to initialize Power Apps SDK'); // Handle initialization errors

setLoading(false); // Stop any loading indicators

}

};

 

init(); // Call the initialization function when the component mounts

}, []);

 

useEffect(() => {

If (!isInitialized) return;

 

// Place your data reading logic here

}, []);

Step 5: Adding Office 365 Users Connector

Similar to Dataverse, we need to create a connection for Office 365 Users by following the same steps. Once the connection is ready, we need to add it to the application. First, list all available connections to get the connection ID using command:

pac connection list

It will list all the connections available in the selected environment. We need to Copy the connection ID for Office 365 Users from the list, then add it to the project using:

pac code add-data-source -a “shared_office365users” -c “<connection-id>”

After running this command, the Office 365 Users connector will be available to use in the application, allowing access to user profiles, and other Office 365 user data.

Step 6: Building the UI

There are two ways to build a good UI. The first is the traditional coding approach where we write the complete code manually. The second is by using GitHub Copilot integrated in VS Code with the help of prompts.

Using GitHub Copilot:

We can generate the UI by writing a detailed prompt in GitHub Copilot. Here’s an example prompt:

Create a Personal Dashboard UI component in React with TypeScript that displays:

1. A header section showing the current logged-in user’s profile information (name, email, job title, and profile photo) fetched from Office 365 Users connector
2. Two main sections side by side:

– Left section: Display a list of assigned Cases (Incidents) from Dataverse

* Show case title, case number, priority, status, and created date

* Use card layout for each case

* Add loading state and error handling

– Right section: Display a list of assigned Leads from Dataverse

* Show lead name, company, topic, status, and created date

* Use card layout for each lead

* Add loading state and error handling

3. Use modern, clean UI design with:

– Responsive layout (works on desktop and mobile)

– Tailwind CSS for styling

– Professional color scheme (blues and grays)

– Proper spacing and typography

– Loading spinners while data is fetching

– Error messages if data fails to load

After providing this prompt to GitHub Copilot, it will generate the complete component code. We can then review the generated code, make any necessary adjustments, and integrate it into our application.

Step 7: Deploy Your Code App

Once the code is complete and the app is running locally, the next step is to deploy the application. For Code Apps, deployment is straightforward. First, build the application by running:

npm run build

After a successful build, execute the following command to push the application to Power Apps:

pac code push

This command will deploy the application to Power Apps. To verify the deployment, go to the Power Apps portal and open the Apps section. The newly deployed Code App will be visible in the list as shown in the image below.

To run the app, click the play button. On the first launch, the application will prompt for permission to access the connected data sources. After allowing the permissions, the application will use those connection references for all subsequent operations.

Conclusion

With Power Apps Code Apps, we can now build standalone applications. The real advantage here is the direct access to over 1,500 connectors through the Power Apps SDK. We can connect to Dataverse, Office 365 Users, and other services without writing any authentication code. The Power Apps SDK handles all the security, and each connector respects user level permissions automatically.

We also get complete freedom to design our own UI using any libraries we prefer. The deployment process is simple. Just run the build command and push it to Power Platform with a single command.

In this article, we built a Personal Dashboard that pulls data from Dataverse and Office 365 Users. The same approach works for any application that needs to connect with Power Platform services. The setup is straightforward, and once the project is initialized, adding new data sources is just a matter of running a few commands.

Code Apps provide a practical way to build custom applications within the Power Platform ecosystem while maintaining secure connections and proper access control.

Frequently Asked Questions (FAQs)

What are Power Apps Code Apps?

Power Apps Code Apps are a new application type in Microsoft Power Platform that allow developers to build standalone single-page applications using modern web frameworks such as React, Angular, or Vue. They provide direct access to Power Platform connectors through the Power Apps SDK without requiring custom authentication code.

How are Code Apps different from Canvas Apps and Model-Driven Apps?

Unlike Canvas Apps and Model-Driven Apps, Code Apps:

• Are fully standalone applications
• Use a pro-code development approach
• Allow complete control over UI and application architecture
• Cannot be embedded into Canvas or Model-Driven Apps
• Use modern frontend frameworks instead of low-code designers

Do Power Apps Code Apps require authentication setup?

No. Authentication is handled automatically by the Power Apps SDK. Developers do not need to implement OAuth flows, manage tokens, or configure app registrations. All connectors enforce user-level permissions by default.

Can Power Apps Code Apps connect to Dataverse?

Yes. Power Apps Code Apps can connect directly to Dataverse using the Dataverse connector. Developers can perform CRUD operations on Dataverse tables, such as Leads and Incidents once the SDK is initialized.

How do Code Apps access Office 365 user information?

Code Apps use the Office 365 Users connector to retrieve profile details such as name, email, job title, and profile photo. The connector respects the signed-in user’s permissions automatically.

The post Building Standalone Apps with Power Apps Code Apps: Using Dataverse and Office 365 Users Connectors (Part 1) first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

If you’ve ever tried building apps with Microsoft Power Apps, you know the process: creating tables, designing screens, adding controls, connecting data, and writing formulas. While the traditional app-building process is effective, it can also be time-consuming and complex.

But now, imagine this:

You simply describe the app you need, and within minutes, Power Apps Vibe takes over:

• A complete data model is generated.
• UI screens are automatically designed.
• Built-in logic is incorporated.
• A functional prototype is ready to go.

All this, without having to drag a single control or write a line of code.

Welcome to Power Apps Vibe—a revolutionary AI-powered app development platform. Unlike traditional app design methods, Power Apps Vibe makes building apps simpler, faster, and more intuitive than ever before.

Instead of spending hours designing screens and wiring logic, Vibe transforms app development into a simple, conversational experience. You describe what you need, and it creates the foundation for your app—data model, UI, navigation, and logic—automatically.

In this blog, I’ll break down what Vibe is, why Microsoft created it, and how you can start building full-stack apps with nothing more than a sentence.

What is Power Apps Vibe?

Power Apps Vibe is Microsoft’s AI-driven app-building experience, designed to simplify app development. Available now in preview, this feature combines the best aspects of low-code and AI-powered development into a single, seamless interface.

Unlike traditional app-building tools such as Canvas or Model-Driven apps, Vibe functions like a creative partner, helping you bring your app ideas to life faster. Here’s how it works:

• You describe your app’s requirements in simple language.
• Power Apps Vibe automatically creates:
  • The data model behind your app.
  • The UI screens you need.
  • Navigation and action flows.
  • The core logic for functionality.

You still have full control to modify or refine any aspect of the app. Think of Power Apps Vibe as a combination of Power Apps, an AI architect, a UI designer, and a developer, all within a single interface.

Think of it as Power Apps + a smart architect + a designer + a developer, all rolled into one interface.

Why Did Microsoft Introduce Power Apps Vibe?

The goal behind Power Apps Vibe is simple: to make app development faster, smarter, and more accessible for everyone, from business users to developers.

Organizations often face challenges such as:

• Long development cycles
• Lack of skilled developers
• Difficulty translating business ideas into working apps
• Fragmented requirements
• Slow prototype development

Power Apps Vibe addresses these issues by enabling anyone, whether a business user, analyst, or developer, to rapidly create a solid app foundation. With Vibe, you can skip the time-consuming setup and dive straight into customizing the app for your specific needs.

We can maintain full control for customization, but the time-consuming initial setup is handled for us.

Where Do You Access Power Apps Vibe?

Currently, Power Apps Vibe is available in preview and is not yet part of the standard Power Apps studio. To get started, head over to the preview portal: Power Apps Vibe Preview

Simply sign in with your Microsoft account, and you’ll be greeted with a clean, intuitive workspace. A large prompt box will be ready for your ideas, making it easy to get started.

To use it, Navigate to:

https://vibe.preview.powerapps.com

Sign in with your Microsoft account, and you’ll enter a clean, streamlined workspace featuring a large prompt area—ready for your ideas.

How to Build an App Using Vibe?

Step-by-Step Guide to Building an App with Power Apps Vibe

Here’s what surprises most people:

Using Power Apps Vibe feels less like coding and more like having a conversation with a colleague. You describe what you need, and Vibe does the heavy lifting. Here’s how the process works:

Let’s walk through the complete process step by step.

Step 1: Describe the App You Want

In the prompt box, simply describe your app in plain language. You don’t need to worry about technical jargon or formatting. For example:

“I want to build a Time Entry Admin app. Admins should be able to update the Base Pay Code, view a list of time entries, and edit the Base Pay Code only on this screen.”

No need for complex formatting or technical jargon.
Just describe your app idea as if you were explaining it to a teammate – simple, clear, and conversational.

Step 2: Vibe Generates Your App Plan

Once you submit your prompt, Vibe analyses your requirements and generates a detailed plan. This blueprint typically includes:

• The tables it will create
• The fields within those tables
• The screens your app will have
• Actions and commands for functionality
• Navigation flow between screens

Test Prompt:

“Create an app for managing Time Entries. The main screen should list all time entries. When I click a row, take me to a detail screen. Admins should be able to update the Base Pay Code on this screen. Non-admin users should not be able to edit this field.”

It’s essentially the blueprint of your app. If something doesn’t look right, you don’t need to start over – just refine your prompt. For example:

• Add an audit field
• Change the name of this table
• Make Base Pay Code read-only for non-admins

Vibe instantly updates the plan based on your instructions, making the process feel conversational and effortless.

Step 3: Create the App

Once your plan looks good, simply click Create App.

Vibe now builds:

• The user interface (UI)
• Interactive forms
• The underlying data model
• Core logic for functionality

This process yields a functional web application that is available for immediate preview.

Vibe handles all the heavy lifting so you can focus on refining ideas instead of wrestling with syntax.

Step 4: Refine the App Through Natural Language

This is where Vibe feels different from anything we’ve seen before.

You can simply chat with it:

• “Make the Base Pay Code field bigger.”
• “Add a dashboard screen with totals.”
• “Add a search bar at the top.”
• “Show only records assigned to the logged-in user.”

And Vibe will update the app instantly.

It’s the first time Power Apps feels like a conversation instead of a tool.

Step 5: Save Your App

When you save the app for the first time, Power Apps stores:

• the app
• the plan
• the screens
• and the data model

All inside a single solution.

It becomes part of your Power Apps environment, just like any other app.

Step 6: Connect to Real Data (Optional)

When you first build the app, it uses “draft data” –  temporary tables that exist only for prototyping.

Once your app is ready for real use:

1. Go to Data
2. Connect to Dataverse, SQL, SharePoint, or any supported source
3. Map the fields
4. Publish the app again

This step turns your prototype into a production-ready application.

Step 7: Publish and Share

Once everything looks right, click Publish.

Your app becomes live, and you can share it with your team exactly like any other Power App.

Where Power Apps Vibe Really Shines

After playing with it, I realized Vibe is perfect for:

• Rapid prototyping
• Converting ideas into real apps within minutes
• Building admin tools
• Internal dashboards
• Small line-of-business apps
• Automating manual processes
• Mockups for client demos
• Reducing the back-and-forth between business teams and developers

It reduces friction. It reduces waiting. It reduces technical complexity.

You still get full control — formulas, data, actions, security, connectors — everything you normally have in Power Apps remains available.

But the start is dramatically faster.

Limitations to Keep in Mind for Power Apps Vibe

Since Vibe is still a preview feature, a few things have limitations:

• You cannot edit Vibe apps in the classic Canvas app studio.
• If you export/import the solution, it may break the link with the AI “plan.”
• It currently supports creating only one app per plan.
• Existing Dataverse tables aren’t automatically suggested during generation.
• Some refinements still need to be done manually.

But even with these limitations, Vibe is powerful enough to start real-world projects and prototypes.

Final Thoughts

Power Apps Vibe is one of the biggest updates to the Power Platform in years.
It brings a fresh, modern, conversational style of development that feels more natural and less stressful.

Instead of spending hours designing screens and wiring logic, you can now focus on:

• Refining ideas,
• Improving workflows,
• And delivering value faster.

If you haven’t tried it yet, open the preview today and type the first idea that comes to mind.
You’ll be surprised how quickly it becomes a working app.

Frequently Asked Questions: Power Apps Vibe

1. What is Power Apps Vibe and how is it different from traditional Power Apps development?

Power Apps Vibe is an AI-powered app-building tool that allows you to create full-stack apps simply by describing your requirements in natural language. Unlike traditional Power Apps, which involve manually designing screens and writing formulas, Vibe automatically generates the data model, UI, navigation, and logic. It simplifies app development by transforming it into a conversational, automated process.

2. Can I use Power Apps Vibe without any coding knowledge?

Yes, Power Apps Vibe is designed for users with little or no coding experience. It allows you to create apps by simply describing what you want in plain language. The AI handles the complex aspects of app development, such as data modeling, UI design, and logic, so you can focus on refining your ideas rather than writing code.

3. Is Power Apps Vibe available for all users or only those in certain regions?

Currently, Power Apps Vibe is in preview and can be accessed by users who sign in through the dedicated portal at https://vibe.preview.powerapps.com. While the feature is available globally, its availability might vary based on regional preview settings and Microsoft’s rollout timeline. Keep an eye on updates for broader access.

4. What are some limitations of Power Apps Vibe?

While Power Apps Vibe is a powerful tool, it does have some limitations:

• You cannot edit Vibe-generated apps in the classic Canvas App Studio.
• The feature currently supports only one app per plan.
• Existing Dataverse tables aren’t automatically suggested during the app creation process.
• Some refinements still require manual adjustments after the initial app is generated.

5. How can I connect my Power Apps Vibe app to real data?

Once your prototype is ready, you can connect your Power Apps Vibe app to real data by navigating to the Data section within Power Apps and linking it to supported data sources such as Dataverse, SQL, or SharePoint. After mapping the fields, you can publish the app again to make it production-ready.

The post Build AI-Powered Apps in Minutes with Power Apps Vibe: A Complete Guide (Preview) first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

Introduction

Just like we explored in Part 1, where Events in the PowerApps Component Framework (PCF) brought new possibilities to Model-Driven Apps, the same feature can be just as powerful in Canvas Apps. With Events, PCF controls can now trigger Power Fx expressions directly, enabling seamless interaction between the Custom UI components and App logic.

This is part 2 of the PCF events series, where we’ll explore how to use Events in PCF to trigger Power Fx expressions in Canvas Apps, with practical examples and real-world use cases to help you apply this pattern effectively.

Scenario: Triggering Power FX Expression through PCF control (Canvas App)

Canvas App offers great flexibility with standard controls (like buttons, dropdowns, sliders), but sometimes you hit UI limitations, such as –

• No way to create interactive, animated, or visually branded UI components.
• Lack of complex layout logic, like multi-step chips, dynamic tag selectors, or compact visual pickers.
• Can’t achieve gesture-based interactions (e.g., swipe, drag, hover preview) using default controls.

These are situations where design or user experience is central to your business logic, and native Canvas App controls just aren’t enough.

Use Case:

Let’s build a Product Selector Canvas App that includes a PCF Component to display a list of products like Refrigerator, Mobile, TV, and Audio, each with its icon and description. Here’s a screenshot attached below for how the Canvas app looks.

When the user clicks on a product, the PCF control will trigger a custom event that contains the Power Fx expression, which sets the product name in the Product Gallery that will show the corresponding product.

Let’s start with a step-by-step guide to build this.

Step-by-Step Implementation

Step 1: Define the custom event in the control’s manifest file.

Just like we did for the model-driven app scenario, define the custom event in the ControlManifest.Input.xml:

<event name=”productEvent” display-name-key=”Product Click Event” description-key=” Triggers when a product is selected” />

Step 2: Add and Trigger the Event in the PCF Control (index.ts)

Within index.ts, pass the event handler via props and invoke it at the appropriate point:

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {

const props: IProductSelectorProps = {

onProductClick: (productName: string) => {

this.selectedProduct = productName; // Update selected product

this.notifyOutputChanged();

context.events?.productEvent(productName);

}
}
return React.createElement(ProductSelector, props);
}

Step 3: Update the React Component (ProductSelector.tsx)

In ProductSelector.tsx, trigger the event when the user interacts with your custom UI like selecting the product:

export interface IProductSelectorProps {

onProductClick: (productName: string) => void;

}

export const ProductSelector: React.FC<IProductSelectorProps> = ({ onProductClick }) => {

//Your existing logic

return(

// Render list of products

<IconButton iconProps={{ iconName: "ChevronRight" }} ariaLabel="Select"

onClick={() => onProductClick(product.name)}
/>
);
}

Step 4: Configure the Canvas App (Power Fx)

In the Canvas App, add the ProductSelector PCF component and configure it to interact with the app using Power Fx.

Note: To add the PowerApps Component Framework in the Canvas App, make sure the feature is turned ON in the Power Platform Admin Center. You can find this by navigating to the admin center, selecting the environment, and clicking on Settings. Under the Product select Features option. Here, you will find a list of all the features, including the one we need to turn ON.

Insert the ProductSelector PCF control into your Canvas App.

Select the PCF Control and set the productEvent property of the component to update a global variable (SelectedProduct) with the product selected:

Set(SelectedProduct, ProductSelector.productEvent)

You can refer to the screenshot below.

Result: A Dynamic and Interactive Product Selector

Once configured, your Canvas App will respond instantly to interactions from the PCF control, providing a seamless and dynamic product selection experience. Each product click in the PCF control conditionally displays the corresponding products.

This integration showcases how PCF and Power Fx can work together to overcome Canvas App limitations and deliver a highly customized UI. You can refer to the screenshots below:

Conclusion

With the introduction of Events in the PowerApps Component Framework (PCF) for Canvas App, the gap between the Custom UI and App Logic has finally been filled. PCF controls are no longer just static, isolated elements — they can now communicate directly with Power Fx expressions, making the experience far more dynamic and interactive.

The post Run Power FX expressions through PowerApps Component Framework Events: Part 2 first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

The Power Apps Component Framework (PCF) has long empowered developers to create custom controls for Power Apps, but its interaction capabilities were historically limited.

In model-driven apps, form interactions were confined to some core events, which are OnLoad, OnChange, TabStateChange, and OnSave, tied to the form lifecycle or field updates.

PCF controls could only trigger OnChange by updating a bound field, restricting direct communication with the parent form. Similarly, in canvas apps, PCF controls faced challenges in dynamically interacting with Power Fx expressions or external scripts in a model-driven app.

With the introduction of Events in PCF, these barriers have been significantly reduced. Developers can now define and raise custom events within PCF controls, enabling seamless communication with form scripts in model-driven apps or Power Fx logic in canvas apps.

This blog is part 1 of the PCF events series, where we’ll explore how to leverage Events in PCF to call external scripts in Model-Driven Apps, walk through practical examples, and highlight best practices and use cases to implement these patterns effectively.

Scenario: Calling our Custom Events in Form Script through PCF control (Model-driven App)

Let’s consider a scenario where an admin configures user-specific features via a User Feature Settings form within CRM. The form includes a PCF component that displays a dropdown of features fetched from a Features List API, including each feature’s name and its supported regions, respectively.

Now, here, instead of binding the onChange event within the CRM, which will require updating our bound field of the PCF control to indirectly trigger form scripts, we created our custom event named featureChange. This event triggers whenever the feature field value changes, allowing seamless interaction of the PCF component within the CRM form itself.

Here is our visual image for our PCF component.

Now, when the admin selects a feature, the form checks if the feature is supported in the user’s region and enables the respective settings. If not, a form-level notification is displayed.

Let’s walk through how to implement events in our PCF control with a step-by-step guide to implement events.

Step-by-Step Implementation

Step 1: Define the Custom Event in the PCF Manifest

Define the custom event that the PCF control will expose. This is done in the same way as we define properties in the ControlManifest.Input.xml. Here’s what the new event declaration looks like:

<event name=”featureChange” display-name-key=”featureChange” description-key=”The event to handle feature change.” />

Step 2: Implement the Event in the PCF Control (index.ts)

In index.ts, define a method to fire the event and pass it to your React component via props. Include parameters (e.g., a selected license key) to provide context to the form script.

private handleValidate = () => {
if (this._selectedFeature) {

this._context.events.featureChange({

featureKey: this._selectedFeature,

supportedRegions: this._supportedRegions.map(r => r.toLowerCase()),

});

}

};

 

private handleFeatureChange= (key: string, supportedRegions: string[]) => {

this._selectedFeature = key;

this._supportedRegions = supportedRegions;

};

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {

const props: IFeatureControlProps= {

featureChange: this.handleValidate,

onFeatureChange: this.handleFeatureChange,

};

return React.createElement(FeatureControl, props);

}

Step 3: Update the React Component (FeatureControl.tsx)

In your React component, define the props interface and bind the event handler to the onChange of the Dropdown. So, when the user changes the option in the Dropdown, the onFeatureChange and featureChange methods will be triggered. The featureChange is the event that we had set in the Manifest file.

export interface IFeatureControlProps{

featureChange: () => void;

onFeatureChange: (selectedKey: string, regions: string[]) => void;

}

export const FeatureControl = (props: IFeatureControlProps) => {

const [selectedKey, setSelectedKey] = React.useState<string | undefined>(undefined);

return (

<div>

<Dropdown options={options} selectedKey={selectedKey}

onChange={(event,option) => {

const key = option?.key as string;

const regions = (option as IFeatureOption)?.data?.supportedRegions || [];

setSelectedKey(key);

props.onFeatureChange(key,regions);

if(key) { props.featureChange(); }

}}

placeholder="Select a feature"

styles={{ root: { minWidth: 200 } }}

/>

</div>

);};

Step 4: Update the Existing Form Script (TypeScript Web Resource)

Update your existing web resource to handle the featureChange event. Register it on the form’s on-load event to attach the event handler to the PCF control. So, when the event is triggered from the PCF control, it invokes the method defined in this script –

namespace IKL{

export namespace FeatureControl {

export class CheckFeature {

private readonly controlName = "sha_features";

public onLoad(executionContext: any): void {

let formContext = executionContext.getFormContext();

let featureControl = formContext.getControl(this.controlName);

if (featureControl ) {

featureControl.addEventHandler("featureChange", (params: any) => {

this.onFeatureChange(params, formContext);

});

}

}

public onFeatureChange(params: any, formContext: any): void {

//Here, our logic for enabling settings and showing form-level notification will come.

}

}

}

}

let featureValidate = new IKL.FeatureControl.CheckFeature();

Summary: What’s Happening Here:

• We define a custom event (featureChange) in the manifest file.
• In the PCF control, we fire that event from the React Component when the user selects/changes the dropdown option.
• The JavaScript Web Resource present on the CRM Form listens for that event and executes the logic.

Time to See It in Action

Now that everything is wired up, event in the manifest, handler in the control, and logic in the form script, you’re ready to test it. Load up your form, interact with the control, and watch how your external script reacts instantly. Smooth, seamless, and finally possible thanks to the PCF Events!

Now, based on the user’s selected feature, the PCF control’s FeatureChange event enables the corresponding settings. Refer to the screenshots below for a better understanding.

Conclusion

The introduction of Events in PowerApps Component Framework (PCF) has extended its limits of what developers can do with the field-level controls. What once seemed to be a rigid, isolated environment now has a more interactive and integrated ecosystem, allowing PCF controls to communicate directly with the Parent Form.

Whether you’re triggering form script events or updating related fields, Events are a bridge between the PCF control and the CRM form. This capability of Events not only simplifies complicated workarounds but also promotes cleaner, more consistent, and maintainable code.

As you design your next PCF control, consider leveraging Events to create more powerful, flexible, and context-aware experiences across model-driven apps.

The post How to Call External Scripts using PowerApps Component Framework Events: Part 1 first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.