Power Platform PowerApps

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!

Leave a Reply

%d bloggers like this: