Build PowerApps in a couple of minutes to impress friends and family!

Yesterday, my friends were coming over for dinner. I wanted to make it very special for them, so I planned to cook amazing Turkish dishes that they have never tried before. Let me be very honest with you, cooking 5 different dishes was not easy at all. Then, why not go one step further and create a dinner menu for them, so they taste the complete Turkish Restaurant vibe 🙂 (Such a great excuse to deep dive into PowerApps!)

If you are searching for quick ways to build a mobile/tablet app, PowerApps is the answer! I spent only couple of minutes to build this dinner menu app and everyone was so surprised, loved it, felt very special! I shared all the details about how to build a Power App in couple of minutes to impress friends and family. Try and let me know about the results.

Build PowerApps with no code

Go to PowerApps website and create Canvas app from blank.

Give a name to your app and choose Phone as a format.

Welcome Page

Let’s rename Screen1 as Welcome Page.

Start designing the page by choosing required properties under Insert tab. I will insert below items:

Text Label: Welcome message
Text Label: Description for the guests
Button: Navigation to the Menu Page
Text Label: My name as a footer

Click on the first Text Label and edit settings from the panel on the right side. You can rename Label1 as Welcome Label by clicking edit icon on the right side.

Text (Double-click to edit on the panel): Hoşgeldiniz (Welcome in Turkish)
Font: Dancing Script
Font size: 50
Font wight: Bold
Text alignment: Align Center
Size Width: 560
Size Height: 90
Color: Custom (Hex: D4AF37)

Then, the second Text Label and edit settings from the panel on the right side. You can rename Label2 as Description Label by clicking edit icon on the right side.

Text (Double-click to edit on the panel): Welcome my lovely friends! :)Get ready for a wonderful …..
Font: Open Sans
Font size: 26
Font weight: Normal
Text alignment: Align Center

Position X: 40
Position Y: 160
Size Width: 560
Size Height: 775
Color: Dark Grey
Border style: Solid
Border thickness: 2
Border Color: Custom (Hex: D4AF37)

Next, go to Button and edit settings from the panel on the right side. You can rename Button1 as Menu Button by clicking edit icon on the right side.

Text: View Menu
Position X: 180
Position Y: 895
Size Width: 280
Size Height: 70
Color: White
Color Fill: Custom (Hex: D4AF37)

Finally, the third Text Label and edit settings from the panel on the right side. You can rename Label3 as Footer Label by clicking edit icon on the right side.

Text: Chef: Ayça Baş
Font: Dancing Script
Font size: 30
Font weight: Bold
Text alignment: Align Center
Position X: 40
Position Y: 995
Size Width: 560
Size Height: 125
Color: Custom (Hex: D4AF37)

Menu Page

Let’s create a new screen for the menu. Choose Blank template and rename it as Menu Page.

Before we start designing the Menu Page, let’s create the navigation from Welcome Page Menu Button.

Click on View Menu button and go to Advanced tab. To enable navigation, insert below script under OnSelect action:
Navigate(‘Menu Page’)

Design the page by choosing required properties under Insert tab. I will insert below items.

Back Arrow: Navigation to the Welcome Page
Text Label: Title
Text Label: Header
Text Label: Description

First of all, click on Back arrow and edit properties from the panel on the right side. You can rename Arrow1 as Back Button by clicking edit icon on the right side.

Position X: 40
Position Y: 25
Size Width: 65
Size Height: 65

For the navigation, go to Advanced tab and insert below script under OnSelect action:
Navigate(‘Welcome Page’)

Secondly, click on the first Text Label and edit settings from the panel on the right side. You can rename Label4 as Menu Title Label by clicking edit icon on the right side.

Text: Menu
Font: Dancing Script
Font size: 50
Font wight: Bold
Text alignment: Align Center
Position X: 0
Position Y: 0
Size Width: 640
Size Height: 120
Color: White
Color Fill: Custom (Hex: D4AF37)

Then, the second Text Label and edit settings from the panel on the right side. You can rename Label5 as Header Label by clicking edit icon on the right side.

Text: Appetizers
Font: Dancing Script
Font Size: 40
Font Weight: Bold
Font Style: Underline
Text alignment: Align Center
Position X: 0
Position Y: 195
Size Width: 640
Size Height: 65
Color: Dark Grey

Finally, the third Text Label and edit settings from the panel on the right side. You can rename Label6 as Dish Description Label by clicking edit icon on the right side.

Text: Zeytinyağlı Biber Dolması
Font: Open Sans
Font Size: 25
Font weight: Normal
Text alignment: Align Center
Position X: 0
Position Y: 270
Size Width: 640
Size Height: 45
Color: Dark Grey

Go to Advanced tab and insert below script under OnSelect action to enable redirect link: Launch(“https://en.wikipedia.org/wiki/Dolma”)

Add couple of more header labels and dish description labels. Repeat the same steps on above until you build the complete menu.

For both pages, click on any empty space of the page and go to Properties tab on the right side. You can either change the background color or add a background image. I will choose one of images on my desktop for the final look of my app and choose Image Position as Fill.

Don’t forget to save and publish your app. You can also share your app with friends, family and colleagues via e-mail. Let me know if your guests like it! 🙂

Finally, our app is ready! PowerApps is always the quick solution for such scenarios. If you are interested in learning more about Power Platform, check out the related posts.

Cheers!