Skip to content

Vibe coding with Power Platform

Microsoft released one of the most exciting features of the year from a Power Platform perspective over the summer: the ability to build an app from scratch using natural language. This immediately became, in my opinion, one of the most useful AI features of Power Platform.

In practice, this is an import of the much-talked about vibe coding into the Power Platform environment. In vibe coding, the user does not write program code in the traditional way. The user simply tells the language model what they want, and the language model writes the necessary program code based on this.

But all this is best explained with an example.

Example – Interactive Gantt Chart

What is the feature I’ve been asked about the most that can’t be implemented with canvas Power Apps (without using PCF components)? Editing the elements displayed in the user interface by dragging and dropping. This time, let’s make an application that can schedule appointments related to Work Orders. So that the appointments are visually presented in a Gantt chart. Appointments can be rescheduled by dragging them from one place to another on the timeline. Something that has been difficult to implement with the platform’s own tools until now.

Restrictions

The feature used in the example (generative page) is still in preview phase. Therefore, it has various limitations:

  • Only possible in environments created for the US region (like all new AI features).
  • Only Dataverse can be used as a data source. The application can use a maximum of six tables. The tables to be used must be specified in the first prompt.
  • You cannot modify the generated code yourself.
  • The feature can only be used to build applications that are used as part of model-driven apps. Similar to custom pages.

Data model

Let’s start by creating two tables in Dataverse.

  • Work Order​
    • Name
  • Work Appointment​
    • Name
    • Start time
    • End time
    • Work location to which the visit is related

Making an application

First we create a model-driven app for editing work items and related visits in the traditional way.

Let’s move on to editing the application. In the pages section, select New and then Describe a page.

First, we describe what kind of application we want to build. The prompt can be as long as 50,000 characters. You can try to describe everything you want in detail in the first prompt. Or you can do as I did, first describe what you want at a high level and then start adding features little by little.

In the example, we use the following prompt:

Make page for user to schedule work appointments. I like to have Gantt style view showing work appointments. by default view should show appointments for next 7 days. User can easily add new appointments and edit existing ones (clicking appointment opens the edit form). But user should also be able to drag appointments on gantt view. whole appointment to new location or just drag from the beginning or the end of appointment.

Add the tables to be used to the prompt (Add data -> Add table).

Only tables added to the application can be selected from the list.

You can also add tables directly at the prompt by starting with a / and continuing with the table name.

You can also add images to the prompt. For example, a sketch of the user interface. In the video below, you can see how the AI first analyzes what was asked of it and then starts writing code.

Hypnotic.

The final result is not quite ready yet. I forgot to mention that the visits should be shown in the chart per work item.

No problem. I can continue working on the application together with the AI. Let’s ask it to add the work items to the visualization.

And so the work continues. In small (or large) batches. After each correction request, the AI ​​rewrites the entire application. Sometimes there’s no way to get it to implement the functions it wants. For example, the visit creation and editing form was completely overwhelming for it. The reason turned out to be the control needed to define the start and end times of the event. It got stuck with them. The solution was to completely remove the editing of times from the form. Times are edited by dragging tasks to a new location. New tasks are always created for the first day of the view.

I made the following changes to my application (or I didn’t do anything, I just asked the AI ​​to do it):

  • Show also work orders having no appointments.
  • Work orders can be freely filtered using the search.
  • You can also drag appointments from one work order to another.
  • While dragging, the user is shown the current start and end time
  • Start and end times are always accurate to 15 minutes.
  • The view can be scrolled forward and backward.
  • User can choose to view 7 or 30 days of appointments
  • Few minor enhancements on UI

After publishing my app this is what it finally looks like:

Summary

There’s a huge hype around vibe programming right now. Some people think that coders will soon be gone. Others think that vibe coding is such a pain in the xxx that no one should even touch it with a long stick.

The truth is probably somewhere in between. I’ll end with a few more thoughts of my own. Specifically about this implementation of Power Platform.

  • Making a small application like our example is handy. The end result is functional and I could easily use it as part of a larger solution just like a custom page.
  • In practice, many Canvas Power Apps are much more extensive in their functionality. They do many different things, between which there can be complex dependencies. The user interface logic can also be very complex. Time will tell how building such apps works in the way presented now.
  • Current restrictions limit usage quite a bit (e.g. max 6 tables).
  • Power Platform (Dataverse) + vibe coding is a great combination. The platform comes with authentication and Dataverse security roles to ensure that vibe coding cannot influence what data users see, what they can add, edit, etc.
  • You can edit a published application (=ask artificial intelligence to edit it). You can go back to a specific version of the application (=to the situation after a specific prompt).
  • The version I tested uses the GPT-4.1 language model. But very soon you will be able to use GPT-5, which will make things a lot better and faster (hopefully).

This is already an amazing feature. Would I use it to build a complex business-critical system? Absolutely not. But I will definitely use it for a lot of lighter uses.

The promise of Canvas Power Apps was once the following

  • Making apps becomes possible for more and more people.
  • Applications can be made for uses that previously did not make economic sense (even single-use applications).

The promises haven’t changed, but their fulfillment has grown exponentially.

AICopilotDataverseGenerative pagesGPTLLMPower Appsvibe coding

Leave a Reply

Your email address will not be published. Required fields are marked *

Forward Forever logo
Cookie settings

This website uses cookies so that we can provide you with the best possible user experience. Please select the cookies you want to allow.