Create a low code app with chatGPT as copilot

Anand • 2023-01-29

After having it write a blog post for me recently and having it suggest new year eve celebration ideas, I decided to test chatGPT’s capability to help me build an app in PowerApps.

The idea with the app is simple, a roulette spinning wheel to randomly select a user (or word) after the wheel stops spinning. Like this:

What follows now is how I built this by having a chat conversation with the chatGPT of OpenAI. Alongside that, I will state what decisions I made and why I made them.

Here is how I started. I opened a new chat conversation with chatGPT.

chatGPT: Here is an example of PowerApps code that can be used to create a spinning roulette wheel that randomly selects a user from a list of users:

// Create a list of users.
ClearCollect(users, {name: "User 1"}, {name: "User 2"}, {name: "User 3"}, {name: "User 4"}, {name: "User 5"});
// Create a button to spin the roulette wheel
Button1.OnSelect = // Spin the roulette wheel
UpdateContext({ spinning: true });
SpinWheel.Start();
SpinWheel.Duration = 2000;
SpinWheel.OnComplete = // Randomly select a user from the list
UpdateContext({ selectedUser: First(Filter(users, Round(Rnd() * Count(users), 0) = Index)) });
// Stop spinning
UpdateContext({ spinning: false });
// Create a label to display the selected user
Label1.Text = "Selected User: " & selectedUser.name;

This code uses the ClearCollect function to create a list of users, a button to spin the roulette wheel, and a label to display the selected user. The SpinWheel animation is used to give the effect of a spinning roulette wheel, and the Round and Rnd functions are used to randomly select a user from the list.

You can already tell there are some things that need to be translated to the PowerFx language for PowerApps. And it has made some assumptions such as the SpinWheel Start function. I cannot use this as it is, so I said that to chatGPT.

chatGPT: You’re correct that the SpinWheel function is not a built-in function in PowerApps. Here's an example of how you can create a spinning roulette wheel effect using the built-in "Rotate" animation in PowerApps:

// Create a list of users
ClearCollect(users, {name: "User 1"}, {name: "User 2"}, {name: "User 3"}, {name: "User 4"}, {name: "User 5"});
// Create a button to spin the roulette wheel
Button1.OnSelect = // Spin the roulette wheel
UpdateContext({ spinning: true });
Rotate(rouletteWheel, 360, Duration=2, LoopCount=1, Easing = Easing.Linear);
// Randomly select a user from the list
UpdateContext({ selectedUser: First(Filter(users, Round(Rnd() * Count(users), 0) = Index)) });
// Stop spinning
UpdateContext({ spinning: false });
// Create a label to display the selected user
Label1.Text = "Selected User: " & selectedUser.name;

Also, the code is also using the Rnd() function to randomly select a user from the list, and the Round() function to round the Rnd() output to a whole number so we can use the index in the filter function, and the Filter() function to filter the list of users based on the randomly selected index.
You can adjust the rotation angle, duration, loop count and easing to achieve the desired spinning effect for your roulette wheel.

chatGPT recommended a Rotate function but there is no built-in rotate function like it says.

You’re correct that the Rotate function is not a built-in function in PowerApps. However, you can still create a spinning roulette wheel effect using an image. One way to do this is by using a timer to repeatedly update the rotation property of the image. Here's an example of how you can do this:

//Create a variable to store the rotation angle of the
imageSet(rotationAngle, 0);
//Create a timer to update the rotation angle
SetTimer(SpinWheelTimer, 1000, true); SpinWheelTimer.OnTimerEnd = UpdateContext({ rotationAngle: rotationAngle + 10 });
//Create an image control for the roulette wheel
Image1.OnRender = Transform( Rotation = rotationAngle, Image1.Image )
//Create a button to start the spinning Button1.OnSelect = StartTimer(SpinWheelTimer); //Create a button to stop the spinning
Button2.OnSelect = StopTimer(SpinWheelTimer);

The Button1 is used to start the spinning, and the Button2 is used to stop the spinning. You can adjust the timer interval and the rotation angle increment to achieve the desired spinning effect for your roulette wheel.
Also, you could use an image of a roulette wheel and set the image source to the image you want to display.
Keep in mind that, this will create an animation effect, but it won’t generate a random user from a list of users, you should add another block of code to randomly select a user as I explained in previous answers.

Now we are getting somewhere. It suggests the Timer which is valid in PowerApps and explains the logic well. I just needed to insert the Timer “SpinWheelTimer” and set the duration and OnTimerEnd properties like it said.

//In the OnTimerEnd property
UpdateContext({ rotationAngle: rotationAngle + 10 })

A “Spin” text on the Timer to start the Timer through a variable.

//In the OnSelect property of the Timer
UpdateContext({StartTimer: true})

I set the rotationAngle variable at the App.OnStart property.

//In the App.OnStart property
Set(rotationAngle, 0)

Next for the Image, I ask chatGPT to help me with creating the SpinWheel using SVG (scalable vector graphics) so I can add the rotation animation that it mentions.

chatGPT: Here is an example of SVG code for a basic spin wheel:

<svg width="300" height="300">
<circle cx="150" cy="150" r="100" fill="white" stroke="black"/>
<circle cx="150" cy="150" r="80" fill="none" stroke="black"/>
<circle cx="150" cy="150" r="60" fill="none" stroke="black"/>
<circle cx="150" cy="150" r="40" fill="none" stroke="black"/>
<circle cx="150" cy="150" r="20" fill="none" stroke="black"/>
<line x1="150" y1="50" x2="150" y2="250" stroke="black"/>
<line x1="50" y1="150" x2="250" y2="150" stroke="black"/></svg>

You can customize the appearance of the wheel by adjusting the attributes of the SVG elements, such as the fill color, stroke color and width, radius, etc.
To make it more interactive, you can add javascript function to make it spinning, or you can use the same method I explained before using the PowerApps.

Although it explains the svg it created, this just produces a bunch of circles but what I am after requires paths of straight lines going from the centre of the circle to the circumference. So, I continued a few times rephrasing my prompt but no matter what I prompted, chatGPT did not give me the pie chart I was after.

So, I tried a different approach. I opened a new conversation with chatGPT and gave it a different prompt.

chatGPT: To divide a circle into 8 equal pies, you can use a compass and a straightedge. First, set the compass to the radius of the circle, and use it to draw a circle. Then, use the straightedge to draw a line from the center of the circle to the edge of the circle, dividing the circle into two equal halves. Next, use the compass to draw arcs that intersect the center of the circle and the edge of the circle at 90-degree intervals. Finally, use the straightedge to connect the points where the arcs intersect the edge of the circle, dividing the circle into 8 equal pies.
Me: How to create this in PowerPoint
chatGPT: To create a circle divided into 8 equal pies in PowerPoint, you can follow these steps:
Open PowerPoint and create a new slide.
Select the “Shapes” button in the “Illustrations” group of the “Insert” tab.
Click on the “Circle” shape to insert it into the slide.
Use the white dot handles on the circle to adjust the size of the circle to your liking.
Click on the “Line” shape in the “Shapes” button, and draw a line from the center of the circle to the edge of the circle, dividing the circle into two equal halves.
To divide the circle into 8 equal pies, you need to create four lines that intersect the center of the circle and the edge of the circle at 90-degree intervals. To do this, you can use the “Ruler” tool. Go to “View” -> “Ruler” to activate the ruler, and then use the ruler to draw the lines by holding Shift key on the keyboard while drawing with the line shape.
Use the “Format” tab to adjust the color, thickness, and other properties of the lines.
You can use the “Textbox” tool to add text or numbers to the slices if desired.
Once you have finished, you can adjust the position of the elements and the size of the image as needed.
It’s important to note that this is just a basic example, and you can customize the image to suit your needs.
Me: (knowing I could use the chart feature for this and export it in svg format) How to create this using the chart feature in PowerPoint?
chatGPT: To create a circle divided into 8 equal pies using the chart feature in PowerPoint, you can follow these steps:
Open PowerPoint and create a new slide.
Select the “Insert” tab and click on the “Chart” button in the “Illustrations” group.
Select “Pie” chart in the Chart options.
In the Chart Editor, enter the data you want to represent in the 8 slices.
On the right side of the Chart Editor, you can customize the colors and labels of the slices.
Once you have finished customizing the chart, click “OK” to insert it into the slide.
You can use the white dot handles on the chart to adjust the size of the chart to your liking.
Use the “Format” tab to adjust the color, thickness, and other properties of the lines.
You can use the “Textbox” tool to add text or numbers to the slices if desired.
Once you have finished, you can adjust the position of the elements and the size of the image as needed.
It’s important to note that this is just a basic example, and you can customize the chart to suit your needs.

That was spot on. I created the chart in PowerPoint and saved the file in the svg format. Opened the file in VS code (a text editor would also do), copied the svg code and used it on my “imgWheel” Image property.

Next I asked chatGPT to help me spin the wheel for a while before it stops.

chatGPT: In order to make the spin wheel spin for a few minutes before it stops, you can adjust the duration of the timer that updates the rotation angle of the image.
Here is an example of how you can adjust the code to make the spin wheel spin for 3 minutes before it stops:

//Create a variable to store the rotation angle of the image
Set(rotationAngle, 0);

//Create a timer to update the rotation angle
SetTimer(SpinWheelTimer, 50, true);
SpinWheelTimer.OnTimerEnd = UpdateContext({ rotationAngle: rotationAngle + 10 });

//Create an image control for the roulette wheel
Image1.OnRender =
    Transform(
        Rotation = rotationAngle,
        Image1.Image
    )

//Create a button to start the spinning
Button1.OnSelect =
    StartTimer(SpinWheelTimer);
    SetTimer(StopSpinWheelTimer, 180000, false);
    StopSpinWheelTimer.OnTimerEnd = StopTimer(SpinWheelTimer);

You can adjust the duration of the StopSpinWheelTimer to achieve the desired spinning duration for your roulette wheel.
Also, you should keep in mind that the spinning duration will also depend on the timer interval, the rotation angle increment and the frame rate of the device that’s displaying the wheel.

So, translating this to PowerFx meant I created a new Timer control, named it StopSpinWheelTimer and set its OnTimerEnd property to end the SpinWheelTimer’s spin.

//in the OnTimerEnd property of the StopSpinWheelTimer
UpdateContext({StartTimer:false})

The StopSpinWheelTimer itself starts when the variable StartTimer is true, that is when the SpinWheelTimer is selected.

//in the Start property of the StopSpinWheelTimer
StartTimer

That was it, the SpinWheel app’s core functionality is complete with this. It is simply amazing how I could just offload a part of the thinking to AI and work in “companion mode” to create an app. Having a conversation with someone who confidently types answers (whether right or wrong) and typing everything in just a few seconds was certainly a fun experience. For sure it does not get everything correct or the way I intended but surely got me closer. Obviously, the human needed to make decisions to get the desired results, but the robot did a perfect job as a personal assistant to the human.

Are you working with chatGPT in your projects? Let me know in the comments.

See More Posts

chatbot-component-powerapps-using-power-virtual-agent

Anand

Link-in-bio profile cards in SharePoint lists

Anand

Create a quiz with Microsoft Lists

Anand

Find me here