It has been a few days since PowerApps has been released as public preview and I’m sure there are plenty of people who has already started app making with wizards.

In this article, I will be creating a menu screen as the next step of using PowerApps.

 

What is PowerApps?

マイクロソフトは2015年12月1日に、「PowerApps」を発表しました。

PowerAppsは、ExcelやDynamics CRM等のマイクロソフト製品だけでなく、Google DriveやOneDriveなどをデータ元として、アプリを簡単に作成できるツールです。

プログラミング言語を必要とせずに、Excelに似た関数などを使ってアプリを開発します。

 

Sign up for PowerApps public preview

For those who haven’t signed up for a public preview, you can check this article on how to sign up.

 

Create a menu with PowerApps

So, now that you’re ready, we can start making the menu. If you haven’t made an app with one of the wizards, you can start from this article before carrying on.

 

Step 1: Create a new “Screen”

First, startup PowerApps studio from Windows.

If you haven’t installed it, you can get it from Windows store for free.

 

Go to “Home” tab and click on the “New Screen” button.

Once clicked, a new screen is inserted.

 

Let’s change the screen name. By default it is set to “Screen1” so change it to something easier to understand like “MenuScreen” for example.

 

Step 2: Add buttons

T0 add a button for your app, click on “Insert” tab and choose the “Button” button.

 

Once clicked, a new button will show up as you can see below.

 

Step 3: Add actions to your buttons

Right now, your button will do nothing so lets add an action.

Go to “Action” tab and choose “OnSelect” from the dropdown menu.

 

Once “OnSelect” has been chosen, click on the functions button “fx” and click on the downwards arrow next to the “Text”

 

A list will show up. Select “Action”.

 

Now you can select the formula. This time, we are going to navigate to another screen so you need to select “Navigate”.

 

You will see that functions bar now has “Navigate(” displayed.

PowerApps will automatically recognize each screen to navigate to and display it as a dropdown selection.

This time, we want to navigate to “BrowseScreen1” so select that, and enter a comma “,” after it.

 

Now a list starting with “ScreenTransition…” will show up. This is used to choose what effects to display when transitioning from one screen to another.

ScreenTransition.Cover：　Will show an animation as if a screen is covered by another screen.

ScreenTransition.Fade：　Will show a fading animation.

ScreenTransition.None：　Will have no animation.

 

If you select all the options correctly, you should have a formula like below. (Example below is using a fading animation)

 

Step 4: Change the text of a button

Currently, button is showing “Buttom” as text so lets display something more familiar to the users.

Change the “OnSelect” to “Text”. The formula will have “Button” set as text right now. Enter something else to change it.

 

I will be entering “Events list” as I am using my Event Management app from previous article.

Although its a little simple in design, this app will still function correctly.

 

Step 5: Try it out

By clicking the “Play” button on the top right corner, PowerApps Studio will show you a preview of the app.

 

This is the preview screen. A little too simple I must say…

 

By adding icons and more buttons to your app, it looks more like an app as you can see below: