Microsoft has made several advancements when it comes to using AI to build Power Apps. In this post, we will look at Generative Pages, or Gen Pages.
Gen Pages is a technology that allows users to generate Power Apps pages, and more. In the past, we have relied on the Power Apps Maker Portal UI to build Power Apps model-driven app forms, which are restricted is various ways. With Gen Pages we have the ability to create pages almost without restrictions. The design is largely up to the user.
Why Use Gen Pages?
Gen Pages offers several advantages, including:
- The pages you build are not restricted by the typical out of the box form constraints. You can make them look and feel how you like.
- Rapid development of pages you can use in Power Apps.
- You theoretically don’t need to be a developer to use Gen Pages (depending on your scenario, it might help).
How to Use Gen Pages
There are 2 experiences in Gen Pages:
- AI code-generation tools
- In-browser authoring
The former is recommended as it gives you a lot more control, and in this post we will look at using AI code-generation tools.
AI Code Generation Tools
The pro-code experience is very much encouraged when it comes to using Gen Pages. Even though a core feature of Gen Pages is that “anyone can use it”, having a developer build a page through the pro-code experience gives you even more control and power.
To build a page using the pro-code method, you will need:
Once this is done, run the command:
iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js
Once you have all of this installed, connect to a Power Apps org in the pac cli. You can do this by opening a Terminal in VS Code (Terminal->New Terminal).
pac auth list will tell you which connections you currently have. Create a new connection if you don’t already have one with pac auth create –environment <envurl>.
Next, let’s create a new folder to keep our Gen Page in, and open that folder in VS Code. In my case, I have created a folder called GenPageTest:
We’re now ready to build our page. Let’s start with a simple example. Let’s say we want to build a page that displays accounts sorted by name.
Prompt:
Build a Gen Page that is a list of Contacts sorted by last name.
The AI then runs and determines how to implement this in the org. In my case, I have already created an app which lists Accounts. The AI is taking advantage of this app, and creating a Contacts page as specified. Note we can be as specific or not as we want.
Note also that when the AI is running you may need to approve requests as it runs.
Once complete, GitHub Copilot will deploy the page to your org (you don’t need to think about the pac cli commands), and you can iterate from there. We see here the AI has deployed our Contacts page!
And our React code is held locally:
We can see the page has built-in Search as well, type in a letter and it automatically filters the list:
Let’s iterate on this. Prompt:
Can you change this so instead of a view, it shows each customer in a tile.
On refreshing the page:
Once your page is built, you can continue to reiterate over the design as you like.
In our next post, we will look at how to use the Copilot CLI to create Gen Pages.
I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.
IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.
THANK YOU, AND LET'S KEEP LEARNING TOGETHER.
CARL
